From 589aba28d775ac153a555c7143e8895130ad9284 Mon Sep 17 00:00:00 2001 From: Andrej Acevski Date: Mon, 18 Mar 2024 21:10:36 +0100 Subject: [PATCH 1/3] Adding CSS extraction to Stepper and related components --- .../app/material-ui/react-stepper/page.tsx | 79 +++++++++++++++++++ packages/mui-material/src/Step/Step.js | 33 +++++--- .../mui-material/src/StepButton/StepButton.js | 24 +++--- .../src/StepConnector/StepConnector.js | 63 +++++++++------ .../src/StepContent/StepContent.js | 18 +++-- .../mui-material/src/StepIcon/StepIcon.js | 5 +- .../mui-material/src/StepLabel/StepLabel.js | 34 ++++---- packages/mui-material/src/Stepper/Stepper.js | 40 ++++++---- 8 files changed, 216 insertions(+), 80 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/Step/Step.js b/packages/mui-material/src/Step/Step.js index 40010102fb5d05..61bd9567935007 100644 --- a/packages/mui-material/src/Step/Step.js +++ b/packages/mui-material/src/Step/Step.js @@ -6,10 +6,11 @@ import integerPropType from '@mui/utils/integerPropType'; import composeClasses from '@mui/utils/composeClasses'; import StepperContext from '../Stepper/StepperContext'; import StepContext from './StepContext'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getStepUtilityClass } from './stepClasses'; +const useThemeProps = createUseThemeProps('MuiStep'); + const useUtilityClasses = (ownerState) => { const { classes, orientation, alternativeLabel, completed } = ownerState; @@ -33,16 +34,24 @@ const StepRoot = styled('div', { ownerState.completed && styles.completed, ]; }, -})(({ ownerState }) => ({ - ...(ownerState.orientation === 'horizontal' && { - paddingLeft: 8, - paddingRight: 8, - }), - ...(ownerState.alternativeLabel && { - flex: 1, - position: 'relative', - }), -})); +})({ + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + paddingLeft: 8, + paddingRight: 8, + }, + }, + { + props: { alternativeLabel: true }, + style: { + flex: 1, + position: 'relative', + }, + }, + ], +}); const Step = React.forwardRef(function Step(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiStep' }); diff --git a/packages/mui-material/src/StepButton/StepButton.js b/packages/mui-material/src/StepButton/StepButton.js index 068741b194eddc..a724a65805bc51 100644 --- a/packages/mui-material/src/StepButton/StepButton.js +++ b/packages/mui-material/src/StepButton/StepButton.js @@ -3,8 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import ButtonBase from '../ButtonBase'; import StepLabel from '../StepLabel'; import isMuiElement from '../utils/isMuiElement'; @@ -12,6 +11,8 @@ import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import stepButtonClasses, { getStepButtonUtilityClass } from './stepButtonClasses'; +const useThemeProps = createUseThemeProps('MuiStepButton'); + const useUtilityClasses = (ownerState) => { const { classes, orientation } = ownerState; @@ -35,20 +36,25 @@ const StepButtonRoot = styled(ButtonBase, { styles[ownerState.orientation], ]; }, -})(({ ownerState }) => ({ +})({ width: '100%', padding: '24px 16px', margin: '-24px -16px', boxSizing: 'content-box', - ...(ownerState.orientation === 'vertical' && { - justifyContent: 'flex-start', - padding: '8px', - margin: '-8px', - }), [`& .${stepButtonClasses.touchRipple}`]: { color: 'rgba(0, 0, 0, 0.3)', }, -})); + variants: [ + { + props: { orientation: 'vertical' }, + style: { + justifyContent: 'flex-start', + padding: '8px', + margin: '-8px', + }, + }, + ], +}); const StepButton = React.forwardRef(function StepButton(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiStepButton' }); diff --git a/packages/mui-material/src/StepConnector/StepConnector.js b/packages/mui-material/src/StepConnector/StepConnector.js index 30d416e5d9baae..a7fb2da0d41939 100644 --- a/packages/mui-material/src/StepConnector/StepConnector.js +++ b/packages/mui-material/src/StepConnector/StepConnector.js @@ -4,12 +4,13 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import { getStepConnectorUtilityClass } from './stepConnectorClasses'; +const useThemeProps = createUseThemeProps('MuiStepConnector'); + const useUtilityClasses = (ownerState) => { const { classes, orientation, alternativeLabel, active, completed, disabled } = ownerState; @@ -41,18 +42,26 @@ const StepConnectorRoot = styled('div', { ownerState.completed && styles.completed, ]; }, -})(({ ownerState }) => ({ +})({ flex: '1 1 auto', - ...(ownerState.orientation === 'vertical' && { - marginLeft: 12, // half icon - }), - ...(ownerState.alternativeLabel && { - position: 'absolute', - top: 8 + 4, - left: 'calc(-50% + 20px)', - right: 'calc(50% + 20px)', - }), -})); + variants: [ + { + props: { orientation: 'vertical' }, + style: { + marginLeft: 12, // half icon + }, + }, + { + props: { alternativeLabel: true }, + style: { + position: 'absolute', + top: 8 + 4, + left: 'calc(-50% + 20px)', + right: 'calc(50% + 20px)', + }, + }, + ], +}); const StepConnectorLine = styled('span', { name: 'MuiStepConnector', @@ -62,21 +71,29 @@ const StepConnectorLine = styled('span', { return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]]; }, -})(({ ownerState, theme }) => { +})(({ theme }) => { const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]; return { display: 'block', borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor, - ...(ownerState.orientation === 'horizontal' && { - borderTopStyle: 'solid', - borderTopWidth: 1, - }), - ...(ownerState.orientation === 'vertical' && { - borderLeftStyle: 'solid', - borderLeftWidth: 1, - minHeight: 24, - }), + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + borderTopStyle: 'solid', + borderTopWidth: 1, + }, + }, + { + props: { orientation: 'vertical' }, + style: { + borderLeftStyle: 'solid', + borderLeftWidth: 1, + minHeight: 24, + }, + }, + ], }; }); diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js index 1d1be8bef3d4d6..528685347c41d0 100644 --- a/packages/mui-material/src/StepContent/StepContent.js +++ b/packages/mui-material/src/StepContent/StepContent.js @@ -3,13 +3,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Collapse from '../Collapse'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import { getStepContentUtilityClass } from './stepContentClasses'; +const useThemeProps = createUseThemeProps('MuiStepContent'); + const useUtilityClasses = (ownerState) => { const { classes, last } = ownerState; @@ -26,7 +27,7 @@ const StepContentRoot = styled('div', { return [styles.root, ownerState.last && styles.last]; }, -})(({ ownerState, theme }) => ({ +})(({ theme }) => ({ marginLeft: 12, // half icon paddingLeft: 8 + 12, // margin + half icon paddingRight: 8, @@ -35,9 +36,14 @@ const StepContentRoot = styled('div', { : `1px solid ${ theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] }`, - ...(ownerState.last && { - borderLeft: 'none', - }), + variants: [ + { + props: { last: true }, + style: { + borderLeft: 'none', + }, + }, + ], })); const StepContentTransition = styled(Collapse, { diff --git a/packages/mui-material/src/StepIcon/StepIcon.js b/packages/mui-material/src/StepIcon/StepIcon.js index f40a13455e9fc5..6ed6c6c31ccc5a 100644 --- a/packages/mui-material/src/StepIcon/StepIcon.js +++ b/packages/mui-material/src/StepIcon/StepIcon.js @@ -3,13 +3,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import CheckCircle from '../internal/svg-icons/CheckCircle'; import Warning from '../internal/svg-icons/Warning'; import SvgIcon from '../SvgIcon'; import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses'; +const useThemeProps = createUseThemeProps('MuiStepIcon'); + const useUtilityClasses = (ownerState) => { const { classes, active, completed, error } = ownerState; diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index 80c3f7e5e36a93..fd597fcc6082bf 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -1,15 +1,16 @@ 'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import StepContext from '../Step/StepContext'; import StepIcon from '../StepIcon'; import StepperContext from '../Stepper/StepperContext'; -import StepContext from '../Step/StepContext'; +import { createUseThemeProps, styled } from '../zero-styled'; import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses'; +const useThemeProps = createUseThemeProps('MuiStepLabel'); + const useUtilityClasses = (ownerState) => { const { classes, orientation, active, completed, error, disabled, alternativeLabel } = ownerState; @@ -51,7 +52,7 @@ const StepLabelRoot = styled('span', { return [styles.root, styles[ownerState.orientation]]; }, -})(({ ownerState }) => ({ +})({ display: 'flex', alignItems: 'center', [`&.${stepLabelClasses.alternativeLabel}`]: { @@ -60,11 +61,16 @@ const StepLabelRoot = styled('span', { [`&.${stepLabelClasses.disabled}`]: { cursor: 'default', }, - ...(ownerState.orientation === 'vertical' && { - textAlign: 'left', - padding: '8px 0', - }), -})); + variants: [ + { + props: { orientation: 'vertical' }, + style: { + textAlign: 'left', + padding: '8px 0', + }, + }, + ], +}); const StepLabelLabel = styled('span', { name: 'MuiStepLabel', @@ -96,14 +102,14 @@ const StepLabelIconContainer = styled('span', { name: 'MuiStepLabel', slot: 'IconContainer', overridesResolver: (props, styles) => styles.iconContainer, -})(() => ({ +})({ flexShrink: 0, // Fix IE11 issue display: 'flex', paddingRight: 8, [`&.${stepLabelClasses.alternativeLabel}`]: { paddingRight: 0, }, -})); +}); const StepLabelLabelContainer = styled('span', { name: 'MuiStepLabel', diff --git a/packages/mui-material/src/Stepper/Stepper.js b/packages/mui-material/src/Stepper/Stepper.js index 0edd4ab6516329..104e17620ff3bc 100644 --- a/packages/mui-material/src/Stepper/Stepper.js +++ b/packages/mui-material/src/Stepper/Stepper.js @@ -4,12 +4,13 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import integerPropType from '@mui/utils/integerPropType'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import { getStepperUtilityClass } from './stepperClasses'; import StepConnector from '../StepConnector'; import StepperContext from './StepperContext'; +const useThemeProps = createUseThemeProps('MuiStepper'); + const useUtilityClasses = (ownerState) => { const { orientation, alternativeLabel, classes } = ownerState; const slots = { @@ -30,19 +31,30 @@ const StepperRoot = styled('div', { ownerState.alternativeLabel && styles.alternativeLabel, ]; }, -})(({ ownerState }) => ({ +})({ display: 'flex', - ...(ownerState.orientation === 'horizontal' && { - flexDirection: 'row', - alignItems: 'center', - }), - ...(ownerState.orientation === 'vertical' && { - flexDirection: 'column', - }), - ...(ownerState.alternativeLabel && { - alignItems: 'flex-start', - }), -})); + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + flexDirection: 'row', + alignItems: 'center', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + flexDirection: 'column', + }, + }, + { + props: { alternativeLabel: true }, + style: { + alignItems: 'flex-start', + }, + }, + ], +}); const defaultConnector = ; From 984154d09e69d9fb76029d62091497b13f527f34 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 20 Mar 2024 13:12:47 +0700 Subject: [PATCH 2/3] run script to generate demo page --- .../src/pages/material-ui/react-stepper.tsx | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx new file mode 100644 index 00000000000000..5f9cc1d0e683d6 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import CustomizedSteppers from '../../../../../docs/data/material/components/steppers/CustomizedSteppers.tsx'; +import DotsMobileStepper from '../../../../../docs/data/material/components/steppers/DotsMobileStepper.tsx'; +import HorizontalLinearAlternativeLabelStepper from '../../../../../docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx'; +import HorizontalLinearStepper from '../../../../../docs/data/material/components/steppers/HorizontalLinearStepper.tsx'; +import HorizontalNonLinearStepper from '../../../../../docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx'; +import HorizontalStepperWithError from '../../../../../docs/data/material/components/steppers/HorizontalStepperWithError.tsx'; +import ProgressMobileStepper from '../../../../../docs/data/material/components/steppers/ProgressMobileStepper.tsx'; +import SwipeableTextMobileStepper from '../../../../../docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx'; +import TextMobileStepper from '../../../../../docs/data/material/components/steppers/TextMobileStepper.tsx'; +import VerticalLinearStepper from '../../../../../docs/data/material/components/steppers/VerticalLinearStepper.tsx'; + +export default function Steppers() { + return ( + +

Steppers

+
+

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

+
+ +
+
+ + ); +} From ee1c9c2aedd76961a7439abef35b67707dafdbd7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 20 Mar 2024 13:30:57 +0700 Subject: [PATCH 3/3] add check --- packages/mui-material/src/StepLabel/StepLabel.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index fd597fcc6082bf..03bed601ec0a9f 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -258,6 +258,8 @@ StepLabel.propTypes /* remove-proptypes */ = { ]), }; -StepLabel.muiName = 'StepLabel'; +if (StepLabel) { + StepLabel.muiName = 'StepLabel'; +} export default StepLabel;