From 28b7bdebd75f2aa50f5e99a58e48ddfc8707cd98 Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Sun, 17 Mar 2024 22:38:51 +0100 Subject: [PATCH 1/9] Adding zero css support to Mobile Stepper --- .../app/material-ui/react-stepper/page.tsx | 79 ++++++++++++++ .../src/MobileStepper/MobileStepper.js | 101 +++++++++++------- 2 files changed, 142 insertions(+), 38 deletions(-) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx new file mode 100644 index 00000000000000..81bc13081eeb64 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx @@ -0,0 +1,79 @@ +'use client'; +import * as React from 'react'; +import CustomizedSteppers from '../../../../../../docs/data/material/components/steppers/CustomizedSteppers'; +import DotsMobileStepper from '../../../../../../docs/data/material/components/steppers/DotsMobileStepper'; +import HorizontalLinearAlternativeLabelStepper from '../../../../../../docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper'; +import HorizontalLinearStepper from '../../../../../../docs/data/material/components/steppers/HorizontalLinearStepper'; +import HorizontalNonLinearStepper from '../../../../../../docs/data/material/components/steppers/HorizontalNonLinearStepper'; +import HorizontalStepperWithError from '../../../../../../docs/data/material/components/steppers/HorizontalStepperWithError'; +import ProgressMobileStepper from '../../../../../../docs/data/material/components/steppers/ProgressMobileStepper'; +import SwipeableTextMobileStepper from '../../../../../../docs/data/material/components/steppers/SwipeableTextMobileStepper'; +import TextMobileStepper from '../../../../../../docs/data/material/components/steppers/TextMobileStepper'; +import VerticalLinearStepper from '../../../../../../docs/data/material/components/steppers/VerticalLinearStepper'; + +export default function Steppers() { + return ( + +
+

Customized Steppers

+
+ +
+
+
+

Dots Mobile Stepper

+
+ +
+
+
+

Horizontal Linear Alternative Label Stepper

+
+ +
+
+
+

Horizontal Linear Stepper

+
+ +
+
+
+

Horizontal Non Linear Stepper

+
+ +
+
+
+

Horizontal Stepper With Error

+
+ +
+
+
+

Progress Mobile Stepper

+
+ +
+
+
+

Swipeable Text Mobile Stepper

+
+ +
+
+
+

Text Mobile Stepper

+
+ +
+
+
+

Vertical Linear Stepper

+
+ +
+
+ + ); +} diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index fbf543479f5e3f..c6bae239511be5 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -33,38 +33,52 @@ const MobileStepperRoot = styled(Paper, { return [styles.root, styles[`position${capitalize(ownerState.position)}`]]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', background: (theme.vars || theme).palette.background.default, padding: 8, - ...(ownerState.position === 'bottom' && { - position: 'fixed', - bottom: 0, - left: 0, - right: 0, - zIndex: (theme.vars || theme).zIndex.mobileStepper, - }), - ...(ownerState.position === 'top' && { - position: 'fixed', - top: 0, - left: 0, - right: 0, - zIndex: (theme.vars || theme).zIndex.mobileStepper, - }), + variants: [ + { + props: { position: 'bottom' }, + style: { + borderRadius: 0, + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + zIndex: (theme.vars || theme).zIndex.mobileStepper, + }, + }, + { + props: { position: 'top' }, + style: { + position: 'fixed', + top: 0, + left: 0, + right: 0, + zIndex: (theme.vars || theme).zIndex.mobileStepper, + }, + }, + ], })); const MobileStepperDots = styled('div', { name: 'MuiMobileStepper', slot: 'Dots', overridesResolver: (props, styles) => styles.dots, -})(({ ownerState }) => ({ - ...(ownerState.variant === 'dots' && { - display: 'flex', - flexDirection: 'row', - }), +})(() => ({ + variants: [ + { + props: { variant: 'dots' }, + style: { + display: 'flex', + flexDirection: 'row', + }, + }, + ], })); const MobileStepperDot = styled('div', { @@ -76,30 +90,41 @@ const MobileStepperDot = styled('div', { return [styles.dot, dotActive && styles.dotActive]; }, -})(({ theme, ownerState, dotActive }) => ({ - ...(ownerState.variant === 'dots' && { - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shortest, - }), - backgroundColor: (theme.vars || theme).palette.action.disabled, - borderRadius: '50%', - width: 8, - height: 8, - margin: '0 2px', - ...(dotActive && { - backgroundColor: (theme.vars || theme).palette.primary.main, - }), - }), +})(({ theme, dotActive }) => ({ + variants: [ + { + props: { variant: 'dots' }, + style: { + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shortest, + }), + backgroundColor: (theme.vars || theme).palette.action.disabled, + borderRadius: '50%', + width: 8, + height: 8, + margin: '0 2px', + ...(dotActive && { + backgroundColor: (theme.vars || theme).palette.primary.main, + }), + }, + }, + ], })); const MobileStepperProgress = styled(LinearProgress, { name: 'MuiMobileStepper', slot: 'Progress', overridesResolver: (props, styles) => styles.progress, -})(({ ownerState }) => ({ - ...(ownerState.variant === 'progress' && { - width: '50%', - }), +})(() => ({ + variants: [ + { + props: { variant: 'progress' }, + style: { + flex: 1, + margin: '0 8.5px', + }, + }, + ], })); const MobileStepper = React.forwardRef(function MobileStepper(inProps, ref) { From 3406682259053544a0899da4c3a96a4b3cce6221 Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Sun, 17 Mar 2024 23:18:18 +0100 Subject: [PATCH 2/9] Fixing broken styles for MobileStepperProgress --- packages/mui-material/src/MobileStepper/MobileStepper.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index c6bae239511be5..70c0b9a8e08638 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -115,17 +115,16 @@ const MobileStepperProgress = styled(LinearProgress, { name: 'MuiMobileStepper', slot: 'Progress', overridesResolver: (props, styles) => styles.progress, -})(() => ({ +})({ variants: [ { props: { variant: 'progress' }, style: { - flex: 1, - margin: '0 8.5px', + width: '50%', }, }, ], -})); +}); const MobileStepper = React.forwardRef(function MobileStepper(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiMobileStepper' }); From e579d7c6bec0f7d4d77fc77b24276fbea4cf1d31 Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Sun, 17 Mar 2024 23:18:46 +0100 Subject: [PATCH 3/9] Fixing broken styles for MobileProgressDots when dot is active --- .../src/MobileStepper/MobileStepper.js | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index 70c0b9a8e08638..33a0576aa7099a 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -90,22 +90,19 @@ const MobileStepperDot = styled('div', { return [styles.dot, dotActive && styles.dotActive]; }, -})(({ theme, dotActive }) => ({ +})(({ theme }) => ({ variants: [ { - props: { variant: 'dots' }, + props: { variant: 'dots', dotActive: false }, + style: { + ...mobileStepperDotDefaultStyle({ theme }), + }, + }, + { + props: { variant: 'dots', dotActive: true }, style: { - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shortest, - }), - backgroundColor: (theme.vars || theme).palette.action.disabled, - borderRadius: '50%', - width: 8, - height: 8, - margin: '0 2px', - ...(dotActive && { + ...mobileStepperDotDefaultStyle({ theme }), backgroundColor: (theme.vars || theme).palette.primary.main, - }), }, }, ], From d2fd114e3fc01200ec200ee6ca6a2db2f60faa5f Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Sun, 17 Mar 2024 23:19:05 +0100 Subject: [PATCH 4/9] Creating constant for default mobileStepperDotDefaultStyle --- .../mui-material/src/MobileStepper/MobileStepper.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index 33a0576aa7099a..b73789d7557fee 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -80,6 +80,16 @@ const MobileStepperDots = styled('div', { }, ], })); +const mobileStepperDotDefaultStyle = ({ theme }) => ({ + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shortest, + }), + backgroundColor: (theme.vars || theme).palette.action.disabled, + borderRadius: '50%', + width: 8, + height: 8, + margin: '0 2px', +}); const MobileStepperDot = styled('div', { name: 'MuiMobileStepper', From 97e5dfac355865e5edd43fd35bc6d52c2865edd9 Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Sun, 17 Mar 2024 23:19:23 +0100 Subject: [PATCH 5/9] Replacing imports with zero-styled --- packages/mui-material/src/MobileStepper/MobileStepper.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index b73789d7557fee..c55cbf50c895da 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -7,10 +7,12 @@ import composeClasses from '@mui/utils/composeClasses'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; import LinearProgress from '../LinearProgress'; -import useThemeProps from '../styles/useThemeProps'; -import styled, { slotShouldForwardProp } from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; +import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import { getMobileStepperUtilityClass } from './mobileStepperClasses'; +const useThemeProps = createUseThemeProps('MuiMobileStepper'); + const useUtilityClasses = (ownerState) => { const { classes, position } = ownerState; @@ -80,6 +82,7 @@ const MobileStepperDots = styled('div', { }, ], })); + const mobileStepperDotDefaultStyle = ({ theme }) => ({ transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shortest, @@ -112,7 +115,7 @@ const MobileStepperDot = styled('div', { props: { variant: 'dots', dotActive: true }, style: { ...mobileStepperDotDefaultStyle({ theme }), - backgroundColor: (theme.vars || theme).palette.primary.main, + backgroundColor: (theme.vars || theme).palette.primary.main, }, }, ], From 3d987ae6cda34a88c10dfae69016c59df626af84 Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Sun, 17 Mar 2024 23:46:54 +0100 Subject: [PATCH 6/9] Removing unnecessary function call --- packages/mui-material/src/MobileStepper/MobileStepper.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index c55cbf50c895da..ad9a628524d77a 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -71,7 +71,7 @@ const MobileStepperDots = styled('div', { name: 'MuiMobileStepper', slot: 'Dots', overridesResolver: (props, styles) => styles.dots, -})(() => ({ +})({ variants: [ { props: { variant: 'dots' }, @@ -81,7 +81,7 @@ const MobileStepperDots = styled('div', { }, }, ], -})); +}); const mobileStepperDotDefaultStyle = ({ theme }) => ({ transition: theme.transitions.create('background-color', { From 181a7986663bb0afc07ef4542bde2da319f77f9d Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Mon, 18 Mar 2024 19:38:14 +0100 Subject: [PATCH 7/9] Removing duplicated code in dot and stepper styles --- .../src/MobileStepper/MobileStepper.js | 35 +++++-------------- 1 file changed, 9 insertions(+), 26 deletions(-) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index ad9a628524d77a..d030c5b90fef3f 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -44,21 +44,9 @@ const MobileStepperRoot = styled(Paper, { padding: 8, variants: [ { - props: { position: 'bottom' }, + props: ({ position }) => position !== 'static', style: { - borderRadius: 0, position: 'fixed', - bottom: 0, - left: 0, - right: 0, - zIndex: (theme.vars || theme).zIndex.mobileStepper, - }, - }, - { - props: { position: 'top' }, - style: { - position: 'fixed', - top: 0, left: 0, right: 0, zIndex: (theme.vars || theme).zIndex.mobileStepper, @@ -83,17 +71,6 @@ const MobileStepperDots = styled('div', { ], }); -const mobileStepperDotDefaultStyle = ({ theme }) => ({ - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shortest, - }), - backgroundColor: (theme.vars || theme).palette.action.disabled, - borderRadius: '50%', - width: 8, - height: 8, - margin: '0 2px', -}); - const MobileStepperDot = styled('div', { name: 'MuiMobileStepper', slot: 'Dot', @@ -108,13 +85,19 @@ const MobileStepperDot = styled('div', { { props: { variant: 'dots', dotActive: false }, style: { - ...mobileStepperDotDefaultStyle({ theme }), + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shortest, + }), + backgroundColor: (theme.vars || theme).palette.action.disabled, + borderRadius: '50%', + width: 8, + height: 8, + margin: '0 2px', }, }, { props: { variant: 'dots', dotActive: true }, style: { - ...mobileStepperDotDefaultStyle({ theme }), backgroundColor: (theme.vars || theme).palette.primary.main, }, }, From e4cf4350b0b3b5b7ce5f6b4a9c34a3b1bdd2316c Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Mon, 18 Mar 2024 19:48:08 +0100 Subject: [PATCH 8/9] Adding default style for dot --- packages/mui-material/src/MobileStepper/MobileStepper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index d030c5b90fef3f..c78a0cf47b4be8 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -83,7 +83,7 @@ const MobileStepperDot = styled('div', { })(({ theme }) => ({ variants: [ { - props: { variant: 'dots', dotActive: false }, + props: { variant: 'dots' }, style: { transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shortest, From 291c9a40c8bf86e6db56ba57d30a46a305392d6a Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 20 Mar 2024 09:35:19 +0700 Subject: [PATCH 9/9] Update packages/mui-material/src/MobileStepper/MobileStepper.js Signed-off-by: Siriwat K --- .../mui-material/src/MobileStepper/MobileStepper.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js index c78a0cf47b4be8..4bda0efad9c004 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.js +++ b/packages/mui-material/src/MobileStepper/MobileStepper.js @@ -44,7 +44,7 @@ const MobileStepperRoot = styled(Paper, { padding: 8, variants: [ { - props: ({ position }) => position !== 'static', + props: ({ position }) => position === 'top' || position === 'bottom', style: { position: 'fixed', left: 0, @@ -52,6 +52,14 @@ const MobileStepperRoot = styled(Paper, { zIndex: (theme.vars || theme).zIndex.mobileStepper, }, }, + { + props: { position: 'top' }, + style: { top: 0 }, + }, + { + props: { position: 'bottom' }, + style: { bottom: 0 }, + }, ], }));