From 24607ab82d1ffe9934e3fb830605f29b42026ea7 Mon Sep 17 00:00:00 2001 From: Alexis Morin Date: Tue, 11 Jun 2024 10:42:46 -0400 Subject: [PATCH 1/9] feat: nonLinear appears in Stepper utility classes --- packages/mui-material/src/Stepper/Stepper.js | 5 +++-- packages/mui-material/src/Stepper/stepperClasses.ts | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js index 104e17620ff3bc..7a2e90fe1d10bf 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); @@ -74,6 +74,7 @@ const Stepper = React.forwardRef(function Stepper(inProps, ref) { const ownerState = { ...props, + nonLinear, alternativeLabel, orientation, component, 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', ]); From 025e2a4a24f1196a8ae8f9a958fac5b49af4a654 Mon Sep 17 00:00:00 2001 From: Alexis Morin Date: Thu, 13 Jun 2024 08:29:06 -0400 Subject: [PATCH 2/9] generate docs for new class --- docs/pages/material-ui/api/stepper.json | 6 ++++++ docs/translations/api-docs/stepper/stepper.json | 5 +++++ 2 files changed, 11 insertions(+) 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}}.", From 7deec59fc2a1e460de06241698db1f4cb7768229 Mon Sep 17 00:00:00 2001 From: Alexis Morin Date: Thu, 13 Jun 2024 09:13:49 -0400 Subject: [PATCH 3/9] add tests --- .../mui-material/src/Stepper/Stepper.test.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx index 6556a711d9ab11..62a4f6cfb51046 100644 --- a/packages/mui-material/src/Stepper/Stepper.test.tsx +++ b/packages/mui-material/src/Stepper/Stepper.test.tsx @@ -5,7 +5,7 @@ import Step, { StepProps, stepClasses } from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector'; import StepContent, { stepContentClasses } from '@mui/material/StepContent'; -import Stepper, { stepperClasses as classes } from '@mui/material/Stepper'; +import Stepper, { stepperClasses as classes, stepperClasses } from '@mui/material/Stepper'; import describeConformance from '../../test/describeConformance'; describe('', () => { @@ -258,4 +258,21 @@ describe('', () => { 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( + + + + + , + ); + + const stepper = container.querySelector(`.${stepperClasses.root}`); + expect(stepper).to.have.class(stepperClasses.nonLinear) + + setProps({ alternativeLabel: true }); + + expect(stepper).to.have.class(stepperClasses.nonLinear) + }); }); From f9e6969d0fd1b42edf937cb77913a09be6d38792 Mon Sep 17 00:00:00 2001 From: Alexis Morin Date: Thu, 13 Jun 2024 09:40:39 -0400 Subject: [PATCH 4/9] use already imported classes, per review --- packages/mui-material/src/Stepper/Stepper.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx index 62a4f6cfb51046..0a64cfe0868bec 100644 --- a/packages/mui-material/src/Stepper/Stepper.test.tsx +++ b/packages/mui-material/src/Stepper/Stepper.test.tsx @@ -5,7 +5,7 @@ import Step, { StepProps, stepClasses } from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector'; import StepContent, { stepContentClasses } from '@mui/material/StepContent'; -import Stepper, { stepperClasses as classes, stepperClasses } from '@mui/material/Stepper'; +import Stepper, { stepperClasses as classes } from '@mui/material/Stepper'; import describeConformance from '../../test/describeConformance'; describe('', () => { @@ -268,11 +268,11 @@ describe('', () => { , ); - const stepper = container.querySelector(`.${stepperClasses.root}`); - expect(stepper).to.have.class(stepperClasses.nonLinear) + const stepper = container.querySelector(`.${classes.root}`); + expect(stepper).to.have.class(classes.nonLinear) setProps({ alternativeLabel: true }); - expect(stepper).to.have.class(stepperClasses.nonLinear) + expect(stepper).to.have.class(classes.nonLinear) }); }); From f804561bebf17acefd3dfaa7e2466359da856a90 Mon Sep 17 00:00:00 2001 From: Alexis Morin Date: Thu, 13 Jun 2024 12:35:35 -0400 Subject: [PATCH 5/9] remove unnecessary test per PR review Signed-off-by: Alexis Morin --- packages/mui-material/src/Stepper/Stepper.test.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx index 0a64cfe0868bec..112bbf59737e56 100644 --- a/packages/mui-material/src/Stepper/Stepper.test.tsx +++ b/packages/mui-material/src/Stepper/Stepper.test.tsx @@ -270,9 +270,5 @@ describe('', () => { const stepper = container.querySelector(`.${classes.root}`); expect(stepper).to.have.class(classes.nonLinear) - - setProps({ alternativeLabel: true }); - - expect(stepper).to.have.class(classes.nonLinear) }); }); From b65e39c7bc666ba6adbc8ead12a8d5c38a052bdb Mon Sep 17 00:00:00 2001 From: Alexis Morin Date: Fri, 14 Jun 2024 13:37:13 -0400 Subject: [PATCH 6/9] add nonLinear to Stepper styleOverrides Signed-off-by: Alexis Morin --- packages/mui-material/src/Stepper/Stepper.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js index 7a2e90fe1d10bf..f05958b8a5d33d 100644 --- a/packages/mui-material/src/Stepper/Stepper.js +++ b/packages/mui-material/src/Stepper/Stepper.js @@ -29,6 +29,7 @@ const StepperRoot = styled('div', { styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, + ownerState.nonLinear && styles.nonLinear ]; }, })({ From 54f4876ed98abfa3b85adf2f4a84a74ed5885cf0 Mon Sep 17 00:00:00 2001 From: Alexis Morin Date: Fri, 14 Jun 2024 22:52:44 -0400 Subject: [PATCH 7/9] remove un-used const --- packages/mui-material/src/Stepper/Stepper.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx index 112bbf59737e56..39452ca6896d2a 100644 --- a/packages/mui-material/src/Stepper/Stepper.test.tsx +++ b/packages/mui-material/src/Stepper/Stepper.test.tsx @@ -260,7 +260,7 @@ describe('', () => { }); it('is applies non-linear styling', () => { - const { container, setProps } = render( + const { container } = render( From 741e1cb793f0b1949fd6e625735b528525ccef18 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 18 Jun 2024 14:39:51 +0530 Subject: [PATCH 8/9] change wording of test description --- packages/mui-material/src/Stepper/Stepper.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx index 39452ca6896d2a..983485d94977ac 100644 --- a/packages/mui-material/src/Stepper/Stepper.test.tsx +++ b/packages/mui-material/src/Stepper/Stepper.test.tsx @@ -259,7 +259,7 @@ describe('', () => { expect(stepContent[1]).to.have.class(stepContentClasses.last); }); - it('is applies non-linear styling', () => { + it('should apply non-linear class', () => { const { container } = render( @@ -269,6 +269,6 @@ describe('', () => { ); const stepper = container.querySelector(`.${classes.root}`); - expect(stepper).to.have.class(classes.nonLinear) + expect(stepper).to.have.class(classes.nonLinear); }); }); From 19eb8c769930b90ee78920e825f26fb67e4a0654 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 18 Jun 2024 14:40:17 +0530 Subject: [PATCH 9/9] prettier --- packages/mui-material/src/Stepper/Stepper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js index f05958b8a5d33d..34d5e8d0dbf35a 100644 --- a/packages/mui-material/src/Stepper/Stepper.js +++ b/packages/mui-material/src/Stepper/Stepper.js @@ -29,7 +29,7 @@ const StepperRoot = styled('div', { styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, - ownerState.nonLinear && styles.nonLinear + ownerState.nonLinear && styles.nonLinear, ]; }, })({