[Button] Migrate LoadingButton to emotion

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

@@ -14,7 +14,8 @@
         "description": "'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'"
       },
       "default": "'center'"
-    }
+    },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "LoadingButton",
   "styles": {
@@ -37,6 +38,6 @@
   "filename": "/packages/material-ui-lab/src/LoadingButton/LoadingButton.js",
   "inheritance": { "component": "Button", "pathname": "/api/button/" },
   "demos": "<ul><li><a href=\"/components/buttons/\">Buttons</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -6,7 +6,8 @@
     "disabled": "If <code>true</code>, the component is disabled.",
     "loading": "If <code>true</code>, the loading indicator is shown.",
     "loadingIndicator": "Element placed before the children if the button is in loading state.",
-    "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button."
+    "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
+    "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-lab/src/LoadingButton/LoadingButton.d.ts

@@ -1,5 +1,7 @@
 import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button';
 import { OverrideProps } from '@material-ui/core/OverridableComponent';
+import { Theme } from '@material-ui/core/styles';
+import { SxProps } from '@material-ui/system';
 
 export type LoadingButtonTypeMap<
   P = {},
@@ -44,6 +46,10 @@ export type LoadingButtonTypeMap<
      * @default 'center'
      */
     loadingPosition?: 'start' | 'end' | 'center';
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }>;

packages/material-ui-lab/src/LoadingButton/LoadingButton.js

@@ -1,95 +1,133 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { chainPropTypes } from '@material-ui/utils';
 import { capitalize } from '@material-ui/core/utils';
-import { withStyles } from '@material-ui/core/styles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import {
+  experimentalStyled as styled,
+  unstable_useThemeProps as useThemeProps,
+} from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 
-export const styles = () => ({
-  /* Styles applied to the root element. */
-  root: {},
-  /* Styles applied to the root element if `loading={true}`. */
-  loading: {},
-  /* Styles applied to the loadingIndicator element. */
-  loadingIndicator: {
-    position: 'absolute',
-    visibility: 'visible',
-    display: 'flex',
-  },
-  /* Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
-  loadingIndicatorCenter: {
-    left: '50%',
-    transform: 'translate(-50%)',
-  },
-  /* Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
-  loadingIndicatorStart: {
-    left: 14,
+const useUtilityClasses = (styleProps) => {
+  const { loading, loadingPosition, classes } = styleProps;
+
+  const slots = {
+    root: ['root', loading && 'loading'],
+    startIcon: [`startIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
+    endIcon: [`endIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
+    label: [`label${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
+    loadingIndicator: ['loadingIndicator', `loadingIndicator${capitalize(loadingPosition)}`],
+  };
+
+  return composeClasses(slots, getLoadingButtonUtilityClass, classes);
+};
+
+const buttonShouldForwardProp = (prop) =>
+  prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as';
+const LoadingButtonRoot = styled(
+  Button,
+  {
+    shouldForwardProp: buttonShouldForwardProp,
   },
-  /* Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
-  loadingIndicatorEnd: {
-    right: 14,
+  {
+    name: 'MuiLoadingButton',
+    slot: 'Root',
+    overridesResolver: (props, styles) => ({
+      ...styles.root,
+      ...(styles.startIconLoadingStart && {
+        [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart,
+      }),
+      ...(styles.endIconLoadingEnd && {
+        [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd,
+      }),
+      ...(styles.labelLoadingCenter && {
+        [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter,
+      }),
+    }),
   },
-  /* Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
-  endIconLoadingEnd: {
+)({
+  [`& .${loadingButtonClasses.startIconLoadingStart}`]: {
     visibility: 'hidden',
   },
-  /* Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
-  startIconLoadingStart: {
+  [`& .${loadingButtonClasses.endIconLoadingEnd}`]: {
     visibility: 'hidden',
   },
-  /* Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */
-  labelLoadingCenter: {
+  [`& .${loadingButtonClasses.labelLoadingCenter}`]: {
     visibility: 'hidden',
   },
 });
 
+const LoadingButtonLoadingIndicator = styled(
+  'div',
+  {},
+  {
+    name: 'MuiLoadingButton',
+    slot: 'LoadingIndicator',
+    overridesResolver: (props, styles) => {
+      const { styleProps } = props;
+      return {
+        ...styles.loadingIndicator,
+        ...styles[`loadingIndicator${capitalize(styleProps.loadingPosition)}`],
+      };
+    },
+  },
+)(({ styleProps }) => ({
+  position: 'absolute',
+  visibility: 'visible',
+  display: 'flex',
+  ...(styleProps.loadingPosition === 'start' && {
+    left: 14,
+  }),
+  ...(styleProps.loadingPosition === 'center' && {
+    left: '50%',
+    transform: 'translate(-50%)',
+  }),
+  ...(styleProps.loadingPosition === 'end' && {
+    right: 14,
+  }),
+}));
+
 const LoadingIndicator = <CircularProgress color="inherit" size={16} />;
 
-const LoadingButton = React.forwardRef(function LoadingButton(props, ref) {
+const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiLoadingButton' });
   const {
     children,
-    classes,
-    className,
     disabled = false,
     loading = false,
     loadingIndicator = LoadingIndicator,
     loadingPosition = 'center',
     ...other
   } = props;
 
+  const styleProps = {
+    ...props,
+    disabled,
+    loading,
+    loadingIndicator,
+    loadingPosition,
+  };
+
+  const classes = useUtilityClasses(styleProps);
   return (
-    <Button
-      className={clsx(
-        classes.root,
-        {
-          [classes.loading]: loading,
-        },
-        className,
-      )}
+    <LoadingButtonRoot
       disabled={disabled || loading}
       ref={ref}
-      classes={{
-        startIcon: classes[`startIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
-        endIcon: classes[`endIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
-        label: classes[`label${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
-      }}
       {...other}
+      classes={classes}
+      styleProps={styleProps}
     >
       {loading && (
-        <div
-          className={clsx(
-            classes.loadingIndicator,
-            classes[`loadingIndicator${capitalize(loadingPosition)}`],
-          )}
-        >
+        <LoadingButtonLoadingIndicator className={classes.loadingIndicator} styleProps={styleProps}>
           {loadingIndicator}
-        </div>
+        </LoadingButtonLoadingIndicator>
       )}
 
       {children}
-    </Button>
+    </LoadingButtonRoot>
   );
 });
 
@@ -106,10 +144,6 @@ LoadingButton.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -142,6 +176,10 @@ LoadingButton.propTypes /* remove-proptypes */ = {
     }
     return null;
   }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiLoadingButton' })(LoadingButton);
+export default LoadingButton;

packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js

@@ -1,31 +1,22 @@
 import * as React from 'react';
-import {
-  createClientRender,
-  getClasses,
-  createMount,
-  describeConformance,
-  screen,
-} from 'test/utils';
+import { createClientRender, createMount, describeConformanceV5, screen } from 'test/utils';
 import { expect } from 'chai';
 import Button from '@material-ui/core/Button';
-import LoadingButton from './LoadingButton';
+import LoadingButton, { loadingButtonClasses as classes } from '@material-ui/lab/LoadingButton';
 
 describe('<LoadingButton />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<LoadingButton>Hello World</LoadingButton>);
-  });
-
-  describeConformance(<LoadingButton>Conformance?</LoadingButton>, () => ({
+  describeConformanceV5(<LoadingButton>Conformance?</LoadingButton>, () => ({
     classes,
     inheritComponent: Button,
     render,
     mount,
+    muiName: 'MuiLoadingButton',
+    testVariantProps: { loading: true },
     refInstanceof: window.HTMLButtonElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp'],
   }));
 
   it('is in tab-order by default', () => {
@@ -35,15 +26,13 @@ describe('<LoadingButton />', () => {
   });
 
   it('can be outlined', () => {
-    expect(() => {
-      render(
-        <LoadingButton
-          data-testid="root"
-          variant="outlined"
-          classes={{ outlined: 'loading-button-outlined' }}
-        />,
-      );
-    }).toErrorDev('The key `outlined` provided to the classes prop is not implemented');
+    render(
+      <LoadingButton
+        data-testid="root"
+        variant="outlined"
+        classes={{ outlined: 'loading-button-outlined' }}
+      />,
+    );
     const button = screen.getByTestId('root');
 
     expect(button).to.have.class('MuiButton-outlined');

packages/material-ui-lab/src/LoadingButton/index.d.ts

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

packages/material-ui-lab/src/LoadingButton/index.js

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

packages/material-ui-lab/src/LoadingButton/loadingButtonClasses.ts

@@ -0,0 +1,42 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export interface LoadingButtonClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `loading={true}`. */
+  loading: string;
+  /** Styles applied to the loadingIndicator element. */
+  loadingIndicator: string;
+  /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
+  loadingIndicatorCenter: string;
+  /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
+  loadingIndicatorStart: string;
+  /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
+  loadingIndicatorEnd: string;
+  /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
+  endIconLoadingEnd: string;
+  /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
+  startIconLoadingStart: string;
+  /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */
+  labelLoadingCenter: string;
+}
+
+export type LoadingButtonClassKey = keyof LoadingButtonClasses;
+
+export function getLoadingButtonUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiLoadingButton', slot);
+}
+
+const loadingButtonClasses: LoadingButtonClasses = generateUtilityClasses('MuiLoadingButton', [
+  'root',
+  'loading',
+  'loadingIndicator',
+  'loadingIndicatorCenter',
+  'loadingIndicatorStart',
+  'loadingIndicatorEnd',
+  'endIconLoadingEnd',
+  'startIconLoadingStart',
+  'labelLoadingCenter',
+]);
+
+export default loadingButtonClasses;