[Step] Migrate to emotion (#24678)

Author: natac13

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": "<ul><li><a href=\"/components/steppers/\">Steppers</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/step/step.json

@@ -8,7 +8,8 @@
     "disabled": "If <code>true</code>, the step is disabled, will also disable the button if <code>StepButton</code> is a child of <code>Step</code>. 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 <code>true</code>, the Step is displayed as rendered last. The prop defaults to the value inherited from the parent Stepper component."
+    "last": "If <code>true</code>, 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 <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

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<React.HTMLAttributes<HTMLDivElement>> {
   /**
@@ -49,6 +50,10 @@ export interface StepProps extends StandardProps<React.HTMLAttributes<HTMLDivEle
    * The prop defaults to the value inherited from the parent Stepper component.
    */
   last?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type StepClasskey = keyof NonNullable<StepProps['classes']>;

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 = (
-    <div
-      className={clsx(
-        classes.root,
-        classes[orientation],
-        {
-          [classes.alternativeLabel]: alternativeLabel,
-          [classes.completed]: completed,
-        },
-        className,
-      )}
+    <StepRoot
+      className={clsx(classes.root, className)}
       ref={ref}
+      styleProps={styleProps}
       {...other}
     >
       {connector && alternativeLabel && index !== 0 ? connector : null}
       {children}
-    </div>
+    </StepRoot>
   );
 
   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;

packages/material-ui/src/Step/Step.test.js

@@ -1,31 +1,32 @@
 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('<Step />', () => {
-  let classes;
   let stepButtonClasses;
   let stepLabelClasses;
   const mount = createMount();
 
   const render = createClientRender();
 
   before(() => {
-    classes = getClasses(<Step />);
     stepButtonClasses = getClasses(<StepButton />);
     stepLabelClasses = getClasses(<StepLabel />);
   });
 
-  describeConformance(<Step />, () => ({
+  describeConformanceV5(<Step />, () => ({
     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', () => {

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';

packages/material-ui/src/Step/index.js

@@ -1 +1,4 @@
 export { default } from './Step';
+
+export { default as stepClasses } from './stepClasses';
+export * from './stepClasses';

packages/material-ui/src/Step/stepClasses.d.ts

@@ -0,0 +1,7 @@
+import { StepClasskey } from './Step';
+
+declare const stepClasses: Record<StepClasskey, string>;
+
+export function getStepUtilityClass(slot: string): string;
+
+export default stepClasses;

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;

packages/material-ui/src/Stepper/Stepper.test.js

@@ -1,22 +1,20 @@
 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';
 import Stepper from './Stepper';
 
 describe('<Stepper />', () => {
   let classes;
-  let stepClasses;
   let stepConnectorClasses;
   const mount = createMount({ strict: true });
   const render = createClientRender();
 
   before(() => {
     classes = getClasses(<Stepper />);
-    stepClasses = getClasses(<Step />);
     stepConnectorClasses = getClasses(<StepConnector />);
   });