[ImageList] Refactor using CSS grid & React context (#22395)

docs/pages/api-docs/icon-button.md

@@ -72,5 +72,4 @@ You can take advantage of this behavior to [target nested components](/guides/ap
 ## Demos
 
 - [Buttons](/components/buttons/)
-- [Image List](/components/image-list/)
 

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

@@ -28,12 +28,12 @@ The `MuiImageListItemBar` name can be used for providing [default props](/custom
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">actionIcon</span> | <span class="prop-type">node</span> |  | An IconButton element to be used as secondary action target (primary action target is the tile itself). |
+| <span class="prop-name">actionIcon</span> | <span class="prop-type">node</span> |  | An IconButton element to be used as secondary action target (primary action target is the item itself). |
 | <span class="prop-name">actionPosition</span> | <span class="prop-type">'left'<br>&#124;&nbsp;'right'</span> | <span class="prop-default">'right'</span> | Position of secondary action IconButton. |
 | <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">position</span> | <span class="prop-type">'below'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Position of the title bar. |
 | <span class="prop-name">subtitle</span> | <span class="prop-type">node</span> |  | String or element serving as subtitle (support text). |
-| <span class="prop-name">title</span> | <span class="prop-type">node</span> |  | Title to be displayed on tile. |
-| <span class="prop-name">titlePosition</span> | <span class="prop-type">'bottom'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Position of the title bar. |
+| <span class="prop-name">title</span> | <span class="prop-type">node</span> |  | Title to be displayed. |
 
 The `ref` is forwarded to the root element.
 
@@ -44,10 +44,11 @@ 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">titlePositionBottom</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
-| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
-| <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">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"`.
 | <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
 | <span class="prop-name">title</span> | <span class="prop-name">.MuiImageListItemBar-title</span> | Styles applied to the title container element.

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

@@ -28,11 +28,11 @@ The `MuiImageListItem` name can be used for providing [default props](/customiza
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case ImageListItem takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | While you can pass any node as children, the main use case is for an img. |
 | <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">1</span> | Width of the tile in number of grid cells. |
+| <span class="prop-name">cols</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Width of the item in number of grid columns. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
-| <span class="prop-name">rows</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Height of the tile in number of grid cells. |
+| <span class="prop-name">rows</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Height of the item in number of grid rows. |
 
 The `ref` is forwarded to the root element.
 
@@ -43,9 +43,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">.MuiImageListItem-root</span> | Styles applied to the root element.
-| <span class="prop-name">tile</span> | <span class="prop-name">.MuiImageListItem-tile</span> | Styles applied to the `div` element that wraps the children.
-| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">.MuiImageListItem-imgFullHeight</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
-| <span class="prop-name">imgFullWidth</span> | <span class="prop-name">.MuiImageListItem-imgFullWidth</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| <span class="prop-name">img</span> | <span class="prop-name">.MuiImageListItem-img</span> | Styles applied to an `img` element to ensure it covers the item.
+| <span class="prop-name">standard</span> | <span class="prop-name">.MuiImageListItem-standard</span> | Styles applied to the root element if `variant="standard"`.
+| <span class="prop-name">woven</span> | <span class="prop-name">.MuiImageListItem-woven</span> | Styles applied to the root element if `variant="woven"`.
 
 You can override the style of the component thanks to one of these customization points:
 

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

@@ -28,12 +28,13 @@ The `MuiImageList` name can be used for providing [default props](/customization
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">cellHeight</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number</span> | <span class="prop-default">180</span> | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
-| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | Image Tiles that will be in Image List. |
+| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | Items that will be in the image list. |
 | <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">spacing</span> | <span class="prop-type">number</span> | <span class="prop-default">4</span> | Number of px for the spacing between tiles. |
+| <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">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.
 
@@ -44,6 +45,10 @@ 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">.MuiImageList-root</span> | Styles applied to the root element.
+| <span class="prop-name">masonry</span> | <span class="prop-name">.MuiImageList-masonry</span> | Styles applied to the root element if `variant="masonry"`.
+| <span class="prop-name">quilted</span> | <span class="prop-name">.MuiImageList-quilted</span> | Styles applied to the root element if `variant="quilted"`.
+| <span class="prop-name">standard</span> | <span class="prop-name">.MuiImageList-standard</span> | Styles applied to the root element if `variant="standard"`.
+| <span class="prop-name">woven</span> | <span class="prop-name">.MuiImageList-woven</span> | Styles applied to the root element if `variant="woven"`.
 
 You can override the style of the component thanks to one of these customization points:
 

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

@@ -61,6 +61,5 @@ If that's not sufficient, you can check the [implementation of the component](ht
 
 ## Demos
 
-- [Image List](/components/image-list/)
 - [Lists](/components/lists/)