Skip to content

Commit

Permalink
[material-ui][Stepper] Convert to support CSS extraction (mui#41546)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aacevski @pluvio72
aacevski authored and pluvio72 committed Mar 28, 2024
1 parent bedf79a commit b9b4b58
Show file tree
Hide file tree
Showing 9 changed files with 299 additions and 81 deletions.
79 changes: 79 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<React.Fragment>
<section>
<h2> Customized Steppers</h2>
<div className="demo-container">
<CustomizedSteppers />
</div>
</section>
<section>
<h2> Dots Mobile Stepper</h2>
<div className="demo-container">
<DotsMobileStepper />
</div>
</section>
<section>
<h2> Horizontal Linear Alternative Label Stepper</h2>
<div className="demo-container">
<HorizontalLinearAlternativeLabelStepper />
</div>
</section>
<section>
<h2> Horizontal Linear Stepper</h2>
<div className="demo-container">
<HorizontalLinearStepper />
</div>
</section>
<section>
<h2> Horizontal Non Linear Stepper</h2>
<div className="demo-container">
<HorizontalNonLinearStepper />
</div>
</section>
<section>
<h2> Horizontal Stepper With Error</h2>
<div className="demo-container">
<HorizontalStepperWithError />
</div>
</section>
<section>
<h2> Progress Mobile Stepper</h2>
<div className="demo-container">
<ProgressMobileStepper />
</div>
</section>
<section>
<h2> Swipeable Text Mobile Stepper</h2>
<div className="demo-container">
<SwipeableTextMobileStepper />
</div>
</section>
<section>
<h2> Text Mobile Stepper</h2>
<div className="demo-container">
<TextMobileStepper />
</div>
</section>
<section>
<h2> Vertical Linear Stepper</h2>
<div className="demo-container">
<VerticalLinearStepper />
</div>
</section>
</React.Fragment>
);
}
80 changes: 80 additions & 0 deletions apps/pigment-css-vite-app/src/pages/material-ui/react-stepper.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<MaterialUILayout>
<h1>Steppers</h1>
<section>
<h2> Customized Steppers</h2>
<div className="demo-container">
<CustomizedSteppers />
</div>
</section>
<section>
<h2> Dots Mobile Stepper</h2>
<div className="demo-container">
<DotsMobileStepper />
</div>
</section>
<section>
<h2> Horizontal Linear Alternative Label Stepper</h2>
<div className="demo-container">
<HorizontalLinearAlternativeLabelStepper />
</div>
</section>
<section>
<h2> Horizontal Linear Stepper</h2>
<div className="demo-container">
<HorizontalLinearStepper />
</div>
</section>
<section>
<h2> Horizontal Non Linear Stepper</h2>
<div className="demo-container">
<HorizontalNonLinearStepper />
</div>
</section>
<section>
<h2> Horizontal Stepper With Error</h2>
<div className="demo-container">
<HorizontalStepperWithError />
</div>
</section>
<section>
<h2> Progress Mobile Stepper</h2>
<div className="demo-container">
<ProgressMobileStepper />
</div>
</section>
<section>
<h2> Swipeable Text Mobile Stepper</h2>
<div className="demo-container">
<SwipeableTextMobileStepper />
</div>
</section>
<section>
<h2> Text Mobile Stepper</h2>
<div className="demo-container">
<TextMobileStepper />
</div>
</section>
<section>
<h2> Vertical Linear Stepper</h2>
<div className="demo-container">
<VerticalLinearStepper />
</div>
</section>
</MaterialUILayout>
);
}
33 changes: 21 additions & 12 deletions packages/mui-material/src/Step/Step.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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' });
Expand Down
24 changes: 15 additions & 9 deletions packages/mui-material/src/StepButton/StepButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@ 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';
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;

Expand All @@ -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' });
Expand Down
63 changes: 40 additions & 23 deletions packages/mui-material/src/StepConnector/StepConnector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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',
Expand All @@ -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,
},
},
],
};
});

Expand Down
18 changes: 12 additions & 6 deletions packages/mui-material/src/StepContent/StepContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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,
Expand All @@ -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, {
Expand Down
Loading

0 comments on commit b9b4b58

Please sign in to comment.