diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
index ed72a3950c52c8..679ea2189803f6 100644
--- a/docs/scripts/buildApi.js
+++ b/docs/scripts/buildApi.js
@@ -142,6 +142,7 @@ function buildDocs(options) {
reactAPI.pagesMarkdown = pagesMarkdown;
reactAPI.src = src;
reactAPI.spread = spread;
+ reactAPI.props = reactAPI.props || {};
// if (reactAPI.name !== 'TableCell') {
// return;
diff --git a/docs/src/pages/demos/grid-list/grid-list.md b/docs/src/pages/demos/grid-list/grid-list.md
deleted file mode 100644
index 26b457887a63fb..00000000000000
--- a/docs/src/pages/demos/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/demos/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/demos/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/demos/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/demos/grid-list/AdvancedGridList.js", "hideEditButton": true}}
diff --git a/docs/src/pages/demos/grid-list/AdvancedGridList.js b/docs/src/pages/demos/image-list/AdvancedImageList.js
similarity index 75%
rename from docs/src/pages/demos/grid-list/AdvancedGridList.js
rename to docs/src/pages/demos/image-list/AdvancedImageList.js
index 4da55e2a79950d..0e7982e8baa077 100644
--- a/docs/src/pages/demos/grid-list/AdvancedGridList.js
+++ b/docs/src/pages/demos/image-list/AdvancedImageList.js
@@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } 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 ImageListTile from '@material-ui/core/ImageListTile';
+import ImageListTileBar from '@material-ui/core/ImageListTileBar';
import IconButton from '@material-ui/core/IconButton';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import tileData from './tileData';
@@ -50,16 +50,16 @@ const styles = theme => ({
* },
* ];
*/
-function AdvancedGridList(props) {
+function AdvancedImageList(props) {
const { classes } = props;
return (
-
+
{tileData.map(tile => (
-
+
-
-
+
))}
-
+
-
+
{tileData.map(tile => (
-
+
-
+
))}
-
+
-
+
{tileData.map(tile => (
-
+
-
}
/>
-
+
))}
-
+
-
-
+
+
December
-
+
{tileData.map(tile => (
-
+
- by: {tile.author}}
actionIcon={
@@ -64,15 +64,15 @@ function TitlebarGridList(props) {
}
/>
-
+
))}
-
+
Image lists display a collection of images in an organized grid.
+
+[Image 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 list
+
+A simple example of a scrollable image `ImageList`.
+
+{{"demo": "pages/demos/image-list/ImageOnlyList.js", "hideEditButton": true}}
+
+## Image list with titlebars
+
+This example demonstrates the use of the `ImageListTileBar` to add an overlay to each `ImageListTile`.
+The overlay can accommodate a `title`, `subtitle` and secondary action - in this example an `IconButton`.
+
+{{"demo": "pages/demos/image-list/TitlebarImageList.js", "hideEditButton": true}}
+
+## Single line Image 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/demos/image-list/SingleLineImageList.js", "hideEditButton": true}}
+
+## Advanced Image 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/demos/image-list/AdvancedImageList.js", "hideEditButton": true}}
diff --git a/docs/src/pages/demos/grid-list/tileData.js b/docs/src/pages/demos/image-list/tileData.js
similarity index 100%
rename from docs/src/pages/demos/grid-list/tileData.js
rename to docs/src/pages/demos/image-list/tileData.js
diff --git a/docs/static/_redirects b/docs/static/_redirects
index 1ab8e471901623..5f62e7cf1850cf 100644
--- a/docs/static/_redirects
+++ b/docs/static/_redirects
@@ -3,6 +3,7 @@
/inbox / 301
/trash / 301
/spam / 301
+# Temporary, added in 2019
/page-layout-examples/* /getting-started/page-layout-examples/:splat 301
/guides/csp/ /css-in-js/advanced/#what-is-csp-and-why-is-it-useful 301
/utils/modals/ /utils/modal/ 301
@@ -12,6 +13,7 @@
/guides/migration-v0.x /guides/migration-v0x/ 301
/size-snapshot https://s3.eu-central-1.amazonaws.com/eps1lon-material-ui/artifacts/next/latest/size-snapshot.json 200
/customization/css-in-js/ /css-in-js/basics/ 301
+/demos/grid-list/ /demos/image-list/ 301
# Legacy
/v0.20.0 https://v0.material-ui.com/v0.20.0
diff --git a/packages/material-ui/src/GridList/GridList.js b/packages/material-ui/src/GridList/GridList.js
index 6a7cee4fdcd239..e90d611b647e47 100644
--- a/packages/material-ui/src/GridList/GridList.js
+++ b/packages/material-ui/src/GridList/GridList.js
@@ -1,115 +1,19 @@
+// @inheritedComponent GridList
+
import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
import warning from 'warning';
-import withStyles from '../styles/withStyles';
-
-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 GridList = React.forwardRef(function GridList(props, ref) {
- const {
- cellHeight,
- children,
- classes,
- className: classNameProp,
- cols,
- component: Component,
- spacing,
- style,
- ...other
- } = props;
-
- return (
-
- {React.Children.map(children, child => {
- if (!React.isValidElement(child)) {
- return null;
- }
-
- warning(
- child.type !== React.Fragment,
- [
- "Material-UI: the GridList 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: Object.assign(
- {
- width: `${(100 / cols) * childCols}%`,
- height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing,
- padding: spacing / 2,
- },
- child.props.style,
- ),
- });
- })}
-
+import ImageList from '../ImageList';
+
+/**
+ * Deprecated, use ImageList instead.
+ */
+export default function GridList(props) {
+ warning(
+ false,
+ [
+ 'Material-UI: the GridList component is deprecated.',
+ 'The component was renamed to ImageList.',
+ ].join('\n'),
);
-});
-
-GridList.propTypes = {
- /**
- * Number of px for one cell height.
- * You can set `'auto'` if you want to let the children determine the height.
- */
- cellHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
- /**
- * Grid Tiles that will be in Grid List.
- */
- children: PropTypes.node.isRequired,
- /**
- * Override or extend the styles applied to the component.
- * See [CSS API](#css) below for more details.
- */
- classes: PropTypes.object.isRequired,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * Number of columns.
- */
- cols: PropTypes.number,
- /**
- * The component used for the root node.
- * Either a string to use a DOM element or a component.
- */
- component: PropTypes.elementType,
- /**
- * Number of px for the spacing between tiles.
- */
- spacing: PropTypes.number,
- /**
- * @ignore
- */
- style: PropTypes.object,
-};
-
-GridList.defaultProps = {
- cellHeight: 180,
- cols: 2,
- component: 'ul',
- spacing: 4,
-};
-
-export default withStyles(styles, { name: 'MuiGridList' })(GridList);
+ return ;
+}
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
index 1466b80cd3275a..51467ac12ab371 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -1,144 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
-import withStyles from '../styles/withStyles';
-import { isMuiElement } from '../utils/reactHelpers';
-
-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. */
- tile: {
- 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 tile. */
- imgFullHeight: {
- height: '100%',
- transform: 'translateX(-50%)',
- position: 'relative',
- left: '50%',
- },
- /* Styles applied to an `img` element child, if needed to ensure it covers the tile. */
- 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.parentNode.offsetWidth / imgEl.parentNode.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(' '));
- }
-
- imgEl.removeEventListener('load', fit);
-};
-
-function ensureImageCover(imgEl, classes) {
- if (!imgEl) {
- return;
- }
-
- if (imgEl.complete) {
- fit(imgEl, classes);
- } else {
- imgEl.addEventListener('load', fit);
- }
-}
-
-const GridListTile = React.forwardRef(function GridListTile(props, ref) {
- const { children, classes, className, cols, component: Component, rows, ...other } = props;
-
- const imgRef = React.useRef(null);
+// @inheritedComponent GridListTile
- React.useEffect(() => {
- ensureImageCover(imgRef.current, classes);
- });
-
- React.useEffect(() => {
- const handleResize = debounce(() => {
- fit(imgRef.current, classes);
- }, 166); // Corresponds to 10 frames at 60 Hz.
-
- 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;
- })}
-
-
+import React from 'react';
+import warning from 'warning';
+import ImageListTile from '../ImageListTile';
+
+/**
+ * Deprecated, use ImageListTile instead.
+ */
+export default function GridListTile(props) {
+ warning(
+ false,
+ [
+ 'Material-UI: the GridListTile component is deprecated.',
+ 'The component was renamed to ImageListTile.',
+ ].join('\n'),
);
-});
-
-GridListTile.propTypes = {
- /**
- * Theoretically you can pass any node as children, but the main use case is to pass an img,
- * in which case GridListTile takes care of making the image "cover" available space
- * (similar to `background-size: cover` or to `object-fit: cover`).
- */
- children: PropTypes.node,
- /**
- * Override or extend the styles applied to the component.
- * See [CSS API](#css) below for more details.
- */
- classes: PropTypes.object.isRequired,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * Width of the tile in number of grid cells.
- */
- cols: PropTypes.number,
- /**
- * The component used for the root node.
- * Either a string to use a DOM element or a component.
- */
- component: PropTypes.elementType,
- /**
- * Height of the tile in number of grid cells.
- */
- rows: PropTypes.number,
-};
-
-GridListTile.defaultProps = {
- cols: 1,
- component: 'li',
- rows: 1,
-};
-
-export default withStyles(styles, { name: 'MuiGridListTile' })(GridListTile);
+ return ;
+}
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
index b08836e1104fb2..f8e8f413582586 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
@@ -1,156 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
-
-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 `titlePosition="bottom"`. */
- titlePositionBottom: {
- bottom: 0,
- },
- /* Styles applied to the root element if `titlePosition="top"`. */
- titlePositionTop: {
- 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: theme.mixins.gutters().paddingLeft,
- marginRight: theme.mixins.gutters().paddingRight,
- 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 GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) {
- const {
- actionIcon,
- actionPosition,
- classes,
- className: classNameProp,
- subtitle,
- title,
- titlePosition,
- ...other
- } = props;
-
- const actionPos = actionIcon && actionPosition;
- const className = clsx(
- classes.root,
- {
- [classes.titlePositionBottom]: titlePosition === 'bottom',
- [classes.titlePositionTop]: titlePosition === 'top',
- [classes.rootSubtitle]: subtitle,
- },
- classNameProp,
- );
+// @inheritedComponent GridListTileBar
- // Remove the margin between the title / subtitle wrapper, and the Action Icon
- const titleWrapClassName = clsx(classes.titleWrap, {
- [classes.titleWrapActionPosLeft]: actionPos === 'left',
- [classes.titleWrapActionPosRight]: actionPos === 'right',
- });
-
- return (
-
-
-
{title}
- {subtitle ?
{subtitle}
: null}
-
- {actionIcon ? (
-
- {actionIcon}
-
- ) : null}
-
- ,
+ ,
);
assert.strictEqual(wrapper.name(), 'ul');
});
it('should accept a component property', () => {
const wrapper = shallow(
-
+
- ,
+ ,
);
assert.strictEqual(wrapper.name(), 'li');
});
@@ -44,7 +44,7 @@ describe('', () => {
it('should render children and change cellHeight', () => {
const cellHeight = 250;
const wrapper = shallow(
-
+
{tilesData.map(tile => (
', () => {
))}
- ,
+ ,
);
assert.strictEqual(wrapper.find('.grid-tile').length, 2, 'should contain the children');
@@ -71,7 +71,7 @@ describe('', () => {
it('renders children by default', () => {
const wrapper = shallow(
-
+
{tilesData.map(tile => (
', () => {
))}
{false && this is a null child}
- ,
+ ,
);
assert.strictEqual(wrapper.find('.grid-tile').length, 2, 'should contain the children');
@@ -91,7 +91,7 @@ describe('', () => {
it('renders children and change cols', () => {
const wrapper = shallow(
-
+
{tilesData.map(tile => (
', () => {
))}
- ,
+ ,
);
assert.strictEqual(wrapper.find('.grid-tile').length, 2, 'should contain the children');
@@ -119,7 +119,7 @@ describe('', () => {
it('renders children and change spacing', () => {
const spacing = 10;
const wrapper = shallow(
-
+
{tilesData.map(tile => (
', () => {
))}
- ,
+ ,
);
assert.strictEqual(wrapper.find('.grid-tile').length, 2, 'should contain the children');
@@ -147,7 +147,7 @@ describe('', () => {
it('should render children and overwrite style', () => {
const style = { backgroundColor: 'red' };
const wrapper = shallow(
-
+
{tilesData.map(tile => (
', () => {
))}
- ,
+ ,
);
assert.strictEqual(wrapper.find('.grid-tile').length, 2, 'should contain the children');
@@ -168,9 +168,9 @@ describe('', () => {
describe('prop: cellHeight', () => {
it('should accept auto as a property', () => {
const wrapper = shallow(
-
+
- ,
+ ,
);
assert.strictEqual(
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/ImageListTile/ImageListTile.d.ts b/packages/material-ui/src/ImageListTile/ImageListTile.d.ts
new file mode 100644
index 00000000000000..9eb7f617147c21
--- /dev/null
+++ b/packages/material-ui/src/ImageListTile/ImageListTile.d.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { StandardProps } from '..';
+
+export interface ImageListTileProps
+ extends StandardProps, ImageListTileClassKey> {
+ cols?: number;
+ component?: React.ElementType;
+ rows?: number;
+}
+
+export type ImageListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';
+
+declare const ImageListTile: React.ComponentType;
+
+export default ImageListTile;
diff --git a/packages/material-ui/src/ImageListTile/ImageListTile.js b/packages/material-ui/src/ImageListTile/ImageListTile.js
new file mode 100644
index 00000000000000..e408d251a76810
--- /dev/null
+++ b/packages/material-ui/src/ImageListTile/ImageListTile.js
@@ -0,0 +1,144 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
+import withStyles from '../styles/withStyles';
+import { isMuiElement } from '../utils/reactHelpers';
+
+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. */
+ tile: {
+ 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 tile. */
+ imgFullHeight: {
+ height: '100%',
+ transform: 'translateX(-50%)',
+ position: 'relative',
+ left: '50%',
+ },
+ /* Styles applied to an `img` element child, if needed to ensure it covers the tile. */
+ 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.parentNode.offsetWidth / imgEl.parentNode.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(' '));
+ }
+
+ imgEl.removeEventListener('load', fit);
+};
+
+function ensureImageCover(imgEl, classes) {
+ if (!imgEl) {
+ return;
+ }
+
+ if (imgEl.complete) {
+ fit(imgEl, classes);
+ } else {
+ imgEl.addEventListener('load', fit);
+ }
+}
+
+const ImageListTile = React.forwardRef(function ImageListTile(props, ref) {
+ const { children, classes, className, cols, component: Component, rows, ...other } = props;
+
+ const imgRef = React.useRef(null);
+
+ React.useEffect(() => {
+ ensureImageCover(imgRef.current, classes);
+ });
+
+ React.useEffect(() => {
+ const handleResize = debounce(() => {
+ fit(imgRef.current, classes);
+ }, 166); // Corresponds to 10 frames at 60 Hz.
+
+ 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;
+ })}
+
+
+ );
+});
+
+ImageListTile.propTypes = {
+ /**
+ * Theoretically you can pass any node as children, but the main use case is to pass an img,
+ * in which case ImageListTile takes care of making the image "cover" available space
+ * (similar to `background-size: cover` or to `object-fit: cover`).
+ */
+ children: PropTypes.node,
+ /**
+ * Override or extend the styles applied to the component.
+ * See [CSS API](#css) below for more details.
+ */
+ classes: PropTypes.object.isRequired,
+ /**
+ * @ignore
+ */
+ className: PropTypes.string,
+ /**
+ * Width of the tile in number of grid cells.
+ */
+ cols: PropTypes.number,
+ /**
+ * The component used for the root node.
+ * Either a string to use a DOM element or a component.
+ */
+ component: PropTypes.elementType,
+ /**
+ * Height of the tile in number of grid cells.
+ */
+ rows: PropTypes.number,
+};
+
+ImageListTile.defaultProps = {
+ cols: 1,
+ component: 'li',
+ rows: 1,
+};
+
+export default withStyles(styles, { name: 'MuiImageListTile' })(ImageListTile);
diff --git a/packages/material-ui/src/GridListTile/GridListTile.test.js b/packages/material-ui/src/ImageListTile/ImageListTile.test.js
similarity index 89%
rename from packages/material-ui/src/GridListTile/GridListTile.test.js
rename to packages/material-ui/src/ImageListTile/ImageListTile.test.js
index deecf72b6765a1..96c86a5ad9ba64 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.test.js
+++ b/packages/material-ui/src/ImageListTile/ImageListTile.test.js
@@ -4,15 +4,15 @@ import { spy, useFakeTimers } from 'sinon';
import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils';
import { act } from 'react-dom/test-utils';
import { setRef } from '../utils/reactHelpers';
-import GridListTile from './GridListTile';
+import ImageListTile from './ImageListTile';
-describe('', () => {
+describe('', () => {
let mount;
let classes;
before(() => {
mount = createMount();
- classes = getClasses();
+ classes = getClasses();
});
after(() => {
@@ -27,9 +27,9 @@ describe('', () => {
it('should render a li', () => {
const wrapper = mount(
-
+
- ,
+ ,
);
assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'li');
});
@@ -37,9 +37,9 @@ describe('', () => {
describe('prop: component', () => {
it('controls the root host node', () => {
const wrapper = mount(
-
+
- ,
+ ,
);
assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div');
});
@@ -48,14 +48,14 @@ describe('', () => {
describe('prop: children', () => {
it('should render children by default', () => {
const children = ;
- const wrapper = mount({children});
+ const wrapper = mount({children});
assert.strictEqual(wrapper.containsMatchingElement(children), true);
});
it('should not change non image child', () => {
const children = ;
- const wrapper = mount({children});
+ const wrapper = mount({children});
assert.strictEqual(wrapper.containsMatchingElement(children), true);
});
});
@@ -63,7 +63,7 @@ describe('', () => {
describe('prop: className', () => {
it('should renders className', () => {
const children = ;
- const wrapper = mount({children});
+ const wrapper = mount({children});
assert.strictEqual(wrapper.hasClass('foo'), true);
});
@@ -84,10 +84,10 @@ describe('', () => {
Image.muiName = 'Image';
return mount(
-
+
{null}
- ,
+ ,
);
}
diff --git a/packages/material-ui/src/ImageListTile/index.d.ts b/packages/material-ui/src/ImageListTile/index.d.ts
new file mode 100644
index 00000000000000..eec68107fd6333
--- /dev/null
+++ b/packages/material-ui/src/ImageListTile/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './ImageListTile';
+export * from './ImageListTile';
diff --git a/packages/material-ui/src/ImageListTile/index.js b/packages/material-ui/src/ImageListTile/index.js
new file mode 100644
index 00000000000000..cd45ce9f207f1f
--- /dev/null
+++ b/packages/material-ui/src/ImageListTile/index.js
@@ -0,0 +1 @@
+export { default } from './ImageListTile';
diff --git a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts
new file mode 100644
index 00000000000000..5beca16689d9e0
--- /dev/null
+++ b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { StandardProps } from '..';
+
+export interface ImageListTileBarProps extends StandardProps<{}, ImageListTileBarClassKey> {
+ actionIcon?: React.ReactNode;
+ actionPosition?: 'left' | 'right';
+ subtitle?: React.ReactNode;
+ title?: React.ReactNode;
+ titlePosition?: 'top' | 'bottom';
+}
+
+export type ImageListTileBarClassKey =
+ | 'root'
+ | 'titlePositionBottom'
+ | 'titlePositionTop'
+ | 'rootSubtitle'
+ | 'titleWrap'
+ | 'titleWrapActionPosLeft'
+ | 'titleWrapActionPosRight'
+ | 'title'
+ | 'subtitle'
+ | 'actionIcon'
+ | 'actionIconActionPosLeft';
+
+declare const ImageListTileBar: React.ComponentType;
+
+export default ImageListTileBar;
diff --git a/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
new file mode 100644
index 00000000000000..1d8476552baf56
--- /dev/null
+++ b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import withStyles from '../styles/withStyles';
+
+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 `titlePosition="bottom"`. */
+ titlePositionBottom: {
+ bottom: 0,
+ },
+ /* Styles applied to the root element if `titlePosition="top"`. */
+ titlePositionTop: {
+ 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: theme.mixins.gutters().paddingLeft,
+ marginRight: theme.mixins.gutters().paddingRight,
+ 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 ImageListTileBar = React.forwardRef(function ImageListTileBar(props, ref) {
+ const {
+ actionIcon,
+ actionPosition,
+ classes,
+ className: classNameProp,
+ subtitle,
+ title,
+ titlePosition,
+ ...other
+ } = props;
+
+ const actionPos = actionIcon && actionPosition;
+ const className = clsx(
+ classes.root,
+ {
+ [classes.titlePositionBottom]: titlePosition === 'bottom',
+ [classes.titlePositionTop]: titlePosition === 'top',
+ [classes.rootSubtitle]: subtitle,
+ },
+ classNameProp,
+ );
+
+ // Remove the margin between the title / subtitle wrapper, and the Action Icon
+ const titleWrapClassName = clsx(classes.titleWrap, {
+ [classes.titleWrapActionPosLeft]: actionPos === 'left',
+ [classes.titleWrapActionPosRight]: actionPos === 'right',
+ });
+
+ return (
+
+
+
{title}
+ {subtitle ?
{subtitle}
: null}
+
+ {actionIcon ? (
+
+ {actionIcon}
+
+ ) : null}
+
-
+
,
-
+
);
const ListTest = () => (
diff --git a/pages/api/grid-list-tile-bar.md b/pages/api/grid-list-tile-bar.md
index 0465f16132209b..725508a6b300b9 100644
--- a/pages/api/grid-list-tile-bar.md
+++ b/pages/api/grid-list-tile-bar.md
@@ -12,49 +12,17 @@ filename: /packages/material-ui/src/GridListTileBar/GridListTileBar.js
import GridListTileBar from '@material-ui/core/GridListTileBar';
```
-
+Deprecated, use ImageListTileBar instead.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
-| actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the tile itself). |
-| actionPosition | enum: '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. |
-| subtitle | node | | String or element serving as subtitle (support text). |
-| title | node | | Title to be displayed on tile. |
-| titlePosition | enum: 'top' |
'bottom'
| 'bottom' | Position of the title bar. |
-
-Any other properties supplied will be spread to the root element (native element).
-
-## CSS
-
-You can override all the class names injected by Material-UI thanks to the `classes` property.
-This property accepts the following keys:
-
-
-| Name | Description |
-|:-----|:------------|
-| root | Styles applied to the root element.
-| titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`.
-| titlePositionTop | Styles applied to the root element if `titlePosition="top"`.
-| rootSubtitle | Styles applied to the root element if a `subtitle` is provided.
-| titleWrap | Styles applied to the title and subtitle container element.
-| titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`.
-| titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`.
-| title | Styles applied to the title container element.
-| subtitle | Styles applied to the subtitle container element.
-| actionIcon | Styles applied to the actionIcon if supplied.
-| actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left"`.
-
-Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
-and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/GridListTileBar/GridListTileBar.js)
-for more detail.
-If using the `overrides` [key of the theme](/customization/themes/#css),
-you need to use the following style sheet name: `MuiGridListTileBar`.
+Any other properties supplied will be spread to the root element ([GridListTileBar](/api/grid-list-tile-bar/)).
-## Demos
+## Inheritance
-- [Grid List](/demos/grid-list/)
+The properties of the [GridListTileBar](/api/grid-list-tile-bar/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
diff --git a/pages/api/grid-list-tile.md b/pages/api/grid-list-tile.md
index a6321684de2587..74c96a7252891d 100644
--- a/pages/api/grid-list-tile.md
+++ b/pages/api/grid-list-tile.md
@@ -12,41 +12,17 @@ filename: /packages/material-ui/src/GridListTile/GridListTile.js
import GridListTile from '@material-ui/core/GridListTile';
```
-
+Deprecated, use ImageListTile instead.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
-| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
-| 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 tile in number of grid cells. |
-| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
-| rows | number | 1 | Height of the tile in number of grid cells. |
-
-Any other properties supplied will be spread to the root element (native element).
-
-## CSS
-
-You can override all the class names injected by Material-UI thanks to the `classes` property.
-This property accepts the following keys:
-
-
-| Name | Description |
-|:-----|:------------|
-| root | Styles applied to the root element.
-| tile | Styles applied to the `div` element that wraps the children.
-| imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the tile.
-| imgFullWidth | Styles applied to an `img` element child, if needed to ensure it covers the tile.
-
-Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
-and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/GridListTile/GridListTile.js)
-for more detail.
-If using the `overrides` [key of the theme](/customization/themes/#css),
-you need to use the following style sheet name: `MuiGridListTile`.
+Any other properties supplied will be spread to the root element ([GridListTile](/api/grid-list-tile/)).
-## Demos
+## Inheritance
-- [Grid List](/demos/grid-list/)
+The properties of the [GridListTile](/api/grid-list-tile/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
diff --git a/pages/api/grid-list.md b/pages/api/grid-list.md
index 092de55212b75b..a2332e0c88fe50 100644
--- a/pages/api/grid-list.md
+++ b/pages/api/grid-list.md
@@ -12,39 +12,17 @@ filename: /packages/material-ui/src/GridList/GridList.js
import GridList from '@material-ui/core/GridList';
```
-
+Deprecated, use ImageList instead.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
-| cellHeight | union: number |
enum: 'auto'
| 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
-| children * | node | | Grid Tiles that will be in Grid 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 DOM element or a component. |
-| spacing | number | 4 | Number of px for the spacing between tiles. |
-
-Any other properties supplied will be spread to the root element (native element).
-
-## CSS
-
-You can override all the class names injected by Material-UI thanks to the `classes` property.
-This property accepts the following keys:
-
-
-| Name | Description |
-|:-----|:------------|
-| root | Styles applied to the root element.
-
-Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
-and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/GridList/GridList.js)
-for more detail.
-If using the `overrides` [key of the theme](/customization/themes/#css),
-you need to use the following style sheet name: `MuiGridList`.
+Any other properties supplied will be spread to the root element ([GridList](/api/grid-list/)).
-## Demos
+## Inheritance
-- [Grid List](/demos/grid-list/)
+The properties of the [GridList](/api/grid-list/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md
index 5a199435fade88..7f4ee459f8e1a1 100644
--- a/pages/api/icon-button.md
+++ b/pages/api/icon-button.md
@@ -61,5 +61,5 @@ You can take advantage of this behavior to [target nested components](/guides/ap
## Demos
- [Buttons](/demos/buttons/)
-- [Grid List](/demos/grid-list/)
+- [Image List](/demos/image-list/)
diff --git a/pages/api/image-list-tile-bar.js b/pages/api/image-list-tile-bar.js
new file mode 100644
index 00000000000000..8b3a3bf3c23d89
--- /dev/null
+++ b/pages/api/image-list-tile-bar.js
@@ -0,0 +1,11 @@
+import 'docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './image-list-tile-bar.md';
+
+function Page() {
+ return ;
+}
+
+export default Page;
diff --git a/pages/api/image-list-tile-bar.md b/pages/api/image-list-tile-bar.md
new file mode 100644
index 00000000000000..7411d89bcb4884
--- /dev/null
+++ b/pages/api/image-list-tile-bar.md
@@ -0,0 +1,60 @@
+---
+filename: /packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
+---
+
+
+
+# ImageListTileBar API
+
+The API documentation of the ImageListTileBar React component. Learn more about the properties and the CSS customization points.
+
+```js
+import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+```
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the tile itself). |
+| actionPosition | enum: '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. |
+| subtitle | node | | String or element serving as subtitle (support text). |
+| title | node | | Title to be displayed on tile. |
+| titlePosition | enum: 'top' |
'bottom'
| 'bottom' | Position of the title bar. |
+
+Any other properties supplied will be spread to the root element (native element).
+
+## CSS
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+
+
+| Name | Description |
+|:-----|:------------|
+| root | Styles applied to the root element.
+| titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`.
+| titlePositionTop | Styles applied to the root element if `titlePosition="top"`.
+| rootSubtitle | Styles applied to the root element if a `subtitle` is provided.
+| titleWrap | Styles applied to the title and subtitle container element.
+| titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`.
+| titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`.
+| title | Styles applied to the title container element.
+| subtitle | Styles applied to the subtitle container element.
+| actionIcon | Styles applied to the actionIcon if supplied.
+| actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left"`.
+
+Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js)
+for more detail.
+
+If using the `overrides` [key of the theme](/customization/themes/#css),
+you need to use the following style sheet name: `MuiImageListTileBar`.
+
+## Demos
+
+- [Image List](/demos/image-list/)
+
diff --git a/pages/api/image-list-tile.js b/pages/api/image-list-tile.js
new file mode 100644
index 00000000000000..e7813e4c163944
--- /dev/null
+++ b/pages/api/image-list-tile.js
@@ -0,0 +1,11 @@
+import 'docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './image-list-tile.md';
+
+function Page() {
+ return ;
+}
+
+export default Page;
diff --git a/pages/api/image-list-tile.md b/pages/api/image-list-tile.md
new file mode 100644
index 00000000000000..00da27af923c4a
--- /dev/null
+++ b/pages/api/image-list-tile.md
@@ -0,0 +1,52 @@
+---
+filename: /packages/material-ui/src/ImageListTile/ImageListTile.js
+---
+
+
+
+# ImageListTile API
+
+The API documentation of the ImageListTile React component. Learn more about the properties and the CSS customization points.
+
+```js
+import ImageListTile from '@material-ui/core/ImageListTile';
+```
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case ImageListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
+| 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 tile in number of grid cells. |
+| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
+| rows | number | 1 | Height of the tile in number of grid cells. |
+
+Any other properties supplied will be spread to the root element (native element).
+
+## CSS
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+
+
+| Name | Description |
+|:-----|:------------|
+| root | Styles applied to the root element.
+| tile | Styles applied to the `div` element that wraps the children.
+| imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| imgFullWidth | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+
+Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListTile/ImageListTile.js)
+for more detail.
+
+If using the `overrides` [key of the theme](/customization/themes/#css),
+you need to use the following style sheet name: `MuiImageListTile`.
+
+## Demos
+
+- [Image List](/demos/image-list/)
+
diff --git a/pages/api/image-list.js b/pages/api/image-list.js
new file mode 100644
index 00000000000000..a98d3a2b4cdd6d
--- /dev/null
+++ b/pages/api/image-list.js
@@ -0,0 +1,11 @@
+import 'docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './image-list.md';
+
+function Page() {
+ return ;
+}
+
+export default Page;
diff --git a/pages/api/image-list.md b/pages/api/image-list.md
new file mode 100644
index 00000000000000..072e1797ea4a79
--- /dev/null
+++ b/pages/api/image-list.md
@@ -0,0 +1,50 @@
+---
+filename: /packages/material-ui/src/ImageList/ImageList.js
+---
+
+
+
+# ImageList API
+
+The API documentation of the ImageList React component. Learn more about the properties and the CSS customization points.
+
+```js
+import ImageList from '@material-ui/core/ImageList';
+```
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| cellHeight | union: number |
enum: 'auto'
| 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
+| children * | node | | Grid Tiles that will be in Grid 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 DOM element or a component. |
+| spacing | number | 4 | Number of px for the spacing between tiles. |
+
+Any other properties supplied will be spread to the root element (native element).
+
+## CSS
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+
+
+| Name | Description |
+|:-----|:------------|
+| root | Styles applied to the root element.
+
+Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageList/ImageList.js)
+for more detail.
+
+If using the `overrides` [key of the theme](/customization/themes/#css),
+you need to use the following style sheet name: `MuiImageList`.
+
+## Demos
+
+- [Image List](/demos/image-list/)
+
diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md
index c29a82db1209d1..a2a61cff9a1c09 100644
--- a/pages/api/list-subheader.md
+++ b/pages/api/list-subheader.md
@@ -52,6 +52,6 @@ you need to use the following style sheet name: `MuiListSubheader`.
## Demos
-- [Grid List](/demos/grid-list/)
+- [Image List](/demos/image-list/)
- [Lists](/demos/lists/)
diff --git a/pages/demos/grid-list.js b/pages/demos/image-list.js
similarity index 66%
rename from pages/demos/grid-list.js
rename to pages/demos/image-list.js
index 408f1bd066625d..5992526cd3891c 100644
--- a/pages/demos/grid-list.js
+++ b/pages/demos/image-list.js
@@ -3,13 +3,13 @@ import 'docs/src/modules/components/bootstrap';
import React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-const req = require.context('docs/src/pages/demos/grid-list', false, /\.md|\.js$/);
+const req = require.context('docs/src/pages/demos/image-list', false, /\.md|\.js$/);
const reqSource = require.context(
- '!raw-loader!../../docs/src/pages/demos/grid-list',
+ '!raw-loader!../../docs/src/pages/demos/image-list',
false,
/\.(js|tsx)$/,
);
-const reqPrefix = 'pages/demos/grid-list';
+const reqPrefix = 'pages/demos/image-list';
function Page() {
return ;
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 9f23dab61a5ac1..3b75c1ef383d56 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -57,7 +57,7 @@ const blacklistSuite = [
];
const blacklistFilename = [
- 'docs-demos-grid-list/tileData.png', // no component
+ 'docs-demos-image-list/tileData.png', // no component
'docs-css-in-js-basics/StressTest.png', // strange bug no time for it
'docs-demos-steppers/SwipeableTextMobileStepper.png', // external img
'docs-demos-steppers/TextMobileStepper.png', // external img