[Stepper] Migrate StepButton to emotion

docs/pages/api-docs/step-button.json

@@ -3,7 +3,8 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "icon": { "type": { "name": "node" } },
-    "optional": { "type": { "name": "node" } }
+    "optional": { "type": { "name": "node" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "StepButton",
   "styles": {
@@ -16,6 +17,6 @@
   "filename": "/packages/material-ui/src/StepButton/StepButton.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
   "demos": "<ul><li><a href=\"/components/steppers/\">Steppers</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -4,7 +4,8 @@
     "children": "Can be a <code>StepLabel</code> or a node to place inside <code>StepLabel</code> as children.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "icon": "The icon displayed by the step label.",
-    "optional": "The optional node to display."
+    "optional": "The optional node to display.",
+    "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.test.js

@@ -1,20 +1,15 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformanceV5 } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import Step, { stepClasses as classes } from '@material-ui/core/Step';
 import Stepper from '@material-ui/core/Stepper';
 import StepLabel, { stepLabelClasses } from '@material-ui/core/StepLabel';
-import StepButton from '@material-ui/core/StepButton';
+import StepButton, { stepButtonClasses } from '@material-ui/core/StepButton';
 
 describe('<Step />', () => {
-  let stepButtonClasses;
   const render = createClientRender();
   const mount = createMount();
 
-  before(() => {
-    stepButtonClasses = getClasses(<StepButton />);
-  });
-
   describeConformanceV5(<Step />, () => ({
     classes,
     inheritComponent: 'div',

packages/material-ui/src/StepButton/StepButton.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
+import { Theme } from '../styles';
 
 /**
  * @deprecated use `StepButtonProps['icon']` instead
@@ -34,6 +36,10 @@ export type StepButtonTypeMap<P, D extends React.ElementType> = ExtendButtonBase
      * The optional node to display.
      */
     optional?: React.ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 

packages/material-ui/src/StepButton/StepButton.js

@@ -1,41 +1,77 @@
 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 experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 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';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {
-    width: '100%',
-    padding: '24px 16px',
-    margin: '-24px -16px',
-    boxSizing: 'content-box',
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(
+    {
+      ...styles[styleProps.orientation],
+      [`& .${stepButtonClasses.touchRipple}`]: styles.touchRipple,
+    },
+    styles.root || {},
+  );
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, orientation } = styleProps;
+
+  const slots = {
+    root: ['root', orientation],
+    touchRipple: ['touchRipple'],
+  };
+
+  return composeClasses(slots, getStepButtonUtilityClass, classes);
+};
+
+const StepButtonRoot = experimentalStyled(
+  ButtonBase,
+  {},
+  {
+    name: 'MuiStepButton',
+    slot: 'Root',
+    overridesResolver,
   },
-  /* Styles applied to the root element if `orientation="horizontal"`. */
-  horizontal: {},
+)(({ styleProps }) => ({
+  /* Styles applied to the root element. */
+  width: '100%',
+  padding: '24px 16px',
+  margin: '-24px -16px',
+  boxSizing: 'content-box',
   /* Styles applied to the root element if `orientation="vertical"`. */
-  vertical: {
+  ...(styleProps.orientation === 'vertical' && {
     justifyContent: 'flex-start',
     padding: '8px',
     margin: '-8px',
-  },
-  /* Styles applied to the `ButtonBase` touch-ripple. */
-  touchRipple: {
+  }),
+  [`& .${stepButtonClasses.touchRipple}`]: {
+    /* Styles applied to the `ButtonBase` touch-ripple. */
     color: 'rgba(0, 0, 0, 0.3)',
   },
-};
+}));
 
-const StepButton = React.forwardRef(function StepButton(props, ref) {
-  const { children, classes, className, icon, optional, ...other } = props;
+const StepButton = React.forwardRef(function StepButton(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiStepButton' });
+  const { children, className, icon, optional, ...other } = props;
 
   const { disabled } = React.useContext(StepContext);
   const { orientation } = React.useContext(StepperContext);
 
+  const styleProps = { ...props, orientation };
+
+  const classes = useUtilityClasses(styleProps);
+
   const childProps = {
     icon,
     optional,
@@ -48,16 +84,17 @@ const StepButton = React.forwardRef(function StepButton(props, ref) {
   );
 
   return (
-    <ButtonBase
+    <StepButtonRoot
       focusRipple
       disabled={disabled}
       TouchRippleProps={{ className: classes.touchRipple }}
-      className={clsx(classes.root, classes[orientation], className)}
+      className={clsx(classes.root, className)}
       ref={ref}
+      styleProps={styleProps}
       {...other}
     >
       {child}
-    </ButtonBase>
+    </StepButtonRoot>
   );
 });
 
@@ -86,6 +123,10 @@ StepButton.propTypes /* remove-proptypes */ = {
    * The optional node to display.
    */
   optional: PropTypes.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiStepButton' })(StepButton);
+export default StepButton;

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

@@ -1,30 +1,27 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import { fireEvent } from '@testing-library/dom';
-import StepButton from '@material-ui/core/StepButton';
+import StepButton, { stepButtonClasses as classes } from '@material-ui/core/StepButton';
 import Step from '@material-ui/core/Step';
 import StepLabel, { stepLabelClasses } from '@material-ui/core/StepLabel';
 import ButtonBase from '@material-ui/core/ButtonBase';
 
 describe('<StepButton />', () => {
-  let classes;
   const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<StepButton />);
-  });
-
   describe('internals', () => {
     const mount = createMount();
 
-    describeConformance(<StepButton />, () => ({
+    describeConformanceV5(<StepButton />, () => ({
       classes,
       inheritComponent: ButtonBase,
       mount,
+      muiName: 'MuiStepButton',
       refInstanceof: window.HTMLButtonElement,
-      skip: ['componentProp'],
+      render,
+      skip: ['componentProp', 'componentsProp', 'themeVariants'],
     }));
 
     it('passes active, completed, disabled to StepLabel', () => {

packages/material-ui/src/StepButton/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './StepButton';
 export * from './StepButton';
+
+export { default as stepButtonClasses } from './stepButtonClasses';
+export * from './stepButtonClasses';

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

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

packages/material-ui/src/StepButton/stepButtonClasses.d.ts

@@ -0,0 +1,9 @@
+import { StepButtonClasskey } from './StepButton';
+
+export type StepButtonClasses = Record<StepButtonClasskey, string>;
+
+declare const stepButtonClasses: StepButtonClasses;
+
+export function getStepButtonUtilityClass(slot: string): string;
+
+export default stepButtonClasses;

packages/material-ui/src/StepButton/stepButtonClasses.js

@@ -0,0 +1,14 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getStepButtonUtilityClass(slot) {
+  return generateUtilityClass('MuiStepButton', slot);
+}
+
+const stepButtonClasses = generateUtilityClasses('MuiStepButton', [
+  'root',
+  'horizontal',
+  'vertical',
+  'touchRipple',
+]);
+
+export default stepButtonClasses;