[StepConnector][StepContent][StepLabel] Remove deprecated props and classes

docs/data/material/components/steppers/CustomizedSteppers.js

@@ -195,14 +195,14 @@ export default function CustomizedSteppers() {
       <Stepper alternativeLabel activeStep={1} connector={<QontoConnector />}>
         {steps.map((label) => (
           <Step key={label}>
-            <StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
+            <StepLabel slots={{ stepIcon: QontoStepIcon }}>{label}</StepLabel>
           </Step>
         ))}
       </Stepper>
       <Stepper alternativeLabel activeStep={1} connector={<ColorlibConnector />}>
         {steps.map((label) => (
           <Step key={label}>
-            <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
+            <StepLabel slots={{ stepIcon: ColorlibStepIcon }}>{label}</StepLabel>
           </Step>
         ))}
       </Stepper>

docs/data/material/components/steppers/CustomizedSteppers.tsx

@@ -167,14 +167,14 @@ export default function CustomizedSteppers() {
       <Stepper alternativeLabel activeStep={1} connector={<QontoConnector />}>
         {steps.map((label) => (
           <Step key={label}>
-            <StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
+            <StepLabel slots={{ stepIcon: QontoStepIcon }}>{label}</StepLabel>
           </Step>
         ))}
       </Stepper>
       <Stepper alternativeLabel activeStep={1} connector={<ColorlibConnector />}>
         {steps.map((label) => (
           <Step key={label}>
-            <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
+            <StepLabel slots={{ stepIcon: ColorlibStepIcon }}>{label}</StepLabel>
           </Step>
         ))}
       </Stepper>

docs/data/material/components/steppers/CustomizedSteppers.tsx.preview

@@ -1,14 +1,14 @@
 <Stepper alternativeLabel activeStep={1} connector={<QontoConnector />}>
   {steps.map((label) => (
     <Step key={label}>
-      <StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
+      <StepLabel slots={{ stepIcon: QontoStepIcon }}>{label}</StepLabel>
     </Step>
   ))}
 </Stepper>
 <Stepper alternativeLabel activeStep={1} connector={<ColorlibConnector />}>
   {steps.map((label) => (
     <Step key={label}>
-      <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
+      <StepLabel slots={{ stepIcon: ColorlibStepIcon }}>{label}</StepLabel>
     </Step>
   ))}
 </Stepper>

docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md

@@ -939,6 +939,74 @@ The following deprecated `Snackbar` props have been removed:
  />
 ```
 
+#### StepConnector deprecated classes removed
+
+Use the [step-connector-classes 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 section:
+
+```bash
+npx @mui/codemod@latest deprecations/step-connector-classes <path>
+```
+
+The following deprecated classes have been removed:
+
+- `lineHorizontal` — combine the `.MuiStepConnector-horizontal` and `.MuiStepConnector-line` classes instead
+- `lineVertical` — combine the `.MuiStepConnector-vertical` and `.MuiStepConnector-line` classes instead
+
+```diff
+ <StepConnector
+   classes={{
+-    lineHorizontal: 'my-class',
++    line: 'my-class',
+   }}
+ />
+```
+
+#### StepContent deprecated props removed
+
+Use the [step-content-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-content-props) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/step-content-props <path>
+```
+
+The following deprecated props have been removed:
+
+- `TransitionComponent` — use `slots.transition` instead
+- `TransitionProps` — use `slotProps.transition` instead
+
+```diff
+ <StepContent
+-  TransitionComponent={CustomTransition}
+-  TransitionProps={{ unmountOnExit: true }}
++  slots={{ transition: CustomTransition }}
++  slotProps={{ transition: { unmountOnExit: true } }}
+ />
+```
+
+#### StepLabel deprecated props removed
+
+Use the [step-label-props 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 section:
+
+```bash
+npx @mui/codemod@latest deprecations/step-label-props <path>
+```
+
+The following deprecated props have been removed:
+
+- `componentsProps` — use `slotProps` instead
+- `StepIconComponent` — use `slots.stepIcon` instead
+- `StepIconProps` — use `slotProps.stepIcon` instead
+
+```diff
+ <StepLabel
+-  StepIconComponent={CustomIcon}
+-  StepIconProps={{ error: true }}
+-  componentsProps={{ label: { className: 'my-label' } }}
++  slots={{ stepIcon: CustomIcon }}
++  slotProps={{ stepIcon: { error: true }, label: { className: 'my-label' } }}
+ />
+```
+
 #### SpeedDial deprecated props removed
 
 The deprecated `SpeedDial` props have been removed.

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

@@ -51,20 +51,6 @@
       "description": "Styles applied to the line element.",
       "isGlobal": false
     },
-    {
-      "key": "lineHorizontal",
-      "className": "MuiStepConnector-lineHorizontal",
-      "description": "Styles applied to the line element if `orientation=\"horizontal\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
-    {
-      "key": "lineVertical",
-      "className": "MuiStepConnector-lineVertical",
-      "description": "Styles applied to the line element if `orientation=\"vertical\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
     {
       "key": "root",
       "className": "MuiStepConnector-root",

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

@@ -17,23 +17,12 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": {
-      "type": { "name": "elementType" },
-      "default": "Collapse",
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in a future major release. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
-    },
     "transitionDuration": {
       "type": {
         "name": "union",
         "description": "'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "default": "'auto'"
-    },
-    "TransitionProps": {
-      "type": { "name": "object" },
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     }
   },
   "name": "StepContent",

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

@@ -2,12 +2,6 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "componentsProps": {
-      "type": { "name": "shape", "description": "{ label?: object }" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "error": { "type": { "name": "bool" }, "default": "false" },
     "icon": { "type": { "name": "node" } },
     "optional": { "type": { "name": "node" } },
@@ -25,16 +19,6 @@
       },
       "default": "{}"
     },
-    "StepIconComponent": {
-      "type": { "name": "elementType" },
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slots.stepIcon</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "StepIconProps": {
-      "type": { "name": "object" },
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.stepIcon</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "sx": {
       "type": {
         "name": "union",

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

@@ -33,18 +33,6 @@
       "conditions": "<code>orientation=\"horizontal\"</code>"
     },
     "line": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the line element" },
-    "lineHorizontal": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the line element",
-      "conditions": "<code>orientation=\"horizontal\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-horizontal\">.MuiStepConnector-horizontal</a> and <a href=\"/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-line\">.MuiStepConnector-line</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "lineVertical": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the line element",
-      "conditions": "<code>orientation=\"vertical\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-vertical\">.MuiStepConnector-vertical</a> and <a href=\"/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-line\">.MuiStepConnector-line</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "root": { "description": "Styles applied to the root element." },
     "vertical": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

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

@@ -8,14 +8,8 @@
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
-    "TransitionComponent": {
-      "description": "The component used for the transition. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
-    },
     "transitionDuration": {
       "description": "Adjust the duration of the content expand transition. Passed as a prop to the transition component.<br>Set to &#39;auto&#39; to automatically calculate transition time based on height."
-    },
-    "TransitionProps": {
-      "description": "Props applied to the transition element. By default, the element is based on this <a href=\"https://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
     }
   },
   "classDescriptions": {

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

@@ -5,18 +5,11 @@
       "description": "In most cases will simply be a string containing a title for the label."
     },
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "componentsProps": { "description": "The props used for each slot inside." },
     "error": { "description": "If <code>true</code>, the step is marked as failed." },
     "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=\"https://mui.com/material-ui/api/step-icon/\"><code>StepIcon</code></a>."
-    },
-    "StepIconProps": {
-      "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/step-icon/\"><code>StepIcon</code></a> element."
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import capitalize from '../utils/capitalize';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
@@ -23,7 +22,7 @@ const useUtilityClasses = (ownerState) => {
       completed && 'completed',
       disabled && 'disabled',
     ],
-    line: ['line', `line${capitalize(orientation)}`],
+    line: ['line'],
   };
 
   return composeClasses(slots, getStepConnectorUtilityClass, classes);
@@ -66,11 +65,7 @@ const StepConnectorRoot = styled('div', {
 const StepConnectorLine = styled('span', {
   name: 'MuiStepConnector',
   slot: 'Line',
-  overridesResolver: (props, styles) => {
-    const { ownerState } = props;
-
-    return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]];
-  },
+  overridesResolver: (props, styles) => [styles.line],
 })(
   memoTheme(({ theme }) => {
     const borderColor =

packages/mui-material/src/StepConnector/StepConnector.test.js

@@ -1,6 +1,5 @@
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
-import Stepper from '@mui/material/Stepper';
 import Step from '@mui/material/Step';
 import StepConnector, { stepConnectorClasses as classes } from '@mui/material/StepConnector';
 import describeConformance from '../../test/describeConformance';
@@ -27,32 +26,6 @@ describe('<StepConnector />', () => {
       expect(span).not.to.equal(null);
     });
 
-    it('has the class when horizontal', () => {
-      const { container } = render(
-        <Stepper orientation="horizontal">
-          <Step>
-            <StepConnector />
-          </Step>
-        </Stepper>,
-      );
-
-      const stepConnectorLine = container.querySelector(`.${classes.line}`);
-      expect(stepConnectorLine).to.have.class(classes.lineHorizontal);
-    });
-
-    it('has the class when vertical', () => {
-      const { container } = render(
-        <Stepper orientation="vertical">
-          <Step>
-            <StepConnector />
-          </Step>
-        </Stepper>,
-      );
-
-      const stepConnectorLine = container.querySelector(`.${classes.line}`);
-      expect(stepConnectorLine).to.have.class(classes.lineVertical);
-    });
-
     it('has the class when active', () => {
       const { container } = render(
         <Step active>

packages/mui-material/src/StepConnector/stepConnectorClasses.ts

@@ -18,14 +18,6 @@ export interface StepConnectorClasses {
   disabled: string;
   /** Styles applied to the line element. */
   line: string;
-  /** Styles applied to the line element if `orientation="horizontal"`.
-   * @deprecated Combine the [.MuiStepConnector-horizontal](/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-horizontal) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-line) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  lineHorizontal: string;
-  /** Styles applied to the line element if `orientation="vertical"`.
-   * @deprecated Combine the [.MuiStepConnector-vertical](/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-vertical) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-MuiStepConnector-line) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  lineVertical: string;
 }
 
 export type StepConnectorClassKey = keyof StepConnectorClasses;
@@ -43,8 +35,6 @@ const stepConnectorClasses: StepConnectorClasses = generateUtilityClasses('MuiSt
   'completed',
   'disabled',
   'line',
-  'lineHorizontal',
-  'lineVertical',
 ]);
 
 export default stepConnectorClasses;

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

@@ -47,15 +47,6 @@ export interface StepContentProps
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme> | undefined;
-  /**
-   * The component used for the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
-   * @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   */
-  TransitionComponent?:
-    | React.JSXElementConstructor<TransitionProps & { children: React.ReactElement<unknown, any> }>
-    | undefined;
   /**
    * Adjust the duration of the content expand transition.
    * Passed as a prop to the transition component.
@@ -64,12 +55,6 @@ export interface StepContentProps
    * @default 'auto'
    */
   transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined;
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  TransitionProps?: TransitionProps | undefined;
 }
 
 export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>;