[material-ui][Stepper] Generate class for nonLinear prop

docs/pages/material-ui/api/stepper.json

@@ -37,6 +37,12 @@
       "description": "Styles applied to the root element if `orientation=\"horizontal\"`.",
       "isGlobal": false
     },
+    {
+      "key": "nonLinear",
+      "className": "MuiStepper-nonLinear",
+      "description": "Styles applied to the root element if `nonLinear={true}`.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiStepper-root",

docs/translations/api-docs/stepper/stepper.json

@@ -32,6 +32,11 @@
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"horizontal\"</code>"
     },
+    "nonLinear": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>nonLinear={true}</code>"
+    },
     "root": { "description": "Styles applied to the root element." },
     "vertical": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

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

@@ -12,9 +12,9 @@ import StepperContext from './StepperContext';
 const useThemeProps = createUseThemeProps('MuiStepper');
 
 const useUtilityClasses = (ownerState) => {
-  const { orientation, alternativeLabel, classes } = ownerState;
+  const { orientation, nonLinear, alternativeLabel, classes } = ownerState;
   const slots = {
-    root: ['root', orientation, alternativeLabel && 'alternativeLabel'],
+    root: ['root', orientation, nonLinear && 'nonLinear', alternativeLabel && 'alternativeLabel'],
   };
 
   return composeClasses(slots, getStepperUtilityClass, classes);
@@ -74,6 +74,7 @@ const Stepper = React.forwardRef(function Stepper(inProps, ref) {
 
   const ownerState = {
     ...props,
+    nonLinear,
     alternativeLabel,
     orientation,
     component,

packages/mui-material/src/Stepper/Stepper.test.tsx

@@ -5,7 +5,7 @@ import Step, { StepProps, stepClasses } from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
 import StepContent, { stepContentClasses } from '@mui/material/StepContent';
-import Stepper, { stepperClasses as classes } from '@mui/material/Stepper';
+import Stepper, { stepperClasses as classes, stepperClasses } from '@mui/material/Stepper';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Stepper />', () => {
@@ -258,4 +258,21 @@ describe('<Stepper />', () => {
     expect(stepContent[0]).not.to.have.class(stepContentClasses.last);
     expect(stepContent[1]).to.have.class(stepContentClasses.last);
   });
+
+  it('is applies non-linear styling', () => {
+    const { container, setProps } = render(
+      <Stepper nonLinear activeStep={0}>
+        <Step />
+        <Step />
+        <Step />
+      </Stepper>,
+    );
+
+    const stepper = container.querySelector(`.${stepperClasses.root}`);
+    expect(stepper).to.have.class(stepperClasses.nonLinear)
+
+    setProps({ alternativeLabel: true });
+
+    expect(stepper).to.have.class(stepperClasses.nonLinear)
+  });
 });

packages/mui-material/src/Stepper/stepperClasses.ts

@@ -8,6 +8,8 @@ export interface StepperClasses {
   horizontal: string;
   /** Styles applied to the root element if `orientation="vertical"`. */
   vertical: string;
+  /** Styles applied to the root element if `nonLinear={true}`. */
+  nonLinear: string;
   /** Styles applied to the root element if `alternativeLabel={true}`. */
   alternativeLabel: string;
 }
@@ -22,6 +24,7 @@ const stepperClasses: StepperClasses = generateUtilityClasses('MuiStepper', [
   'root',
   'horizontal',
   'vertical',
+  'nonLinear',
   'alternativeLabel',
 ]);