[GridList] Rename ImageList

docs/src/pages/demos/grid-list/AdvancedGridList.js → 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 (
     <div className={classes.root}>
-      <GridList cellHeight={200} spacing={1} className={classes.gridList}>
+      <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map(tile => (
-          <GridListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
+          <ImageListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
             <img src={tile.img} alt={tile.title} />
-            <GridListTileBar
+            <ImageListTileBar
               title={tile.title}
               titlePosition="top"
               actionIcon={
@@ -70,15 +70,15 @@ function AdvancedGridList(props) {
               actionPosition="left"
               className={classes.titleBar}
             />
-          </GridListTile>
+          </ImageListTile>
         ))}
-      </GridList>
+      </ImageList>
     </div>
   );
 }
 
-AdvancedGridList.propTypes = {
+AdvancedImageList.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(AdvancedGridList);
+export default withStyles(styles)(AdvancedImageList);

docs/src/pages/demos/grid-list/ImageGridList.js → docs/src/pages/demos/image-list/ImageOnlyList.js

@@ -1,8 +1,8 @@
 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 ImageList from '@material-ui/core/ImageList';
+import ImageListTile from '@material-ui/core/ImageListTile';
 import tileData from './tileData';
 
 const styles = theme => ({
@@ -37,24 +37,24 @@ const styles = theme => ({
  *   },
  * ];
  */
-function ImageGridList(props) {
+function ImageOnlyList(props) {
   const { classes } = props;
 
   return (
     <div className={classes.root}>
-      <GridList cellHeight={160} className={classes.gridList} cols={3}>
+      <ImageList cellHeight={160} className={classes.gridList} cols={3}>
         {tileData.map(tile => (
-          <GridListTile key={tile.img} cols={tile.cols || 1}>
+          <ImageListTile key={tile.img} cols={tile.cols || 1}>
             <img src={tile.img} alt={tile.title} />
-          </GridListTile>
+          </ImageListTile>
         ))}
-      </GridList>
+      </ImageList>
     </div>
   );
 }
 
-ImageGridList.propTypes = {
+ImageOnlyList.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(ImageGridList);
+export default withStyles(styles)(ImageOnlyList);

docs/src/pages/demos/grid-list/SingleLineGridList.js → docs/src/pages/demos/image-list/SingleLineImageList.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';
@@ -47,16 +47,16 @@ const styles = theme => ({
  *   },
  * ];
  */
-function SingleLineGridList(props) {
+function SingleLineImageList(props) {
   const { classes } = props;
 
   return (
     <div className={classes.root}>
-      <GridList className={classes.gridList} cols={2.5}>
+      <ImageList className={classes.gridList} cols={2.5}>
         {tileData.map(tile => (
-          <GridListTile key={tile.img}>
+          <ImageListTile key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <GridListTileBar
+            <ImageListTileBar
               title={tile.title}
               classes={{
                 root: classes.titleBar,
@@ -68,15 +68,15 @@ function SingleLineGridList(props) {
                 </IconButton>
               }
             />
-          </GridListTile>
+          </ImageListTile>
         ))}
-      </GridList>
+      </ImageList>
     </div>
   );
 }
 
-SingleLineGridList.propTypes = {
+SingleLineImageList.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(SingleLineGridList);
+export default withStyles(styles)(SingleLineImageList);

docs/src/pages/demos/grid-list/TitlebarGridList.js → docs/src/pages/demos/image-list/TitlebarImageList.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 ListSubheader from '@material-ui/core/ListSubheader';
 import IconButton from '@material-ui/core/IconButton';
 import InfoIcon from '@material-ui/icons/Info';
@@ -43,19 +43,19 @@ const styles = theme => ({
  *   },
  * ];
  */
-function TitlebarGridList(props) {
+function TitlebarImageList(props) {
   const { classes } = props;
 
   return (
     <div className={classes.root}>
-      <GridList cellHeight={180} className={classes.gridList}>
-        <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
+      <ImageList cellHeight={180} className={classes.gridList}>
+        <ImageListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
           <ListSubheader component="div">December</ListSubheader>
-        </GridListTile>
+        </ImageListTile>
         {tileData.map(tile => (
-          <GridListTile key={tile.img}>
+          <ImageListTile key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <GridListTileBar
+            <ImageListTileBar
               title={tile.title}
               subtitle={<span>by: {tile.author}</span>}
               actionIcon={
@@ -64,15 +64,15 @@ function TitlebarGridList(props) {
                 </IconButton>
               }
             />
-          </GridListTile>
+          </ImageListTile>
         ))}
-      </GridList>
+      </ImageList>
     </div>
   );
 }
 
-TitlebarGridList.propTypes = {
+TitlebarImageList.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(TitlebarGridList);
+export default withStyles(styles)(TitlebarImageList);

docs/src/pages/demos/image-list/image-list.md

@@ -0,0 +1,39 @@
+---
+title: Image list React component
+components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton
+---
+
+# Image list
+
+<p class="description">Image lists display a collection of images in an organized grid.</p>
+
+[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}}

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

packages/material-ui/src/ImageList/ImageList.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StandardProps } from '..';
+
+export interface ImageListProps
+  extends StandardProps<React.HTMLAttributes<HTMLUListElement>, ImageListClassKey> {
+  cellHeight?: number | 'auto';
+  cols?: number;
+  component?: React.ElementType<ImageListProps>;
+  spacing?: number;
+}
+
+export type ImageListClassKey = 'root';
+
+declare const ImageList: React.ComponentType<ImageListProps>;
+
+export default ImageList;