From d81cc891cd0a590236bce8c81e9e715d6d35ce10 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Fri, 29 Jan 2021 04:06:38 -0500 Subject: [PATCH] [Step] Migrate to emotion (#24678) --- docs/pages/api-docs/step.json | 5 +- docs/translations/api-docs/step/step.json | 3 +- packages/material-ui/src/Step/Step.d.ts | 7 +- packages/material-ui/src/Step/Step.js | 89 +++++++++++++------ packages/material-ui/src/Step/Step.test.js | 11 +-- packages/material-ui/src/Step/index.d.ts | 3 + packages/material-ui/src/Step/index.js | 3 + .../material-ui/src/Step/stepClasses.d.ts | 7 ++ packages/material-ui/src/Step/stepClasses.js | 15 ++++ .../material-ui/src/Stepper/Stepper.test.js | 4 +- 10 files changed, 108 insertions(+), 39 deletions(-) create mode 100644 packages/material-ui/src/Step/stepClasses.d.ts create mode 100644 packages/material-ui/src/Step/stepClasses.js diff --git a/docs/pages/api-docs/step.json b/docs/pages/api-docs/step.json index 72b3d4634e65b0..82961728e0e7c5 100644 --- a/docs/pages/api-docs/step.json +++ b/docs/pages/api-docs/step.json @@ -7,7 +7,8 @@ "disabled": { "type": { "name": "bool" } }, "expanded": { "type": { "name": "bool" } }, "index": { "type": { "name": "number" } }, - "last": { "type": { "name": "bool" } } + "last": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "Step", "styles": { @@ -20,6 +21,6 @@ "filename": "/packages/material-ui/src/Step/Step.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/step/step.json b/docs/translations/api-docs/step/step.json index 2f186a74577117..2a42b036e9b283 100644 --- a/docs/translations/api-docs/step/step.json +++ b/docs/translations/api-docs/step/step.json @@ -8,7 +8,8 @@ "disabled": "If true, the step is disabled, will also disable the button if StepButton is a child of Step. Is passed to child components.", "expanded": "Expand the step.", "index": "The position of the step. The prop defaults to the value inherited from the parent Stepper component.", - "last": "If true, the Step is displayed as rendered last. The prop defaults to the value inherited from the parent Stepper component." + "last": "If true, the Step is displayed as rendered last. The prop defaults to the value inherited from the parent Stepper component.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/packages/material-ui/src/Step/Step.d.ts b/packages/material-ui/src/Step/Step.d.ts index 24d4bde04a7614..d1055c08c2ae6a 100644 --- a/packages/material-ui/src/Step/Step.d.ts +++ b/packages/material-ui/src/Step/Step.d.ts @@ -1,5 +1,6 @@ +import { SxProps } from '@material-ui/system'; import * as React from 'react'; -import { InternalStandardProps as StandardProps } from '..'; +import { InternalStandardProps as StandardProps, Theme } from '..'; export interface StepProps extends StandardProps> { /** @@ -49,6 +50,10 @@ export interface StepProps extends StandardProps; } export type StepClasskey = keyof NonNullable; diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js index 8baa08257ee922..9450f970265119 100644 --- a/packages/material-ui/src/Step/Step.js +++ b/packages/material-ui/src/Step/Step.js @@ -1,34 +1,60 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import withStyles from '../styles/withStyles'; +import { deepmerge } from '@material-ui/utils'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import StepperContext from '../Stepper/StepperContext'; import StepContext from './StepContext'; +import useThemeProps from '../styles/useThemeProps'; +import experimentalStyled from '../styles/experimentalStyled'; +import { getStepUtilityClass } from './stepClasses'; -export const styles = { - /* Styles applied to the root element. */ - root: {}, +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...styles[styleProps.orientation], + ...(styleProps.alternativeLabel && styles.alternativeLabel), + ...(styleProps.completed && styles.completed), + }); +}; + +const useUtilityClasses = (styleProps) => { + const { classes, orientation, alternativeLabel, completed } = styleProps; + + const slots = { + root: ['root', orientation, alternativeLabel && 'alternativeLabel', completed && 'completed'], + }; + + return composeClasses(slots, getStepUtilityClass, classes); +}; + +const StepRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiStep', + slot: 'Root', + overridesResolver, + }, +)(({ styleProps }) => ({ /* Styles applied to the root element if `orientation="horizontal"`. */ - horizontal: { + ...(styleProps.orientation === 'horizontal' && { paddingLeft: 8, paddingRight: 8, - }, - /* Styles applied to the root element if `orientation="vertical"`. */ - vertical: {}, + }), /* Styles applied to the root element if `alternativeLabel={true}`. */ - alternativeLabel: { + ...(styleProps.alternativeLabel && { flex: 1, position: 'relative', - }, - /* Pseudo-class applied to the root element if `completed={true}`. */ - completed: {}, -}; + }), +})); -const Step = React.forwardRef(function Step(props, ref) { +const Step = React.forwardRef(function Step(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiStep' }); const { active: activeProp, children, - classes, className, completed: completedProp, disabled: disabledProp, @@ -61,23 +87,28 @@ const Step = React.forwardRef(function Step(props, ref) { [index, last, expanded, active, completed, disabled], ); + const styleProps = { + ...props, + active, + orientation, + alternativeLabel, + completed, + disabled, + expanded, + }; + + const classes = useUtilityClasses(styleProps); + const newChildren = ( -
{connector && alternativeLabel && index !== 0 ? connector : null} {children} -
+ ); return ( @@ -139,6 +170,10 @@ Step.propTypes = { * The prop defaults to the value inherited from the parent Stepper component. */ last: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiStep' })(Step); +export default Step; diff --git a/packages/material-ui/src/Step/Step.test.js b/packages/material-ui/src/Step/Step.test.js index e56ef671897ce5..066fe02f1bc99a 100644 --- a/packages/material-ui/src/Step/Step.test.js +++ b/packages/material-ui/src/Step/Step.test.js @@ -1,13 +1,13 @@ import * as React from 'react'; import { expect } from 'chai'; -import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils'; +import { getClasses, createMount, createClientRender, describeConformanceV5 } from 'test/utils'; import Step from './Step'; import Stepper from '../Stepper'; import StepLabel from '../StepLabel'; import StepButton from '../StepButton'; +import classes from './stepClasses'; describe('', () => { - let classes; let stepButtonClasses; let stepLabelClasses; const mount = createMount(); @@ -15,17 +15,18 @@ describe('', () => { const render = createClientRender(); before(() => { - classes = getClasses(); stepButtonClasses = getClasses(); stepLabelClasses = getClasses(); }); - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'div', mount, + muiName: 'MuiStep', + testVariantProps: { variant: 'foo' }, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + skip: ['componentProp', 'componentsProp'], })); it('merges styles and other props into the root node', () => { diff --git a/packages/material-ui/src/Step/index.d.ts b/packages/material-ui/src/Step/index.d.ts index d697e3677019f3..00fef42a5dfa82 100644 --- a/packages/material-ui/src/Step/index.d.ts +++ b/packages/material-ui/src/Step/index.d.ts @@ -1,2 +1,5 @@ export { default } from './Step'; export * from './Step'; + +export { default as stepClasses } from './stepClasses'; +export * from './stepClasses'; diff --git a/packages/material-ui/src/Step/index.js b/packages/material-ui/src/Step/index.js index 5d3f31a7500cb7..24b4eacf2c48b6 100644 --- a/packages/material-ui/src/Step/index.js +++ b/packages/material-ui/src/Step/index.js @@ -1 +1,4 @@ export { default } from './Step'; + +export { default as stepClasses } from './stepClasses'; +export * from './stepClasses'; diff --git a/packages/material-ui/src/Step/stepClasses.d.ts b/packages/material-ui/src/Step/stepClasses.d.ts new file mode 100644 index 00000000000000..83d9c9add3c492 --- /dev/null +++ b/packages/material-ui/src/Step/stepClasses.d.ts @@ -0,0 +1,7 @@ +import { StepClasskey } from './Step'; + +declare const stepClasses: Record; + +export function getStepUtilityClass(slot: string): string; + +export default stepClasses; diff --git a/packages/material-ui/src/Step/stepClasses.js b/packages/material-ui/src/Step/stepClasses.js new file mode 100644 index 00000000000000..2d4e5204c997f4 --- /dev/null +++ b/packages/material-ui/src/Step/stepClasses.js @@ -0,0 +1,15 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getStepUtilityClass(slot) { + return generateUtilityClass('MuiStep', slot); +} + +const stepClasses = generateUtilityClasses('MuiStep', [ + 'root', + 'horizontal', + 'vertical', + 'alternativeLabel', + 'completed', +]); + +export default stepClasses; diff --git a/packages/material-ui/src/Stepper/Stepper.test.js b/packages/material-ui/src/Stepper/Stepper.test.js index f114f52c835f47..d113ff21fc4625 100644 --- a/packages/material-ui/src/Stepper/Stepper.test.js +++ b/packages/material-ui/src/Stepper/Stepper.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils'; -import Step from '../Step'; +import Step, { stepClasses } from '../Step'; import StepLabel from '../StepLabel'; import StepConnector from '../StepConnector'; import StepContent from '../StepContent'; @@ -9,14 +9,12 @@ import Stepper from './Stepper'; describe('', () => { let classes; - let stepClasses; let stepConnectorClasses; const mount = createMount({ strict: true }); const render = createClientRender(); before(() => { classes = getClasses(); - stepClasses = getClasses(); stepConnectorClasses = getClasses(); });