From 31255787c9407db23e0ddc177d1aeb8996afa0d7 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Thu, 27 Aug 2020 22:02:46 +0100
Subject: [PATCH] Tile -> Item

---
 docs/pages/api-docs/icon-button.md            |   1 -
 ...ist-tile-bar.js => image-list-item-bar.js} |   4 +-
 ...ist-tile-bar.md => image-list-item-bar.md} |  36 +-
 ...{image-list-tile.js => image-list-item.js} |   4 +-
 ...{image-list-tile.md => image-list-item.md} |  22 +-
 docs/pages/api-docs/list-subheader.md         |   1 -
 docs/src/pages/components/cards/cards.md      |   2 +-
 .../image-list/AdvancedImageList.js           |  10 +-
 .../image-list/AdvancedImageList.tsx          |  10 +-
 .../components/image-list/BasicImageList.js   |   6 +-
 .../components/image-list/BasicImageList.tsx  |   6 +-
 .../image-list/SingleLineImageList.js         |  10 +-
 .../image-list/SingleLineImageList.tsx        |  10 +-
 .../image-list/TitlebarImageList.js           |  14 +-
 .../image-list/TitlebarImageList.tsx          |  14 +-
 .../components/image-list/image-list-de.md    |   4 +-
 .../components/image-list/image-list-es.md    |   4 +-
 .../components/image-list/image-list-fr.md    |   4 +-
 .../components/image-list/image-list-ja.md    |   4 +-
 .../components/image-list/image-list-pt.md    |   4 +-
 .../components/image-list/image-list-ru.md    |   2 +-
 .../components/image-list/image-list-zh.md    |   4 +-
 .../pages/components/image-list/image-list.md |   4 +-
 .../pages/guides/migration-v4/migration-v4.md | 568 ++++++++++++++++++
 .../src/ImageListItem/ImageListItem.d.ts      |  31 +
 .../ImageListItem.js}                         |   6 +-
 .../ImageListItem.test.js}                    |  16 +-
 .../material-ui/src/ImageListItem/index.d.ts  |   2 +
 .../material-ui/src/ImageListItem/index.js    |   1 +
 .../ImageListItemBar.d.ts}                    |   8 +-
 .../ImageListItemBar.js}                      |   6 +-
 .../ImageListItemBar.test.js}                 |  10 +-
 .../src/ImageListItemBar/index.d.ts           |   2 +
 .../material-ui/src/ImageListItemBar/index.js |   1 +
 .../src/ImageListTile/ImageListTile.d.ts      |  31 -
 .../material-ui/src/ImageListTile/index.d.ts  |   2 -
 .../material-ui/src/ImageListTile/index.js    |   1 -
 .../src/ImageListTileBar/index.d.ts           |   2 -
 .../material-ui/src/ImageListTileBar/index.js |   1 -
 packages/material-ui/src/index.d.ts           |   8 +-
 packages/material-ui/src/index.js             |   8 +-
 .../material-ui/src/styles/overrides.d.ts     |  12 +-
 packages/material-ui/src/styles/props.d.ts    |   8 +-
 .../test/typescript/components.spec.tsx       |   6 +-
 44 files changed, 738 insertions(+), 172 deletions(-)
 rename docs/pages/api-docs/{image-list-tile-bar.js => image-list-item-bar.js} (85%)
 rename docs/pages/api-docs/{image-list-tile-bar.md => image-list-item-bar.md} (74%)
 rename docs/pages/api-docs/{image-list-tile.js => image-list-item.js} (87%)
 rename docs/pages/api-docs/{image-list-tile.md => image-list-item.md} (74%)
 create mode 100644 docs/src/pages/guides/migration-v4/migration-v4.md
 create mode 100644 packages/material-ui/src/ImageListItem/ImageListItem.d.ts
 rename packages/material-ui/src/{ImageListTile/ImageListTile.js => ImageListItem/ImageListItem.js} (95%)
 rename packages/material-ui/src/{ImageListTile/ImageListTile.test.js => ImageListItem/ImageListItem.test.js} (91%)
 create mode 100644 packages/material-ui/src/ImageListItem/index.d.ts
 create mode 100644 packages/material-ui/src/ImageListItem/index.js
 rename packages/material-ui/src/{ImageListTileBar/ImageListTileBar.d.ts => ImageListItemBar/ImageListItemBar.d.ts} (77%)
 rename packages/material-ui/src/{ImageListTileBar/ImageListTileBar.js => ImageListItemBar/ImageListItemBar.js} (95%)
 rename packages/material-ui/src/{ImageListTileBar/ImageListTileBar.test.js => ImageListItemBar/ImageListItemBar.test.js} (74%)
 create mode 100644 packages/material-ui/src/ImageListItemBar/index.d.ts
 create mode 100644 packages/material-ui/src/ImageListItemBar/index.js
 delete mode 100644 packages/material-ui/src/ImageListTile/ImageListTile.d.ts
 delete mode 100644 packages/material-ui/src/ImageListTile/index.d.ts
 delete mode 100644 packages/material-ui/src/ImageListTile/index.js
 delete mode 100644 packages/material-ui/src/ImageListTileBar/index.d.ts
 delete mode 100644 packages/material-ui/src/ImageListTileBar/index.js

diff --git a/docs/pages/api-docs/icon-button.md b/docs/pages/api-docs/icon-button.md
index 5a63b1d6513328..01d1e5407bd450 100644
--- a/docs/pages/api-docs/icon-button.md
+++ b/docs/pages/api-docs/icon-button.md
@@ -73,5 +73,4 @@ You can take advantage of this behavior to [target nested components](/guides/ap
 
 - [Buttons](/components/buttons/)
 - [Grid List](/components/grid-list/)
-- [Image List](/components/image-list/)
 
diff --git a/docs/pages/api-docs/image-list-tile-bar.js b/docs/pages/api-docs/image-list-item-bar.js
similarity index 85%
rename from docs/pages/api-docs/image-list-tile-bar.js
rename to docs/pages/api-docs/image-list-item-bar.js
index cf3b33ee40c355..edb472fed02622 100644
--- a/docs/pages/api-docs/image-list-tile-bar.js
+++ b/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 b/docs/pages/api-docs/image-list-item-bar.md
similarity index 74%
rename from docs/pages/api-docs/image-list-tile-bar.md
rename to docs/pages/api-docs/image-list-item-bar.md
index 0176e1d24f606c..382ea829806faa 100644
--- a/docs/pages/api-docs/image-list-tile-bar.md
+++ b/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,17 +43,17 @@ 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:
 
@@ -61,7 +61,7 @@ You can override the style of the component thanks to one of these customization
 - 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/master/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/master/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js) for more detail.
 
 ## Demos
 
diff --git a/docs/pages/api-docs/image-list-tile.js b/docs/pages/api-docs/image-list-item.js
similarity index 87%
rename from docs/pages/api-docs/image-list-tile.js
rename to docs/pages/api-docs/image-list-item.js
index 87e81591cb6d14..b6bf73a4e99c11 100644
--- a/docs/pages/api-docs/image-list-tile.js
+++ b/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 b/docs/pages/api-docs/image-list-item.md
similarity index 74%
rename from docs/pages/api-docs/image-list-tile.md
rename to docs/pages/api-docs/image-list-item.md
index e6e12d6de9efc1..1535b4bb9f75f9 100644
--- a/docs/pages/api-docs/image-list-tile.md
+++ b/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,7 +22,7 @@ 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
 
@@ -39,10 +39,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">.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:
 
@@ -50,7 +50,7 @@ You can override the style of the component thanks to one of these customization
 - 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/master/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/master/packages/material-ui/src/ImageListItem/ImageListItem.js) for more detail.
 
 ## Demos
 
diff --git a/docs/pages/api-docs/list-subheader.md b/docs/pages/api-docs/list-subheader.md
index 3422c7c9bdc55d..1e174241c8682d 100644
--- a/docs/pages/api-docs/list-subheader.md
+++ b/docs/pages/api-docs/list-subheader.md
@@ -62,6 +62,5 @@ If that's not sufficient, you can check the [implementation of the component](ht
 ## Demos
 
 - [Grid List](/components/grid-list/)
-- [Image List](/components/image-list/)
 - [Lists](/components/lists/)
 
diff --git a/docs/src/pages/components/cards/cards.md b/docs/src/pages/components/cards/cards.md
index 6377dbe052caf3..ee050a6c6754c3 100644
--- a/docs/src/pages/components/cards/cards.md
+++ b/docs/src/pages/components/cards/cards.md
@@ -25,7 +25,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
index 5225564b6b9d7e..0c12cf2ff95729 100644
--- a/docs/src/pages/components/image-list/AdvancedImageList.js
+++ b/docs/src/pages/components/image-list/AdvancedImageList.js
@@ -1,8 +1,8 @@
 import 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,9 +56,9 @@ export default function AdvancedImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
+          <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={
@@ -69,7 +69,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
index 3e82f56b6f01e3..eeb79a30ca48ea 100644
--- a/docs/src/pages/components/image-list/AdvancedImageList.tsx
+++ b/docs/src/pages/components/image-list/AdvancedImageList.tsx
@@ -1,8 +1,8 @@
 import 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,9 +58,9 @@ export default function AdvancedImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
+          <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={
@@ -71,7 +71,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
index f7ef16a3741024..6264e61a23ee7b 100644
--- a/docs/src/pages/components/image-list/BasicImageList.js
+++ b/docs/src/pages/components/image-list/BasicImageList.js
@@ -1,7 +1,7 @@
 import 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
index f2b382df5655df..aebd7c507cc831 100644
--- a/docs/src/pages/components/image-list/BasicImageList.tsx
+++ b/docs/src/pages/components/image-list/BasicImageList.tsx
@@ -1,7 +1,7 @@
 import 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
index 5f0640dc5d4c13..b61c0ede845d75 100644
--- a/docs/src/pages/components/image-list/SingleLineImageList.js
+++ b/docs/src/pages/components/image-list/SingleLineImageList.js
@@ -1,8 +1,8 @@
 import 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
index b7a208fea8b9eb..259e44b5e6d176 100644
--- a/docs/src/pages/components/image-list/SingleLineImageList.tsx
+++ b/docs/src/pages/components/image-list/SingleLineImageList.tsx
@@ -1,8 +1,8 @@
 import 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>
diff --git a/docs/src/pages/components/image-list/TitlebarImageList.js b/docs/src/pages/components/image-list/TitlebarImageList.js
index b675a512c6ef6a..2b9a8f0b4ee609 100644
--- a/docs/src/pages/components/image-list/TitlebarImageList.js
+++ b/docs/src/pages/components/image-list/TitlebarImageList.js
@@ -1,8 +1,8 @@
 import 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 ListSubheader from '@material-ui/core/ListSubheader';
 import IconButton from '@material-ui/core/IconButton';
 import InfoIcon from '@material-ui/icons/Info';
@@ -48,13 +48,13 @@ export default function TitlebarImageList() {
   return (
     <div className={classes.root}>
       <ImageList cellHeight={180} className={classes.gridList}>
-        <ImageListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
+        <ImageListItem key="Subheader" cols={2} style={{ height: 'auto' }}>
           <ListSubheader component="div">December</ListSubheader>
-        </ImageListTile>
+        </ImageListItem>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img}>
+          <ImageListItem key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               subtitle={<span>by: {tile.author}</span>}
               actionIcon={
@@ -63,7 +63,7 @@ export default function TitlebarImageList() {
                 </IconButton>
               }
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>
diff --git a/docs/src/pages/components/image-list/TitlebarImageList.tsx b/docs/src/pages/components/image-list/TitlebarImageList.tsx
index a6db3fcede891e..6d0c5cba1cf71b 100644
--- a/docs/src/pages/components/image-list/TitlebarImageList.tsx
+++ b/docs/src/pages/components/image-list/TitlebarImageList.tsx
@@ -1,8 +1,8 @@
 import 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 ListSubheader from '@material-ui/core/ListSubheader';
 import IconButton from '@material-ui/core/IconButton';
 import InfoIcon from '@material-ui/icons/Info';
@@ -50,13 +50,13 @@ export default function TitlebarImageList() {
   return (
     <div className={classes.root}>
       <ImageList cellHeight={180} className={classes.gridList}>
-        <ImageListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
+        <ImageListItem key="Subheader" cols={2} style={{ height: 'auto' }}>
           <ListSubheader component="div">December</ListSubheader>
-        </ImageListTile>
+        </ImageListItem>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img}>
+          <ImageListItem key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               subtitle={<span>by: {tile.author}</span>}
               actionIcon={
@@ -65,7 +65,7 @@ export default function TitlebarImageList() {
                 </IconButton>
               }
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>
diff --git a/docs/src/pages/components/image-list/image-list-de.md b/docs/src/pages/components/image-list/image-list-de.md
index 86d9a57be4e64e..666e8650a06b06 100644
--- a/docs/src/pages/components/image-list/image-list-de.md
+++ b/docs/src/pages/components/image-list/image-list-de.md
@@ -1,6 +1,6 @@
 ---
 title: Grid List React Komponente
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
 ---
 
 # Rasterliste (Grid List)
@@ -17,7 +17,7 @@ Ein einfaches Beispiel für ein scrollbare `RasterList` mit Bildern.
 
 ## Rasterliste mit Titelleisten
 
-In diesem Beispiel wird die Verwendung der `ImageListTileBar` veranschaulicht, um jeweils eine Überlagerung zu jedem `ImageListTile`hinzuzufügen. Die Überlagerung kann einen `title`, `subtitle` und eine sekundäre Aktion aufnehmen - in diesem Beispiel ein `IconButton`.
+In diesem Beispiel wird die Verwendung der `ImageListItemBar` veranschaulicht, um jeweils eine Überlagerung zu jedem `ImageListItem`hinzuzufügen. Die Überlagerung kann einen `title`, `subtitle` und eine sekundäre Aktion aufnehmen - in diesem Beispiel ein `IconButton`.
 
 {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
 
diff --git a/docs/src/pages/components/image-list/image-list-es.md b/docs/src/pages/components/image-list/image-list-es.md
index efe2485f488393..b9c063b2eed5f6 100644
--- a/docs/src/pages/components/image-list/image-list-es.md
+++ b/docs/src/pages/components/image-list/image-list-es.md
@@ -1,6 +1,6 @@
 ---
 title: Componente React para Lista cuadriculada
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
 ---
 
 # Lista cuadriculada
@@ -17,7 +17,7 @@ Un ejemplo simple de una lista cuadriculada (`ImageList`) con imágenes desplaza
 
 ## Lista cuadriculada con barras de título
 
-Este ejemplo demuestra el uso de una barra para cuadro de lista cuadriculada (`ImageListTileBar`) que agrega una capa sobrepuesta a cada cuadro en una lista cuadriculada (`ImageListTile`). La capa sobrepuesta puede acomodar un título (`title`), subtítulo (`subtitle`), y acción secundaria (en este ejemplo un `IconButton`).
+Este ejemplo demuestra el uso de una barra para cuadro de lista cuadriculada (`ImageListItemBar`) que agrega una capa sobrepuesta a cada cuadro en una lista cuadriculada (`ImageListItem`). La capa sobrepuesta puede acomodar un título (`title`), subtítulo (`subtitle`), y acción secundaria (en este ejemplo un `IconButton`).
 
 {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
 
diff --git a/docs/src/pages/components/image-list/image-list-fr.md b/docs/src/pages/components/image-list/image-list-fr.md
index ee0eb86516004b..cb0d8befc9d9e4 100644
--- a/docs/src/pages/components/image-list/image-list-fr.md
+++ b/docs/src/pages/components/image-list/image-list-fr.md
@@ -1,6 +1,6 @@
 ---
 title: Composant React Grid List
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
 ---
 
 # Grid list
@@ -17,7 +17,7 @@ Un exemple simple d'image défilable `ImageList`.
 
 ## Grid list avec barres de titre
 
-Cet exemple illustre l'utilisation de `ImageListTileBar` pour ajouter une superposition à chaque `ImageListTile`. La superposition peut accueillir un `titre`, `sous - titre` et une action secondaire - dans cet exemple un `IconButton`.
+Cet exemple illustre l'utilisation de `ImageListItemBar` pour ajouter une superposition à chaque `ImageListItem`. La superposition peut accueillir un `titre`, `sous - titre` et une action secondaire - dans cet exemple un `IconButton`.
 
 {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
 
diff --git a/docs/src/pages/components/image-list/image-list-ja.md b/docs/src/pages/components/image-list/image-list-ja.md
index 83474bd42f2321..7decf95449aa47 100644
--- a/docs/src/pages/components/image-list/image-list-ja.md
+++ b/docs/src/pages/components/image-list/image-list-ja.md
@@ -1,6 +1,6 @@
 ---
 title: Grid List React component
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
 ---
 
 # Grid List
@@ -17,7 +17,7 @@ components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButto
 
 ## タイトルバー付きのGrid list
 
-この例は、 `ImageListTileBar` を使用して、各 `ImageListTile`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。
+この例は、 `ImageListItemBar` を使用して、各 `ImageListItem`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。
 
 {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
 
diff --git a/docs/src/pages/components/image-list/image-list-pt.md b/docs/src/pages/components/image-list/image-list-pt.md
index 56ac37297109f2..c462efcdfea529 100644
--- a/docs/src/pages/components/image-list/image-list-pt.md
+++ b/docs/src/pages/components/image-list/image-list-pt.md
@@ -1,6 +1,6 @@
 ---
 title: Componente React para Lista de Grade
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
 ---
 
 # Lista de Grade
@@ -17,7 +17,7 @@ Um exemplo simples de uma `ImageList` com imagens.
 
 ## Lista de grade com barras de título
 
-Este exemplo demonstra o uso do `ImageListTileBar` para adicionar uma sobreposição a cada `ImageListTile`. A sobreposição pode acomodar um `title`, `subtitle` e ação secundária - neste exemplo utilizamos um `IconButton`.
+Este exemplo demonstra o uso do `ImageListItemBar` para adicionar uma sobreposição a cada `ImageListItem`. A sobreposição pode acomodar um `title`, `subtitle` e ação secundária - neste exemplo utilizamos um `IconButton`.
 
 {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
 
diff --git a/docs/src/pages/components/image-list/image-list-ru.md b/docs/src/pages/components/image-list/image-list-ru.md
index 218cd94fd080ce..92e365577b43b8 100644
--- a/docs/src/pages/components/image-list/image-list-ru.md
+++ b/docs/src/pages/components/image-list/image-list-ru.md
@@ -1,6 +1,6 @@
 ---
 title: Сеть изображений, компонент React
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
 ---
 
 # Сеть изображений
diff --git a/docs/src/pages/components/image-list/image-list-zh.md b/docs/src/pages/components/image-list/image-list-zh.md
index c615a6cd9fbe65..82fb813bbcb8b8 100644
--- a/docs/src/pages/components/image-list/image-list-zh.md
+++ b/docs/src/pages/components/image-list/image-list-zh.md
@@ -1,6 +1,6 @@
 ---
 title: React Grid List 网格列表组件
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
 ---
 
 # Grid List 网格列表
@@ -17,7 +17,7 @@ components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButto
 
 ## 带有标题栏的网格列表
 
-此示例演示如何使用 `ImageListTileBar` 为每个 `ImageListTile` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。
+此示例演示如何使用 `ImageListItemBar` 为每个 `ImageListItem` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。
 
 {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
 
diff --git a/docs/src/pages/components/image-list/image-list.md b/docs/src/pages/components/image-list/image-list.md
index fa389daa84dc06..05d4ba928f47fd 100644
--- a/docs/src/pages/components/image-list/image-list.md
+++ b/docs/src/pages/components/image-list/image-list.md
@@ -1,6 +1,6 @@
 ---
 title: Image list React component
-components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar
 ---
 
 # Image list
@@ -17,7 +17,7 @@ A simple example of a scrollable image `ImageList`.
 
 ## Image list with titlebars
 
-This example demonstrates the use of the `ImageListTileBar` to add an overlay to each `ImageListTile`.
+This example demonstrates the use of the `ImageListItemBar` to add an overlay to each `ImageListItem`.
 The overlay can accommodate a `title`, `subtitle` and secondary action - in this example an `IconButton`.
 
 {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
new file mode 100644
index 00000000000000..0ecc6ff38cbd71
--- /dev/null
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -0,0 +1,568 @@
+# Migration from v4 to v5
+
+<p class="description">Yeah, v5 has been released!</p>
+
+Looking for the v4 docs? [Find them here](https://material-ui.com/versions/).
+
+> This document is a work in progress.
+> Have you upgraded your site and run into something that's not covered here?
+> [Add your changes on GitHub](https://github.com/mui-org/material-ui/blob/next/docs/src/pages/guides/migration-v4/migration-v4.md).
+
+## Introduction
+
+This is a reference for upgrading your site from Material-UI v4 to v5.
+While there's a lot covered here, you probably won't need to do everything for your site.
+We'll do our best to keep things easy to follow, and as sequential as possible so you can quickly get rocking on v5!
+
+## Why you should migrate
+
+This documentation page covers the _how_ of migrating from v4 to v5.
+The _why_ is covered in the [release blog post on Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701).
+
+## Updating your dependencies
+
+The very first thing you will need to do is to update your dependencies.
+
+### Update Material-UI version
+
+You need to update your `package.json` to use the latest version of Material-UI.
+
+```json
+"dependencies": {
+  "@material-ui/core": "^5.0.0-alpha.1"
+}
+```
+
+Or run
+
+```sh
+npm install @material-ui/core@next
+
+or
+
+yarn add @material-ui/core@next
+```
+
+## Handling breaking changes
+
+### non-ref-forwarding class components
+
+Support for non-ref-forwarding class components in the `component` prop or as an immediate `children` has been dropped. If you were using `unstable_createStrictModeTheme` or didn't see any warnings related to `findDOMNode` in `React.StrictMode` then you don't need to do anything.
+Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate.
+This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. `<MenuList><CustomMenuItem /></MenuList>`)
+
+### Theme
+
+- The "gutters" abstraction hasn't proven to be used frequently enough to be valuable.
+
+  ```diff
+  -theme.mixins.gutters(),
+  +paddingLeft: theme.spacing(2),
+  +paddingRight: theme.spacing(2),
+  +[theme.breakpoints.up('sm')]: {
+  +  paddingLeft: theme.spacing(3),
+  +  paddingRight: theme.spacing(3),
+  +},
+  ```
+
+- The components' definition inside the theme were restructure under the `components` key, to allow people easier discoverability about the definitions regarding one component.
+
+1. `props`
+
+```diff
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuitheme({
+-  props: {
+-    MuiButton: {
+-      disableRipple: true,
+-    },
+-  },
++  components: {
++    MuiButton: {
++      props: {
++        disableRipple: true,
++      },
++    },
++  },
+});
+```
+
+2. `overrides`
+
+```diff
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuitheme({
+-  overrides: {
+-    MuiButton: {
+-      root: { padding: 0 },
+-    },
+-  },
++  components: {
++    MuiButton: {
++      overrides: {
++        root: { padding: 0 },
++      },
++    },
++  },
+});
+```
+
+For a smoother transition, the `adaptV4Theme` helper allows you to iteratively upgrade to the new theme structure. Note that it will display a deprecation warning in the console, since it will be removed at the next major release.
+
+```diff
+-import { createMuiTheme } from '@material-ui/core/styles';
++import { createMuiTheme, adaptV4Theme } from '@material-ui/core/styles';
+
+-const theme = createMuitheme({
++const theme = createMuitheme(adaptV4Theme({
+  props: {
+    MuiButton: {
+      disableRipple: true,
+    },
+  },
+  overrides: {
+    MuiButton: {
+      root: { padding: 0 },
+    },
+  },
+-});
++}));
+```
+
+### Avatar
+
+- Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Avatar variant="circle">
+  -<Avatar classes={{ circle: 'className' }}>
+  +<Avatar variant="circular">
+  +<Avatar classes={{ circular: 'className' }}>
+  ```
+
+### Badge
+
+- Rename `circle` to `circular` and `rectangle` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Badge overlap="circle">
+  -<Badge overlap="rectangle">
+  +<Badge overlap="circular">
+  +<Badge overlap="rectangular">
+  <Badge classes={{
+  - anchorOriginTopRightRectangle: 'className'
+  - anchorOriginBottomRightRectangle: 'className'
+  - anchorOriginTopLeftRectangle: 'className'
+  - anchorOriginBottomLeftRectangle: 'className'
+  - anchorOriginTopRightCircle: 'className'
+  - anchorOriginBottomRightCircle: 'className'
+  - anchorOriginTopLeftCircle: 'className'
+  + anchorOriginTopRightRectangular: 'className'
+  + anchorOriginBottomRightRectangular: 'className'
+  + anchorOriginTopLeftRectangular: 'className'
+  + anchorOriginBottomLeftRectangular: 'className'
+  + anchorOriginTopRightCircular: 'className'
+  + anchorOriginBottomRightCircular: 'className'
+  + anchorOriginTopLeftCircular: 'className'
+  }}>
+  ```
+
+### BottomNavigation
+
+- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
+  ```diff
+  -<BottomNavigation onChange={(event: React.ChangeEvent<{}>) => {}} />
+  +<BottomNavigation onChange={(event: React.SyntheticEvent) => {}} />
+  ```
+
+### Button
+
+- The button `color` prop is now "primary" by default, and "default" has been removed. This makes the button closer to the Material Design specification and simplifies the API.
+
+  ```diff
+  -<Button color="primary" />
+  -<Button color="default" />
+  +<Button />
+  +<Button />
+  ```
+
+### CircularProgress
+
+- The `static` variant has been merged into the `determinate` variant, with the latter assuming the appearance of the former.
+  The removed variant was rarely useful. It was an exception to Material Design, and was removed from the specification.
+
+  ```diff
+  -<CircularProgress variant="determinate" />
+  ```
+
+  ```diff
+  -<CircularProgress variant="static" classes={{ static: 'className' }} />
+  +<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
+  ```
+
+> NB: If you had previously customized determinate, your customizations are probably no longer valid. Please remove them.
+
+### Collapse
+
+- The `collapsedHeight` prop was renamed `collapsedSize` to support the horizontal direction.
+
+  ```diff
+  -<Collapse collapsedHeight={40}>
+  +<Collapse collapsedSize={40}>
+  ```
+
+- The `classes.container` key was changed to match the convention of the other components.
+
+  ```diff
+  -<Collapse classes={{ container: 'collapse' }}>
+  +<Collapse classes={{ root: 'collapse' }}>
+  ```
+
+### Dialog
+
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+  ```diff
+  <Dialog
+  -  onEnter={onEnter}
+  -  onEntered={onEntered},
+  -  onEntering={onEntered},
+  -  onExit={onEntered},
+  -  onExited={onEntered},
+  -  onExiting={onEntered}
+  +  TransitionProps={{
+  +    onEnter,
+  +    onEntered,
+  +    onEntering,
+  +    onExit,
+  +    onExited,
+  +    onExiting,
+  +  }}
+  />
+  ```
+
+### Divider
+
+- Use border instead of background color. It prevents inconsistent height on scaled screens. For people customizing the color of the border, the change requires changing the override CSS property:
+
+  ```diff
+  .MuiDivider-root {
+  - background-color: #f00;
+  + border-color: #f00;
+  }
+  ```
+
+### ExpansionPanel
+
+- Rename the `ExpansionPanel` components to `Accordion` to use a more common naming convention:
+
+  ```diff
+  -import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+  -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+  -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+  -import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+  +import Accordion from '@material-ui/core/Accordion';
+  +import AccordionSummary from '@material-ui/core/AccordionSummary';
+  +import AccordionDetails from '@material-ui/core/AccordionDetails';
+  +import AccordionActions from '@material-ui/core/AccordionActions';
+
+  -<ExpansionPanel>
+  +<Accordion>
+  -  <ExpansionPanelSummary>
+  +  <AccordionSummary>
+       <Typography>Location</Typography>
+       <Typography>Select trip destination</Typography>
+  -  </ExpansionPanelSummary>
+  +  </AccordionSummary>
+  -  <ExpansionPanelDetails>
+  +  <AccordionDetails>
+       <Chip label="Barbados" onDelete={() => {}} />
+       <Typography variant="caption">Select your destination of choice</Typography>
+  -  </ExpansionPanelDetails>
+  +  </AccordionDetails>
+     <Divider />
+  -  <ExpansionPanelActions>
+  +  <AccordionActions>
+       <Button size="small">Cancel</Button>
+       <Button size="small">Save</Button>
+  -  </ExpansionPanelActions>
+  +  </AccordionActions>
+  -</ExpansionPanel>
+  +</Accordion>
+  ```
+
+- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
+  ```diff
+  -<Accordion onChange={(event: React.ChangeEvent<{}>, expanded: boolean) => {}} />
+  +<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />
+  ```
+
+### Fab
+
+- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Fab variant="round">
+  +<Fab variant="circular">
+  ```
+
+### Grid
+
+- Rename `justify` prop with `justifyContent` to be aligned with the CSS property name.
+
+  ```diff
+  -<Grid justify="center">
+  +<Grid justifyContent="center">
+  ```
+
+### GridList
+
+- Rename the `GridList` components to `ImageList` to align with the current Material Design naming.
+
+```diff
+-import GridList from '@material-ui/core/GridList';
+-import GridListTile from '@material-ui/core/GridListTile';
+-import GridListTileBar from '@material-ui/core/GridListTileBar';
++import ImageList from '@material-ui/core/ImageList';
++import ImageListItem from '@material-ui/core/ImageListItem';
++import ImageListItemBar from '@material-ui/core/ImageListItemBar';
+
+-<GridList>
+-  <GridListTile>
++<ImageList>
++  <ImageListItem>
+     <img src="file.jpg" alt="Image title" />
+-    <GridListTileBar
++    <ImageListItemBar
+       title="Title"
+       subtitle="Subtitle"
+     />
+-  </GridListTile>
+-</GridList>
++  </ImageListItem>
++</ImageList>
+```
+
+### Menu
+
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+  ```diff
+  <Menu
+  -  onEnter={onEnter}
+  -  onEntered={onEntered},
+  -  onEntering={onEntered},
+  -  onExit={onEntered},
+  -  onExited={onEntered},
+  -  onExiting={onEntered}
+  +  TransitionProps={{
+  +    onEnter,
+  +    onEntered,
+  +    onEntering,
+  +    onExit,
+  +    onExited,
+  +    onExiting,
+  +  }}
+  >
+  ```
+
+### Pagination
+
+- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Pagination shape="round">
+  +<Pagination shape="circular">
+  ```
+
+### PaginationItem
+
+- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<PaginationItem shape="round">
+  +<PaginationItem shape="circular">
+  ```
+
+  ### Popover
+
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+  ```diff
+  <Popover
+  -  onEnter={onEnter}
+  -  onEntered={onEntered},
+  -  onEntering={onEntered},
+  -  onExit={onEntered},
+  -  onExited={onEntered},
+  -  onExiting={onEntered}
+  +  TransitionProps={{
+  +    onEnter,
+  +    onEntered,
+  +    onEntering,
+  +    onExit,
+  +    onExited,
+  +    onExiting,
+  +  }}
+  />
+  ```
+
+### Rating
+
+- Rename `visuallyhidden` to `visuallyHidden` for consistency:
+
+  ```diff
+  <Rating
+    classes={{
+  -    visuallyhidden: 'custom-visually-hidden-classname',
+  +    visuallyHidden: 'custom-visually-hidden-classname',
+    }}
+  />
+  ```
+
+### RootRef
+
+- This component was removed.
+  You can get a reference to the underlying DOM node of our components via `ref` prop.
+  The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+
+  ```diff
+  -<RootRef rootRef={ref}>
+  -  <Button />
+  -</RootRef>
+  +<Button ref={ref} />
+  ```
+
+### Slider
+
+- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
+  ```diff
+  -<Slider onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} />
+  +<Slider onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
+  ```
+
+### Snackbar
+
+- The notification now displays at the bottom left on large screens.
+  This better matches the behavior of Gmail, Google Keep, material.io, etc.
+  You can restore the previous behavior with:
+
+  ```diff
+  -<Snackbar />
+  +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
+  ```
+
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+  ```diff
+  <Snackbar
+  -  onEnter={onEnter}
+  -  onEntered={onEntered},
+  -  onEntering={onEntered},
+  -  onExit={onEntered},
+  -  onExited={onEntered},
+  -  onExiting={onEntered}
+  +  TransitionProps={{
+  +    onEnter,
+  +    onEntered,
+  +    onEntering,
+  +    onExit,
+  +    onExited,
+  +    onExiting,
+  +  }}
+  />
+  ```
+
+  ### Skeleton
+
+- Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Skeleton variant="circle" />
+  -<Skeleton variant="rect" />
+  -<Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname',  }} />
+  +<Skeleton variant="circular" />
+  +<Skeleton variant="rectangular" />
+  +<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />
+  ```
+
+### TablePagination
+
+- The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.
+
+  ```diff
+  <TablePagination
+  - backIconButtonText="Avant"
+  - nextIconButtonText="Après
+  + getItemAriaLabel={…}
+  ```
+
+### Tabs
+
+- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
+  ```diff
+  -<Tabs onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} />
+  +<Tabs onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
+  ```
+
+### TextField
+
+- Better isolate the fixed textarea height behavior to the dynamic one.
+  You need to use the `minRows` prop in the following case:
+
+  ```diff
+  -<TextField rows={2} maxRows={5} />
+  +<TextField minRows={2} maxRows={5} />
+  ```
+
+- Rename `rowsMax` prop with `maxRows` for consistency with HTML attributes.
+
+  ```diff
+  -<TextField rowsMax={6}>
+  +<TextField maxRows={6}>
+  ```
+
+### TextareaAutosize
+
+- Remove the `rows` prop, use the `minRows` prop instead.
+  This change aims to clarify the behavior of the prop.
+
+  ```diff
+  -<TextareaAutosize rows={2} />
+  +<TextareaAutosize minRows={2} />
+  ```
+
+- Rename `rowsMax` prop with `maxRows` for consistency with HTML attributes.
+
+  ```diff
+  -<TextareAutosize rowsMax={6}>
+  +<TextareAutosize maxRows={6}>
+  ```
+
+- Rename `rowsMin` prop with `minRows` for consistency with HTML attributes.
+
+  ```diff
+  -<TextareAutosize rowsMin={1}>
+  +<TextareAutosize minRows={1}>
+  ```
+
+### Typography
+
+- Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://material-ui.com/system/basics/):
+
+  ```diff
+  -import Typography from '@material-ui/core/Typography';
+  +import { visuallyHidden } from '@material-ui/system';
+  +import styled from 'styled-component';
+
+  +const Span = styled('span')(visuallyHidden);
+
+  -<Typography variant="srOnly">Create a user</Typography>
+  +<Span>Create a user</Span>
+  ```
diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts
new file mode 100644
index 00000000000000..08829dfb0c5b0a
--- /dev/null
+++ b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+
+export interface ImageListItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
+  props: P & {
+    cols?: number;
+    rows?: number;
+  };
+  defaultComponent: D;
+  classKey: ImageListItemClassKey;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Image List](https://material-ui.com/components/image-list/)
+ *
+ * API:
+ *
+ * - [ImageListItem API](https://material-ui.com/api/image-list-item/)
+ */
+declare const ImageListItem: OverridableComponent<ImageListItemTypeMap>;
+
+export type ImageListItemClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';
+
+export type ImageListItemProps<
+  D extends React.ElementType = ImageListItemTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ImageListItemTypeMap<P, D>, D>;
+
+export default ImageListItem;
diff --git a/packages/material-ui/src/ImageListTile/ImageListTile.js b/packages/material-ui/src/ImageListItem/ImageListItem.js
similarity index 95%
rename from packages/material-ui/src/ImageListTile/ImageListTile.js
rename to packages/material-ui/src/ImageListItem/ImageListItem.js
index a344af0d699113..6eb1edf42ab6cc 100644
--- a/packages/material-ui/src/ImageListTile/ImageListTile.js
+++ b/packages/material-ui/src/ImageListItem/ImageListItem.js
@@ -65,7 +65,7 @@ function ensureImageCover(imgEl, classes) {
   }
 }
 
-const ImageListTile = React.forwardRef(function ImageListTile(props, ref) {
+const ImageListItem = React.forwardRef(function ImageListItem(props, ref) {
   // cols rows default values are for docs only
   const {
     children,
@@ -118,7 +118,7 @@ const ImageListTile = React.forwardRef(function ImageListTile(props, ref) {
   );
 });
 
-ImageListTile.propTypes = {
+ImageListItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -151,4 +151,4 @@ ImageListTile.propTypes = {
   rows: PropTypes.number,
 };
 
-export default withStyles(styles, { name: 'MuiImageListTile' })(ImageListTile);
+export default withStyles(styles, { name: 'MuiImageListItem' })(ImageListItem);
diff --git a/packages/material-ui/src/ImageListTile/ImageListTile.test.js b/packages/material-ui/src/ImageListItem/ImageListItem.test.js
similarity index 91%
rename from packages/material-ui/src/ImageListTile/ImageListTile.test.js
rename to packages/material-ui/src/ImageListItem/ImageListItem.test.js
index 5036d76e4649d7..d9d45963483753 100644
--- a/packages/material-ui/src/ImageListTile/ImageListTile.test.js
+++ b/packages/material-ui/src/ImageListItem/ImageListItem.test.js
@@ -4,17 +4,17 @@ import { spy, useFakeTimers } from 'sinon';
 import { getClasses } from '@material-ui/core/test-utils';
 import createMount from 'test/utils/createMount';
 import describeConformance from '../test-utils/describeConformance';
-import ImageListTile from './ImageListTile';
+import ImageListItem from './ImageListItem';
 
-describe('<ImageListTile />', () => {
+describe('<ImageListItem />', () => {
   const mount = createMount();
   let classes;
 
   before(() => {
-    classes = getClasses(<ImageListTile />);
+    classes = getClasses(<ImageListItem />);
   });
 
-  describeConformance(<ImageListTile />, () => ({
+  describeConformance(<ImageListItem />, () => ({
     classes,
     inheritComponent: 'li',
     mount,
@@ -31,14 +31,14 @@ describe('<ImageListTile />', () => {
   describe('prop: children', () => {
     it('should render children by default', () => {
       const children = <img src={tileData.img} alt="foo" />;
-      const wrapper = mount(<ImageListTile>{children}</ImageListTile>);
+      const wrapper = mount(<ImageListItem>{children}</ImageListItem>);
 
       expect(wrapper.containsMatchingElement(children)).to.equal(true);
     });
 
     it('should not change non image child', () => {
       const children = <div />;
-      const wrapper = mount(<ImageListTile>{children}</ImageListTile>);
+      const wrapper = mount(<ImageListItem>{children}</ImageListItem>);
       expect(wrapper.containsMatchingElement(children)).to.equal(true);
     });
   });
@@ -52,10 +52,10 @@ describe('<ImageListTile />', () => {
     Image.muiName = 'Image';
 
     return mount(
-      <ImageListTile>
+      <ImageListItem>
         <Image />
         {null}
-      </ImageListTile>,
+      </ImageListItem>,
     );
   }
 
diff --git a/packages/material-ui/src/ImageListItem/index.d.ts b/packages/material-ui/src/ImageListItem/index.d.ts
new file mode 100644
index 00000000000000..b5ed72a1f05434
--- /dev/null
+++ b/packages/material-ui/src/ImageListItem/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './ImageListItem';
+export * from './ImageListItem';
diff --git a/packages/material-ui/src/ImageListItem/index.js b/packages/material-ui/src/ImageListItem/index.js
new file mode 100644
index 00000000000000..450c1f8a2ff5b2
--- /dev/null
+++ b/packages/material-ui/src/ImageListItem/index.js
@@ -0,0 +1 @@
+export { default } from './ImageListItem';
diff --git a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts
similarity index 77%
rename from packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts
rename to packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts
index 07eae4e00d6099..4d3078f82d4dea 100644
--- a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts
+++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface ImageListTileBarProps extends StandardProps<{}, ImageListTileBarClassKey> {
+export interface ImageListItemBarProps extends StandardProps<{}, ImageListItemBarClassKey> {
   /**
    * An IconButton element to be used as secondary action target
    * (primary action target is the tile itself).
@@ -25,7 +25,7 @@ export interface ImageListTileBarProps extends StandardProps<{}, ImageListTileBa
   titlePosition?: 'top' | 'bottom';
 }
 
-export type ImageListTileBarClassKey =
+export type ImageListItemBarClassKey =
   | 'root'
   | 'titlePositionBottom'
   | 'titlePositionTop'
@@ -46,6 +46,6 @@ export type ImageListTileBarClassKey =
  *
  * API:
  *
- * - [ImageListTileBar API](https://material-ui.com/api/image-list-tile-bar/)
+ * - [ImageListItemBar API](https://material-ui.com/api/image-list-item-bar/)
  */
-export default function ImageListTileBar(props: ImageListTileBarProps): JSX.Element;
+export default function ImageListItemBar(props: ImageListItemBarProps): JSX.Element;
diff --git a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
similarity index 95%
rename from packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
rename to packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
index 590ac144b4ec43..8ff726900999ed 100644
--- a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
+++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
@@ -67,7 +67,7 @@ export const styles = (theme) => ({
   },
 });
 
-const ImageListTileBar = React.forwardRef(function ImageListTileBar(props, ref) {
+const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) {
   const {
     actionIcon,
     actionPosition = 'right',
@@ -117,7 +117,7 @@ const ImageListTileBar = React.forwardRef(function ImageListTileBar(props, ref)
   );
 });
 
-ImageListTileBar.propTypes = {
+ImageListItemBar.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -154,4 +154,4 @@ ImageListTileBar.propTypes = {
   titlePosition: PropTypes.oneOf(['bottom', 'top']),
 };
 
-export default withStyles(styles, { name: 'MuiImageListTileBar' })(ImageListTileBar);
+export default withStyles(styles, { name: 'MuiImageListItemBar' })(ImageListItemBar);
diff --git a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.test.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js
similarity index 74%
rename from packages/material-ui/src/ImageListTileBar/ImageListTileBar.test.js
rename to packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js
index 8abac76c1c2742..d43f5524ba7aa2 100644
--- a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.test.js
+++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js
@@ -3,19 +3,19 @@ import { expect } from 'chai';
 import { createShallow, getClasses } from '@material-ui/core/test-utils';
 import createMount from 'test/utils/createMount';
 import describeConformance from '../test-utils/describeConformance';
-import ImageListTileBar from './ImageListTileBar';
+import ImageListItemBar from './ImageListItemBar';
 
-describe('<ImageListTileBar />', () => {
+describe('<ImageListItemBar />', () => {
   let classes;
   const mount = createMount();
   let shallow;
 
   before(() => {
-    classes = getClasses(<ImageListTileBar title="classes" />);
+    classes = getClasses(<ImageListItemBar title="classes" />);
     shallow = createShallow({ dive: true });
   });
 
-  describeConformance(<ImageListTileBar title="conform?" />, () => ({
+  describeConformance(<ImageListItemBar title="conform?" />, () => ({
     classes,
     inheritComponent: 'div',
     mount,
@@ -31,7 +31,7 @@ describe('<ImageListTileBar />', () => {
 
   describe('prop: title', () => {
     it('should renders title', () => {
-      const wrapper = shallow(<ImageListTileBar title={tileData.title} />);
+      const wrapper = shallow(<ImageListItemBar title={tileData.title} />);
 
       expect(wrapper.children('div').text()).to.equal(tileData.title);
     });
diff --git a/packages/material-ui/src/ImageListItemBar/index.d.ts b/packages/material-ui/src/ImageListItemBar/index.d.ts
new file mode 100644
index 00000000000000..89da53be2e3d6a
--- /dev/null
+++ b/packages/material-ui/src/ImageListItemBar/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './ImageListItemBar';
+export * from './ImageListItemBar';
diff --git a/packages/material-ui/src/ImageListItemBar/index.js b/packages/material-ui/src/ImageListItemBar/index.js
new file mode 100644
index 00000000000000..d46ee29d5802da
--- /dev/null
+++ b/packages/material-ui/src/ImageListItemBar/index.js
@@ -0,0 +1 @@
+export { default } from './ImageListItemBar';
diff --git a/packages/material-ui/src/ImageListTile/ImageListTile.d.ts b/packages/material-ui/src/ImageListTile/ImageListTile.d.ts
deleted file mode 100644
index 82412680b3792f..00000000000000
--- a/packages/material-ui/src/ImageListTile/ImageListTile.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-
-export interface ImageListTileTypeMap<P = {}, D extends React.ElementType = 'li'> {
-  props: P & {
-    cols?: number;
-    rows?: number;
-  };
-  defaultComponent: D;
-  classKey: ImageListTileClassKey;
-}
-/**
- *
- * Demos:
- *
- * - [Image List](https://material-ui.com/components/image-list/)
- *
- * API:
- *
- * - [ImageListTile API](https://material-ui.com/api/image-list-tile/)
- */
-declare const ImageListTile: OverridableComponent<ImageListTileTypeMap>;
-
-export type ImageListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';
-
-export type ImageListTileProps<
-  D extends React.ElementType = ImageListTileTypeMap['defaultComponent'],
-  P = {}
-> = OverrideProps<ImageListTileTypeMap<P, D>, D>;
-
-export default ImageListTile;
diff --git a/packages/material-ui/src/ImageListTile/index.d.ts b/packages/material-ui/src/ImageListTile/index.d.ts
deleted file mode 100644
index eec68107fd6333..00000000000000
--- a/packages/material-ui/src/ImageListTile/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './ImageListTile';
-export * from './ImageListTile';
diff --git a/packages/material-ui/src/ImageListTile/index.js b/packages/material-ui/src/ImageListTile/index.js
deleted file mode 100644
index cd45ce9f207f1f..00000000000000
--- a/packages/material-ui/src/ImageListTile/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ImageListTile';
diff --git a/packages/material-ui/src/ImageListTileBar/index.d.ts b/packages/material-ui/src/ImageListTileBar/index.d.ts
deleted file mode 100644
index f6c234d372d026..00000000000000
--- a/packages/material-ui/src/ImageListTileBar/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './ImageListTileBar';
-export * from './ImageListTileBar';
diff --git a/packages/material-ui/src/ImageListTileBar/index.js b/packages/material-ui/src/ImageListTileBar/index.js
deleted file mode 100644
index 351e42c714ee66..00000000000000
--- a/packages/material-ui/src/ImageListTileBar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ImageListTileBar';
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index dcca989fb9ef6b..aede60bf2ba284 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -226,11 +226,11 @@ export * from './IconButton';
 export { default as ImageList } from './ImageList';
 export * from './ImageList';
 
-export { default as ImageListTile } from './ImageListTile';
-export * from './ImageListTile';
+export { default as ImageListItem } from './ImageListItem';
+export * from './ImageListItem';
 
-export { default as ImageListTileBar } from './ImageListTileBar';
-export * from './ImageListTileBar';
+export { default as ImageListItemBar } from './ImageListItemBar';
+export * from './ImageListItemBar';
 
 export { default as Input } from './Input';
 export * from './Input';
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 62e34a1d501b82..13a47d1b588f6e 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -174,11 +174,11 @@ export * from './IconButton';
 export { default as ImageList } from './ImageList';
 export * from './ImageList';
 
-export { default as ImageListTile } from './ImageListTile';
-export * from './ImageListTile';
+export { default as ImageListItem } from './ImageListItem';
+export * from './ImageListItem';
 
-export { default as ImageListTileBar } from './ImageListTileBar';
-export * from './ImageListTileBar';
+export { default as ImageListItemBar } from './ImageListItemBar';
+export * from './ImageListItemBar';
 
 export { default as Input } from './Input';
 export * from './Input';
diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts
index 8cb1415f5c0c7c..cc832f19ced329 100644
--- a/packages/material-ui/src/styles/overrides.d.ts
+++ b/packages/material-ui/src/styles/overrides.d.ts
@@ -43,11 +43,11 @@ import { FormGroupClassKey } from '../FormGroup';
 import { FormHelperTextClassKey } from '../FormHelperText';
 import { FormLabelClassKey } from '../FormLabel';
 import { GridClassKey } from '../Grid';
-import { ImageListClassKey } from '../ImageList';
-import { ImageListTileBarClassKey } from '../ImageListTileBar';
-import { ImageListTileClassKey } from '../ImageListTile';
 import { IconButtonClassKey } from '../IconButton';
 import { IconClassKey } from '../Icon';
+import { ImageListClassKey } from '../ImageList';
+import { ImageListItemBarClassKey } from '../ImageListItemBar';
+import { ImageListItemClassKey } from '../ImageListItem';
 import { InputAdornmentClassKey } from '../InputAdornment';
 import { InputBaseClassKey } from '../InputBase';
 import { InputClassKey } from '../Input';
@@ -159,11 +159,11 @@ export interface ComponentNameToClassKey {
   MuiFormHelperText: FormHelperTextClassKey;
   MuiFormLabel: FormLabelClassKey;
   MuiGrid: GridClassKey;
-  MuiImageList: ImageListClassKey;
-  MuiImageListTile: ImageListTileClassKey;
-  MuiImageListTileBar: ImageListTileBarClassKey;
   MuiIcon: IconClassKey;
   MuiIconButton: IconButtonClassKey;
+  MuiImageList: ImageListClassKey;
+  MuiImageListItem: ImageListItemClassKey;
+  MuiImageListItemBar: ImageListItemBarClassKey;
   MuiInput: InputClassKey;
   MuiInputAdornment: InputAdornmentClassKey;
   MuiInputBase: InputBaseClassKey;
diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts
index aa602d47de8c2b..8447cc9fbcec67 100644
--- a/packages/material-ui/src/styles/props.d.ts
+++ b/packages/material-ui/src/styles/props.d.ts
@@ -43,8 +43,8 @@ import { FormGroupProps } from '../FormGroup';
 import { FormHelperTextProps } from '../FormHelperText';
 import { FormLabelProps } from '../FormLabel';
 import { ImageListProps } from '../ImageList';
-import { ImageListTileBarProps } from '../ImageListTileBar';
-import { ImageListTileProps } from '../ImageListTile';
+import { ImageListItemBarProps } from '../ImageListItemBar';
+import { ImageListItemProps } from '../ImageListItem';
 import { GridProps } from '../Grid';
 import { IconButtonProps } from '../IconButton';
 import { IconProps } from '../Icon';
@@ -155,8 +155,8 @@ export interface ComponentsPropsList {
   MuiFormLabel: FormLabelProps;
   MuiGrid: GridProps;
   MuiImageList: ImageListProps;
-  MuiImageListTile: ImageListTileProps;
-  MuiImageListTileBar: ImageListTileBarProps;
+  MuiImageListItem: ImageListItemProps;
+  MuiImageListItemBar: ImageListItemBarProps;
   MuiIcon: IconProps;
   MuiIconButton: IconButtonProps;
   MuiInput: InputProps;
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index 77612dd3809521..6eea228e149709 100644
--- a/packages/material-ui/test/typescript/components.spec.tsx
+++ b/packages/material-ui/test/typescript/components.spec.tsx
@@ -33,7 +33,7 @@ import {
   FormGroup,
   Grid,
   ImageList,
-  ImageListTile,
+  ImageListItem,
   Grow,
   IconButton,
   Input,
@@ -527,9 +527,9 @@ const GridTest = () => (
 
 const ImageListTest = () => (
   <ImageList cellHeight={160} cols={3} onClick={(e) => log(e)}>
-    <ImageListTile cols={1} rows={4} onClick={(e) => log(e)}>
+    <ImageListItem cols={1} rows={4} onClick={(e) => log(e)}>
       <img src="img.png" alt="alt text" />
-    </ImageListTile>
+    </ImageListItem>
     ,
   </ImageList>
 );