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": "orientation=\"horizontal\"
"
},
+ "nonLinear": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "nonLinear={true}
"
+ },
"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('', () => {
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(
+
+
+
+
+ ,
+ );
+
+ 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',
]);