[List] Migrate ListItemText to emotion

docs/pages/api-docs/list-item-text.json

@@ -7,7 +7,8 @@
     "primary": { "type": { "name": "node" } },
     "primaryTypographyProps": { "type": { "name": "object" } },
     "secondary": { "type": { "name": "node" } },
-    "secondaryTypographyProps": { "type": { "name": "object" } }
+    "secondaryTypographyProps": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "ListItemText",
   "styles": {
@@ -20,6 +21,6 @@
   "filename": "/packages/material-ui/src/ListItemText/ListItemText.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/lists/\">Lists</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/list-item-text/list-item-text.json

@@ -8,7 +8,8 @@
     "primary": "The main content element.",
     "primaryTypographyProps": "These props will be forwarded to the primary typography component (as long as disableTypography is not <code>true</code>).",
     "secondary": "The secondary content element.",
-    "secondaryTypographyProps": "These props will be forwarded to the secondary typography component (as long as disableTypography is not <code>true</code>)."
+    "secondaryTypographyProps": "These props will be forwarded to the secondary typography component (as long as disableTypography is not <code>true</code>).",
+    "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/ListItemText/ListItemText.d.ts

@@ -1,5 +1,6 @@
+import { SxProps } from '@material-ui/system';
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TypographyProps } from '../Typography';
 
 export interface ListItemTextProps<
@@ -65,6 +66,10 @@ export interface ListItemTextProps<
     SecondaryTypographyComponent,
     { component?: SecondaryTypographyComponent }
   >;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type ListItemTextClassKey = keyof NonNullable<ListItemTextProps['classes']>;

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

@@ -1,39 +1,90 @@
 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 Typography from '../Typography';
 import ListContext from '../List/ListContext';
+import useThemeProps from '../styles/useThemeProps';
+import experimentalStyled from '../styles/experimentalStyled';
+import { getListItemTextUtilityClass } from './listItemTextClasses';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {
-    flex: '1 1 auto',
-    minWidth: 0,
-    marginTop: 4,
-    marginBottom: 4,
+const overridersResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.inset && styles.inset),
+    ...(styleProps.primary && styleProps.secondary && styles.multiline),
+    ...(styleProps.dense && styles.dense),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, inset, primary, secondary, dense } = styleProps;
+
+  const slots = {
+    root: ['root', inset && 'inset', dense && 'dense'],
+    primary: [primary && 'primary'],
+    secondary: [secondary && 'secondary'],
+  };
+
+  return composeClasses(slots, getListItemTextUtilityClass, classes);
+};
+
+const ListItemTextRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiListItemText',
+    slot: 'Root',
+    overridersResolver,
   },
+)(({ styleProps }) => ({
+  /* Styles applied to the root element. */
+  flex: '1 1 auto',
+  minWidth: 0,
+  marginTop: 4,
+  marginBottom: 4,
   /* Styles applied to the Typography component if primary and secondary are set. */
-  multiline: {
-    marginTop: 6,
-    marginBottom: 6,
-  },
-  /* Styles applied to the Typography component if dense. */
-  dense: {},
+  ...(styleProps.primary &&
+    styleProps.secondary && {
+      marginTop: 6,
+      marginBottom: 6,
+    }),
   /* Styles applied to the root element if `inset={true}`. */
-  inset: {
+  ...(styleProps.inset && {
     paddingLeft: 56,
+  }),
+  /* Styles applied to the Typography component if dense. */
+  ...(styleProps.dense && {}),
+}));
+
+const ListItemTextPrimary = experimentalStyled(
+  Typography,
+  {},
+  {
+    name: 'MuiListItemText',
+    slot: 'Primary',
   },
+)(() => ({
   /* Styles applied to the primary `Typography` component. */
-  primary: {},
+}));
+
+const ListItemTextSecondary = experimentalStyled(
+  Typography,
+  {},
+  {
+    name: 'MuiListItemText',
+    slot: 'Secondary',
+  },
+)(() => ({
   /* Styles applied to the secondary `Typography` component. */
-  secondary: {},
-};
+}));
 
-const ListItemText = React.forwardRef(function ListItemText(props, ref) {
+const ListItemText = React.forwardRef(function ListItemText(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiListItemText' });
   const {
     children,
-    classes,
     className,
     disableTypography = false,
     inset = false,
@@ -45,53 +96,58 @@ const ListItemText = React.forwardRef(function ListItemText(props, ref) {
   } = props;
   const { dense } = React.useContext(ListContext);
 
+  const styleProps = {
+    ...props,
+    inset,
+    primary: primaryProp,
+    secondary: secondaryProp,
+    dense,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   let primary = primaryProp != null ? primaryProp : children;
   if (primary != null && primary.type !== Typography && !disableTypography) {
     primary = (
-      <Typography
+      <ListItemTextPrimary
         variant={dense ? 'body2' : 'body1'}
         className={classes.primary}
         component="span"
         display="block"
+        styleProps={styleProps}
         {...primaryTypographyProps}
       >
         {primary}
-      </Typography>
+      </ListItemTextPrimary>
     );
   }
 
   let secondary = secondaryProp;
   if (secondary != null && secondary.type !== Typography && !disableTypography) {
     secondary = (
-      <Typography
+      <ListItemTextSecondary
         variant="body2"
         className={classes.secondary}
         color="textSecondary"
         display="block"
+        styleProps={styleProps}
         {...secondaryTypographyProps}
       >
         {secondary}
-      </Typography>
+      </ListItemTextSecondary>
     );
   }
 
   return (
-    <div
-      className={clsx(
-        classes.root,
-        {
-          [classes.dense]: dense,
-          [classes.inset]: inset,
-          [classes.multiline]: primary && secondary,
-        },
-        className,
-      )}
+    <ListItemTextRoot
+      className={clsx(classes.root, className)}
+      styleProps={styleProps}
       ref={ref}
       {...other}
     >
       {primary}
       {secondary}
-    </div>
+    </ListItemTextRoot>
   );
 });
 
@@ -144,6 +200,10 @@ ListItemText.propTypes = {
    * (as long as disableTypography is not `true`).
    */
   secondaryTypographyProps: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);
+export default ListItemText;

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

@@ -1,24 +1,22 @@
 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 Typography, { typographyClasses } from '../Typography';
 import ListItemText from './ListItemText';
+import classes from './listItemTextClasses';
 
 describe('<ListItemText />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<ListItemText />);
-  });
-
-  describeConformance(<ListItemText />, () => ({
+  describeConformanceV5(<ListItemText />, () => ({
     classes,
     inheritComponent: 'div',
     mount,
+    name: 'MuiListItemText',
+    testVariantProps: { inset: true },
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp'],
   }));
 
   it('should render with inset class', () => {

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

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

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

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

packages/material-ui/src/ListItemText/listItemTextClasses.d.ts

@@ -0,0 +1,14 @@
+export interface ListItemTextClasses {
+  root: string;
+  multiline: string;
+  dense: string;
+  inset: string;
+  primary: string;
+  secondary: string;
+}
+
+declare const listItemTextClasses: ListItemTextClasses;
+
+export function getListItemTextUtilityClass(slot: string): string;
+
+export default listItemTextClasses;

packages/material-ui/src/ListItemText/listItemTextClasses.js

@@ -0,0 +1,16 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getListItemTextUtilityClass(slot) {
+  return generateUtilityClass('MuiListItemText', slot);
+}
+
+const listItemTextClasses = generateUtilityClasses('MuiListItemText', [
+  'root',
+  'multiline',
+  'dense',
+  'inset',
+  'primary',
+  'secondary',
+]);
+
+export default listItemTextClasses;