[material-ui][StepLabel] Deprecate StepIconComponent, StepIconProps

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

@@ -1013,6 +1013,28 @@ The StepLabel's `componentsProps` was deprecated in favor of `slotProps`:
  />
 ```
 
+### StepIconComponent
+
+The StepLabel's `StepIconComponent` was deprecated in favor of `slots.stepIcon`:
+
+```diff
+ <StepLabel
+-  StepIconComponent={StepIconComponent}
++  slots={{ stepIcon: StepIconComponent }}
+ />
+```
+
+### StepIconProps
+
+The StepLabel's `StepIconProps` was deprecated in favor of `slotProps.stepIcon`:
+
+```diff
+ <StepLabel
+-  StepIconProps={StepIconProps}
++  slotProps={{ stepIcon: StepIconProps }}
+ />
+```
+
 ## StepConnector
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-connector-classes) below to migrate the code as described in the following sections:

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

@@ -12,15 +12,26 @@
     "icon": { "type": { "name": "node" } },
     "optional": { "type": { "name": "node" } },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ label?: func<br>&#124;&nbsp;object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ label?: func<br>&#124;&nbsp;object, stepIcon?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ label?: elementType }" },
+      "type": { "name": "shape", "description": "{ label?: elementType, stepIcon?: elementType }" },
       "default": "{}"
     },
-    "StepIconComponent": { "type": { "name": "elementType" } },
-    "StepIconProps": { "type": { "name": "object" } },
+    "StepIconComponent": {
+      "type": { "name": "elementType" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.stepIcon</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
+    "StepIconProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.stepIcon</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -40,6 +51,11 @@
       "description": "The component that renders the label.",
       "default": "span",
       "class": "MuiStepLabel-label"
+    },
+    {
+      "name": "stepIcon",
+      "description": "The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).",
+      "class": null
     }
   ],
   "classes": [

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

@@ -67,5 +67,8 @@
       "conditions": "<code>orientation=\"vertical\"</code>"
     }
   },
-  "slotDescriptions": { "label": "The component that renders the label." }
+  "slotDescriptions": {
+    "label": "The component that renders the label.",
+    "stepIcon": "The component to render in place of the <a href=\"/material-ui/api/step-icon/\"><code>StepIcon</code></a>."
+  }
 }

packages/mui-codemod/README.md

@@ -991,14 +991,22 @@ npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>
  <StepLabel
 -  componentsProps={{ label: labelProps }}
 +  slotProps={{ label: labelProps }}
+-  StepIconComponent={StepIconComponent}
++  slots={{ stepIcon: StepIconComponent }}
+-  StepIconProps={StepIconProps}
++  slotProps={{ stepIcon: StepIconProps }}
  />
 ```
 
 ```diff
  MuiStepLabel: {
    defaultProps: {
--  componentsProps={{ label: labelProps }}
-+  slotProps={{ label: labelProps }}
+-  componentsProps:{ label: labelProps }
++  slotProps:{ label: labelProps }
+-  StepIconComponent:StepIconComponent
++  slots:{ stepIcon: StepIconComponent }
+-  StepIconProps:StepIconProps
++  slotProps:{ stepIcon: StepIconProps }
   },
  },
 ```

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

@@ -1,4 +1,6 @@
 import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -11,5 +13,19 @@ export default function transformer(file, api, options) {
 
   replaceComponentsWithSlots(j, { root, componentName: 'StepLabel' });
 
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'StepLabel',
+    propName: 'StepIconComponent',
+    slotName: 'stepIcon',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'StepLabel',
+    propName: 'StepIconProps',
+    slotName: 'stepIcon',
+  });
+
   return root.toSource(printOptions);
 }

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

@@ -6,3 +6,15 @@ import StepLabel from '@mui/material/StepLabel';
   slotProps={{ label: slotLabelProps }}
   componentsProps={{ label: componentsLabelProps }}
 />;
+<StepLabel componentsProps={{ label: componentsLabelProps }} StepIconProps={StepIconProps} />;
+<StepLabel
+  slots={{ label: SlotsLabel }}
+  slotProps={{ label: slotLabelProps }}
+  componentsProps={{ label: componentsLabelProps }}
+  StepIconComponent={StepIconComponent}
+  StepIconProps={StepIconProps}
+/>;
+<StepLabel
+  StepIconComponent={StepIconComponent}
+  StepIconProps={StepIconProps}
+/>;

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

@@ -7,3 +7,29 @@ import StepLabel from '@mui/material/StepLabel';
     ...componentsLabelProps,
     ...slotLabelProps
   } }} />;
+<StepLabel
+  slotProps={{
+    label: componentsLabelProps,
+    stepIcon: StepIconProps
+  }} />;
+<StepLabel
+  slots={{
+    label: SlotsLabel,
+    stepIcon: StepIconComponent
+  }}
+  slotProps={{
+    label: {
+      ...componentsLabelProps,
+      ...slotLabelProps
+    },
+
+    stepIcon: StepIconProps
+  }} />;
+<StepLabel
+  slots={{
+    stepIcon: StepIconComponent
+  }}
+  slotProps={{
+    stepIcon: StepIconProps
+  }}
+/>;

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

@@ -14,3 +14,23 @@ fn({
     },
   },
 });
+
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      StepIconComponent: StepIconComponent,
+      StepIconProps: StepIconProps,
+    },
+  },
+});
+
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      componentsProps: { label: componentsLabelProps },
+      slotProps: { label: slotLabelProps },
+      StepIconComponent: StepIconComponent,
+      StepIconProps: StepIconProps,
+    },
+  },
+});

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

@@ -20,3 +20,36 @@ fn({
     },
   },
 });
+
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      slots: {
+        stepIcon: StepIconComponent
+      },
+
+      slotProps: {
+        stepIcon: StepIconProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiStepLabel: {
+    defaultProps: {
+      slotProps: {
+        label: {
+          ...componentsLabelProps,
+          ...slotLabelProps
+        },
+
+        stepIcon: StepIconProps
+      },
+
+      slots: {
+        stepIcon: StepIconComponent
+      }
+    },
+  },
+});

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

@@ -12,12 +12,17 @@ export interface StepLabelSlots {
    * @default span
    */
   label?: React.ElementType;
+  /**
+   * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+   */
+  stepIcon?: React.ElementType<StepIconProps>;
 }
 
 export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
   StepLabelSlots,
   {
     label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>;
+    stepIcon: SlotProps<React.ElementType<StepIconProps>, {}, StepLabelOwnerState>;
   }
 >;
 
@@ -61,10 +66,12 @@ export interface StepLabelProps
   optional?: React.ReactNode;
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconComponent?: React.ElementType<StepIconProps>;
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconProps?: Partial<StepIconProps>;
   /**

packages/mui-material/src/StepLabel/StepLabel.js

@@ -165,6 +165,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) {
   const externalForwardedProps = {
     slots,
     slotProps: {
+      stepIcon: StepIconProps,
       ...componentsProps,
       ...slotProps,
     },
@@ -176,21 +177,27 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) {
     ownerState,
   });
 
+  const [StepIconSlot, stepIconProps] = useSlot('stepIcon', {
+    elementType: StepIconComponent,
+    externalForwardedProps,
+    ownerState,
+  });
+
   return (
     <StepLabelRoot
       className={clsx(classes.root, className)}
       ref={ref}
       ownerState={ownerState}
       {...other}
     >
-      {icon || StepIconComponent ? (
+      {icon || StepIconSlot ? (
         <StepLabelIconContainer className={classes.iconContainer} ownerState={ownerState}>
-          <StepIconComponent
+          <StepIconSlot
             completed={completed}
             active={active}
             error={error}
             icon={icon}
-            {...StepIconProps}
+            {...stepIconProps}
           />
         </StepLabelIconContainer>
       ) : null}
@@ -250,20 +257,24 @@ StepLabel.propTypes /* remove-proptypes */ = {
    */
   slotProps: PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    stepIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
     label: PropTypes.elementType,
+    stepIcon: PropTypes.elementType,
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconComponent: PropTypes.elementType,
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconProps: PropTypes.object,
   /**