[material-ui][Stepper] Generate class for nonLinear prop (#42620)

Signed-off-by: Alexis Morin <[email protected]>
Co-authored-by: ZeeshanTamboli <[email protected]>

Author: 2 people

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

@@ -11,9 +11,9 @@ import StepConnector from '../StepConnector';
 import StepperContext from './StepperContext';
 
 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);
@@ -28,6 +28,7 @@ const StepperRoot = styled('div', {
       styles.root,
       styles[ownerState.orientation],
       ownerState.alternativeLabel && styles.alternativeLabel,
+      ownerState.nonLinear && styles.nonLinear,
     ];
   },
 })(({ ownerState }) => ({
@@ -62,6 +63,7 @@ const Stepper = React.forwardRef(function Stepper(inProps, ref) {
 
   const ownerState = {
     ...props,
+    nonLinear,
     alternativeLabel,
     orientation,
     component,

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

@@ -258,4 +258,17 @@ describe('<Stepper />', () => {
     expect(stepContent[0]).not.to.have.class(stepContentClasses.last);
     expect(stepContent[1]).to.have.class(stepContentClasses.last);
   });
+
+  it('should apply non-linear class', () => {
+    const { container } = render(
+      <Stepper nonLinear activeStep={0}>
+        <Step />
+        <Step />
+        <Step />
+      </Stepper>,
+    );
+
+    const stepper = container.querySelector(`.${classes.root}`);
+    expect(stepper).to.have.class(classes.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',
 ]);