[Backdrop] Migrate to emotion (#24523)

docs/pages/api-docs/backdrop.json

@@ -4,6 +4,7 @@
     "classes": { "type": { "name": "object" } },
     "invisible": { "type": { "name": "bool" } },
     "open": { "type": { "name": "bool" }, "required": true },
+    "sx": { "type": { "name": "object" } },
     "transitionDuration": {
       "type": {
         "name": "union",
@@ -18,6 +19,6 @@
   "filename": "/packages/material-ui/src/Backdrop/Backdrop.js",
   "inheritance": { "component": "Fade", "pathname": "/api/fade/" },
   "demos": "<ul><li><a href=\"/components/backdrop/\">Backdrop</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/backdrop/backdrop.json

@@ -5,6 +5,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "invisible": "If <code>true</code>, the backdrop is invisible. It can be used when rendering a popover or a custom select component.",
     "open": "If <code>true</code>, the component is shown.",
+    "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.",
     "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
   },
   "classDescriptions": {

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Omit, InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { Omit, InternalStandardProps as StandardProps, Theme } from '..';
 import { FadeProps } from '../Fade';
 import { TransitionProps } from '../transitions/transition';
 
@@ -30,6 +31,10 @@ export interface BackdropProps
    * If `true`, the component is shown.
    */
   open: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

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

@@ -1,35 +1,62 @@
 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 Fade from '../Fade';
+import { getBackdropUtilityClass } from './backdropClasses';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {
-    // Improve scrollable dialog support.
-    zIndex: -1,
-    position: 'fixed',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    WebkitTapHighlightColor: 'transparent',
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.invisible && styles.invisible),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, invisible } = styleProps;
+
+  const slots = {
+    root: ['root', invisible && 'invisible'],
+  };
+
+  return composeClasses(slots, getBackdropUtilityClass, classes);
+};
+
+const BackdropRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiBackdrop',
+    slot: 'Root',
+    overridesResolver,
   },
+)(({ styleProps }) => ({
+  // Improve scrollable dialog support.
+  zIndex: -1,
+  position: 'fixed',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  WebkitTapHighlightColor: 'transparent',
   /* Styles applied to the root element if `invisible={true}`. */
-  invisible: {
+  ...(styleProps.invisible && {
     backgroundColor: 'transparent',
-  },
-};
+  }),
+}));
 
-const Backdrop = React.forwardRef(function Backdrop(props, ref) {
+const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiBackdrop' });
   const {
     children,
-    classes,
     className,
     invisible = false,
     open,
@@ -39,21 +66,23 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
     ...other
   } = props;
 
+  const styleProps = {
+    ...props,
+    invisible,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
     <TransitionComponent in={open} timeout={transitionDuration} {...other}>
-      <div
-        className={clsx(
-          classes.root,
-          {
-            [classes.invisible]: invisible,
-          },
-          className,
-        )}
+      <BackdropRoot
+        className={clsx(classes.root, className)}
         aria-hidden
         ref={ref}
+        styleProps={styleProps}
       >
         {children}
-      </div>
+      </BackdropRoot>
     </TransitionComponent>
   );
 });
@@ -85,6 +114,10 @@ Backdrop.propTypes = {
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -99,4 +132,4 @@ Backdrop.propTypes = {
   ]),
 };
 
-export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop);
+export default Backdrop;

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

@@ -1,25 +1,24 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import Backdrop from './Backdrop';
 import Fade from '../Fade';
+import classes from './backdropClasses';
 
 describe('<Backdrop />', () => {
   const mount = createMount({ strict: true });
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<Backdrop open />);
-  });
-
-  describeConformance(<Backdrop open />, () => ({
+  describeConformanceV5(<Backdrop open />, () => ({
     classes,
     inheritComponent: Fade,
     mount,
     refInstanceof: window.HTMLDivElement,
+    muiName: 'MuiBackdrop',
+    testVariantProps: { invisible: true },
     skip: [
       'componentProp',
+      'componentsProp',
       // react-transition-group issue
       'reactTestRenderer',
     ],

packages/material-ui/src/Backdrop/backdropClasses.d.ts

@@ -0,0 +1,10 @@
+export interface BackdropClasses {
+  root: string;
+  invisible: string;
+}
+
+declare const backdropClasses: BackdropClasses;
+
+export function getBackdropUtilityClass(slot: string): string;
+
+export default backdropClasses;

packages/material-ui/src/Backdrop/backdropClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getBackdropUtilityClass(slot) {
+  return generateUtilityClass('MuiBackdrop', slot);
+}
+
+const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+
+export default backdropClasses;

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

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

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

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