mui · mbrookes · Aug 27, 2020 · Aug 27, 2020
diff --git a/docs/pages/api-docs/image-list-tile-bar.js → docs/pages/api-docs/image-list-item-bar.js b/docs/pages/api-docs/image-list-tile-bar.js → docs/pages/api-docs/image-list-item-bar.js
@@ -2,8 +2,8 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const pageFilename = 'api/image-list-tile-bar';
-const requireRaw = require.context('!raw-loader!./', false, /\/image-list-tile-bar\.md$/);
+const pageFilename = 'api/image-list-item-bar';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item-bar\.md$/);
 
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;

diff --git a/docs/pages/api-docs/image-list-tile-bar.md → docs/pages/api-docs/image-list-item-bar.md b/docs/pages/api-docs/image-list-tile-bar.md → docs/pages/api-docs/image-list-item-bar.md
@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
+filename: /packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# ImageListTileBar API
+# ImageListItemBar API
 
-<p class="description">The API documentation of the ImageListTileBar React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the ImageListItemBar React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 // or
-import { ImageListTileBar } from '@material-ui/core';
+import { ImageListItemBar } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -22,7 +22,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 ## Component name
 
-The `MuiImageListTileBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+The `MuiImageListItemBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
 
 ## Props
 
@@ -43,25 +43,25 @@ 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">.MuiImageListTileBar-root</span> | Styles applied to the root element.
-| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">.MuiImageListTileBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
-| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiImageListTileBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
-| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiImageListTileBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
-| <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiImageListTileBar-titleWrap</span> | Styles applied to the title and subtitle container element.
-| <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiImageListTileBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.
-| <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">.MuiImageListTileBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
-| <span class="prop-name">title</span> | <span class="prop-name">.MuiImageListTileBar-title</span> | Styles applied to the title container element.
-| <span class="prop-name">subtitle</span> | <span class="prop-name">.MuiImageListTileBar-subtitle</span> | Styles applied to the subtitle container element.
-| <span class="prop-name">actionIcon</span> | <span class="prop-name">.MuiImageListTileBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
-| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">.MuiImageListTileBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
+| <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">titleWrap</span> | <span class="prop-name">.MuiImageListItemBar-titleWrap</span> | Styles applied to the title and subtitle container element.
+| <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.
+| <span class="prop-name">subtitle</span> | <span class="prop-name">.MuiImageListItemBar-subtitle</span> | Styles applied to the subtitle container element.
+| <span class="prop-name">actionIcon</span> | <span class="prop-name">.MuiImageListItemBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
+| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">.MuiImageListItemBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
 
 You can override the style of the component thanks to one of these customization points:
 
 - With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js) for more detail.
 
 ## Demos
 

diff --git a/docs/pages/api-docs/image-list-tile.js → docs/pages/api-docs/image-list-item.js b/docs/pages/api-docs/image-list-tile.js → docs/pages/api-docs/image-list-item.js
@@ -2,8 +2,8 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const pageFilename = 'api/image-list-tile';
-const requireRaw = require.context('!raw-loader!./', false, /\/image-list-tile\.md$/);
+const pageFilename = 'api/image-list-item';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item\.md$/);
 
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;

diff --git a/docs/pages/api-docs/image-list-tile.md → docs/pages/api-docs/image-list-item.md b/docs/pages/api-docs/image-list-tile.md → docs/pages/api-docs/image-list-item.md
@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui/src/ImageListTile/ImageListTile.js
+filename: /packages/material-ui/src/ImageListItem/ImageListItem.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# ImageListTile API
+# ImageListItem API
 
-<p class="description">The API documentation of the ImageListTile React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the ImageListItem React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import ImageListTile from '@material-ui/core/ImageListTile';
+import ImageListItem from '@material-ui/core/ImageListItem';
 // or
-import { ImageListTile } from '@material-ui/core';
+import { ImageListItem } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -22,13 +22,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 ## Component name
 
-The `MuiImageListTile` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+The `MuiImageListItem` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
 
 ## Props
 
 | 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 ImageListTile 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> |  | 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">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">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. |
@@ -42,18 +42,18 @@ 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">.MuiImageListTile-root</span> | Styles applied to the root element.
-| <span class="prop-name">tile</span> | <span class="prop-name">.MuiImageListTile-tile</span> | Styles applied to the `div` element that wraps the children.
-| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">.MuiImageListTile-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">.MuiImageListTile-imgFullWidth</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| <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.
 
 You can override the style of the component thanks to one of these customization points:
 
 - With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListTile/ImageListTile.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListItem/ImageListItem.js) for more detail.
 
 ## Demos
 

diff --git a/docs/src/pages/components/cards/cards.md b/docs/src/pages/components/cards/cards.md
@@ -29,7 +29,7 @@ Set `variant="outlined"` to render an outlined card.
 
 ## Complex Interaction
 
-On desktop, card content can expand.
+On desktop, card content can expand. (Click the downward chevron to view the recipe.)
 
 {{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}}
 

diff --git a/docs/src/pages/components/image-list/AdvancedImageList.js b/docs/src/pages/components/image-list/AdvancedImageList.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -56,13 +56,13 @@ export default function AdvancedImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map((tile) => (
-          <ImageListTile
+          <ImageListItem
             key={tile.img}
             cols={tile.featured ? 2 : 1}
             rows={tile.featured ? 2 : 1}
           >
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               titlePosition="top"
               actionIcon={
@@ -76,7 +76,7 @@ export default function AdvancedImageList() {
               actionPosition="left"
               className={classes.titleBar}
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/AdvancedImageList.tsx b/docs/src/pages/components/image-list/AdvancedImageList.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -58,13 +58,13 @@ export default function AdvancedImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map((tile) => (
-          <ImageListTile
+          <ImageListItem
             key={tile.img}
             cols={tile.featured ? 2 : 1}
             rows={tile.featured ? 2 : 1}
           >
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               titlePosition="top"
               actionIcon={
@@ -78,7 +78,7 @@ export default function AdvancedImageList() {
               actionPosition="left"
               className={classes.titleBar}
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/BasicImageList.js b/docs/src/pages/components/image-list/BasicImageList.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
+import ImageListItem from '@material-ui/core/ImageListItem';
 import tileData from './tileData';
 
 const useStyles = makeStyles((theme) => ({
@@ -43,9 +43,9 @@ export default function BasicImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={160} className={classes.gridList} cols={3}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.cols || 1}>
+          <ImageListItem key={tile.img} cols={tile.cols || 1}>
             <img src={tile.img} alt={tile.title} />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/BasicImageList.tsx b/docs/src/pages/components/image-list/BasicImageList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
+import ImageListItem from '@material-ui/core/ImageListItem';
 import tileData from './tileData';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -45,9 +45,9 @@ export default function BasicImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={160} className={classes.gridList} cols={3}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.cols || 1}>
+          <ImageListItem key={tile.img} cols={tile.cols || 1}>
             <img src={tile.img} alt={tile.title} />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/SingleLineImageList.js b/docs/src/pages/components/image-list/SingleLineImageList.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -53,9 +53,9 @@ export default function SingleLineImageList() {
     <div className={classes.root}>
       <ImageList className={classes.gridList} cols={2.5}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img}>
+          <ImageListItem key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               classes={{
                 root: classes.titleBar,
@@ -67,7 +67,7 @@ export default function SingleLineImageList() {
                 </IconButton>
               }
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/SingleLineImageList.tsx b/docs/src/pages/components/image-list/SingleLineImageList.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -55,9 +55,9 @@ export default function SingleLineImageList() {
     <div className={classes.root}>
       <ImageList className={classes.gridList} cols={2.5}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img}>
+          <ImageListItem key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               classes={{
                 root: classes.titleBar,
@@ -69,7 +69,7 @@ export default function SingleLineImageList() {
                 </IconButton>
               }
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>