[GridList] Rename to ImageList & add deprecation warnings (#22363)

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
 
@@ -63,7 +66,3 @@ You can override the style of the component thanks to one of these customization
 
 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/GridListTileBar/GridListTileBar.js) for more detail.
 
-## Demos
-
-- [Grid List](/components/grid-list/)
-

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
 
@@ -55,7 +58,3 @@ You can override the style of the component thanks to one of these customization
 
 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/GridListTile/GridListTile.js) for more detail.
 
-## Demos
-
-- [Grid List](/components/grid-list/)
-

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
 
@@ -53,7 +56,3 @@ You can override the style of the component thanks to one of these customization
 
 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/GridList/GridList.js) for more detail.
 
-## Demos
-
-- [Grid List](/components/grid-list/)
-

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

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

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,70 @@
+---
+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 item itself). |
+| <span class="prop-name">actionPosition</span> | <span class="prop-type">'left'<br>&#124;&nbsp;'right'</span> | <span class="prop-default">'right'</span> | Position of secondary action IconButton. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">position</span> | <span class="prop-type">'bottom'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Position of the title bar. |
+| <span class="prop-name">subtitle</span> | <span class="prop-type">node</span> |  | String or element serving as subtitle (support text). |
+| <span class="prop-name">title</span> | <span class="prop-type">node</span> |  | Title to be displayed on item. |
+| ~~<span class="prop-name">titlePosition</span>~~ | <span class="prop-type">oneOf(['bottom'</span> |  | *Deprecated*. Use the `position` prop instead.<br><br>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">positionBottom</span> | <span class="prop-name">.MuiImageListItemBar-positionBottom</span> | Styles applied to the root element if `position="bottom"`.
+| <span class="prop-name">positionTop</span> | <span class="prop-name">.MuiImageListItemBar-positionTop</span> | Styles applied to the root element if `position="top"`.
+| <span class="prop-name">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,61 @@
+---
+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">children</span> | <span class="prop-type">node</span> |  | While you can pass any node as children, the main use case is for an img. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">cols</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Width of the item in number of grid columns. |
+| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
+| <span class="prop-name">rows</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Height of the item in number of grid rows. |
+
+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">item</span> | <span class="prop-name">.MuiImageListItem-item</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 item.
+| <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 item.
+
+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,61 @@
+---
+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">cellHeight</span>~~ | <span class="prop-type">oneOfType([PropTypes.number</span> |  | *Deprecated*. Use the `rowHeight` prop instead.<br><br>Cell height in `px`. Set to `'auto'` to let the children determine the height. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | Items that will be in the image list. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">cols</span> | <span class="prop-type">number</span> | <span class="prop-default">2</span> | Number of columns. |
+| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'ul'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
+| <span class="prop-name">gap</span> | <span class="prop-type">number</span> | <span class="prop-default">4</span> | The gap between items in `px`. |
+| <span class="prop-name">rowHeight</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number</span> | <span class="prop-default">180</span> | The height of one row in `px`. |
+| ~~<span class="prop-name">spacing</span>~~ | <span class="prop-type">number</span> |  | *Deprecated*. Use the `gap` prop instead.<br><br>The spacing between items in `px`. |
+
+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/api-docs/list-subheader.md

@@ -61,6 +61,5 @@ If that's not sufficient, you can check the [implementation of the component](ht
 
 ## Demos
 
-- [Grid List](/components/grid-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/public/_redirects

@@ -128,6 +128,7 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
 /customization/themes/ /customization/theming/ 301
 https://v1-5-0.material-ui.com/* https://v1.material-ui.com/:splat 301!
 https://v3-9-0.material-ui.com/* https://v3.material-ui.com/:splat 301!
+/components/grid-list/ /components/image-list/ 301
 
 # Proxies
 

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