From 4e82e1ba887f942fb7f40500ac43c63f7339281b Mon Sep 17 00:00:00 2001
From: Alexis Morin <the.alexis.morin@gmail.com>
Date: Tue, 18 Jun 2024 06:51:13 -0400
Subject: [PATCH] [material-ui][Stepper] Generate class for nonLinear prop
 (#42620)

Signed-off-by: Alexis Morin <the.alexis.morin@gmail.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 docs/pages/material-ui/api/stepper.json             |  6 ++++++
 docs/translations/api-docs/stepper/stepper.json     |  5 +++++
 packages/mui-material/src/Stepper/Stepper.js        |  6 ++++--
 packages/mui-material/src/Stepper/Stepper.test.tsx  | 13 +++++++++++++
 packages/mui-material/src/Stepper/stepperClasses.ts |  3 +++
 5 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/docs/pages/material-ui/api/stepper.json b/docs/pages/material-ui/api/stepper.json
index a58a5e3ee51e2b..2f33724a4fb497 100644
--- a/docs/pages/material-ui/api/stepper.json
+++ b/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",
diff --git a/docs/translations/api-docs/stepper/stepper.json b/docs/translations/api-docs/stepper/stepper.json
index ecfac39fd81857..1cad97543c78f7 100644
--- a/docs/translations/api-docs/stepper/stepper.json
+++ b/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}}.",
diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js
index 104e17620ff3bc..34d5e8d0dbf35a 100644
--- a/packages/mui-material/src/Stepper/Stepper.js
+++ b/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);
@@ -29,6 +29,7 @@ const StepperRoot = styled('div', {
       styles.root,
       styles[ownerState.orientation],
       ownerState.alternativeLabel && styles.alternativeLabel,
+      ownerState.nonLinear && styles.nonLinear,
     ];
   },
 })({
@@ -74,6 +75,7 @@ const Stepper = React.forwardRef(function Stepper(inProps, ref) {
 
   const ownerState = {
     ...props,
+    nonLinear,
     alternativeLabel,
     orientation,
     component,
diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx
index 6556a711d9ab11..983485d94977ac 100644
--- a/packages/mui-material/src/Stepper/Stepper.test.tsx
+++ b/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);
+  });
 });
diff --git a/packages/mui-material/src/Stepper/stepperClasses.ts b/packages/mui-material/src/Stepper/stepperClasses.ts
index ed8156e4062831..8287468b989459 100644
--- a/packages/mui-material/src/Stepper/stepperClasses.ts
+++ b/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',
 ]);