[List] Migrate ListItemAvatar to emotion (#24656)

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

@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "ListItemAvatar",
   "styles": {
@@ -14,6 +15,6 @@
   "filename": "/packages/material-ui/src/ListItemAvatar/ListItemAvatar.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-avatar/list-item-avatar.json

@@ -2,7 +2,8 @@
   "componentDescription": "A simple wrapper to apply `List` styles to an `Avatar`.",
   "propDescriptions": {
     "children": "The content of the component, normally an <code>Avatar</code>.",
-    "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/ListItemAvatar/ListItemAvatar.d.ts

@@ -1,4 +1,5 @@
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 
 export interface ListItemAvatarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
@@ -14,6 +15,10 @@ export interface ListItemAvatarProps extends StandardProps<React.HTMLAttributes<
     /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
     alignItemsFlexStart?: string;
   };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type ListItemAvatarClassKey = keyof NonNullable<ListItemAvatarProps['classes']>;

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

@@ -1,37 +1,67 @@
 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 ListContext from '../List/ListContext';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
+import { getListItemAvatarUtilityClass } from './listItemAvatarClasses';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {
-    minWidth: 56,
-    flexShrink: 0,
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(styleProps.alignItems === 'flex-start' && styles.alignItemsFlexStart),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { alignItems, classes } = styleProps;
+
+  const slots = {
+    root: ['root', alignItems === 'flex-start' && 'alignItemsFlexStart'],
+  };
+
+  return composeClasses(slots, getListItemAvatarUtilityClass, classes);
+};
+
+const ListItemAvatarRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiListItemAvatar',
+    slot: 'Root',
+    overridesResolver,
   },
+)(({ styleProps }) => ({
+  /* Styles applied to the root element. */
+  minWidth: 56,
+  flexShrink: 0,
   /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
-  alignItemsFlexStart: {
+  ...(styleProps.alignItems === 'flex-start' && {
     marginTop: 8,
-  },
-};
+  }),
+}));
 
 /**
  * A simple wrapper to apply `List` styles to an `Avatar`.
  */
-const ListItemAvatar = React.forwardRef(function ListItemAvatar(props, ref) {
-  const { classes, className, ...other } = props;
+const ListItemAvatar = React.forwardRef(function ListItemAvatar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiListItemAvatar',
+  });
+
+  const { className, ...other } = props;
   const context = React.useContext(ListContext);
+  const styleProps = { ...props, alignItems: context.alignItems };
+  const classes = useUtilityClasses(styleProps);
 
   return (
-    <div
-      className={clsx(
-        classes.root,
-        {
-          [classes.alignItemsFlexStart]: context.alignItems === 'flex-start',
-        },
-        className,
-      )}
+    <ListItemAvatarRoot
+      className={clsx(classes.root, className)}
+      styleProps={styleProps}
       ref={ref}
       {...other}
     />
@@ -55,6 +85,10 @@ ListItemAvatar.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiListItemAvatar' })(ListItemAvatar);
+export default ListItemAvatar;

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

@@ -1,29 +1,22 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
+import { createMount, describeConformanceV5 } from 'test/utils';
 import ListItemAvatar from './ListItemAvatar';
+import classes from './listItemAvatarClasses';
 
 describe('<ListItemAvatar />', () => {
   const mount = createMount();
-  let classes;
 
-  before(() => {
-    classes = getClasses(
-      <ListItemAvatar>
-        <div />
-      </ListItemAvatar>,
-    );
-  });
-
-  describeConformance(
+  describeConformanceV5(
     <ListItemAvatar>
       <div />
     </ListItemAvatar>,
     () => ({
       classes,
       inheritComponent: 'div',
       mount,
+      muiName: 'MuiListItemAvatar',
       refInstanceof: window.HTMLDivElement,
-      skip: ['componentProp'],
+      skip: ['componentProp', 'componentsProp', 'themeVariants'],
     }),
   );
 });

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

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

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

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

packages/material-ui/src/ListItemAvatar/listItemAvatarClasses.d.ts

@@ -0,0 +1,10 @@
+export interface ListItemAvatarClasses {
+  root: string;
+  alignItemsFlexStart: string;
+}
+
+declare const listItemAvatarClasses: ListItemAvatarClasses;
+
+export function getListItemAvatarUtilityClass(slot: string): string;
+
+export default listItemAvatarClasses;

packages/material-ui/src/ListItemAvatar/listItemAvatarClasses.js

@@ -0,0 +1,12 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getListItemAvatarUtilityClass(slot) {
+  return generateUtilityClass('MuiListItemAvatar', slot);
+}
+
+const listItemAvatarClasses = generateUtilityClasses('MuiListItemAvatar', [
+  'root',
+  'alignItemsFlexStart',
+]);
+
+export default listItemAvatarClasses;