[GridList] Rename to ImageList

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

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

docs/pages/api-docs/grid-list-tile-bar.js → docs/pages/api-docs/image-list-tile-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/grid-list-tile-bar';
-const requireRaw = require.context('!raw-loader!./', false, /\/grid-list-tile-bar\.md$/);
+const pageFilename = 'api/image-list-tile-bar';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-tile-bar\.md$/);
 
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;

docs/pages/api-docs/grid-list-tile-bar.md → docs/pages/api-docs/image-list-tile-bar.md

@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui/src/GridListTileBar/GridListTileBar.js
+filename: /packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# GridListTileBar API
+# ImageListTileBar API
 
-<p class="description">The API documentation of the GridListTileBar React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the ImageListTileBar React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import GridListTileBar from '@material-ui/core/GridListTileBar';
+import ImageListTileBar from '@material-ui/core/ImageListTileBar';
 // or
-import { GridListTileBar } from '@material-ui/core';
+import { ImageListTileBar } 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 `MuiGridListTileBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+The `MuiImageListTileBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
 
 ## Props
 
@@ -43,27 +43,27 @@ 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">.MuiGridListTileBar-root</span> | Styles applied to the root element.
-| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">.MuiGridListTileBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
-| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiGridListTileBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
-| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiGridListTileBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
-| <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiGridListTileBar-titleWrap</span> | Styles applied to the title and subtitle container element.
-| <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiGridListTileBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.
-| <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">.MuiGridListTileBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
-| <span class="prop-name">title</span> | <span class="prop-name">.MuiGridListTileBar-title</span> | Styles applied to the title container element.
-| <span class="prop-name">subtitle</span> | <span class="prop-name">.MuiGridListTileBar-subtitle</span> | Styles applied to the subtitle container element.
-| <span class="prop-name">actionIcon</span> | <span class="prop-name">.MuiGridListTileBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
-| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">.MuiGridListTileBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
+| <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"`.
 
 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/GridListTileBar/GridListTileBar.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/ImageListTileBar/ImageListTileBar.js) for more detail.
 
 ## Demos
 
-- [Grid List](/components/grid-list/)
+- [Image List](/components/image-list/)
 

docs/pages/api-docs/grid-list-tile.js → docs/pages/api-docs/image-list-tile.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/grid-list-tile';
-const requireRaw = require.context('!raw-loader!./', false, /\/grid-list-tile\.md$/);
+const pageFilename = 'api/image-list-tile';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-tile\.md$/);
 
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;

docs/pages/api-docs/grid-list-tile.md → docs/pages/api-docs/image-list-tile.md

@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui/src/GridListTile/GridListTile.js
+filename: /packages/material-ui/src/ImageListTile/ImageListTile.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# GridListTile API
+# ImageListTile API
 
-<p class="description">The API documentation of the GridListTile React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the ImageListTile React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import GridListTile from '@material-ui/core/GridListTile';
+import ImageListTile from '@material-ui/core/ImageListTile';
 // or
-import { GridListTile } from '@material-ui/core';
+import { ImageListTile } 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 `MuiGridListTile` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+The `MuiImageListTile` 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 GridListTile 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 ImageListTile 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,20 +42,20 @@ 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">.MuiGridListTile-root</span> | Styles applied to the root element.
-| <span class="prop-name">tile</span> | <span class="prop-name">.MuiGridListTile-tile</span> | Styles applied to the `div` element that wraps the children.
-| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">.MuiGridListTile-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">.MuiGridListTile-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">.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.
 
 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/GridListTile/GridListTile.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/ImageListTile/ImageListTile.js) for more detail.
 
 ## Demos
 
-- [Grid List](/components/grid-list/)
+- [Image List](/components/image-list/)
 

docs/pages/api-docs/grid-list.js → docs/pages/api-docs/image-list.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/grid-list';
-const requireRaw = require.context('!raw-loader!./', false, /\/grid-list\.md$/);
+const pageFilename = 'api/image-list';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list\.md$/);
 
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;

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

@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui/src/GridList/GridList.js
+filename: /packages/material-ui/src/ImageList/ImageList.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# GridList API
+# ImageList API
 
-<p class="description">The API documentation of the GridList React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the ImageList React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import GridList from '@material-ui/core/GridList';
+import ImageList from '@material-ui/core/ImageList';
 // or
-import { GridList } from '@material-ui/core';
+import { ImageList } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -22,14 +22,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 ## Component name
 
-The `MuiGridList` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+The `MuiImageList` 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">cellHeight</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number</span> | <span class="prop-default">180</span> | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
-| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | Grid Tiles that will be in Grid List. |
+| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | Image Tiles that will be in Image List. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">cols</span> | <span class="prop-type">number</span> | <span class="prop-default">2</span> | Number of columns. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'ul'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
@@ -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">.MuiGridList-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiImageList-root</span> | Styles applied to the root element.
 
 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/GridList/GridList.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/ImageList/ImageList.js) for more detail.
 
 ## Demos
 
-- [Grid List](/components/grid-list/)
+- [Image List](/components/image-list/)
 

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

@@ -61,6 +61,6 @@ 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/)
 

docs/pages/components/grid-list.js → docs/pages/components/image-list.js

@@ -2,10 +2,10 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const pageFilename = 'components/grid-list';
-const requireDemo = require.context('docs/src/pages/components/grid-list', false, /\.(js|tsx)$/);
+const pageFilename = 'components/image-list';
+const requireDemo = require.context('docs/src/pages/components/image-list', false, /\.(js|tsx)$/);
 const requireRaw = require.context(
-  '!raw-loader!../../src/pages/components/grid-list',
+  '!raw-loader!../../src/pages/components/image-list',
   false,
   /\.(js|md|tsx)$/,
 );

docs/src/pages.js

@@ -25,8 +25,8 @@ const pages = [
           { pathname: '/components/box' },
           { pathname: '/components/container' },
           { pathname: '/components/grid' },
-          { pathname: '/components/grid-list' },
           { pathname: '/components/hidden' },
+          { pathname: '/components/image-list' },
         ],
       },
       {

docs/src/pages/components/buttons/ButtonBase.js

@@ -5,17 +5,17 @@ import Typography from '@material-ui/core/Typography';
 
 const images = [
   {
-    url: '/static/images/grid-list/breakfast.jpg',
+    url: '/static/images/image-list/breakfast.jpg',
     title: 'Breakfast',
     width: '40%',
   },
   {
-    url: '/static/images/grid-list/burgers.jpg',
+    url: '/static/images/image-list/burgers.jpg',
     title: 'Burgers',
     width: '30%',
   },
   {
-    url: '/static/images/grid-list/camera.jpg',
+    url: '/static/images/image-list/camera.jpg',
     title: 'Camera',
     width: '30%',
   },

docs/src/pages/components/buttons/ButtonBase.tsx

@@ -5,17 +5,17 @@ import Typography from '@material-ui/core/Typography';
 
 const images = [
   {
-    url: '/static/images/grid-list/breakfast.jpg',
+    url: '/static/images/image-list/breakfast.jpg',
     title: 'Breakfast',
     width: '40%',
   },
   {
-    url: '/static/images/grid-list/burgers.jpg',
+    url: '/static/images/image-list/burgers.jpg',
     title: 'Burgers',
     width: '30%',
   },
   {
-    url: '/static/images/grid-list/camera.jpg',
+    url: '/static/images/image-list/camera.jpg',
     title: 'Camera',
     width: '30%',
   },