[ImageList] Refactor using CSS grid & React context

docs/pages/api-docs/image-list-item-bar.md

@@ -44,11 +44,9 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListItemBar-root</span> | Styles applied to the root element.
-| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiImageListItemBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
 | <span class="prop-name">positionBottom</span> | <span class="prop-name">.MuiImageListItemBar-positionBottom</span> | Styles applied to the root element if `position="bottom"`.
 | <span class="prop-name">positionTop</span> | <span class="prop-name">.MuiImageListItemBar-positionTop</span> | Styles applied to the root element if `position="top"`.
 | <span class="prop-name">positionBelow</span> | <span class="prop-name">.MuiImageListItemBar-positionBelow</span> | Styles applied to the root element if `position="below"`.
-| <span class="prop-name">positionBelowSubtitle</span> | <span class="prop-name">.MuiImageListItemBar-positionBelowSubtitle</span> | Styles applied to the root element if `position="below"` and a `subtitle` is provided.
 | <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiImageListItemBar-titleWrap</span> | Styles applied to the title and subtitle container element.
 | <span class="prop-name">titleWrapBelow</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapBelow</span> | Styles applied to the title and subtitle container element if `position="below"`.
 | <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.

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

@@ -32,8 +32,8 @@ The `MuiImageList` name can be used for providing [default props](/customization
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">cols</span> | <span class="prop-type">number</span> | <span class="prop-default">2</span> | Number of columns. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'ul'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
-| <span class="prop-name">gap</span> | <span class="prop-type">number</span> | <span class="prop-default">4</span> | The gap between items in px. |
-| <span class="prop-name">rowHeight</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number</span> | <span class="prop-default">'auto'</span> | The height of one row in px. |
+| <span class="prop-name">gap</span> | <span class="prop-type">number</span> | <span class="prop-default">4</span> | The gap between items in pixels. |
+| <span class="prop-name">rowHeight</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number</span> | <span class="prop-default">'auto'</span> | The height of one row in pixels. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'masonry'<br>&#124;&nbsp;'quilted'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;'woven'<br>&#124;&nbsp;string</span> | <span class="prop-default">'standard'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.

docs/src/pages/components/image-list/TitlebarImageList.js

@@ -35,7 +35,7 @@ export default function TitlebarImageList() {
           />
           <ImageListItemBar
             title={item.title}
-            subtitle={<span>by: {item.author}</span>}
+            subtitle={item.author}
             actionIcon={
               <IconButton
                 aria-label={`info about ${item.title}`}

docs/src/pages/components/image-list/TitlebarImageList.tsx

@@ -35,7 +35,7 @@ export default function TitlebarImageList() {
           />
           <ImageListItemBar
             title={item.title}
-            subtitle={<span>by: {item.author}</span>}
+            subtitle={item.author}
             actionIcon={
               <IconButton
                 aria-label={`info about ${item.title}`}

docs/src/pages/components/image-list/image-list.md

@@ -15,7 +15,7 @@ Image lists represent a collection of items in a repeated pattern. They help imp
 
 ## Standard image list
 
-Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and padding.
+Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and spacing.
 
 {{"demo": "pages/components/image-list/StandardImageList.js"}}
 

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

@@ -36,7 +36,7 @@ export interface ImageListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
      */
     gap?: number;
     /**
-     * The height of one row in px.
+     * The height of one row in pixels.
      * @default 'auto'
      */
     rowHeight?: number | 'auto';

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

@@ -104,12 +104,12 @@ ImageList.propTypes = {
    */
   component: PropTypes.elementType,
   /**
-   * The gap between items in px.
+   * The gap between items in pixels.
    * @default 4
    */
   gap: PropTypes.number,
   /**
-   * The height of one row in px.
+   * The height of one row in pixels.
    * @default 'auto'
    */
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),

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

@@ -19,16 +19,12 @@ export interface ImageListItemBarProps
   classes?: {
     /** Styles applied to the root element. */
     root?: string;
-    /** Styles applied to the root element if a `subtitle` is provided. */
-    rootSubtitle?: string;
     /** Styles applied to the root element if `position="bottom"`. */
     positionBottom?: string;
     /** Styles applied to the root element if `position="top"`. */
     positionTop?: string;
     /** Styles applied to the root element if `position="below"`. */
     positionBelow?: string;
-    /** Styles applied to the root element if `position="below"` and a `subtitle` is provided. */
-    positionBelowSubtitle?: string;
     /** Styles applied to the title and subtitle container element. */
     titleWrap?: string;
     /** Styles applied to the title and subtitle container element if `position="below"`. */

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

@@ -9,16 +9,11 @@ export const styles = (theme) => ({
     position: 'absolute',
     left: 0,
     right: 0,
-    height: 48,
     background: 'rgba(0, 0, 0, 0.5)',
     display: 'flex',
     alignItems: 'center',
     fontFamily: theme.typography.fontFamily,
   },
-  /* Styles applied to the root element if a `subtitle` is provided. */
-  rootSubtitle: {
-    height: 68,
-  },
   /* Styles applied to the root element if `position="bottom"`. */
   positionBottom: {
     bottom: 0,
@@ -29,36 +24,29 @@ export const styles = (theme) => ({
   },
   /* Styles applied to the root element if `position="below"`. */
   positionBelow: {
-    height: 40,
     position: 'relative',
     background: 'transparent',
     alignItems: 'normal',
   },
-  /* Styles applied to the root element if `position="below"` and a `subtitle` is provided. */
-  positionBelowSubtitle: {
-    height: 60,
-  },
   /* Styles applied to the title and subtitle container element. */
   titleWrap: {
     flexGrow: 1,
-    marginLeft: 16,
-    marginRight: 16,
+    padding: '12px 16px',
     color: theme.palette.common.white,
     overflow: 'hidden',
   },
   /* Styles applied to the title and subtitle container element if `position="below"`. */
   titleWrapBelow: {
-    marginTop: 4,
-    marginLeft: 0,
+    padding: '6px 0 12px',
     color: 'inherit',
   },
   /* Styles applied to the container element if `actionPosition="left"`. */
   titleWrapActionPosLeft: {
-    marginLeft: 0,
+    paddingLeft: 0,
   },
   /* Styles applied to the container element if `actionPosition="right"`. */
   titleWrapActionPosRight: {
-    marginRight: 0,
+    paddingRight: 0,
   },
   /* Styles applied to the title container element. */
   title: {
@@ -103,9 +91,7 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref)
       className={clsx(
         classes.root,
         {
-          [classes.rootSubtitle]: subtitle,
           [classes.positionBelow]: position === 'below',
-          [classes.positionBelowSubtitle]: position === 'below' && subtitle,
           [classes.positionBottom]: position === 'bottom',
           [classes.positionTop]: position === 'top',
         },

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

@@ -107,20 +107,5 @@ describe('<ImageListItemBar />', () => {
       expect(container.querySelector('div')).to.have.class(classes.root);
       expect(container.querySelector('div')).to.have.class(classes.positionBottom);
     });
-
-    it('should render a child div with the titleWrap class by default', () => {
-      const { container } = render(<ImageListItemBar title="text" />);
-
-      expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
-    });
-
-    it('should render a child div with the titleWrapActionPosRight class', () => {
-      const { container } = render(<ImageListItemBar title="text" actionIcon={<div />} />);
-
-      expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
-      expect(container.firstChild.querySelector('div')).to.have.class(
-        classes.titleWrapActionPosRight,
-      );
-    });
   });
 });