[List] Migrate ListItem to emotion

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

@@ -18,7 +18,8 @@
     "disabled": { "type": { "name": "bool" } },
     "disableGutters": { "type": { "name": "bool" } },
     "divider": { "type": { "name": "bool" } },
-    "selected": { "type": { "name": "bool" } }
+    "selected": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "ListItem",
   "styles": {
@@ -47,6 +48,6 @@
   "filename": "/packages/material-ui/src/ListItem/ListItem.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/lists/\">Lists</a></li>\n<li><a href=\"/components/transfer-list/\">Transfer List</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -13,7 +13,8 @@
     "disabled": "If <code>true</code>, the component is disabled.",
     "disableGutters": "If <code>true</code>, the left and right padding is removed.",
     "divider": "If <code>true</code>, a 1px light border is added to the bottom of the list item.",
-    "selected": "Use to apply selected styling."
+    "selected": "Use to apply selected styling.",
+    "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": {

framer/scripts/framerConfig.js

@@ -198,7 +198,7 @@ export const componentSettings = {
     template: 'icon_button.txt',
   },
   ListItem: {
-    ignoredProps: ['children', 'ContainerComponent', 'ContainerProps'],
+    ignoredProps: ['children', 'ContainerComponent', 'ContainerProps', 'sx'],
     propValues: {
       width: 568,
       height: 48,

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

@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { getClasses, createMount, describeConformance, createClientRender } from 'test/utils';
 import ListSubheader from '../ListSubheader';
 import List from './List';
-import ListItem from '../ListItem';
+import ListItem, { listItemClasses } from '../ListItem';
 
 describe('<List />', () => {
   const mount = createMount();
@@ -76,8 +76,6 @@ describe('<List />', () => {
         </List>,
       );
 
-      const listItemClasses = getClasses(<ListItem />);
-
       const liItems = container.querySelectorAll('li');
       for (let i = 0; i < liItems.length; i += 1) {
         expect(liItems[i]).to.have.class(listItemClasses.dense);

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '@material-ui/core/styles';
 import { ExtendButtonBase } from '../ButtonBase';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
@@ -83,6 +85,10 @@ export interface ListItemTypeMap<P, D extends React.ElementType> {
      * @default false
      */
     selected?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }

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

@@ -1,73 +1,117 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils';
-import withStyles from '../styles/withStyles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { deepmerge, chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import { alpha } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
 import isMuiElement from '../utils/isMuiElement';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 import useForkRef from '../utils/useForkRef';
 import ListContext from '../List/ListContext';
+import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 
-export const styles = (theme) => ({
-  /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
-  root: {
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    position: 'relative',
-    textDecoration: 'none',
-    width: '100%',
-    boxSizing: 'border-box',
-    textAlign: 'left',
-    paddingTop: 8,
-    paddingBottom: 8,
-    '&$focusVisible': {
-      backgroundColor: theme.palette.action.focus,
-    },
-    '&$selected': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-      '&$focusVisible': {
-        backgroundColor: alpha(
-          theme.palette.primary.main,
-          theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
-        ),
-      },
-    },
-    '&$disabled': {
-      opacity: theme.palette.action.disabledOpacity,
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.dense && styles.dense),
+    ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
+    ...(styleProps.divider && styles.divider),
+    ...(!styleProps.disableGutters && styles.gutters),
+    ...(styleProps.button && styles.button),
+    ...(styleProps.hasSecondaryAction && styles.secondaryAction),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const {
+    dense,
+    alignItems,
+    divider,
+    disableGutters,
+    hasSecondaryAction,
+    selected,
+    disabled,
+    button,
+    classes,
+  } = styleProps;
+
+  const slots = {
+    root: [
+      'root',
+      dense && 'dense',
+      !disableGutters && 'gutters',
+      divider && 'divider',
+      disabled && 'disabled',
+      button && 'button',
+      alignItems === 'flex-start' && 'alignItemsFlexStart',
+      hasSecondaryAction && 'secondaryAction',
+      selected && 'selected',
+    ],
+    container: ['container'],
+  };
+
+  return composeClasses(slots, getListItemUtilityClass, classes);
+};
+
+const ListItemRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiListItem',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme, styleProps }) => ({
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  position: 'relative',
+  textDecoration: 'none',
+  width: '100%',
+  boxSizing: 'border-box',
+  textAlign: 'left',
+  paddingTop: 8,
+  paddingBottom: 8,
+  [`&.${listItemClasses.focusVisible}`]: {
+    backgroundColor: theme.palette.action.focus,
+  },
+  [`&.${listItemClasses.selected}`]: {
+    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    [`&.${listItemClasses.focusVisible}`]: {
+      backgroundColor: alpha(
+        theme.palette.primary.main,
+        theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+      ),
     },
   },
-  /* Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
-  container: {
-    position: 'relative',
+  [`&.${listItemClasses.disabled}`]: {
+    opacity: theme.palette.action.disabledOpacity,
   },
-  /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
-  focusVisible: {},
   /* Styles applied to the component element if dense. */
-  dense: {
+  ...(styleProps.dense && {
     paddingTop: 4,
     paddingBottom: 4,
-  },
+  }),
   /* Styles applied to the component element if `alignItems="flex-start"`. */
-  alignItemsFlexStart: {
+  ...(styleProps.alignItems === 'flex-start' && {
     alignItems: 'flex-start',
-  },
-  /* Pseudo-class applied to the inner `component` element if `disabled={true}`. */
-  disabled: {},
+  }),
   /* Styles applied to the inner `component` element if `divider={true}`. */
-  divider: {
+  ...(styleProps.divider && {
     borderBottom: `1px solid ${theme.palette.divider}`,
     backgroundClip: 'padding-box',
-  },
+  }),
   /* Styles applied to the inner `component` element unless `disableGutters={true}`. */
-  gutters: {
+  ...(!styleProps.disableGutters && {
     paddingLeft: 16,
     paddingRight: 16,
-  },
+  }),
   /* Styles applied to the inner `component` element if `button={true}`. */
-  button: {
+  ...(styleProps.button && {
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest,
     }),
@@ -79,7 +123,7 @@ export const styles = (theme) => ({
         backgroundColor: 'transparent',
       },
     },
-    '&$selected:hover': {
+    [`&.${listItemClasses.selected}:hover`]: {
       backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
@@ -89,27 +133,37 @@ export const styles = (theme) => ({
         backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       },
     },
-  },
+  }),
   /* Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
-  secondaryAction: {
+  ...(styleProps.hasSecondaryAction && {
     // Add some space to avoid collision as `ListItemSecondaryAction`
     // is absolutely positioned.
     paddingRight: 48,
+  }),
+}));
+
+const ListItemContainer = experimentalStyled(
+  'li',
+  {},
+  {
+    name: 'MuiListItem',
+    slot: 'Container',
+    overridesResolver,
   },
-  /* Pseudo-class applied to the root element if `selected={true}`. */
-  selected: {},
+)({
+  position: 'relative',
 });
 
 /**
  * Uses an additional container component if `ListItemSecondaryAction` is the last child.
  */
-const ListItem = React.forwardRef(function ListItem(props, ref) {
+const ListItem = React.forwardRef(function ListItem(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiListItem' });
   const {
     alignItems = 'center',
     autoFocus = false,
     button = false,
     children: childrenProp,
-    classes,
     className,
     component: componentProp,
     ContainerComponent = 'li',
@@ -147,23 +201,25 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
   const hasSecondaryAction =
     children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
 
+  const styleProps = {
+    ...props,
+    alignItems,
+    autoFocus,
+    button,
+    dense: childContext.dense,
+    disabled,
+    disableGutters,
+    divider,
+    hasSecondaryAction,
+    selected,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   const handleRef = useForkRef(listItemRef, ref);
 
   const componentProps = {
-    className: clsx(
-      classes.root,
-      {
-        [classes.dense]: childContext.dense,
-        [classes.gutters]: !disableGutters,
-        [classes.divider]: divider,
-        [classes.disabled]: disabled,
-        [classes.button]: button,
-        [classes.alignItemsFlexStart]: alignItems === 'flex-start',
-        [classes.secondaryAction]: hasSecondaryAction,
-        [classes.selected]: selected,
-      },
-      className,
-    ),
+    className: clsx(classes.root, className),
     disabled,
     ...other,
   };
@@ -172,7 +228,11 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
 
   if (button) {
     componentProps.component = componentProp || 'div';
-    componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
+    componentProps.focusVisibleClassName = clsx(
+      listItemClasses.focusVisible,
+      focusVisibleClassName,
+    );
+
     Component = ButtonBase;
   }
 
@@ -191,23 +251,26 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
 
     return (
       <ListContext.Provider value={childContext}>
-        <ContainerComponent
+        <ListItemContainer
+          as={ContainerComponent}
           className={clsx(classes.container, ContainerClassName)}
           ref={handleRef}
           {...ContainerProps}
         >
-          <Component {...componentProps}>{children}</Component>
+          <ListItemRoot as={Component} styleProps={styleProps} {...componentProps}>
+            {children}
+          </ListItemRoot>
           {children.pop()}
-        </ContainerComponent>
+        </ListItemContainer>
       </ListContext.Provider>
     );
   }
 
   return (
     <ListContext.Provider value={childContext}>
-      <Component ref={handleRef} {...componentProps}>
+      <ListItemRoot as={Component} ref={handleRef} styleProps={styleProps} {...componentProps}>
         {children}
-      </Component>
+      </ListItemRoot>
     </ListContext.Provider>
   );
 });
@@ -315,6 +378,10 @@ ListItem.propTypes = {
    * @default false
    */
   selected: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiListItem' })(ListItem);
+export default ListItem;