Skip to content

Commit

Permalink
[material-ui][Stepper] Generate class for nonLinear prop (@alexismo) (
Browse files Browse the repository at this point in the history
#42677)

Signed-off-by: Alexis Morin <the.alexis.morin@gmail.com>
Co-authored-by: Alexis Morin <the.alexis.morin@gmail.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
  • Loading branch information
3 people authored Jun 18, 2024
1 parent 1357ee8 commit c0b1cf0
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 2 deletions.
6 changes: 6 additions & 0 deletions docs/pages/material-ui/api/stepper.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/stepper/stepper.json
Original file line number Diff line number Diff line change
Expand Up @@ -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}}.",
Expand Down
6 changes: 4 additions & 2 deletions packages/mui-material/src/Stepper/Stepper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -28,6 +28,7 @@ const StepperRoot = styled('div', {
styles.root,
styles[ownerState.orientation],
ownerState.alternativeLabel && styles.alternativeLabel,
ownerState.nonLinear && styles.nonLinear,
];
},
})(({ ownerState }) => ({
Expand Down Expand Up @@ -62,6 +63,7 @@ const Stepper = React.forwardRef(function Stepper(inProps, ref) {

const ownerState = {
...props,
nonLinear,
alternativeLabel,
orientation,
component,
Expand Down
13 changes: 13 additions & 0 deletions packages/mui-material/src/Stepper/Stepper.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
3 changes: 3 additions & 0 deletions packages/mui-material/src/Stepper/stepperClasses.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -22,6 +24,7 @@ const stepperClasses: StepperClasses = generateUtilityClasses('MuiStepper', [
'root',
'horizontal',
'vertical',
'nonLinear',
'alternativeLabel',
]);

Expand Down

0 comments on commit c0b1cf0

Please sign in to comment.