diff --git a/docs/pages/api-docs/grid-list-tile-bar.md b/docs/pages/api-docs/grid-list-tile-bar.md
index 29450b984099dd..4af37840f475f1 100644
--- a/docs/pages/api-docs/grid-list-tile-bar.md
+++ b/docs/pages/api-docs/grid-list-tile-bar.md
@@ -18,10 +18,7 @@ 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
@@ -66,3 +63,7 @@ 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 c48f7d42af9abb..8b325375e0ebb0 100644
--- a/docs/pages/api-docs/grid-list-tile.md
+++ b/docs/pages/api-docs/grid-list-tile.md
@@ -18,10 +18,7 @@ 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
@@ -58,3 +55,7 @@ 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 e67dcc3d2bbf85..89d7014be4af46 100644
--- a/docs/pages/api-docs/grid-list.md
+++ b/docs/pages/api-docs/grid-list.md
@@ -18,10 +18,7 @@ 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
@@ -56,3 +53,7 @@ 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 015be7107adb43..01d1e5407bd450 100644
--- a/docs/pages/api-docs/icon-button.md
+++ b/docs/pages/api-docs/icon-button.md
@@ -72,4 +72,5 @@ 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
deleted file mode 100644
index edb472fed02622..00000000000000
--- a/docs/pages/api-docs/image-list-item-bar.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 4a92a46fae3c5f..00000000000000
--- a/docs/pages/api-docs/image-list-item-bar.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-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
deleted file mode 100644
index b6bf73a4e99c11..00000000000000
--- a/docs/pages/api-docs/image-list-item.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 75c7ea7b720b08..00000000000000
--- a/docs/pages/api-docs/image-list-item.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-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
deleted file mode 100644
index 0c2fa21ec58007..00000000000000
--- a/docs/pages/api-docs/image-list.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 37e10c1ba9a58a..00000000000000
--- a/docs/pages/api-docs/image-list.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-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 9219d2662b54e1..1e174241c8682d 100644
--- a/docs/pages/api-docs/list-subheader.md
+++ b/docs/pages/api-docs/list-subheader.md
@@ -61,5 +61,6 @@ 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/image-list.js b/docs/pages/components/grid-list.js
similarity index 71%
rename from docs/pages/components/image-list.js
rename to docs/pages/components/grid-list.js
index baeeb2c5e17286..2e290836adb4c6 100644
--- a/docs/pages/components/image-list.js
+++ b/docs/pages/components/grid-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/image-list';
-const requireDemo = require.context('docs/src/pages/components/image-list', false, /\.(js|tsx)$/);
+const pageFilename = 'components/grid-list';
+const requireDemo = require.context('docs/src/pages/components/grid-list', false, /\.(js|tsx)$/);
const requireRaw = require.context(
- '!raw-loader!../../src/pages/components/image-list',
+ '!raw-loader!../../src/pages/components/grid-list',
false,
/\.(js|md|tsx)$/,
);
diff --git a/docs/public/static/images/image-list/bike.jpg b/docs/public/static/images/grid-list/bike.jpg
similarity index 100%
rename from docs/public/static/images/image-list/bike.jpg
rename to docs/public/static/images/grid-list/bike.jpg
diff --git a/docs/public/static/images/image-list/breakfast.jpg b/docs/public/static/images/grid-list/breakfast.jpg
similarity index 100%
rename from docs/public/static/images/image-list/breakfast.jpg
rename to docs/public/static/images/grid-list/breakfast.jpg
diff --git a/docs/public/static/images/image-list/burgers.jpg b/docs/public/static/images/grid-list/burgers.jpg
similarity index 100%
rename from docs/public/static/images/image-list/burgers.jpg
rename to docs/public/static/images/grid-list/burgers.jpg
diff --git a/docs/public/static/images/image-list/camera.jpg b/docs/public/static/images/grid-list/camera.jpg
similarity index 100%
rename from docs/public/static/images/image-list/camera.jpg
rename to docs/public/static/images/grid-list/camera.jpg
diff --git a/docs/public/static/images/image-list/hats.jpg b/docs/public/static/images/grid-list/hats.jpg
similarity index 100%
rename from docs/public/static/images/image-list/hats.jpg
rename to docs/public/static/images/grid-list/hats.jpg
diff --git a/docs/public/static/images/image-list/honey.jpg b/docs/public/static/images/grid-list/honey.jpg
similarity index 100%
rename from docs/public/static/images/image-list/honey.jpg
rename to docs/public/static/images/grid-list/honey.jpg
diff --git a/docs/public/static/images/image-list/morning.jpg b/docs/public/static/images/grid-list/morning.jpg
similarity index 100%
rename from docs/public/static/images/image-list/morning.jpg
rename to docs/public/static/images/grid-list/morning.jpg
diff --git a/docs/public/static/images/image-list/mushroom.jpg b/docs/public/static/images/grid-list/mushroom.jpg
similarity index 100%
rename from docs/public/static/images/image-list/mushroom.jpg
rename to docs/public/static/images/grid-list/mushroom.jpg
diff --git a/docs/public/static/images/image-list/olive.jpg b/docs/public/static/images/grid-list/olive.jpg
similarity index 100%
rename from docs/public/static/images/image-list/olive.jpg
rename to docs/public/static/images/grid-list/olive.jpg
diff --git a/docs/public/static/images/image-list/plant.jpg b/docs/public/static/images/grid-list/plant.jpg
similarity index 100%
rename from docs/public/static/images/image-list/plant.jpg
rename to docs/public/static/images/grid-list/plant.jpg
diff --git a/docs/public/static/images/image-list/star.jpg b/docs/public/static/images/grid-list/star.jpg
similarity index 100%
rename from docs/public/static/images/image-list/star.jpg
rename to docs/public/static/images/grid-list/star.jpg
diff --git a/docs/public/static/images/image-list/vegetables.jpg b/docs/public/static/images/grid-list/vegetables.jpg
similarity index 100%
rename from docs/public/static/images/image-list/vegetables.jpg
rename to docs/public/static/images/grid-list/vegetables.jpg
diff --git a/docs/src/pages.js b/docs/src/pages.js
index 397ff91c068be9..ec4c8335f9f1bd 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 14a1e975216aa1..2b1926863a84aa 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/image-list/breakfast.jpg',
+ url: '/static/images/grid-list/breakfast.jpg',
title: 'Breakfast',
width: '40%',
},
{
- url: '/static/images/image-list/burgers.jpg',
+ url: '/static/images/grid-list/burgers.jpg',
title: 'Burgers',
width: '30%',
},
{
- url: '/static/images/image-list/camera.jpg',
+ url: '/static/images/grid-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 3544d96d04e726..92c3baba126cfa 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/image-list/breakfast.jpg',
+ url: '/static/images/grid-list/breakfast.jpg',
title: 'Breakfast',
width: '40%',
},
{
- url: '/static/images/image-list/burgers.jpg',
+ url: '/static/images/grid-list/burgers.jpg',
title: 'Burgers',
width: '30%',
},
{
- url: '/static/images/image-list/camera.jpg',
+ url: '/static/images/grid-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 fb9ff503de3ee6..850d5e7cfbc350 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. (Click the downward chevron to view the recipe.)
+On desktop, card content can expand.
{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}}
diff --git a/docs/src/pages/components/image-list/AdvancedImageList.js b/docs/src/pages/components/grid-list/AdvancedGridList.js
similarity index 59%
rename from docs/src/pages/components/image-list/AdvancedImageList.js
rename to docs/src/pages/components/grid-list/AdvancedGridList.js
index 41068edfa6a06a..cc3da68c9f10b4 100644
--- a/docs/src/pages/components/image-list/AdvancedImageList.js
+++ b/docs/src/pages/components/grid-list/AdvancedGridList.js
@@ -1,11 +1,11 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import ImageList from '@material-ui/core/ImageList';
-import ImageListItem from '@material-ui/core/ImageListItem';
-import ImageListItemBar from '@material-ui/core/ImageListItemBar';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
import IconButton from '@material-ui/core/IconButton';
import StarBorderIcon from '@material-ui/icons/StarBorder';
-import itemData from './itemData';
+import tileData from './tileData';
const useStyles = makeStyles((theme) => ({
root: {
@@ -15,10 +15,10 @@ const useStyles = makeStyles((theme) => ({
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
},
- imageList: {
+ gridList: {
width: 500,
height: 450,
- // Promote the list into its own layer in Chrome. This cost memory, but helps keep FPS high.
+ // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
transform: 'translateZ(0)',
},
titleBar: {
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
* import image from 'path/to/image.jpg';
* [etc...]
*
- * const itemData = [
+ * const tileData = [
* {
* img: image,
* title: 'Image',
@@ -49,29 +49,29 @@ const useStyles = makeStyles((theme) => ({
* },
* ];
*/
-export default function AdvancedImageList() {
+export default function AdvancedGridList() {
const classes = useStyles();
return (
-
- {itemData.map((item) => (
-
- 
-
+ {tileData.map((tile) => (
+
+ 
+
+
}
actionPosition="left"
className={classes.titleBar}
/>
-
+
))}
-
+
-
- {itemData.map((item) => (
-
-
-
+ {tileData.map((tile) => (
+
+
+
+
}
actionPosition="left"
className={classes.titleBar}
/>
-
+
))}
-
+
-
- {itemData.map((item) => (
-
-
-
+
+ {tileData.map((tile) => (
+
+
+
))}
-
+
-
- {itemData.map((item) => (
-
-
-
+
+ {tileData.map((tile) => (
+
+
+
))}
-
+
-
- {itemData.map((item) => (
-
-
-
+ {tileData.map((tile) => (
+
+
+
+
}
/>
-
+
))}
-
+
-
- {itemData.map((item) => (
-
-
-
+ {tileData.map((tile) => (
+
+
+
+
}
/>
-
+
))}
-
+
-
-
+
+
December
-
- {itemData.map((item) => (
-
-
- by: {item.author}}
+
+ {tileData.map((tile) => (
+
+
+ by: {tile.author}}
actionIcon={
-
+
}
/>
-
+
))}
-
+
-
-
+
+
December
-
- {itemData.map((item) => (
-
-
- by: {item.author}}
+
+ {tileData.map((tile) => (
+
+
+ by: {tile.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 `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/image-list/image-list-ja.md b/docs/src/pages/components/grid-list/grid-list-ja.md
similarity index 62%
rename from docs/src/pages/components/image-list/image-list-ja.md
rename to docs/src/pages/components/grid-list/grid-list-ja.md
index 3ec514df77290c..fa113efa27eb47 100644
--- a/docs/src/pages/components/image-list/image-list-ja.md
+++ b/docs/src/pages/components/grid-list/grid-list-ja.md
@@ -1,6 +1,6 @@
---
title: Grid List React component
-components: ImageList, ImageListItem, ImageListItemBar
+components: GridList, GridListTile, GridListTileBar
---
# Grid List
@@ -11,24 +11,28 @@ components: ImageList, ImageListItem, ImageListItemBar
## 画像のみのGrid list
-スクロール可能な画像の簡単な `ImageList`の例。
+スクロール可能な画像の簡単な `GridList`の例。
-{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
## タイトルバー付きのGrid list
-この例は、 `ImageListItemBar` を使用して、各 `ImageListItem`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。
+この例は、 `GridListTileBar` を使用して、各 `GridListTile`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。
-{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
## Single line Grid list 単一行グリッドリスト
この例では、水平スクロール可能な単一行グリッドの画像リストを示します。 水平方向のスクロールグリッドリストは、スクロールが一般的な読み方の邪魔になり理解に影響を与えるため、推奨されません。 注目すべき例外の1つは、水平にスクロールする、ギャラリーなどの画像の1行グリッドリストです。
-{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
## 高度なグリッドリスト
この例では、`rows` and `cols` プロップを使用してタイルのサイズを調整し、 `padding`プロップを使用して間隔を調整する方法を示します。 タイルには、上部にカスタムのタイトルバーがあり、カスタムのグラデーション`titleBackground`があります。 セカンダリアクション `IconButton` は左側に配置されます。
+<<<<<<< HEAD:docs/src/pages/components/image-list/image-list-ja.md
{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
+=======
+{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
+>>>>>>> parent of a2c1b56e22... [GridList] Rename to ImageList & add deprecation warnings (#22363):docs/src/pages/components/grid-list/grid-list-ja.md
diff --git a/docs/src/pages/components/image-list/image-list-pt.md b/docs/src/pages/components/grid-list/grid-list-pt.md
similarity index 60%
rename from docs/src/pages/components/image-list/image-list-pt.md
rename to docs/src/pages/components/grid-list/grid-list-pt.md
index a4da191ca5d844..4b2b522ccdc50d 100644
--- a/docs/src/pages/components/image-list/image-list-pt.md
+++ b/docs/src/pages/components/grid-list/grid-list-pt.md
@@ -1,6 +1,6 @@
---
title: Componente React para Lista de Grade
-components: ImageList, ImageListItem, ImageListItemBar
+components: GridList, GridListTile, GridListTileBar
---
# Lista de Grade
@@ -11,24 +11,28 @@ components: ImageList, ImageListItem, ImageListItemBar
## Lista de grade com imagens
-Um exemplo simples de uma `ImageList` com imagens.
+Um exemplo simples de uma `GridList` com imagens.
-{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
## Lista de grade com barras de título
-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`.
+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`.
-{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/TitlebarGridList.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/image-list/SingleLineImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/SingleLineGridList.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.
+<<<<<<< HEAD:docs/src/pages/components/image-list/image-list-pt.md
{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
+=======
+{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
+>>>>>>> parent of a2c1b56e22... [GridList] Rename to ImageList & add deprecation warnings (#22363):docs/src/pages/components/grid-list/grid-list-pt.md
diff --git a/docs/src/pages/components/image-list/image-list-ru.md b/docs/src/pages/components/grid-list/grid-list-ru.md
similarity index 82%
rename from docs/src/pages/components/image-list/image-list-ru.md
rename to docs/src/pages/components/grid-list/grid-list-ru.md
index 0a9bc5fef30f5c..5d97c4bd48a0b4 100644
--- a/docs/src/pages/components/image-list/image-list-ru.md
+++ b/docs/src/pages/components/grid-list/grid-list-ru.md
@@ -1,6 +1,6 @@
---
title: Сеть изображений, компонент React
-components: ImageList, ImageListItem, ImageListItemBar
+components: GridList, GridListTile, GridListTileBar
---
# Сеть изображений
@@ -13,22 +13,26 @@ components: ImageList, ImageListItem, ImageListItemBar
Простой пример прокручиваемой `Сети изображений`.
-{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
## Сеть изображений с заголовками
Этот пример демонстрирует использование `Полосы заголовка сети изображений`, которую следует добавить в каждый `Заголовок сети изображений`. Мы можем указать `заголовок`, `подзаголовок` и дополнительное действие - в этом примере `кнопка-иконка`.
-{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
## Сеть изображений в одну строку
Данный пример показывает сеть изображений в одну строку с горизонтальной прокруткой. Сети изображений с горизонтальнйо прокруткой не рекомендуется применять, так как это может вызвать дискомфорт у пользователей, ведь обычно при чтении используется вертикальная прокрутка. Исключением из этого правила являются сети с горизонтальной прокруткой в одну строку, например галерея.
-{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
## Более сложный пример
В этом примере демонстрирует «рекомендуемые» листы, в которых используются свойства `rows` и `cols` чтобы отрегулировать размер плитки, и свойство `padding` чтобы отрегулировать поля между плитками. На плитках можно видеть пользовательскую полосу расположенную вверху с даным значением градиента в свойстве `titleBackground`. Дополнительное действие в `Кнопке-иконке` распложенно по левую сторону.
+<<<<<<< HEAD:docs/src/pages/components/image-list/image-list-ru.md
{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
+=======
+{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
+>>>>>>> parent of a2c1b56e22... [GridList] Rename to ImageList & add deprecation warnings (#22363):docs/src/pages/components/grid-list/grid-list-ru.md
diff --git a/docs/src/pages/components/image-list/image-list-zh.md b/docs/src/pages/components/grid-list/grid-list-zh.md
similarity index 64%
rename from docs/src/pages/components/image-list/image-list-zh.md
rename to docs/src/pages/components/grid-list/grid-list-zh.md
index 7c7c9d7ef84a04..e7e9072a7ab41c 100644
--- a/docs/src/pages/components/image-list/image-list-zh.md
+++ b/docs/src/pages/components/grid-list/grid-list-zh.md
@@ -1,6 +1,7 @@
---
+<<<<<<< HEAD:docs/src/pages/components/image-list/image-list-zh.md
title: React Image list（图像列表）组件
-components: ImageList, ImageListItem, ImageListItemBar
+components: GridList, GridListTile, GridListTileBar
---
# Image list 图像列表
@@ -13,22 +14,22 @@ components: ImageList, ImageListItem, ImageListItemBar
这是一个可滚动图像的 ` ImageList（图像列表）` 的简单示例。
-{{"demo": "pages/components/image-list/BasicImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}}
## 带有标题栏的图像列表
-此示例演示如何使用 `ImageListItemBar` 为每个 `ImageListItem` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。
+此示例演示如何使用 `GridListTileBar` 为每个 `GridListTile` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。
-{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}}
## 单行图像列表
此示例演示了可以在水平方向滚动的单行纯图像的图像列表。 我们其实不鼓励使用可水平滚动图像列表，因为这种滚动方式会干扰我们平时所习惯的阅读模式，从而影响用户的体验。 但也有一个例外情况，就是水平滚动的单行图像列表，例如图库。
-{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}}
+{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}}
## 高级图像列表
此示例演示了 “标志性的（featured）” 子项，它使用 `row` 和 `cols` 属性来调整项目的大小，并且使用 `gap` 属性来调整间距。 子项有一个位于顶部的自定义标题栏，并带有自定义渐变的 `titleBackground`。 而辅助操作的 `IconButton` 则位于左侧。
-{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}}
+{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}}
diff --git a/docs/src/pages/components/grid-list/grid-list.md b/docs/src/pages/components/grid-list/grid-list.md
new file mode 100644
index 00000000000000..66a3f8a932c587
--- /dev/null
+++ b/docs/src/pages/components/grid-list/grid-list.md
@@ -0,0 +1,39 @@
+---
+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
new file mode 100644
index 00000000000000..c4aecca665999f
--- /dev/null
+++ b/docs/src/pages/components/grid-list/tileData.d.ts
@@ -0,0 +1,11 @@
+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/image-list/itemData.js b/docs/src/pages/components/grid-list/tileData.js
similarity index 55%
rename from docs/src/pages/components/image-list/itemData.js
rename to docs/src/pages/components/grid-list/tileData.js
index f56a7b684b47b1..4884061233189d 100644
--- a/docs/src/pages/components/image-list/itemData.js
+++ b/docs/src/pages/components/grid-list/tileData.js
@@ -1,69 +1,69 @@
-const itemData = [
+const tileData = [
{
- img: '/static/images/image-list/breakfast.jpg',
+ img: '/static/images/grid-list/breakfast.jpg',
title: 'Breakfast',
author: 'jill111',
cols: 2,
featured: true,
},
{
- img: '/static/images/image-list/burgers.jpg',
+ img: '/static/images/grid-list/burgers.jpg',
title: 'Tasty burger',
author: 'director90',
},
{
- img: '/static/images/image-list/camera.jpg',
+ img: '/static/images/grid-list/camera.jpg',
title: 'Camera',
author: 'Danson67',
},
{
- img: '/static/images/image-list/morning.jpg',
+ img: '/static/images/grid-list/morning.jpg',
title: 'Morning',
author: 'fancycrave1',
featured: true,
},
{
- img: '/static/images/image-list/hats.jpg',
+ img: '/static/images/grid-list/hats.jpg',
title: 'Hats',
author: 'Hans',
},
{
- img: '/static/images/image-list/honey.jpg',
+ img: '/static/images/grid-list/honey.jpg',
title: 'Honey',
author: 'fancycravel',
},
{
- img: '/static/images/image-list/vegetables.jpg',
+ img: '/static/images/grid-list/vegetables.jpg',
title: 'Vegetables',
author: 'jill111',
cols: 2,
},
{
- img: '/static/images/image-list/plant.jpg',
+ img: '/static/images/grid-list/plant.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
{
- img: '/static/images/image-list/mushroom.jpg',
+ img: '/static/images/grid-list/mushroom.jpg',
title: 'Mushrooms',
author: 'PublicDomainPictures',
},
{
- img: '/static/images/image-list/olive.jpg',
+ img: '/static/images/grid-list/olive.jpg',
title: 'Olive oil',
author: 'congerdesign',
},
{
- img: '/static/images/image-list/star.jpg',
+ img: '/static/images/grid-list/star.jpg',
title: 'Sea star',
cols: 2,
author: '821292',
},
{
- img: '/static/images/image-list/bike.jpg',
+ img: '/static/images/grid-list/bike.jpg',
title: 'Bike',
author: 'danfador',
},
];
-export default itemData;
+export default tileData;
diff --git a/docs/src/pages/components/image-list/tslint.json b/docs/src/pages/components/grid-list/tslint.json
similarity index 100%
rename from docs/src/pages/components/image-list/tslint.json
rename to docs/src/pages/components/grid-list/tslint.json
diff --git a/docs/src/pages/components/image-list/image-list-fr.md b/docs/src/pages/components/image-list/image-list-fr.md
deleted file mode 100644
index a31b94ea0d9770..00000000000000
--- a/docs/src/pages/components/image-list/image-list-fr.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Composant React Grid List
-components: ImageList, ImageListItem, ImageListItemBar
----
-
-# 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 `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}}
diff --git a/docs/src/pages/components/image-list/image-list.md b/docs/src/pages/components/image-list/image-list.md
deleted file mode 100644
index c97eae1bf42536..00000000000000
--- a/docs/src/pages/components/image-list/image-list.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-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
deleted file mode 100644
index d71b12c82d9d57..00000000000000
--- a/docs/src/pages/components/image-list/itemData.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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/getting-started/supported-components/supported-components.md b/docs/src/pages/getting-started/supported-components/supported-components.md
index 0d8f607ce7a68a..e2a8c2bbba6fcd 100644
--- a/docs/src/pages/getting-started/supported-components/supported-components.md
+++ b/docs/src/pages/getting-started/supported-components/supported-components.md
@@ -50,7 +50,8 @@ 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) ✓**
-- **[Image lists](https://material.io/components/image-lists) ✓**
+- **[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)
- **[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 6d7748a5a4e8fc..70be66c6df23a5 100644
--- a/packages/material-ui/src/GridList/GridList.d.ts
+++ b/packages/material-ui/src/GridList/GridList.d.ts
@@ -11,10 +11,11 @@ export interface GridListTypeMap {
classKey: GridListClassKey;
}
/**
- * ⚠️ 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'`.
+ * Demos:
+ *
+ * - [Grid List](https://material-ui.com/components/grid-list/)
+ *
* 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 9481d95b27efd6..8f206ea19f2685 100644
--- a/packages/material-ui/src/GridList/GridList.js
+++ b/packages/material-ui/src/GridList/GridList.js
@@ -16,29 +16,7 @@ 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 c80a9e8c0ccd6b..910f7f09e015e8 100644
--- a/packages/material-ui/src/GridList/GridList.test.js
+++ b/packages/material-ui/src/GridList/GridList.test.js
@@ -1,21 +1,32 @@
import * as React from 'react';
-import { getClasses } from '@material-ui/core/test-utils';
+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 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();
- consoleErrorMock.spy();
- });
-
- after(() => {
- consoleErrorMock.reset();
+ shallow = createShallow({ dive: true });
});
describeConformance(
@@ -30,4 +41,142 @@ 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 10a3cb6fef3050..8cc6c45f45e1a2 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.d.ts
+++ b/packages/material-ui/src/GridListTile/GridListTile.d.ts
@@ -10,10 +10,11 @@ export interface GridListTileTypeMap
classKey: GridListTileClassKey;
}
/**
- * ⚠️ 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'`.
+ * Demos:
+ *
+ * - [Grid List](https://material-ui.com/components/grid-list/)
+ *
* 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 5e6bf88df38b9f..3ed225ca97cdf7 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -65,29 +65,7 @@ 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 364a06a8756027..3a0173f6ed3c28 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.test.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.test.js
@@ -1,9 +1,10 @@
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();
@@ -11,11 +12,6 @@ describe('', () => {
before(() => {
classes = getClasses();
- consoleErrorMock.spy();
- });
-
- after(() => {
- consoleErrorMock.reset();
});
describeConformance(, () => ({
@@ -25,4 +21,117 @@ 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 3d46b07e7f975d..f35075dacbb55e 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
@@ -39,10 +39,11 @@ export type GridListTileBarClassKey =
| 'actionIconActionPosLeft';
/**
- * ⚠️ 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'`.
+ * Demos:
+ *
+ * - [Grid List](https://material-ui.com/components/grid-list/)
+ *
* 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 a4df9aff8e382e..528a58a78f7ca2 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
@@ -67,29 +67,7 @@ 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 a44d6d592dfc6e..66978a91b47ceb 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js
@@ -1,21 +1,18 @@
import * as React from 'react';
-import { getClasses } from '@material-ui/core/test-utils';
+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 GridListTileBar from './GridListTileBar';
-import consoleErrorMock from 'test/utils/consoleErrorMock';
describe('', () => {
let classes;
const mount = createMount();
+ let shallow;
before(() => {
classes = getClasses();
- consoleErrorMock.spy();
- });
-
- after(() => {
- consoleErrorMock.reset();
+ shallow = createShallow({ dive: true });
});
describeConformance(, () => ({
@@ -25,4 +22,18 @@ 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/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts
deleted file mode 100644
index e33a6c4d65e17c..00000000000000
--- a/packages/material-ui/src/ImageList/ImageList.d.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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
deleted file mode 100644
index 409957ffd7bdef..00000000000000
--- a/packages/material-ui/src/ImageList/ImageList.js
+++ /dev/null
@@ -1,132 +0,0 @@
-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
deleted file mode 100644
index 9bd8bddbb477b8..00000000000000
--- a/packages/material-ui/src/ImageList/ImageList.test.js
+++ /dev/null
@@ -1,182 +0,0 @@
-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
deleted file mode 100644
index f38037f0bc3a5a..00000000000000
--- a/packages/material-ui/src/ImageList/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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
deleted file mode 100644
index a5ec3349f1e072..00000000000000
--- a/packages/material-ui/src/ImageList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ImageList';
diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts
deleted file mode 100644
index 0e60f3cea17f4b..00000000000000
--- a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index 0e91b53e54a525..00000000000000
--- a/packages/material-ui/src/ImageListItem/ImageListItem.js
+++ /dev/null
@@ -1,154 +0,0 @@
-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
deleted file mode 100644
index d066f9b05d2c8c..00000000000000
--- a/packages/material-ui/src/ImageListItem/ImageListItem.test.js
+++ /dev/null
@@ -1,137 +0,0 @@
-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
deleted file mode 100644
index b5ed72a1f05434..00000000000000
--- a/packages/material-ui/src/ImageListItem/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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
deleted file mode 100644
index 450c1f8a2ff5b2..00000000000000
--- a/packages/material-ui/src/ImageListItem/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ImageListItem';
diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts
deleted file mode 100644
index bedb12aa15603e..00000000000000
--- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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
deleted file mode 100644
index c64258104c8845..00000000000000
--- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
+++ /dev/null
@@ -1,168 +0,0 @@
-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 ListTest = () => (
diff --git a/test/regressions/index.js b/test/regressions/index.js
index fcdb010785f164..ba681f35b3e98c 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-image-list', // Image don't load
+ 'docs-components-grid-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