[material-ui][StepLabel] Deprecate componentProps prop

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -771,3 +771,22 @@ The Slider's `componentsProps` was deprecated in favor of `slotProps`:
 +  slotProps={{ track: { testid: 'test-id' } }}
  />
 ```
+
+## Step Label
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/step-label-props <path>
+```
+
+### componentsProps
+
+The Slider's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <StepLabel
+-  componentsProps={{ label: labelProps }}
++  slotProps={{ label: labelProps }}
+ />
+```

docs/pages/material-ui/api/step-label.json

@@ -4,13 +4,19 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ label?: object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "error": { "type": { "name": "bool" }, "default": "false" },
     "icon": { "type": { "name": "node" } },
     "optional": { "type": { "name": "node" } },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ label?: object }" },
+      "type": { "name": "shape", "description": "{ label?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ label?: elementType }" },
       "default": "{}"
     },
     "StepIconComponent": { "type": { "name": "elementType" } },
@@ -28,6 +34,14 @@
     "import StepLabel from '@mui/material/StepLabel';",
     "import { StepLabel } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "label",
+      "description": "The component that renders the label.",
+      "default": "span",
+      "class": "MuiStepLabel-label"
+    }
+  ],
   "classes": [
     {
       "key": "active",
@@ -71,12 +85,6 @@
       "description": "Styles applied to the `icon` container element.",
       "isGlobal": false
     },
-    {
-      "key": "label",
-      "className": "MuiStepLabel-label",
-      "description": "Styles applied to the label element that wraps `children`.",
-      "isGlobal": false
-    },
     {
       "key": "labelContainer",
       "className": "MuiStepLabel-labelContainer",

docs/translations/api-docs/step-label/step-label.json

@@ -10,6 +10,7 @@
     "icon": { "description": "Override the default label of the step icon." },
     "optional": { "description": "The optional node to display." },
     "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "StepIconComponent": {
       "description": "The component to render in place of the <a href=\"/material-ui/api/step-icon/\"><code>StepIcon</code></a>."
     },
@@ -55,10 +56,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the <code>icon</code> container element"
     },
-    "label": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the label element that wraps <code>children</code>"
-    },
     "labelContainer": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the container element which wraps label and <code>optional</code>"
@@ -69,5 +66,6 @@
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"vertical\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "label": "The component that renders the label." }
 }

packages/mui-codemod/README.md

@@ -783,6 +783,28 @@ npx @mui/codemod@next deprecations/pagination-item-classes <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
+#### `step-label-props`
+
+```diff
+ <StepLabel
+-  componentsProps={{ label: labelProps }}
++  slotProps={{ label: labelProps }}
+ />
+```
+
+```diff
+ MuiStepLabel: {
+   defaultProps: {
+-  componentsProps={{ label: labelProps }}
++  slotProps={{ label: labelProps }}
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@latest deprecations/step-label-props <path>
+```
+
 ### v5.0.0
 
 #### `base-use-named-exports`

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -6,6 +6,7 @@ import transformButtonClasses from '../button-classes';
 import transformChipClasses from '../chip-classes';
 import transformPaginationItemClasses from '../pagination-item-classes';
 import transformAlertClasses from '../alert-classes';
+import transformStepLabelProps from '../step-label-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -20,6 +21,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformChipClasses(file, api, options);
   file.source = transformPaginationItemClasses(file, api, options);
   file.source = transformAlertClasses(file, api, options);
+  file.source = transformStepLabelProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/step-label-props/index.js

@@ -0,0 +1 @@
+export { default } from './step-label-props';

packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js

@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'StepLabel' });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './step-label-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('step-label-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] step-label-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js

@@ -0,0 +1,8 @@
+import StepLabel from '@mui/material/StepLabel';
+
+<StepLabel componentsProps={{ label: componentsLabelProps }} />;
+<StepLabel
+  slots={{ label: SlotsLabel }}
+  slotProps={{ label: slotLabelProps }}
+  componentsProps={{ label: componentsLabelProps }}
+/>;

packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js

@@ -0,0 +1,9 @@
+import StepLabel from '@mui/material/StepLabel';
+
+<StepLabel slotProps={{ label: componentsLabelProps }} />;
+<StepLabel
+  slots={{ label: SlotsLabel }}
+  slotProps={{ label: {
+    ...componentsLabelProps,
+    ...slotLabelProps
+  } }} />;

packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js

@@ -0,0 +1,16 @@
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      componentsProps: { label: componentsLabelProps },
+    },
+  },
+});
+
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      componentsProps: { label: componentsLabelProps },
+      slotProps: { label: slotLabelProps },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js

@@ -0,0 +1,22 @@
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      slotProps: {
+        label: componentsLabelProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      slotProps: {
+        label: {
+          ...componentsLabelProps,
+          ...slotLabelProps
+        }
+      }
+    },
+  },
+});

packages/mui-material/src/StepLabel/StepLabel.d.ts

@@ -4,8 +4,28 @@ import { InternalStandardProps as StandardProps } from '..';
 import { StepIconProps } from '../StepIcon';
 import { Theme } from '../styles';
 import { StepLabelClasses } from './stepLabelClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface StepLabelSlots {
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label?: React.ElementType;
+}
+
+export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  StepLabelSlots,
+  {
+    label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>;
+  }
+>;
+
+export interface StepLabelOwnerState extends StepLabelProps {}
+
+export interface StepLabelProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
+    StepLabelSlotsAndSlotProps {
   /**
    * In most cases will simply be a string containing a title for the label.
    */
@@ -17,6 +37,7 @@ export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLD
   /**
    * The props used for each slot inside.
    * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps?: {
     /**
@@ -38,17 +59,6 @@ export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLD
    * The optional node to display.
    */
   optional?: React.ReactNode;
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps?: {
-    /**
-     * Props applied to the label element.
-     * @default {}
-     */
-    label?: React.HTMLProps<HTMLSpanElement>;
-  };
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
    */
@@ -75,6 +85,8 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * - [StepLabel API](https://mui.com/material-ui/api/step-label/)
  */
-declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & { muiName: string };
+declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & {
+  muiName: string;
+};
 
 export default StepLabel;