[GridList] Rename to ImageList & add deprecation warnings

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

@@ -18,7 +18,10 @@ import { GridListTileBar } from '@material-ui/core';
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
 
+⚠️ The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.
 
+You should use `import { ImageListTileBar } from '@material-ui/core'`
+or `import ImageListTileBar from '@material-ui/core/ImageListTileBar'`.
 
 ## Component name
 

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

@@ -18,7 +18,10 @@ import { GridListTile } from '@material-ui/core';
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
 
+⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
 
+You should use `import { ImageListTile } from '@material-ui/core'`
+or `import ImageListTile from '@material-ui/core/ImageListTile'`.
 
 ## Component name
 

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

@@ -18,7 +18,10 @@ import { GridList } from '@material-ui/core';
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
 
+⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
 
+You should use `import { ImageList } from '@material-ui/core'`
+or `import ImageList from '@material-ui/core/ImageList'`.
 
 ## Component name
 

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

@@ -0,0 +1,15 @@
+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-item-bar';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item-bar\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,69 @@
+---
+filename: /packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ImageListItemBar API
+
+<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 ImageListItemBar from '@material-ui/core/ImageListItemBar';
+// or
+import { ImageListItemBar } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+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
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">actionIcon</span> | <span class="prop-type">node</span> |  | An IconButton element to be used as secondary action target (primary action target is the tile itself). |
+| <span class="prop-name">actionPosition</span> | <span class="prop-type">'left'<br>&#124;&nbsp;'right'</span> | <span class="prop-default">'right'</span> | Position of secondary action IconButton. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">subtitle</span> | <span class="prop-type">node</span> |  | String or element serving as subtitle (support text). |
+| <span class="prop-name">title</span> | <span class="prop-type">node</span> |  | Title to be displayed on tile. |
+| <span class="prop-name">titlePosition</span> | <span class="prop-type">'bottom'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Position of the title bar. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListItemBar-root</span> | Styles applied to the root element.
+| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
+| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
+| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiImageListItemBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
+| <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiImageListItemBar-titleWrap</span> | Styles applied to the title and subtitle container element.
+| <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.
+| <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
+| <span class="prop-name">title</span> | <span class="prop-name">.MuiImageListItemBar-title</span> | Styles applied to the title container element.
+| <span class="prop-name">subtitle</span> | <span class="prop-name">.MuiImageListItemBar-subtitle</span> | Styles applied to the subtitle container element.
+| <span class="prop-name">actionIcon</span> | <span class="prop-name">.MuiImageListItemBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
+| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">.MuiImageListItemBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js) for more detail.
+
+## Demos
+
+- [Image List](/components/image-list/)
+

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

@@ -0,0 +1,15 @@
+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-item';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,58 @@
+---
+filename: /packages/material-ui/src/ImageListItem/ImageListItem.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ImageListItem API
+
+<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 ImageListItem from '@material-ui/core/ImageListItem';
+// or
+import { ImageListItem } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiImageListItem` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">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">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. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListItem-root</span> | Styles applied to the root element.
+| <span class="prop-name">tile</span> | <span class="prop-name">.MuiImageListItem-tile</span> | Styles applied to the `div` element that wraps the children.
+| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">.MuiImageListItem-imgFullHeight</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| <span class="prop-name">imgFullWidth</span> | <span class="prop-name">.MuiImageListItem-imgFullWidth</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+
+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/master/packages/material-ui/src/ImageListItem/ImageListItem.js) for more detail.
+
+## Demos
+
+- [Image List](/components/image-list/)
+

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

@@ -0,0 +1,15 @@
+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';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,55 @@
+---
+filename: /packages/material-ui/src/ImageList/ImageList.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ImageList API
+
+<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 ImageList from '@material-ui/core/ImageList';
+// or
+import { ImageList } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+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">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">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. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <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/master/packages/material-ui/src/ImageList/ImageList.js) for more detail.
+
+## Demos
+
+- [Image List](/components/image-list/)
+

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%',
   },

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}}
 

docs/src/pages/components/grid-list/AdvancedGridList.js → docs/src/pages/components/image-list/AdvancedImageList.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-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';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -49,16 +49,16 @@ const useStyles = makeStyles((theme) => ({
  *   },
  * ];
  */
-export default function AdvancedGridList() {
+export default function AdvancedImageList() {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      <GridList cellHeight={200} spacing={1} className={classes.gridList}>
+      <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map((tile) => (
-          <GridListTile 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} />
-            <GridListTileBar
+            <ImageListItemBar
               title={tile.title}
               titlePosition="top"
               actionIcon={
@@ -69,9 +69,9 @@ export default function AdvancedGridList() {
               actionPosition="left"
               className={classes.titleBar}
             />
-          </GridListTile>
+          </ImageListItem>
         ))}
-      </GridList>
+      </ImageList>
     </div>
   );
 }