[ImageList] Migrate to emotion

Author: kodai3

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

@@ -9,6 +9,7 @@
       "type": { "name": "union", "description": "'auto'<br>&#124;&nbsp;number" },
       "default": "'auto'"
     },
+    "sx": { "type": { "name": "object" } },
     "variant": {
       "type": {
         "name": "union",
@@ -28,6 +29,6 @@
   "filename": "/packages/material-ui/src/ImageList/ImageList.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/image-list/\">Image List</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -7,6 +7,7 @@
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "gap": "The gap between items in px.",
     "rowHeight": "The height of one row in px.",
+    "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.",
     "variant": "The variant to use."
   },
   "classDescriptions": {

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

@@ -1,5 +1,7 @@
-import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { OverridableStringUnion } from '@material-ui/types';
+import * as React from 'react';
+import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ImageListPropsVariantOverrides {}
@@ -40,6 +42,10 @@ export interface ImageListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
      * @default 'auto'
      */
     rowHeight?: number | 'auto';
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * The variant to use.
      * @default 'standard'

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

@@ -1,37 +1,75 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { deepmerge } from '@material-ui/utils';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
+import { getImageListUtilityClass } from './imageListClasses';
 import ImageListContext from './ImageListContext';
 
-export const styles = {
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...styles[styleProps.variant],
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, variant } = styleProps;
+
+  const slots = {
+    root: ['root', variant],
+  };
+
+  return composeClasses(slots, getImageListUtilityClass, classes);
+};
+
+const ImageListRoot = experimentalStyled(
+  'ul',
+  {},
+  {
+    name: 'MuiImageList',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme, styleProps }) => {
   /* Styles applied to the root element. */
-  root: {
+  return {
     display: 'grid',
     overflowY: 'auto',
     listStyle: 'none',
     padding: 0,
     WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
-  },
-  /* Styles applied to the root element if `variant="masonry"`. */
-  masonry: {
-    display: 'block',
-  },
-  /* Styles applied to the root element if `variant="quilted"`. */
-  quilted: {},
-  /* Styles applied to the root element if `variant="standard"`. */
-  standard: {},
-  /* Styles applied to the root element if `variant="woven"`. */
-  woven: {},
-};
+    /* Styles applied to the root element if `variant="masonry"`. */
+    ...(styleProps.variant === 'masonry' && {
+      position: 'absolute',
+      zIndex: theme.zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0,
+    }),
+    /* Styles applied to the root element if `variant="quilted"`. */
+    ...(styleProps.variant === 'quilted' && {}),
+    /* Styles applied to the root element if `variant="standard"`. */
+    ...(styleProps.variant === 'standard' && {}),
+    /* Styles applied to the root element if `variant="woven"`. */
+    ...(styleProps.variant === 'woven' && {}),
+  };
+});
+
+const ImageList = React.forwardRef(function ImageList(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiImageList',
+  });
 
-const ImageList = React.forwardRef(function ImageList(props, ref) {
   const {
     children,
-    classes,
     className,
     cols = 2,
-    component: Component = 'ul',
+    component = 'ul',
     rowHeight = 'auto',
     gap = 4,
     style: styleProp,
@@ -64,15 +102,21 @@ const ImageList = React.forwardRef(function ImageList(props, ref) {
       ? { columnCount: cols, columnGap: gap, ...styleProp }
       : { gridTemplateColumns: `repeat(${cols}, 1fr)`, gap, ...styleProp };
 
+  const styleProps = { ...props, component, variant };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <Component
+    <ImageListRoot
+      as={component}
       className={clsx(classes.root, classes[variant], className)}
       ref={ref}
       style={style}
+      styleProps={styleProps}
       {...other}
     >
       <ImageListContext.Provider value={contextValue}>{children}</ImageListContext.Provider>
-    </Component>
+    </ImageListRoot>
   );
 });
 
@@ -117,6 +161,10 @@ ImageList.propTypes = {
    * @ignore
    */
   style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * The variant to use.
    * @default 'standard'
@@ -127,4 +175,4 @@ ImageList.propTypes = {
   ]),
 };
 
-export default withStyles(styles, { name: 'MuiImageList' })(ImageList);
+export default ImageList;

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

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import { expect } from 'chai';
-import { createClientRender, getClasses, createMount, describeConformance } from 'test/utils';
+import * as React from 'react';
+import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
 import ImageList from './ImageList';
+import classes from './imageListClasses';
 
 const itemsData = [
   {
@@ -17,15 +18,10 @@ const itemsData = [
 ];
 
 describe('<ImageList />', () => {
-  let classes;
   const mount = createMount();
   const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<ImageList />);
-  });
-
-  describeConformance(
+  describeConformanceV5(
     <ImageList>
       <div />
     </ImageList>,
@@ -35,6 +31,9 @@ describe('<ImageList />', () => {
       mount,
       refInstanceof: window.HTMLUListElement,
       testComponentPropWith: 'li',
+      muiName: 'MuiImageList',
+      testVariantProps: { variant: 'masonry' },
+      skip: ['componentProp', 'componentsProp'],
     }),
   );
 

packages/material-ui/src/ImageList/imageListClasses.d.ts

@@ -0,0 +1,13 @@
+export interface ImageListClasses {
+  root: string;
+  masonry: string;
+  quilted: string;
+  standard: string;
+  woven: string;
+}
+
+declare const imageListClasses: ImageListClasses;
+
+export function getImageListUtilityClass(slot: string): string;
+
+export default imageListClasses;

packages/material-ui/src/ImageList/imageListClasses.js

@@ -0,0 +1,15 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getImageListUtilityClass(slot) {
+  return generateUtilityClass('MuiImageList', slot);
+}
+
+const imageListClasses = generateUtilityClasses('MuiImageList', [
+  'root',
+  'masonry',
+  'quilted',
+  'standard',
+  'woven',
+]);
+
+export default imageListClasses;

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

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

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

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