[Dialog] Migrate DialogContentText to emotion

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

@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "DialogContentText",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDialogContentText" },
@@ -10,6 +11,6 @@
   "filename": "/packages/material-ui/src/DialogContentText/DialogContentText.js",
   "inheritance": { "component": "Typography", "pathname": "/api/typography/" },
   "demos": "<ul><li><a href=\"/components/dialogs/\">Dialogs</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -2,7 +2,8 @@
   "componentDescription": "",
   "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."
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "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/DialogContentText/DialogContentText.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { TypographyTypeMap } from '../Typography';
 import { OverrideProps, OverridableComponent } from '../OverridableComponent';
+import { Theme } from '../styles';
 
 export interface DialogContentTextTypeMap<
   P = {},
@@ -14,6 +16,10 @@ export interface DialogContentTextTypeMap<
       /** Styles applied to the root element. */
       root?: string;
     };
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   } & Omit<TypographyTypeMap['props'], 'classes'>;
   defaultComponent: D;
 }

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

@@ -1,17 +1,57 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { deepmerge } from '@material-ui/utils';
+import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import Typography from '../Typography';
+import { getDialogContentTextUtilityClass } from './dialogContentTextClasses';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {
-    marginBottom: 12,
-  },
+const overridesResolver = (props, styles) => {
+  return deepmerge(styles.root || {}, {});
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  const composedClasses = composeClasses(slots, getDialogContentTextUtilityClass, classes);
+
+  return {
+    ...classes, // forward classes to the Typography
+    ...composedClasses,
+  };
 };
 
-const DialogContentText = React.forwardRef(function DialogContentText(props, ref) {
-  return <Typography component="p" variant="body1" color="textSecondary" ref={ref} {...props} />;
+const DialogContentTextRoot = experimentalStyled(
+  Typography,
+  { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' },
+  {
+    name: 'MuiDialogContentText',
+    slot: 'Root',
+    overridesResolver,
+  },
+)({ marginBottom: 12 });
+
+const DialogContentText = React.forwardRef(function DialogContentText(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiDialogContentText' });
+  const { children, ...styleProps } = props;
+  const classes = useUtilityClasses(styleProps);
+
+  return (
+    <DialogContentTextRoot
+      component="p"
+      variant="body1"
+      color="text.secondary"
+      ref={ref}
+      styleProps={styleProps}
+      {...props}
+      classes={classes}
+    />
+  );
 });
 
 DialogContentText.propTypes /* remove-proptypes */ = {
@@ -27,6 +67,10 @@ DialogContentText.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiDialogContentText' })(DialogContentText);
+export default DialogContentText;

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

@@ -1,23 +1,22 @@
 import * as React from 'react';
-import { createClientRender, getClasses, describeConformance, createMount } from 'test/utils';
-import DialogContentText from './DialogContentText';
-import Typography from '../Typography';
+import { createClientRender, describeConformanceV5, createMount } from 'test/utils';
+import Typography from '@material-ui/core/Typography';
+import DialogContentText, {
+  dialogContentTextClasses as classes,
+} from '@material-ui/core/DialogContentText';
 
 describe('<DialogContentText />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<DialogContentText />);
-  });
-
-  describeConformance(<DialogContentText>foo</DialogContentText>, () => ({
+  describeConformanceV5(<DialogContentText>foo</DialogContentText>, () => ({
     classes,
     inheritComponent: Typography,
+    render,
     mount,
+    muiName: 'MuiDialogContentText',
     refInstanceof: window.HTMLParagraphElement,
-    skip: ['componentProp'],
+    skip: ['componentsProp', 'themeVariants'],
   }));
 
   describe('prop: children', () => {

packages/material-ui/src/DialogContentText/dialogContentTextClasses.d.ts

@@ -0,0 +1,9 @@
+import { DialogContentTextClassKey } from './DialogContentText';
+
+export type DialogContentTextClasses = Record<DialogContentTextClassKey, string>;
+
+declare const dialogContentTextClasses: DialogContentTextClasses;
+
+export function getDialogContentTextUtilityClass(slot: string): string;
+
+export default dialogContentTextClasses;

packages/material-ui/src/DialogContentText/dialogContentTextClasses.js

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

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

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