diff --git a/docs/pages/api-docs/grid-list-tile-bar.md b/docs/pages/api-docs/grid-list-tile-bar.md
index 4af37840f475f1..29450b984099dd 100644
--- a/docs/pages/api-docs/grid-list-tile-bar.md
+++ b/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/)
-
diff --git a/docs/pages/api-docs/grid-list-tile.md b/docs/pages/api-docs/grid-list-tile.md
index 8b325375e0ebb0..c48f7d42af9abb 100644
--- a/docs/pages/api-docs/grid-list-tile.md
+++ b/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/)
-
diff --git a/docs/pages/api-docs/grid-list.md b/docs/pages/api-docs/grid-list.md
index 89d7014be4af46..e67dcc3d2bbf85 100644
--- a/docs/pages/api-docs/grid-list.md
+++ b/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/)
-
diff --git a/docs/pages/api-docs/icon-button.md b/docs/pages/api-docs/icon-button.md
index 01d1e5407bd450..015be7107adb43 100644
--- a/docs/pages/api-docs/icon-button.md
+++ b/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/)
diff --git a/docs/pages/api-docs/image-list-item-bar.js b/docs/pages/api-docs/image-list-item-bar.js
new file mode 100644
index 00000000000000..edb472fed02622
--- /dev/null
+++ b/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 ;
+}
+
+Page.getInitialProps = () => {
+ const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+ return { demos, docs };
+};
diff --git a/docs/pages/api-docs/image-list-item-bar.md b/docs/pages/api-docs/image-list-item-bar.md
new file mode 100644
index 00000000000000..4a92a46fae3c5f
--- /dev/null
+++ b/docs/pages/api-docs/image-list-item-bar.md
@@ -0,0 +1,70 @@
+---
+filename: /packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
+---
+
+
+
+# ImageListItemBar API
+
+The API documentation of the ImageListItemBar React component. Learn more about the props and the CSS customization points.
+
+## 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 |
+|:-----|:-----|:--------|:------------|
+| actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the item itself). |
+| actionPosition | 'left'
| 'right' | 'right' | Position of secondary action IconButton. |
+| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| position | 'bottom'
| 'top' | 'bottom' | Position of the title bar. |
+| subtitle | node | | String or element serving as subtitle (support text). |
+| title | node | | Title to be displayed on item. |
+| ~~titlePosition~~ | oneOf(['bottom' | | *Deprecated*. Use the `position` prop instead.
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 |
+|:-----|:-------------|:------------|
+| root | .MuiImageListItemBar-root | Styles applied to the root element.
+| positionBottom | .MuiImageListItemBar-positionBottom | Styles applied to the root element if `position="bottom"`.
+| positionTop | .MuiImageListItemBar-positionTop | Styles applied to the root element if `position="top"`.
+| rootSubtitle | .MuiImageListItemBar-rootSubtitle | Styles applied to the root element if a `subtitle` is provided.
+| titleWrap | .MuiImageListItemBar-titleWrap | Styles applied to the title and subtitle container element.
+| titleWrapActionPosLeft | .MuiImageListItemBar-titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`.
+| titleWrapActionPosRight | .MuiImageListItemBar-titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`.
+| title | .MuiImageListItemBar-title | Styles applied to the title container element.
+| subtitle | .MuiImageListItemBar-subtitle | Styles applied to the subtitle container element.
+| actionIcon | .MuiImageListItemBar-actionIcon | Styles applied to the actionIcon if supplied.
+| actionIconActionPosLeft | .MuiImageListItemBar-actionIconActionPosLeft | 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/)
+
diff --git a/docs/pages/api-docs/image-list-item.js b/docs/pages/api-docs/image-list-item.js
new file mode 100644
index 00000000000000..b6bf73a4e99c11
--- /dev/null
+++ b/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 ;
+}
+
+Page.getInitialProps = () => {
+ const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+ return { demos, docs };
+};
diff --git a/docs/pages/api-docs/image-list-item.md b/docs/pages/api-docs/image-list-item.md
new file mode 100644
index 00000000000000..75c7ea7b720b08
--- /dev/null
+++ b/docs/pages/api-docs/image-list-item.md
@@ -0,0 +1,61 @@
+---
+filename: /packages/material-ui/src/ImageListItem/ImageListItem.js
+---
+
+
+
+# ImageListItem API
+
+The API documentation of the ImageListItem React component. Learn more about the props and the CSS customization points.
+
+## 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 |
+|:-----|:-----|:--------|:------------|
+| children | node | | While you can pass any node as children, the main use case is for an img. |
+| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| cols | number | 1 | Width of the item in number of grid columns. |
+| component | elementType | 'li' | The component used for the root node. Either a string to use a HTML element or a component. |
+| rows | number | 1 | 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 |
+|:-----|:-------------|:------------|
+| root | .MuiImageListItem-root | Styles applied to the root element.
+| item | .MuiImageListItem-item | Styles applied to the `div` element that wraps the children.
+| imgFullHeight | .MuiImageListItem-imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the item.
+| imgFullWidth | .MuiImageListItem-imgFullWidth | 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/)
+
diff --git a/docs/pages/api-docs/image-list.js b/docs/pages/api-docs/image-list.js
new file mode 100644
index 00000000000000..0c2fa21ec58007
--- /dev/null
+++ b/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 ;
+}
+
+Page.getInitialProps = () => {
+ const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+ return { demos, docs };
+};
diff --git a/docs/pages/api-docs/image-list.md b/docs/pages/api-docs/image-list.md
new file mode 100644
index 00000000000000..37e10c1ba9a58a
--- /dev/null
+++ b/docs/pages/api-docs/image-list.md
@@ -0,0 +1,61 @@
+---
+filename: /packages/material-ui/src/ImageList/ImageList.js
+---
+
+
+
+# ImageList API
+
+The API documentation of the ImageList React component. Learn more about the props and the CSS customization points.
+
+## 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 |
+|:-----|:-----|:--------|:------------|
+| ~~cellHeight~~ | oneOfType([PropTypes.number | | *Deprecated*. Use the `rowHeight` prop instead.
Cell height in `px`. Set to `'auto'` to let the children determine the height. |
+| children | node | | Items that will be in the image list. |
+| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| cols | number | 2 | Number of columns. |
+| component | elementType | 'ul' | The component used for the root node. Either a string to use a HTML element or a component. |
+| gap | number | 4 | The gap between items in `px`. |
+| rowHeight | 'auto'
| number | 180 | The height of one row in `px`. |
+| ~~spacing~~ | number | | *Deprecated*. Use the `gap` prop instead.
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 |
+|:-----|:-------------|:------------|
+| root | .MuiImageList-root | 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/)
+
diff --git a/docs/pages/api-docs/list-subheader.md b/docs/pages/api-docs/list-subheader.md
index 1e174241c8682d..9219d2662b54e1 100644
--- a/docs/pages/api-docs/list-subheader.md
+++ b/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/)
diff --git a/docs/pages/components/grid-list.js b/docs/pages/components/image-list.js
similarity index 71%
rename from docs/pages/components/grid-list.js
rename to docs/pages/components/image-list.js
index 2e290836adb4c6..baeeb2c5e17286 100644
--- a/docs/pages/components/grid-list.js
+++ b/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)$/,
);
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 26725fc114677f..d05ae1d16dffc2 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -57,10 +57,8 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
/api/mui-theme-provider/ /styles/api/ 301
/components/expansion-panels/ /components/accordion/ 301
/:userLanguage/components/expansion-panels/ /:userLanguage/components/accordion/ 301
-/api/expansion-panel/ /api/accordion/ 301
-/api/expansion-panel-actions/ /api/accordion-actions/ 301
-/api/expansion-panel-details/ /api/accordion-details/ 301
-/api/expansion-panel-summary/ /api/accordion-summary/ 301
+/components/grid-list/ /components/image-list/ 301
+/:userLanguage/components/grid-list/ /:userLanguage/components/image-list/ 301
# To remove at some point (2022).
/premium-themes* https://material-ui.com/store/ 301
diff --git a/docs/public/static/images/grid-list/bike.jpg b/docs/public/static/images/image-list/bike.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/bike.jpg
rename to docs/public/static/images/image-list/bike.jpg
diff --git a/docs/public/static/images/grid-list/breakfast.jpg b/docs/public/static/images/image-list/breakfast.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/breakfast.jpg
rename to docs/public/static/images/image-list/breakfast.jpg
diff --git a/docs/public/static/images/grid-list/burgers.jpg b/docs/public/static/images/image-list/burgers.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/burgers.jpg
rename to docs/public/static/images/image-list/burgers.jpg
diff --git a/docs/public/static/images/grid-list/camera.jpg b/docs/public/static/images/image-list/camera.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/camera.jpg
rename to docs/public/static/images/image-list/camera.jpg
diff --git a/docs/public/static/images/grid-list/hats.jpg b/docs/public/static/images/image-list/hats.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/hats.jpg
rename to docs/public/static/images/image-list/hats.jpg
diff --git a/docs/public/static/images/grid-list/honey.jpg b/docs/public/static/images/image-list/honey.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/honey.jpg
rename to docs/public/static/images/image-list/honey.jpg
diff --git a/docs/public/static/images/grid-list/morning.jpg b/docs/public/static/images/image-list/morning.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/morning.jpg
rename to docs/public/static/images/image-list/morning.jpg
diff --git a/docs/public/static/images/grid-list/mushroom.jpg b/docs/public/static/images/image-list/mushroom.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/mushroom.jpg
rename to docs/public/static/images/image-list/mushroom.jpg
diff --git a/docs/public/static/images/grid-list/olive.jpg b/docs/public/static/images/image-list/olive.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/olive.jpg
rename to docs/public/static/images/image-list/olive.jpg
diff --git a/docs/public/static/images/grid-list/plant.jpg b/docs/public/static/images/image-list/plant.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/plant.jpg
rename to docs/public/static/images/image-list/plant.jpg
diff --git a/docs/public/static/images/grid-list/star.jpg b/docs/public/static/images/image-list/star.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/star.jpg
rename to docs/public/static/images/image-list/star.jpg
diff --git a/docs/public/static/images/grid-list/vegetables.jpg b/docs/public/static/images/image-list/vegetables.jpg
similarity index 100%
rename from docs/public/static/images/grid-list/vegetables.jpg
rename to docs/public/static/images/image-list/vegetables.jpg
diff --git a/docs/src/pages.js b/docs/src/pages.js
index 00e69f42d7adbe..0b890e94499acd 100644
--- a/docs/src/pages.js
+++ b/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' },
],
},
{
diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js
index 2b1926863a84aa..14a1e975216aa1 100644
--- a/docs/src/pages/components/buttons/ButtonBase.js
+++ b/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%',
},
diff --git a/docs/src/pages/components/buttons/ButtonBase.tsx b/docs/src/pages/components/buttons/ButtonBase.tsx
index 92c3baba126cfa..3544d96d04e726 100644
--- a/docs/src/pages/components/buttons/ButtonBase.tsx
+++ b/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%',
},
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/grid-list/grid-list-fr.md b/docs/src/pages/components/grid-list/grid-list-fr.md
deleted file mode 100644
index fc2fa512f7c3db..00000000000000
--- a/docs/src/pages/components/grid-list/grid-list-fr.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Composant React Grid List
-components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
----
-
-# Grid list
-
-Les listes de grille affichent une collection d'images dans une grille organisée.
-
-[Les listes de grille](https://material.io/design/components/image-lists.html) représentent une collection d'éléments dans un motif répété. Ils aident à améliorer la compréhension visuelle du contenu qu'ils contiennent.
-
-## Grid list contenant uniquement des images
-
-Un exemple simple d'image défilable `GridList`.
-
-{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
-
-## Grid list avec barres de titre
-
-Cet exemple illustre l'utilisation de `GridListTileBar` pour ajouter une superposition à chaque `GridListTile`. La superposition peut accueillir un `titre`, `sous - titre` et une action secondaire - dans cet exemple un `IconButton`.
-
-{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
-
-## Grid List sur une ligne
-
-Cet exemple illustre une grid list défilante horizontale d'images. Les listes de grille défilant horizontalement sont déconseillées car le défilement interfère avec les habitudes de lecture, ce qui affecte la compréhension. Une exception notable est la liste d'images comportant une seule ligne, telle qu'une galerie, qui défile horizontalement.
-
-{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
-
-## Grid list avancée
-
-Cet exemple montre des tuiles , en utilisant les `rows` et `cols`props pour ajuster la taille de la tuile, et le `padding` prop pour ajuster l'espacement. Les tuiles ont une barre de titre personnalisée, placée en haut et avec un dégradé personnalisé `titleBackground`. L'action secondaire `IconButton` est positionnée sur la gauche.
-
-{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
diff --git a/docs/src/pages/components/grid-list/grid-list.md b/docs/src/pages/components/grid-list/grid-list.md
deleted file mode 100644
index 66a3f8a932c587..00000000000000
--- a/docs/src/pages/components/grid-list/grid-list.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Grid List React component
-components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
----
-
-# Grid List
-
-Grid lists display a collection of images in an organized grid.
-
-[Grid lists](https://material.io/design/components/image-lists.html) represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold.
-
-## Image-only Grid list
-
-A simple example of a scrollable image `GridList`.
-
-{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
-
-## Grid list with titlebars
-
-This example demonstrates the use of the `GridListTileBar` to add an overlay to each `GridListTile`.
-The overlay can accommodate a `title`, `subtitle` and secondary action - in this example an `IconButton`.
-
-{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
-
-## Single line Grid list
-
-This example demonstrates a horizontal scrollable single-line grid list of images.
-Horizontally scrolling grid lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension.
-One notable exception is a horizontally-scrolling, single-line grid list of images, such as a gallery.
-
-{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
-
-## Advanced Grid list
-
-This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the tile, and the `padding` prop to adjust the spacing.
-The tiles have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`.
-The secondary action `IconButton` is positioned on the left.
-
-{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
diff --git a/docs/src/pages/components/grid-list/tileData.d.ts b/docs/src/pages/components/grid-list/tileData.d.ts
deleted file mode 100644
index c4aecca665999f..00000000000000
--- a/docs/src/pages/components/grid-list/tileData.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface TileDataItem {
- img: string;
- title: string;
- author: string;
- cols: number;
- featured: boolean;
-}
-
-declare const tileData: TileDataItem[];
-
-export default tileData;
diff --git a/docs/src/pages/components/grid-list/AdvancedGridList.js b/docs/src/pages/components/image-list/AdvancedImageList.js
similarity index 59%
rename from docs/src/pages/components/grid-list/AdvancedGridList.js
rename to docs/src/pages/components/image-list/AdvancedImageList.js
index cc3da68c9f10b4..41068edfa6a06a 100644
--- a/docs/src/pages/components/grid-list/AdvancedGridList.js
+++ b/docs/src/pages/components/image-list/AdvancedImageList.js
@@ -1,11 +1,11 @@
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';
+import itemData from './itemData';
const useStyles = makeStyles((theme) => ({
root: {
@@ -15,10 +15,10 @@ const useStyles = makeStyles((theme) => ({
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
},
- gridList: {
+ imageList: {
width: 500,
height: 450,
- // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
+ // Promote the list into its own layer in Chrome. This cost memory, but helps keep FPS high.
transform: 'translateZ(0)',
},
titleBar: {
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
* import image from 'path/to/image.jpg';
* [etc...]
*
- * const tileData = [
+ * const itemData = [
* {
* img: image,
* title: 'Image',
@@ -49,29 +49,29 @@ const useStyles = makeStyles((theme) => ({
* },
* ];
*/
-export default function AdvancedGridList() {
+export default function AdvancedImageList() {
const classes = useStyles();
return (
-
- {tileData.map((tile) => (
-
- 
-
+ {itemData.map((item) => (
+
+ 
+
+
}
actionPosition="left"
className={classes.titleBar}
/>
-
+
))}
-
+
-
- {tileData.map((tile) => (
-
-
-
+ {itemData.map((item) => (
+
+
+
+
}
actionPosition="left"
className={classes.titleBar}
/>
-
+
))}
-
+
-
- {tileData.map((tile) => (
-
-
-
+
+ {itemData.map((item) => (
+
+
+
))}
-
+
-
- {tileData.map((tile) => (
-
-
-
+
+ {itemData.map((item) => (
+
+
+
))}
-
+
-
- {tileData.map((tile) => (
-
-
-
+ {itemData.map((item) => (
+
+
+
+
}
/>
-
+
))}
-
+
-
- {tileData.map((tile) => (
-
-
-
+ {itemData.map((item) => (
+
+
+
+
}
/>
-
+
))}
-
+
-
-
+
+
December
-
- {tileData.map((tile) => (
-
-
- by: {tile.author}}
+
+ {itemData.map((item) => (
+
+
+ by: {item.author}}
actionIcon={
-
+
}
/>
-
+
))}
-
+
-
-
+
+
December
-
- {tileData.map((tile) => (
-
-
- by: {tile.author}}
+
+ {itemData.map((item) => (
+
+
+ by: {item.author}}
actionIcon={
-
+
}
/>
-
+
))}
-
+
Les listes de grille affichent une collection d'images dans une grille organisée.
+
+[Les listes de grille](https://material.io/design/components/image-lists.html) représentent une collection d'éléments dans un motif répété. Ils aident à améliorer la compréhension visuelle du contenu qu'ils contiennent.
+
+## Grid list contenant uniquement des images
+
+Un exemple simple d'image défilable `ImageList`.
+
+{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
+
+## Grid list avec barres de titre
+
+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}}
+
+## Grid List sur une ligne
+
+Cet exemple illustre une image list défilante horizontale d'images. Les listes de grille défilant horizontalement sont déconseillées car le défilement interfère avec les habitudes de lecture, ce qui affecte la compréhension. Une exception notable est la liste d'images comportant une seule ligne, telle qu'une galerie, qui défile horizontalement.
+
+{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
+
+## Grid list avancée
+
+Cet exemple montre des tuiles , en utilisant les `rows` et `cols`props pour ajuster la taille de la tuile, et le `padding` prop pour ajuster l'espacement. Les tuiles ont une barre de titre personnalisée, placée en haut et avec un dégradé personnalisé `titleBackground`. L'action secondaire `IconButton` est positionnée sur la gauche.
+
+{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
diff --git a/docs/src/pages/components/grid-list/grid-list-ja.md b/docs/src/pages/components/image-list/image-list-ja.md
similarity index 65%
rename from docs/src/pages/components/grid-list/grid-list-ja.md
rename to docs/src/pages/components/image-list/image-list-ja.md
index c1a8b299941a7c..7decf95449aa47 100644
--- a/docs/src/pages/components/grid-list/grid-list-ja.md
+++ b/docs/src/pages/components/image-list/image-list-ja.md
@@ -1,6 +1,6 @@
---
title: Grid List React component
-components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
---
# Grid List
@@ -11,24 +11,24 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
## 画像のみのGrid list
-スクロール可能な画像の簡単な `GridList`の例。
+スクロール可能な画像の簡単な `ImageList`の例。
-{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
## タイトルバー付きのGrid list
-この例は、 `GridListTileBar` を使用して、各 `GridListTile`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。
+この例は、 `ImageListItemBar` を使用して、各 `ImageListItem`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。
-{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
## Single line Grid list 単一行グリッドリスト
この例では、水平スクロール可能な単一行グリッドの画像リストを示します。 水平方向のスクロールグリッドリストは、スクロールが一般的な読み方の邪魔になり理解に影響を与えるため、推奨されません。 注目すべき例外の1つは、水平にスクロールする、ギャラリーなどの画像の1行グリッドリストです。
-{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
## 高度なグリッドリスト
この例では、`rows` and `cols` プロップを使用してタイルのサイズを調整し、 `padding`プロップを使用して間隔を調整する方法を示します。 タイルには、上部にカスタムのタイトルバーがあり、カスタムのグラデーション`titleBackground`があります。 セカンダリアクション `IconButton` は左側に配置されます。
-{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
+{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
diff --git a/docs/src/pages/components/grid-list/grid-list-pt.md b/docs/src/pages/components/image-list/image-list-pt.md
similarity index 64%
rename from docs/src/pages/components/grid-list/grid-list-pt.md
rename to docs/src/pages/components/image-list/image-list-pt.md
index 6668c6374fb932..c462efcdfea529 100644
--- a/docs/src/pages/components/grid-list/grid-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: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
---
# Lista de Grade
@@ -11,24 +11,24 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
## Lista de grade com imagens
-Um exemplo simples de uma `GridList` com imagens.
+Um exemplo simples de uma `ImageList` com imagens.
-{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
## Lista de grade com barras de título
-Este exemplo demonstra o uso do `GridListTileBar` para adicionar uma sobreposição a cada `GridListTile`. 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/grid-list/TitlebarGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
## Lista de grade em linha única
Este exemplo demonstra uma lista de grade com imagens, em linha unica e rolável horizontalmente. As listas de grade de rolagem horizontal não são recomendadas porque a rolagem interfere nos padrões de leitura típicos, afetando a compreensão. Uma exceção notável para rolagem horizontal, seria uma lista de grade com imagens em linha única, como uma galeria.
-{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
## Lista de grade avançada
Este exemplo demonstra blocos "em destaque", usando as propriedades `rows` e `cols` para ajustar o tamanho do bloco, e a propriedade `padding` para ajustar o espaçamento. Os blocos tem uma barra de título customizada, posicionada no topo e com um gradiente personalizado `titleBackground`. A ação secundária `IconButton` está posicionada à esquerda.
-{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
+{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
diff --git a/docs/src/pages/components/grid-list/grid-list-ru.md b/docs/src/pages/components/image-list/image-list-ru.md
similarity index 86%
rename from docs/src/pages/components/grid-list/grid-list-ru.md
rename to docs/src/pages/components/image-list/image-list-ru.md
index 206ff993f7aa1d..92e365577b43b8 100644
--- a/docs/src/pages/components/grid-list/grid-list-ru.md
+++ b/docs/src/pages/components/image-list/image-list-ru.md
@@ -1,6 +1,6 @@
---
title: Сеть изображений, компонент React
-components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
---
# Сеть изображений
@@ -13,22 +13,22 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
Простой пример прокручиваемой `Сети изображений`.
-{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
## Сеть изображений с заголовками
Этот пример демонстрирует использование `Полосы заголовка сети изображений`, которую следует добавить в каждый `Заголовок сети изображений`. Мы можем указать `заголовок`, `подзаголовок` и дополнительное действие - в этом примере `кнопка-иконка`.
-{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
## Сеть изображений в одну строку
Данный пример показывает сеть изображений в одну строку с горизонтальной прокруткой. Сети изображений с горизонтальнйо прокруткой не рекомендуется применять, так как это может вызвать дискомфорт у пользователей, ведь обычно при чтении используется вертикальная прокрутка. Исключением из этого правила являются сети с горизонтальной прокруткой в одну строку, например галерея.
-{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
## Более сложный пример
В этом примере демонстрирует «рекомендуемые» листы, в которых используются свойства `rows` и `cols` чтобы отрегулировать размер плитки, и свойство `padding` чтобы отрегулировать поля между плитками. На плитках можно видеть пользовательскую полосу расположенную вверху с даным значением градиента в свойстве `titleBackground`. Дополнительное действие в `Кнопке-иконке` распложенно по левую сторону.
-{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
+{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
diff --git a/docs/src/pages/components/grid-list/grid-list-zh.md b/docs/src/pages/components/image-list/image-list-zh.md
similarity index 62%
rename from docs/src/pages/components/grid-list/grid-list-zh.md
rename to docs/src/pages/components/image-list/image-list-zh.md
index 4734aaba2922d9..82fb813bbcb8b8 100644
--- a/docs/src/pages/components/grid-list/grid-list-zh.md
+++ b/docs/src/pages/components/image-list/image-list-zh.md
@@ -1,6 +1,6 @@
---
-title: React 网格列表组件
-components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
+title: React Grid List 网格列表组件
+components: ImageList, ImageListItem, ImageListItemBar, ListSubheader, IconButton
---
# Grid List 网格列表
@@ -13,22 +13,22 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton
这是一个可滚动的图像的`网格列表`的简单示例。
-{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
## 带有标题栏的网格列表
-此示例演示如何使用 `GridListTileBar` 为每个 `GridListTile` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。
+此示例演示如何使用 `ImageListItemBar` 为每个 `ImageListItem` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。
-{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
## 单行网格列表
此示例演示了可以在水平方向滚动的单行纯图像网格列表。 我们其实不鼓励水平滚动网格列表，因为滚动会干扰典型的阅读模式，从而影响用户的理解。 一个值得注意的例外是水平滚动的单行网格图像列表，例如图库。
-{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
+{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
## 高级网格列表
此示例演示了“精选的”瓷砖效果 ，使用 `rows` 和 `cols` props 来调整磁贴的大小，并使用 `padding` 属性来调整间距。 瓷砖有一个位于顶部的自定义标题栏，并带有自定义渐变的 `titleBackground `。 而辅助操作的 `IconButton` 则位于左侧。
-{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
+{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
\ No newline at end of file
diff --git a/docs/src/pages/components/image-list/image-list.md b/docs/src/pages/components/image-list/image-list.md
new file mode 100644
index 00000000000000..c97eae1bf42536
--- /dev/null
+++ b/docs/src/pages/components/image-list/image-list.md
@@ -0,0 +1,39 @@
+---
+title: Image list React component
+components: ImageList, ImageListItem, ImageListItemBar
+---
+
+# Image list
+
+Image lists display a collection of images in an organized image.
+
+Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold.
+
+## Basic image list
+
+A simple example of a scrollable image `ImageList`.
+
+{{"demo": "pages/components/image-list/BasicImageList.js", "hideEditButton": true}}
+
+## Image list with titlebars
+
+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}}
+
+## Single line image list
+
+This example demonstrates a horizontal scrollable single-line image list of images.
+Horizontally scrolling image lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension.
+One notable exception is a horizontally-scrolling, single-line image list of images, such as a gallery.
+
+{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
+
+## Advanced image list
+
+This example demonstrates "featured" items, using the `rows` and `cols` props to adjust the size of the item, and the `gap` prop to adjust the spacing.
+The items have a customized titlebar, positioned at the top, and with a custom gradient `titleBackground`.
+The secondary action `IconButton` is positioned on the left.
+
+{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
diff --git a/docs/src/pages/components/image-list/itemData.d.ts b/docs/src/pages/components/image-list/itemData.d.ts
new file mode 100644
index 00000000000000..d71b12c82d9d57
--- /dev/null
+++ b/docs/src/pages/components/image-list/itemData.d.ts
@@ -0,0 +1,11 @@
+export interface ItemDataItem {
+ img: string;
+ title: string;
+ author: string;
+ cols: number;
+ featured: boolean;
+}
+
+declare const itemData: ItemDataItem[];
+
+export default itemData;
diff --git a/docs/src/pages/components/grid-list/tileData.js b/docs/src/pages/components/image-list/itemData.js
similarity index 55%
rename from docs/src/pages/components/grid-list/tileData.js
rename to docs/src/pages/components/image-list/itemData.js
index 4884061233189d..f56a7b684b47b1 100644
--- a/docs/src/pages/components/grid-list/tileData.js
+++ b/docs/src/pages/components/image-list/itemData.js
@@ -1,69 +1,69 @@
-const tileData = [
+const itemData = [
{
- img: '/static/images/grid-list/breakfast.jpg',
+ img: '/static/images/image-list/breakfast.jpg',
title: 'Breakfast',
author: 'jill111',
cols: 2,
featured: true,
},
{
- img: '/static/images/grid-list/burgers.jpg',
+ img: '/static/images/image-list/burgers.jpg',
title: 'Tasty burger',
author: 'director90',
},
{
- img: '/static/images/grid-list/camera.jpg',
+ img: '/static/images/image-list/camera.jpg',
title: 'Camera',
author: 'Danson67',
},
{
- img: '/static/images/grid-list/morning.jpg',
+ img: '/static/images/image-list/morning.jpg',
title: 'Morning',
author: 'fancycrave1',
featured: true,
},
{
- img: '/static/images/grid-list/hats.jpg',
+ img: '/static/images/image-list/hats.jpg',
title: 'Hats',
author: 'Hans',
},
{
- img: '/static/images/grid-list/honey.jpg',
+ img: '/static/images/image-list/honey.jpg',
title: 'Honey',
author: 'fancycravel',
},
{
- img: '/static/images/grid-list/vegetables.jpg',
+ img: '/static/images/image-list/vegetables.jpg',
title: 'Vegetables',
author: 'jill111',
cols: 2,
},
{
- img: '/static/images/grid-list/plant.jpg',
+ img: '/static/images/image-list/plant.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
{
- img: '/static/images/grid-list/mushroom.jpg',
+ img: '/static/images/image-list/mushroom.jpg',
title: 'Mushrooms',
author: 'PublicDomainPictures',
},
{
- img: '/static/images/grid-list/olive.jpg',
+ img: '/static/images/image-list/olive.jpg',
title: 'Olive oil',
author: 'congerdesign',
},
{
- img: '/static/images/grid-list/star.jpg',
+ img: '/static/images/image-list/star.jpg',
title: 'Sea star',
cols: 2,
author: '821292',
},
{
- img: '/static/images/grid-list/bike.jpg',
+ img: '/static/images/image-list/bike.jpg',
title: 'Bike',
author: 'danfador',
},
];
-export default tileData;
+export default itemData;
diff --git a/docs/src/pages/components/grid-list/tslint.json b/docs/src/pages/components/image-list/tslint.json
similarity index 100%
rename from docs/src/pages/components/grid-list/tslint.json
rename to docs/src/pages/components/image-list/tslint.json
diff --git a/docs/src/pages/getting-started/supported-components/supported-components.md b/docs/src/pages/getting-started/supported-components/supported-components.md
index e2a8c2bbba6fcd..0d8f607ce7a68a 100644
--- a/docs/src/pages/getting-started/supported-components/supported-components.md
+++ b/docs/src/pages/getting-started/supported-components/supported-components.md
@@ -50,8 +50,7 @@ to discuss the approach before submitting a pull request.
- **[Inset](https://material.io/design/components/dividers.html#types) ✓**
- **[Middle](https://material.io/design/components/dividers.html#types) ✓**
- **[Subheader](https://material.io/design/components/dividers.html#types) ✓**
-- **[Expansion Panels](https://material.io/archive/guidelines/components/expansion-panels.html) ✓** (*Legacy Material v1*)
-- **[Image lists](https://material.io/design/components/image-lists.html) ✓** (AKA Grid Lists)
+- **[Image lists](https://material.io/components/image-lists) ✓**
- **[Lists](https://material.io/design/components/lists.html) ✓**
- [Types:](https://material.io/design/components/lists.html#types)
- **Single line ✓**
diff --git a/packages/material-ui/src/GridList/GridList.d.ts b/packages/material-ui/src/GridList/GridList.d.ts
index 70be66c6df23a5..6d7748a5a4e8fc 100644
--- a/packages/material-ui/src/GridList/GridList.d.ts
+++ b/packages/material-ui/src/GridList/GridList.d.ts
@@ -11,11 +11,10 @@ export interface GridListTypeMap {
classKey: GridListClassKey;
}
/**
+ * ⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
*
- * Demos:
- *
- * - [Grid List](https://material-ui.com/components/grid-list/)
- *
+ * You should use `import { ImageList } from '@material-ui/core'`
+ * or `import ImageList from '@material-ui/core/ImageList'`.
* API:
*
* - [GridList API](https://material-ui.com/api/grid-list/)
diff --git a/packages/material-ui/src/GridList/GridList.js b/packages/material-ui/src/GridList/GridList.js
index 8f206ea19f2685..9481d95b27efd6 100644
--- a/packages/material-ui/src/GridList/GridList.js
+++ b/packages/material-ui/src/GridList/GridList.js
@@ -16,7 +16,29 @@ export const styles = {
},
};
+let warnedOnce = false;
+
+/**
+ * ⚠️ 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'`.
+ */
const GridList = React.forwardRef(function GridList(props, ref) {
+ if (process.env.NODE_ENV !== 'production') {
+ if (!warnedOnce) {
+ warnedOnce = true;
+ console.error(
+ [
+ 'Material-UI: 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'`.",
+ ].join('\n'),
+ );
+ }
+ }
+
const {
cellHeight = 180,
children,
diff --git a/packages/material-ui/src/GridList/GridList.test.js b/packages/material-ui/src/GridList/GridList.test.js
index 910f7f09e015e8..c80a9e8c0ccd6b 100644
--- a/packages/material-ui/src/GridList/GridList.test.js
+++ b/packages/material-ui/src/GridList/GridList.test.js
@@ -1,32 +1,21 @@
import * as React from 'react';
-import { expect } from 'chai';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { getClasses } from '@material-ui/core/test-utils';
import createMount from 'test/utils/createMount';
import describeConformance from '../test-utils/describeConformance';
import GridList from './GridList';
import consoleErrorMock from 'test/utils/consoleErrorMock';
-const tilesData = [
- {
- img: 'images/grid-list/00-52-29-429_640.jpg',
- title: 'Breakfast',
- author: 'jill111',
- },
- {
- img: 'images/grid-list/burger-827309_640.jpg',
- title: 'Tasty burger',
- author: 'director90',
- },
-];
-
describe('', () => {
let classes;
const mount = createMount();
- let shallow;
before(() => {
classes = getClasses();
- shallow = createShallow({ dive: true });
+ consoleErrorMock.spy();
+ });
+
+ after(() => {
+ consoleErrorMock.reset();
});
describeConformance(
@@ -41,142 +30,4 @@ describe('', () => {
testComponentPropWith: 'li',
}),
);
-
- it('should render children and change cellHeight', () => {
- const cellHeight = 250;
- const wrapper = shallow(
-
- {tilesData.map((tile) => (
- by: {tile.author}}
- >
-
-
- ))}
- ,
- );
-
- expect(wrapper.find('.grid-tile').length).to.equal(2);
- expect(wrapper.children().at(0).props().style.height).to.equal(cellHeight + 4);
- });
-
- it('renders children by default', () => {
- const wrapper = shallow(
-
- {tilesData.map((tile) => (
- by: {tile.author}}
- >
-
-
- ))}
- {false && this is a null child}
- ,
- );
-
- expect(wrapper.find('.grid-tile').length).to.equal(2);
- });
-
- it('renders children and change cols', () => {
- const wrapper = shallow(
-
- {tilesData.map((tile) => (
- by: {tile.author}}
- >
-
-
- ))}
- ,
- );
-
- expect(wrapper.find('.grid-tile').length).to.equal(2);
- expect(wrapper.children().at(0).props().style.width).to.equal('25%');
- });
-
- it('renders children and change spacing', () => {
- const spacing = 10;
- const wrapper = shallow(
-
- {tilesData.map((tile) => (
- by: {tile.author}}
- >
-
-
- ))}
- ,
- );
-
- expect(wrapper.find('.grid-tile').length).to.equal(2);
- expect(wrapper.children().at(0).props().style.padding).to.equal(spacing / 2);
- });
-
- it('should render children and overwrite style', () => {
- const style = { backgroundColor: 'red' };
- const wrapper = shallow(
-
- {tilesData.map((tile) => (
- by: {tile.author}}
- >
-
-
- ))}
- ,
- );
-
- expect(wrapper.find('.grid-tile').length).to.equal(2);
- expect(wrapper.props().style.backgroundColor).to.equal(style.backgroundColor);
- });
-
- describe('prop: cellHeight', () => {
- it('should accept auto as a property', () => {
- const wrapper = shallow(
-
-
- ,
- );
-
- expect(wrapper.children().at(0).props().style.height).to.equal('auto');
- });
- });
-
- describe('warnings', () => {
- before(() => {
- consoleErrorMock.spy();
- });
-
- after(() => {
- consoleErrorMock.reset();
- });
-
- it('warns a Fragment is passed as a child', () => {
- mount(
-
-
- ,
- );
-
- expect(consoleErrorMock.callCount()).to.equal(1);
- expect(consoleErrorMock.messages()[0]).to.include(
- "Material-UI: The GridList component doesn't accept a Fragment as a child.",
- );
- });
- });
});
diff --git a/packages/material-ui/src/GridListTile/GridListTile.d.ts b/packages/material-ui/src/GridListTile/GridListTile.d.ts
index 8cc6c45f45e1a2..10a3cb6fef3050 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.d.ts
+++ b/packages/material-ui/src/GridListTile/GridListTile.d.ts
@@ -10,11 +10,10 @@ export interface GridListTileTypeMap
classKey: GridListTileClassKey;
}
/**
+ * ⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
*
- * Demos:
- *
- * - [Grid List](https://material-ui.com/components/grid-list/)
- *
+ * You should use `import { ImageListTile } from '@material-ui/core'`
+ * or `import ImageListTile from '@material-ui/core/ImageListTile'`.
* API:
*
* - [GridListTile API](https://material-ui.com/api/grid-list-tile/)
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
index 3ed225ca97cdf7..5e6bf88df38b9f 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -65,7 +65,29 @@ function ensureImageCover(imgEl, classes) {
}
}
+let warnedOnce = false;
+
+/**
+ * ⚠️ 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'`.
+ */
const GridListTile = React.forwardRef(function GridListTile(props, ref) {
+ if (process.env.NODE_ENV !== 'production') {
+ if (!warnedOnce) {
+ warnedOnce = true;
+ console.error(
+ [
+ 'Material-UI: The GridListTile component was renamed to ImageListTile 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'`.",
+ ].join('\n'),
+ );
+ }
+ }
+
// cols rows default values are for docs only
const {
children,
diff --git a/packages/material-ui/src/GridListTile/GridListTile.test.js b/packages/material-ui/src/GridListTile/GridListTile.test.js
index 3a0173f6ed3c28..364a06a8756027 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.test.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.test.js
@@ -1,10 +1,9 @@
import * as React from 'react';
-import { expect } from 'chai';
-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 GridListTile from './GridListTile';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
describe('', () => {
const mount = createMount();
@@ -12,6 +11,11 @@ describe('', () => {
before(() => {
classes = getClasses();
+ consoleErrorMock.spy();
+ });
+
+ after(() => {
+ consoleErrorMock.reset();
});
describeConformance(, () => ({
@@ -21,117 +25,4 @@ describe('', () => {
refInstanceof: window.HTMLLIElement,
testComponentPropWith: 'div',
}));
-
- const tileData = {
- img: 'images/grid-list/00-52-29-429_640.jpg',
- title: 'Breakfast',
- author: 'jill111',
- };
-
- describe('prop: children', () => {
- it('should render children by default', () => {
- const children = 
;
- const wrapper = mount({children});
-
- expect(wrapper.containsMatchingElement(children)).to.equal(true);
- });
-
- it('should not change non image child', () => {
- const children =
;
- const wrapper = mount({children});
- expect(wrapper.containsMatchingElement(children)).to.equal(true);
- });
- });
-
- function mountMockImage(imgEl) {
- const Image = React.forwardRef((props, ref) => {
- React.useImperativeHandle(ref, () => imgEl, []);
-
- return ![test]()
;
- });
- Image.muiName = 'Image';
-
- return mount(
-
-
- {null}
- ,
- );
- }
-
- describe('mount image', () => {
- it('should handle missing image', () => {
- mountMockImage(null);
- });
-
- it('should fit the height', () => {
- const imgEl = {
- complete: true,
- width: 16,
- height: 9,
- parentElement: { offsetWidth: 4, offsetHeight: 3 },
- classList: { remove: spy(), add: spy() },
- removeEventListener: () => {},
- };
- mountMockImage(imgEl);
- expect(imgEl.classList.remove.callCount).to.equal(1);
- expect(imgEl.classList.remove.args[0][0]).to.equal(classes.imgFullWidth);
- expect(imgEl.classList.add.callCount).to.equal(1);
- expect(imgEl.classList.add.args[0][0]).to.equal(classes.imgFullHeight);
- });
-
- it('should fit the width', () => {
- const imgEl = {
- complete: true,
- width: 4,
- height: 3,
- parentElement: { offsetWidth: 16, offsetHeight: 9 },
- classList: { remove: spy(), add: spy() },
- removeEventListener: () => {},
- };
- mountMockImage(imgEl);
- expect(imgEl.classList.remove.callCount).to.equal(1);
- expect(imgEl.classList.remove.args[0][0]).to.equal(classes.imgFullHeight);
- expect(imgEl.classList.add.callCount).to.equal(1);
- expect(imgEl.classList.add.args[0][0]).to.equal(classes.imgFullWidth);
- });
- });
-
- describe('resize', () => {
- let clock;
-
- before(() => {
- clock = useFakeTimers();
- });
-
- after(() => {
- clock.restore();
- });
-
- it('should handle the resize event', () => {
- const imgEl = {
- complete: true,
- width: 4,
- height: 3,
- parentElement: { offsetWidth: 16, offsetHeight: 9 },
- classList: { remove: spy(), add: spy() },
- removeEventListener: () => {},
- };
- mountMockImage(imgEl);
- expect(imgEl.classList.remove.callCount).to.equal(1);
- expect(imgEl.classList.remove.args[0][0]).to.equal(classes.imgFullHeight);
- expect(imgEl.classList.add.callCount).to.equal(1);
- expect(imgEl.classList.add.args[0][0]).to.equal(classes.imgFullWidth);
-
- window.dispatchEvent(new window.Event('resize', {}));
- expect(imgEl.classList.remove.callCount).to.equal(1);
- clock.tick(166);
-
- expect(imgEl.classList.remove.callCount).to.equal(2);
- expect(imgEl.classList.remove.callCount).to.equal(2);
- expect(imgEl.classList.remove.args[1][0]).to.equal(classes.imgFullHeight);
- expect(imgEl.classList.add.callCount).to.equal(2);
- expect(imgEl.classList.add.args[1][0]).to.equal(classes.imgFullWidth);
- });
- });
});
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
index f35075dacbb55e..3d46b07e7f975d 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
@@ -39,11 +39,10 @@ export type GridListTileBarClassKey =
| 'actionIconActionPosLeft';
/**
+ * ⚠️ The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.
*
- * Demos:
- *
- * - [Grid List](https://material-ui.com/components/grid-list/)
- *
+ * You should use `import { ImageListTileBar } from '@material-ui/core'`
+ * or `import ImageListTileBar from '@material-ui/core/ImageListTileBar'`.
* API:
*
* - [GridListTileBar API](https://material-ui.com/api/grid-list-tile-bar/)
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
index 528a58a78f7ca2..a4df9aff8e382e 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
@@ -67,7 +67,29 @@ export const styles = (theme) => ({
},
});
+let warnedOnce = false;
+
+/**
+ * ⚠️ 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'`.
+ */
const GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) {
+ if (process.env.NODE_ENV !== 'production') {
+ if (!warnedOnce) {
+ warnedOnce = true;
+ console.error(
+ [
+ 'Material-UI: 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'`.",
+ ].join('\n'),
+ );
+ }
+ }
+
const {
actionIcon,
actionPosition = 'right',
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js
index 66978a91b47ceb..a44d6d592dfc6e 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js
@@ -1,18 +1,21 @@
import * as React from 'react';
-import { expect } from 'chai';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { getClasses } from '@material-ui/core/test-utils';
import createMount from 'test/utils/createMount';
import describeConformance from '../test-utils/describeConformance';
import GridListTileBar from './GridListTileBar';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
describe('', () => {
let classes;
const mount = createMount();
- let shallow;
before(() => {
classes = getClasses();
- shallow = createShallow({ dive: true });
+ consoleErrorMock.spy();
+ });
+
+ after(() => {
+ consoleErrorMock.reset();
});
describeConformance(, () => ({
@@ -22,18 +25,4 @@ describe('', () => {
refInstanceof: window.HTMLDivElement,
skip: ['componentProp'],
}));
-
- const tileData = {
- img: 'images/grid-list/00-52-29-429_640.jpg',
- title: 'Breakfast',
- author: 'jill111',
- };
-
- describe('prop: title', () => {
- it('should renders title', () => {
- const wrapper = shallow();
-
- expect(wrapper.children('div').text()).to.equal(tileData.title);
- });
- });
});
diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts
index 987fa20ccb9d97..45bcc8280295c9 100644
--- a/packages/material-ui/src/IconButton/IconButton.d.ts
+++ b/packages/material-ui/src/IconButton/IconButton.d.ts
@@ -28,7 +28,7 @@ export type IconButtonTypeMap<
* Demos:
*
* - [Buttons](https://material-ui.com/components/buttons/)
- * - [Grid List](https://material-ui.com/components/grid-list/)
+ * - [Image List](https://material-ui.com/components/image-list/)
*
* API:
*
diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts
new file mode 100644
index 00000000000000..e33a6c4d65e17c
--- /dev/null
+++ b/packages/material-ui/src/ImageList/ImageList.d.ts
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+
+export interface ImageListTypeMap {
+ props: P & {
+ /**
+ * Cell height in `px`.
+ * Set to `'auto'` to let the children determine the height.
+ * @deprecated Use rowHeight instead.
+ */
+ cellHeight?: number | 'auto';
+ /**
+ * Items that will be in the image list.
+ */
+ children?: React.ReactNode;
+ /**
+ * Number of columns.
+ */
+ cols?: number;
+ /**
+ * The gap between items in `px`.
+ */
+ gap?: number;
+ /**
+ * The height of one row in `px`.
+ */
+ rowHeight?: number | 'auto';
+ /**
+ * The spacing between items in `px`.
+ * @deprecated Use gap instead.
+ */
+ spacing?: number;
+ };
+ defaultComponent: D;
+ classKey: ImageListClassKey;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Image List](https://material-ui.com/components/image-list/)
+ *
+ * API:
+ *
+ * - [ImageList API](https://material-ui.com/api/image-list/)
+ */
+declare const ImageList: OverridableComponent;
+
+export type ImageListClassKey = 'root';
+
+export type ImageListProps<
+ D extends React.ElementType = ImageListTypeMap['defaultComponent'],
+ P = {}
+> = OverrideProps, D>;
+
+export default ImageList;
diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js
new file mode 100644
index 00000000000000..409957ffd7bdef
--- /dev/null
+++ b/packages/material-ui/src/ImageList/ImageList.js
@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { isFragment } from 'react-is';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import withStyles from '../styles/withStyles';
+import deprecatedPropType from '../utils/deprecatedPropType';
+
+export const styles = {
+ /* Styles applied to the root element. */
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ overflowY: 'auto',
+ listStyle: 'none',
+ padding: 0,
+ WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+ },
+};
+
+const ImageList = React.forwardRef(function ImageList(props, ref) {
+ const {
+ cellHeight,
+ children,
+ classes,
+ className,
+ cols = 2,
+ component: Component = 'ul',
+ gap: gapProp = 4,
+ rowHeight: rowHeightProp = 180,
+ spacing,
+ style,
+ ...other
+ } = props;
+
+ const gap = spacing || gapProp;
+ const rowHeight = cellHeight || rowHeightProp;
+
+ return (
+
+ {React.Children.map(children, (child) => {
+ if (!React.isValidElement(child)) {
+ return null;
+ }
+
+ if (process.env.NODE_ENV !== 'production') {
+ if (isFragment(child)) {
+ console.error(
+ [
+ "Material-UI: The ImageList component doesn't accept a Fragment as a child.",
+ 'Consider providing an array instead.',
+ ].join('\n'),
+ );
+ }
+ }
+
+ const childCols = child.props.cols || 1;
+ const childRows = child.props.rows || 1;
+
+ return React.cloneElement(child, {
+ style: {
+ width: `${(100 / cols) * childCols}%`,
+ height: rowHeight === 'auto' ? 'auto' : rowHeight * childRows + gap,
+ padding: gap / 2,
+ ...child.props.style,
+ },
+ });
+ })}
+
+ );
+});
+
+ImageList.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the d.ts file and run "yarn proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * Cell height in `px`.
+ * Set to `'auto'` to let the children determine the height.
+ * @deprecated Use rowHeight instead.
+ */
+ cellHeight: deprecatedPropType(
+ PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
+ 'Use the `rowHeight` prop instead.',
+ ),
+ /**
+ * Items that will be in the image list.
+ */
+ children: PropTypes.node,
+ /**
+ * Override or extend the styles applied to the component.
+ * See [CSS API](#css) below for more details.
+ */
+ classes: PropTypes.object,
+ /**
+ * @ignore
+ */
+ className: PropTypes.string,
+ /**
+ * Number of columns.
+ */
+ cols: PropTypes.number,
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+ /**
+ * The gap between items in `px`.
+ */
+ gap: PropTypes.number,
+ /**
+ * The height of one row in `px`.
+ */
+ rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+ /**
+ * The spacing between items in `px`.
+ * @deprecated Use gap instead.
+ */
+ spacing: deprecatedPropType(PropTypes.number, 'Use the `gap` prop instead.'),
+ /**
+ * @ignore
+ */
+ style: PropTypes.object,
+};
+
+export default withStyles(styles, { name: 'MuiImageList' })(ImageList);
diff --git a/packages/material-ui/src/ImageList/ImageList.test.js b/packages/material-ui/src/ImageList/ImageList.test.js
new file mode 100644
index 00000000000000..9bd8bddbb477b8
--- /dev/null
+++ b/packages/material-ui/src/ImageList/ImageList.test.js
@@ -0,0 +1,182 @@
+import * as React from 'react';
+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 ImageList from './ImageList';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+
+const itemsData = [
+ {
+ img: 'images/image-list/00-52-29-429_640.jpg',
+ title: 'Breakfast',
+ author: 'jill111',
+ },
+ {
+ img: 'images/image-list/burger-827309_640.jpg',
+ title: 'Tasty burger',
+ author: 'director90',
+ },
+];
+
+describe('', () => {
+ let classes;
+ const mount = createMount();
+ let shallow;
+
+ before(() => {
+ classes = getClasses();
+ shallow = createShallow({ dive: true });
+ });
+
+ describeConformance(
+
+
+ ,
+ () => ({
+ classes,
+ inheritComponent: 'ul',
+ mount,
+ refInstanceof: window.HTMLUListElement,
+ testComponentPropWith: 'li',
+ }),
+ );
+
+ it('should render children and change rowHeight', () => {
+ const rowHeight = 250;
+ const wrapper = shallow(
+
+ {itemsData.map((item) => (
+ by: {item.author}}
+ >
+
+
+ ))}
+ ,
+ );
+
+ expect(wrapper.find('.image-item').length).to.equal(2);
+ expect(wrapper.children().at(0).props().style.height).to.equal(rowHeight + 4);
+ });
+
+ it('renders children by default', () => {
+ const wrapper = shallow(
+
+ {itemsData.map((item) => (
+ by: {item.author}}
+ >
+
+
+ ))}
+ {false && this is a null child}
+ ,
+ );
+
+ expect(wrapper.find('.image-item').length).to.equal(2);
+ });
+
+ it('renders children and change cols', () => {
+ const wrapper = shallow(
+
+ {itemsData.map((item) => (
+ by: {item.author}}
+ >
+
+
+ ))}
+ ,
+ );
+
+ expect(wrapper.find('.image-item').length).to.equal(2);
+ expect(wrapper.children().at(0).props().style.width).to.equal('25%');
+ });
+
+ it('renders children and change gap', () => {
+ const gap = 10;
+ const wrapper = shallow(
+
+ {itemsData.map((item) => (
+ by: {item.author}}
+ >
+
+
+ ))}
+ ,
+ );
+
+ expect(wrapper.find('.image-item').length).to.equal(2);
+ expect(wrapper.children().at(0).props().style.padding).to.equal(gap / 2);
+ });
+
+ it('should render children and overwrite style', () => {
+ const style = { backgroundColor: 'red' };
+ const wrapper = shallow(
+
+ {itemsData.map((item) => (
+ by: {item.author}}
+ >
+
+
+ ))}
+ ,
+ );
+
+ expect(wrapper.find('.image-item').length).to.equal(2);
+ expect(wrapper.props().style.backgroundColor).to.equal(style.backgroundColor);
+ });
+
+ describe('prop: rowHeight', () => {
+ it('should accept auto as a property', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+
+ expect(wrapper.children().at(0).props().style.height).to.equal('auto');
+ });
+ });
+
+ describe('warnings', () => {
+ before(() => {
+ consoleErrorMock.spy();
+ });
+
+ after(() => {
+ consoleErrorMock.reset();
+ });
+
+ it('warns a Fragment is passed as a child', () => {
+ mount(
+
+
+ ,
+ );
+
+ expect(consoleErrorMock.callCount()).to.equal(1);
+ expect(consoleErrorMock.messages()[0]).to.include(
+ "Material-UI: The ImageList component doesn't accept a Fragment as a child.",
+ );
+ });
+ });
+});
diff --git a/packages/material-ui/src/ImageList/index.d.ts b/packages/material-ui/src/ImageList/index.d.ts
new file mode 100644
index 00000000000000..f38037f0bc3a5a
--- /dev/null
+++ b/packages/material-ui/src/ImageList/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './ImageList';
+export * from './ImageList';
diff --git a/packages/material-ui/src/ImageList/index.js b/packages/material-ui/src/ImageList/index.js
new file mode 100644
index 00000000000000..a5ec3349f1e072
--- /dev/null
+++ b/packages/material-ui/src/ImageList/index.js
@@ -0,0 +1 @@
+export { default } from './ImageList';
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..0e60f3cea17f4b
--- /dev/null
+++ b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+
+export interface ImageListItemTypeMap {
+ props: P & {
+ /**
+ * While you can pass any node as children, the main use case is for an img.
+ */
+ children?: React.ReactNode;
+ /**
+ * Width of the item in number of grid columns.
+ */
+ cols?: number;
+ /**
+ * Height of the item in number of grid rows.
+ */
+ 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;
+
+export type ImageListItemClassKey = 'root' | 'item' | 'imgFullHeight' | 'imgFullWidth';
+
+export type ImageListItemProps<
+ D extends React.ElementType = ImageListItemTypeMap['defaultComponent'],
+ P = {}
+> = OverrideProps, D>;
+
+export default ImageListItem;
diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.js b/packages/material-ui/src/ImageListItem/ImageListItem.js
new file mode 100644
index 00000000000000..0e91b53e54a525
--- /dev/null
+++ b/packages/material-ui/src/ImageListItem/ImageListItem.js
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import debounce from '../utils/debounce';
+import withStyles from '../styles/withStyles';
+import isMuiElement from '../utils/isMuiElement';
+
+export const styles = {
+ /* Styles applied to the root element. */
+ root: {
+ boxSizing: 'border-box',
+ flexShrink: 0,
+ },
+ /* Styles applied to the `div` element that wraps the children. */
+ item: {
+ position: 'relative',
+ display: 'block', // In case it's not rendered with a div.
+ height: '100%',
+ overflow: 'hidden',
+ },
+ /* Styles applied to an `img` element child, if needed to ensure it covers the item. */
+ imgFullHeight: {
+ height: '100%',
+ transform: 'translateX(-50%)',
+ position: 'relative',
+ left: '50%',
+ },
+ /* Styles applied to an `img` element child, if needed to ensure it covers the item. */
+ imgFullWidth: {
+ width: '100%',
+ position: 'relative',
+ transform: 'translateY(-50%)',
+ top: '50%',
+ },
+};
+
+const fit = (imgEl, classes) => {
+ if (!imgEl || !imgEl.complete) {
+ return;
+ }
+
+ if (
+ imgEl.width / imgEl.height >
+ imgEl.parentElement.offsetWidth / imgEl.parentElement.offsetHeight
+ ) {
+ imgEl.classList.remove(...classes.imgFullWidth.split(' '));
+ imgEl.classList.add(...classes.imgFullHeight.split(' '));
+ } else {
+ imgEl.classList.remove(...classes.imgFullHeight.split(' '));
+ imgEl.classList.add(...classes.imgFullWidth.split(' '));
+ }
+};
+
+function ensureImageCover(imgEl, classes) {
+ if (!imgEl) {
+ return;
+ }
+
+ if (imgEl.complete) {
+ fit(imgEl, classes);
+ } else {
+ imgEl.addEventListener('load', () => {
+ fit(imgEl, classes);
+ });
+ }
+}
+
+const ImageListItem = React.forwardRef(function ImageListItem(props, ref) {
+ // cols rows default values are for docs only
+ const {
+ children,
+ classes,
+ className,
+ // eslint-disable-next-line no-unused-vars
+ cols = 1,
+ component: Component = 'li',
+ // eslint-disable-next-line no-unused-vars
+ rows = 1,
+ ...other
+ } = props;
+
+ const imgRef = React.useRef(null);
+
+ React.useEffect(() => {
+ ensureImageCover(imgRef.current, classes);
+ });
+
+ React.useEffect(() => {
+ const handleResize = debounce(() => {
+ fit(imgRef.current, classes);
+ });
+
+ window.addEventListener('resize', handleResize);
+ return () => {
+ handleResize.clear();
+ window.removeEventListener('resize', handleResize);
+ };
+ }, [classes]);
+
+ return (
+
+
+ {React.Children.map(children, (child) => {
+ if (!React.isValidElement(child)) {
+ return null;
+ }
+
+ if (child.type === 'img' || isMuiElement(child, ['Image'])) {
+ return React.cloneElement(child, {
+ ref: imgRef,
+ });
+ }
+
+ return child;
+ })}
+
+
+ );
+});
+
+ImageListItem.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the d.ts file and run "yarn proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * While you can pass any node as children, the main use case is for an img.
+ */
+ children: PropTypes.node,
+ /**
+ * Override or extend the styles applied to the component.
+ * See [CSS API](#css) below for more details.
+ */
+ classes: PropTypes.object,
+ /**
+ * @ignore
+ */
+ className: PropTypes.string,
+ /**
+ * Width of the item in number of grid columns.
+ */
+ cols: PropTypes.number,
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+ /**
+ * Height of the item in number of grid rows.
+ */
+ rows: PropTypes.number,
+};
+
+export default withStyles(styles, { name: 'MuiImageListItem' })(ImageListItem);
diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.test.js b/packages/material-ui/src/ImageListItem/ImageListItem.test.js
new file mode 100644
index 00000000000000..d066f9b05d2c8c
--- /dev/null
+++ b/packages/material-ui/src/ImageListItem/ImageListItem.test.js
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { expect } from 'chai';
+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 ImageListItem from './ImageListItem';
+
+describe('', () => {
+ const mount = createMount();
+ let classes;
+
+ before(() => {
+ classes = getClasses();
+ });
+
+ describeConformance(, () => ({
+ classes,
+ inheritComponent: 'li',
+ mount,
+ refInstanceof: window.HTMLLIElement,
+ testComponentPropWith: 'div',
+ }));
+
+ const itemData = {
+ img: 'images/image-list/00-52-29-429_640.jpg',
+ title: 'Breakfast',
+ author: 'jill111',
+ };
+
+ describe('prop: children', () => {
+ it('should render children by default', () => {
+ const children = 
;
+ const wrapper = mount({children});
+
+ expect(wrapper.containsMatchingElement(children)).to.equal(true);
+ });
+
+ it('should not change non image child', () => {
+ const children = ;
+ const wrapper = mount({children});
+ expect(wrapper.containsMatchingElement(children)).to.equal(true);
+ });
+ });
+
+ function mountMockImage(imgEl) {
+ const Image = React.forwardRef((props, ref) => {
+ React.useImperativeHandle(ref, () => imgEl, []);
+
+ return ![test]()
;
+ });
+ Image.muiName = 'Image';
+
+ return mount(
+
+
+ {null}
+ ,
+ );
+ }
+
+ describe('mount image', () => {
+ it('should handle missing image', () => {
+ mountMockImage(null);
+ });
+
+ it('should fit the height', () => {
+ const imgEl = {
+ complete: true,
+ width: 16,
+ height: 9,
+ parentElement: { offsetWidth: 4, offsetHeight: 3 },
+ classList: { remove: spy(), add: spy() },
+ removeEventListener: () => {},
+ };
+ mountMockImage(imgEl);
+ expect(imgEl.classList.remove.callCount).to.equal(1);
+ expect(imgEl.classList.remove.args[0][0]).to.equal(classes.imgFullWidth);
+ expect(imgEl.classList.add.callCount).to.equal(1);
+ expect(imgEl.classList.add.args[0][0]).to.equal(classes.imgFullHeight);
+ });
+
+ it('should fit the width', () => {
+ const imgEl = {
+ complete: true,
+ width: 4,
+ height: 3,
+ parentElement: { offsetWidth: 16, offsetHeight: 9 },
+ classList: { remove: spy(), add: spy() },
+ removeEventListener: () => {},
+ };
+ mountMockImage(imgEl);
+ expect(imgEl.classList.remove.callCount).to.equal(1);
+ expect(imgEl.classList.remove.args[0][0]).to.equal(classes.imgFullHeight);
+ expect(imgEl.classList.add.callCount).to.equal(1);
+ expect(imgEl.classList.add.args[0][0]).to.equal(classes.imgFullWidth);
+ });
+ });
+
+ describe('resize', () => {
+ let clock;
+
+ before(() => {
+ clock = useFakeTimers();
+ });
+
+ after(() => {
+ clock.restore();
+ });
+
+ it('should handle the resize event', () => {
+ const imgEl = {
+ complete: true,
+ width: 4,
+ height: 3,
+ parentElement: { offsetWidth: 16, offsetHeight: 9 },
+ classList: { remove: spy(), add: spy() },
+ removeEventListener: () => {},
+ };
+ mountMockImage(imgEl);
+ expect(imgEl.classList.remove.callCount).to.equal(1);
+ expect(imgEl.classList.remove.args[0][0]).to.equal(classes.imgFullHeight);
+ expect(imgEl.classList.add.callCount).to.equal(1);
+ expect(imgEl.classList.add.args[0][0]).to.equal(classes.imgFullWidth);
+
+ window.dispatchEvent(new window.Event('resize', {}));
+ expect(imgEl.classList.remove.callCount).to.equal(1);
+ clock.tick(166);
+
+ expect(imgEl.classList.remove.callCount).to.equal(2);
+ expect(imgEl.classList.remove.callCount).to.equal(2);
+ expect(imgEl.classList.remove.args[1][0]).to.equal(classes.imgFullHeight);
+ expect(imgEl.classList.add.callCount).to.equal(2);
+ expect(imgEl.classList.add.args[1][0]).to.equal(classes.imgFullWidth);
+ });
+ });
+});
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/ImageListItemBar/ImageListItemBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts
new file mode 100644
index 00000000000000..bedb12aa15603e
--- /dev/null
+++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { StandardProps } from '..';
+
+export interface ImageListItemBarProps extends StandardProps<{}, ImageListItemBarClassKey> {
+ /**
+ * An IconButton element to be used as secondary action target
+ * (primary action target is the item itself).
+ */
+ actionIcon?: React.ReactNode;
+ /**
+ * Position of secondary action IconButton.
+ */
+ actionPosition?: 'left' | 'right';
+ /**
+ * Position of the title bar.
+ */
+ position?: 'top' | 'bottom';
+ /**
+ * String or element serving as subtitle (support text).
+ */
+ subtitle?: React.ReactNode;
+ /**
+ * Title to be displayed on item.
+ */
+ title?: React.ReactNode;
+ /**
+ * Position of the title bar.
+ * @deprecated Use position instead.
+ */
+ titlePosition?: 'top' | 'bottom';
+}
+
+export type ImageListItemBarClassKey =
+ | 'root'
+ | 'positionBottom'
+ | 'positionTop'
+ | 'rootSubtitle'
+ | 'titleWrap'
+ | 'titleWrapActionPosLeft'
+ | 'titleWrapActionPosRight'
+ | 'title'
+ | 'subtitle'
+ | 'actionIcon'
+ | 'actionIconActionPosLeft';
+
+/**
+ *
+ * Demos:
+ *
+ * - [Image List](https://material-ui.com/components/image-list/)
+ *
+ * API:
+ *
+ * - [ImageListItemBar API](https://material-ui.com/api/image-list-item-bar/)
+ */
+export default function ImageListItemBar(props: ImageListItemBarProps): JSX.Element;
diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
new file mode 100644
index 00000000000000..c64258104c8845
--- /dev/null
+++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
@@ -0,0 +1,168 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import withStyles from '../styles/withStyles';
+import deprecatedPropType from '../utils/deprecatedPropType';
+
+export const styles = (theme) => ({
+ /* Styles applied to the root element. */
+ root: {
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ height: 48,
+ background: 'rgba(0, 0, 0, 0.5)',
+ display: 'flex',
+ alignItems: 'center',
+ fontFamily: theme.typography.fontFamily,
+ },
+ /* Styles applied to the root element if `position="bottom"`. */
+ positionBottom: {
+ bottom: 0,
+ },
+ /* Styles applied to the root element if `position="top"`. */
+ positionTop: {
+ top: 0,
+ },
+ /* Styles applied to the root element if a `subtitle` is provided. */
+ rootSubtitle: {
+ height: 68,
+ },
+ /* Styles applied to the title and subtitle container element. */
+ titleWrap: {
+ flexGrow: 1,
+ marginLeft: 16,
+ marginRight: 16,
+ color: theme.palette.common.white,
+ overflow: 'hidden',
+ },
+ /* Styles applied to the container element if `actionPosition="left"`. */
+ titleWrapActionPosLeft: {
+ marginLeft: 0,
+ },
+ /* Styles applied to the container element if `actionPosition="right"`. */
+ titleWrapActionPosRight: {
+ marginRight: 0,
+ },
+ /* Styles applied to the title container element. */
+ title: {
+ fontSize: theme.typography.pxToRem(16),
+ lineHeight: '24px',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ },
+ /* Styles applied to the subtitle container element. */
+ subtitle: {
+ fontSize: theme.typography.pxToRem(12),
+ lineHeight: 1,
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ },
+ /* Styles applied to the actionIcon if supplied. */
+ actionIcon: {},
+ /* Styles applied to the actionIcon if `actionPosition="left"`. */
+ actionIconActionPosLeft: {
+ order: -1,
+ },
+});
+
+const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) {
+ const {
+ actionIcon,
+ actionPosition = 'right',
+ classes,
+ className,
+ subtitle,
+ title,
+ position: positionProp = 'bottom',
+ titlePosition,
+ ...other
+ } = props;
+
+ const position = titlePosition || positionProp;
+ const actionPos = actionIcon && actionPosition;
+
+ return (
+
+
+
{title}
+ {subtitle ?
{subtitle}
: null}
+
+ {actionIcon ? (
+
+ {actionIcon}
+
+ ) : null}
+
(
);
-const GridListTest = () => (
- log(e)}>
- log(e)}>
+const ImageListTest = () => (
+ log(e)}>
+ log(e)}>
-
+
,
-
+
);
const ListTest = () => (
diff --git a/test/regressions/index.js b/test/regressions/index.js
index ba681f35b3e98c..fcdb010785f164 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -46,7 +46,7 @@ const blacklist = [
'docs-components-drawers/SwipeableTemporaryDrawer.png', // Needs interaction
'docs-components-drawers/TemporaryDrawer.png', // Needs interaction
'docs-components-floating-action-button/FloatingActionButtonZoom.png', // Needs interaction
- 'docs-components-grid-list', // Image don't load
+ 'docs-components-image-list', // Image don't load
'docs-components-grid/InteractiveGrid.png', // Redux isolation
'docs-components-grid/SpacingGrid.png', // Needs interaction
'docs-components-hidden', // Need to dynamically resize to test