[Dialog] Migrate DialogContent to emotion (mui#24670)

docs/pages/api-docs/dialog-content.json

@@ -2,7 +2,8 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "dividers": { "type": { "name": "bool" } }
+    "dividers": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "DialogContent",
   "styles": { "classes": ["root", "dividers"], "globalClasses": {}, "name": "MuiDialogContent" },
@@ -11,6 +12,6 @@
   "filename": "/packages/material-ui/src/DialogContent/DialogContent.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/dialogs/\">Dialogs</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/dialog-content/dialog-content.json

@@ -3,7 +3,8 @@
   "propDescriptions": {
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "dividers": "Display the top and bottom dividers."
+    "dividers": "Display the top and bottom dividers.",
+    "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/DialogContent/DialogContent.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 
 export interface DialogContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
@@ -20,6 +21,10 @@ export interface DialogContentProps extends StandardProps<React.HTMLAttributes<H
    * @default false
    */
   dividers?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type DialogContentClassKey = keyof NonNullable<DialogContentProps['classes']>;

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

@@ -1,40 +1,70 @@
 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 { getDialogContentUtilityClass } from './dialogContentClasses';
 
-export const styles = (theme) => ({
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.dividers && styles.dividers),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, dividers } = styleProps;
+
+  const slots = {
+    root: ['root', dividers && 'dividers'],
+  };
+
+  return composeClasses(slots, getDialogContentUtilityClass, classes);
+};
+
+const DialogContentRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiDialogContent',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme, styleProps }) => ({
   /* Styles applied to the root element. */
-  root: {
-    flex: '1 1 auto',
-    WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
-    overflowY: 'auto',
-    padding: '8px 24px',
-    '&:first-child': {
-      // dialog without title
-      paddingTop: 20,
-    },
+  flex: '1 1 auto',
+  WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+  overflowY: 'auto',
+  padding: '8px 24px',
+  '&:first-of-type': {
+    // dialog without title
+    paddingTop: 20,
   },
   /* Styles applied to the root element if `dividers={true}`. */
-  dividers: {
+  ...(styleProps.dividers && {
     padding: '16px 24px',
     borderTop: `1px solid ${theme.palette.divider}`,
     borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-});
+  }),
+}));
 
-const DialogContent = React.forwardRef(function DialogContent(props, ref) {
-  const { classes, className, dividers = false, ...other } = props;
+const DialogContent = React.forwardRef(function DialogContent(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDialogContent',
+  });
+
+  const { className, dividers = false, ...other } = props;
+  const styleProps = { ...props, dividers };
+  const classes = useUtilityClasses(styleProps);
 
   return (
-    <div
-      className={clsx(
-        classes.root,
-        {
-          [classes.dividers]: dividers,
-        },
-        className,
-      )}
+    <DialogContentRoot
+      className={clsx(classes.root, className)}
+      styleProps={styleProps}
       ref={ref}
       {...other}
     />
@@ -63,6 +93,10 @@ DialogContent.propTypes = {
    * @default false
    */
   dividers: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiDialogContent' })(DialogContent);
+export default DialogContent;

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

@@ -1,22 +1,20 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance, createClientRender } from 'test/utils';
+import { createMount, describeConformanceV5, createClientRender } from 'test/utils';
 import DialogContent from './DialogContent';
+import classes from './dialogContentClasses';
 
 describe('<DialogContent />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<DialogContent />);
-  });
-
-  describeConformance(<DialogContent />, () => ({
+  describeConformanceV5(<DialogContent />, () => ({
     classes,
     inheritComponent: 'div',
     mount,
+    muiName: 'MuiDialogContent',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    testVariantProps: { dividers: true },
+    skip: ['componentProp', 'componentsProp'],
   }));
 
   it('should render children', () => {

packages/material-ui/src/DialogContent/dialogContentClasses.d.ts

@@ -0,0 +1,7 @@
+import { DialogContentClassKey } from './DialogContent';
+
+declare const dialogContentClasses: Record<DialogContentClassKey, string>;
+
+export function getDialogContentUtilityClass(slot: string): string;
+
+export default dialogContentClasses;

packages/material-ui/src/DialogContent/dialogContentClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getDialogContentUtilityClass(slot) {
+  return generateUtilityClass('MuiDialogContent', slot);
+}
+
+const dialogContentClasses = generateUtilityClasses('MuiDialogContent', ['root', 'dividers']);
+
+export default dialogContentClasses;

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

@@ -1,2 +1,4 @@
 export { default } from './DialogContent';
 export * from './DialogContent';
+export { default as dialogContentClasses } from './dialogContentClasses';
+export * from './dialogContentClasses';

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

@@ -1 +1,3 @@
 export { default } from './DialogContent';
+export { default as dialogContentClasses } from './dialogContentClasses';
+export * from './dialogContentClasses';