Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 11 commits into from
Jun 18, 2024
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
24607ab
feat: nonLinear appears in Stepper utility classes
alexismo Jun 11, 2024
025e2a4
generate docs for new class
alexismo Jun 13, 2024
8b31ed1
Merge remote-tracking branch 'upstream/next' into stepper-nonlinear-c…
alexismo Jun 13, 2024
7deec59
add tests
alexismo Jun 13, 2024
f9e6969
use already imported classes, per review
alexismo Jun 13, 2024
f804561
remove unnecessary test
alexismo Jun 13, 2024
b65e39c
add nonLinear to Stepper styleOverrides
alexismo Jun 14, 2024
54f4876
remove un-used const
alexismo Jun 15, 2024
eb86f77
Merge branch 'next' into stepper-nonlinear-css-class
ZeeshanTamboli Jun 18, 2024
741e1cb
change wording of test description
ZeeshanTamboli Jun 18, 2024
19eb8c7
prettier
ZeeshanTamboli Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/pages/material-ui/api/stepper.json
View file
Open in desktop
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
View file
Open in desktop
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
5 changes: 3 additions & 2 deletions packages/mui-material/src/Stepper/Stepper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -74,6 +74,7 @@ const Stepper = React.forwardRef(function Stepper(inProps, ref) {

const ownerState = {
...props,
nonLinear,
alternativeLabel,
orientation,
component,
Expand Down
17 changes: 17 additions & 0 deletions packages/mui-material/src/Stepper/Stepper.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(`.${classes.root}`);
expect(stepper).to.have.class(classes.nonLinear)

setProps({ alternativeLabel: true });

expect(stepper).to.have.class(classes.nonLinear)
Copy link
Contributor

@sai6855 sai6855 Jun 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i believe these are not required, just testing presence of nonLinear class is required, which is what line 272 is doing.

});
});
3 changes: 3 additions & 0 deletions packages/mui-material/src/Stepper/stepperClasses.ts
View file
Open in desktop
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