From ba7394c2c7fb5a1e17ce0ffc9dd798280bbb309d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 21 Mar 2019 15:11:30 +0100 Subject: [PATCH] [GridList] Rename ImageList --- docs/src/pages/demos/grid-list/grid-list.md | 39 ------------------- .../AdvancedImageList.js} | 22 +++++------ .../ImageOnlyList.js} | 18 ++++----- .../SingleLineImageList.js} | 22 +++++------ .../TitlebarImageList.js} | 26 ++++++------- .../{grid-list => image-list}/grid-list-de.md | 0 .../{grid-list => image-list}/grid-list-es.md | 0 .../{grid-list => image-list}/grid-list-fr.md | 0 .../{grid-list => image-list}/grid-list-ja.md | 0 .../{grid-list => image-list}/grid-list-pt.md | 0 .../{grid-list => image-list}/grid-list-ru.md | 0 .../{grid-list => image-list}/grid-list-zh.md | 0 docs/src/pages/demos/image-list/image-list.md | 39 +++++++++++++++++++ .../{grid-list => image-list}/tileData.js | 0 docs/static/_redirects | 2 + .../material-ui/src/GridList/GridList.d.ts | 16 -------- packages/material-ui/src/GridList/index.d.ts | 2 - packages/material-ui/src/GridList/index.js | 1 - .../src/GridListTile/GridListTile.d.ts | 15 ------- .../material-ui/src/GridListTile/index.d.ts | 2 - .../material-ui/src/GridListTile/index.js | 1 - .../src/GridListTileBar/index.d.ts | 2 - .../material-ui/src/GridListTileBar/index.js | 1 - .../material-ui/src/ImageList/ImageList.d.ts | 16 ++++++++ .../GridList.js => ImageList/ImageList.js} | 10 ++--- .../ImageList.test.js} | 36 ++++++++--------- packages/material-ui/src/ImageList/index.d.ts | 2 + packages/material-ui/src/ImageList/index.js | 1 + .../src/ImageListTile/ImageListTile.d.ts | 15 +++++++ .../ImageListTile.js} | 10 ++--- .../ImageListTile.test.js} | 24 ++++++------ .../material-ui/src/ImageListTile/index.d.ts | 2 + .../material-ui/src/ImageListTile/index.js | 1 + .../ImageListTileBar.d.ts} | 8 ++-- .../ImageListTileBar.js} | 8 ++-- .../ImageListTileBar.test.js} | 6 +-- .../src/ImageListTileBar/index.d.ts | 2 + .../material-ui/src/ImageListTileBar/index.js | 1 + packages/material-ui/src/index.d.ts | 6 +-- packages/material-ui/src/index.js | 6 +-- .../material-ui/src/styles/overrides.d.ts | 36 ++++++++--------- packages/material-ui/src/styles/props.d.ts | 12 +++--- .../test/typescript/components.spec.tsx | 18 ++++----- pages/api/icon-button.md | 2 +- ...ist-tile-bar.js => image-list-tile-bar.js} | 2 +- ...ist-tile-bar.md => image-list-tile-bar.md} | 14 +++---- .../{grid-list-tile.js => image-list-tile.js} | 2 +- .../{grid-list-tile.md => image-list-tile.md} | 16 ++++---- pages/api/{grid-list.js => image-list.js} | 2 +- pages/api/{grid-list.md => image-list.md} | 14 +++---- pages/api/list-subheader.md | 2 +- pages/demos/{grid-list.js => image-list.js} | 6 +-- 52 files changed, 245 insertions(+), 243 deletions(-) delete mode 100644 docs/src/pages/demos/grid-list/grid-list.md rename docs/src/pages/demos/{grid-list/AdvancedGridList.js => image-list/AdvancedImageList.js} (75%) rename docs/src/pages/demos/{grid-list/ImageGridList.js => image-list/ImageOnlyList.js} (69%) rename docs/src/pages/demos/{grid-list/SingleLineGridList.js => image-list/SingleLineImageList.js} (77%) rename docs/src/pages/demos/{grid-list/TitlebarGridList.js => image-list/TitlebarImageList.js} (71%) rename docs/src/pages/demos/{grid-list => image-list}/grid-list-de.md (100%) rename docs/src/pages/demos/{grid-list => image-list}/grid-list-es.md (100%) rename docs/src/pages/demos/{grid-list => image-list}/grid-list-fr.md (100%) rename docs/src/pages/demos/{grid-list => image-list}/grid-list-ja.md (100%) rename docs/src/pages/demos/{grid-list => image-list}/grid-list-pt.md (100%) rename docs/src/pages/demos/{grid-list => image-list}/grid-list-ru.md (100%) rename docs/src/pages/demos/{grid-list => image-list}/grid-list-zh.md (100%) create mode 100644 docs/src/pages/demos/image-list/image-list.md rename docs/src/pages/demos/{grid-list => image-list}/tileData.js (100%) delete mode 100644 packages/material-ui/src/GridList/GridList.d.ts delete mode 100644 packages/material-ui/src/GridList/index.d.ts delete mode 100644 packages/material-ui/src/GridList/index.js delete mode 100644 packages/material-ui/src/GridListTile/GridListTile.d.ts delete mode 100644 packages/material-ui/src/GridListTile/index.d.ts delete mode 100644 packages/material-ui/src/GridListTile/index.js delete mode 100644 packages/material-ui/src/GridListTileBar/index.d.ts delete mode 100644 packages/material-ui/src/GridListTileBar/index.js create mode 100644 packages/material-ui/src/ImageList/ImageList.d.ts rename packages/material-ui/src/{GridList/GridList.js => ImageList/ImageList.js} (89%) rename packages/material-ui/src/{GridList/GridList.test.js => ImageList/ImageList.test.js} (89%) create mode 100644 packages/material-ui/src/ImageList/index.d.ts create mode 100644 packages/material-ui/src/ImageList/index.js create mode 100644 packages/material-ui/src/ImageListTile/ImageListTile.d.ts rename packages/material-ui/src/{GridListTile/GridListTile.js => ImageListTile/ImageListTile.js} (92%) rename packages/material-ui/src/{GridListTile/GridListTile.test.js => ImageListTile/ImageListTile.test.js} (89%) create mode 100644 packages/material-ui/src/ImageListTile/index.d.ts create mode 100644 packages/material-ui/src/ImageListTile/index.js rename packages/material-ui/src/{GridListTileBar/GridListTileBar.d.ts => ImageListTileBar/ImageListTileBar.d.ts} (65%) rename packages/material-ui/src/{GridListTileBar/GridListTileBar.js => ImageListTileBar/ImageListTileBar.js} (94%) rename packages/material-ui/src/{GridListTileBar/GridListTileBar.test.js => ImageListTileBar/ImageListTileBar.test.js} (76%) create mode 100644 packages/material-ui/src/ImageListTileBar/index.d.ts create mode 100644 packages/material-ui/src/ImageListTileBar/index.js rename pages/api/{grid-list-tile-bar.js => image-list-tile-bar.js} (84%) rename pages/api/{grid-list-tile-bar.md => image-list-tile-bar.md} (85%) rename pages/api/{grid-list-tile.js => image-list-tile.js} (85%) rename pages/api/{grid-list-tile.md => image-list-tile.md} (74%) rename pages/api/{grid-list.js => image-list.js} (86%) rename pages/api/{grid-list.md => image-list.md} (81%) rename pages/demos/{grid-list.js => image-list.js} (66%) 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 => ( - + {tile.title} - - + ))} - +
); } -AdvancedGridList.propTypes = { +AdvancedImageList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(AdvancedGridList); +export default withStyles(styles)(AdvancedImageList); diff --git a/docs/src/pages/demos/grid-list/ImageGridList.js b/docs/src/pages/demos/image-list/ImageOnlyList.js similarity index 69% rename from docs/src/pages/demos/grid-list/ImageGridList.js rename to docs/src/pages/demos/image-list/ImageOnlyList.js index f14389d3acfd61..9c964599b079bb 100644 --- a/docs/src/pages/demos/grid-list/ImageGridList.js +++ b/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 (
- + {tileData.map(tile => ( - + {tile.title} - + ))} - +
); } -ImageGridList.propTypes = { +ImageOnlyList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(ImageGridList); +export default withStyles(styles)(ImageOnlyList); diff --git a/docs/src/pages/demos/grid-list/SingleLineGridList.js b/docs/src/pages/demos/image-list/SingleLineImageList.js similarity index 77% rename from docs/src/pages/demos/grid-list/SingleLineGridList.js rename to docs/src/pages/demos/image-list/SingleLineImageList.js index ff12b3cab09fe3..20548185dd4cd2 100644 --- a/docs/src/pages/demos/grid-list/SingleLineGridList.js +++ b/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 (
- + {tileData.map(tile => ( - + {tile.title} - } /> - + ))} - +
); } -SingleLineGridList.propTypes = { +SingleLineImageList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(SingleLineGridList); +export default withStyles(styles)(SingleLineImageList); diff --git a/docs/src/pages/demos/grid-list/TitlebarGridList.js b/docs/src/pages/demos/image-list/TitlebarImageList.js similarity index 71% rename from docs/src/pages/demos/grid-list/TitlebarGridList.js rename to docs/src/pages/demos/image-list/TitlebarImageList.js index eaaec54dcde3fe..67541ac9b3ac1e 100644 --- a/docs/src/pages/demos/grid-list/TitlebarGridList.js +++ b/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 (
- - + + December - + {tileData.map(tile => ( - + {tile.title} - by: {tile.author}} actionIcon={ @@ -64,15 +64,15 @@ function TitlebarGridList(props) { } /> - + ))} - +
); } -TitlebarGridList.propTypes = { +TitlebarImageList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(TitlebarGridList); +export default withStyles(styles)(TitlebarImageList); diff --git a/docs/src/pages/demos/grid-list/grid-list-de.md b/docs/src/pages/demos/image-list/grid-list-de.md similarity index 100% rename from docs/src/pages/demos/grid-list/grid-list-de.md rename to docs/src/pages/demos/image-list/grid-list-de.md diff --git a/docs/src/pages/demos/grid-list/grid-list-es.md b/docs/src/pages/demos/image-list/grid-list-es.md similarity index 100% rename from docs/src/pages/demos/grid-list/grid-list-es.md rename to docs/src/pages/demos/image-list/grid-list-es.md diff --git a/docs/src/pages/demos/grid-list/grid-list-fr.md b/docs/src/pages/demos/image-list/grid-list-fr.md similarity index 100% rename from docs/src/pages/demos/grid-list/grid-list-fr.md rename to docs/src/pages/demos/image-list/grid-list-fr.md diff --git a/docs/src/pages/demos/grid-list/grid-list-ja.md b/docs/src/pages/demos/image-list/grid-list-ja.md similarity index 100% rename from docs/src/pages/demos/grid-list/grid-list-ja.md rename to docs/src/pages/demos/image-list/grid-list-ja.md diff --git a/docs/src/pages/demos/grid-list/grid-list-pt.md b/docs/src/pages/demos/image-list/grid-list-pt.md similarity index 100% rename from docs/src/pages/demos/grid-list/grid-list-pt.md rename to docs/src/pages/demos/image-list/grid-list-pt.md diff --git a/docs/src/pages/demos/grid-list/grid-list-ru.md b/docs/src/pages/demos/image-list/grid-list-ru.md similarity index 100% rename from docs/src/pages/demos/grid-list/grid-list-ru.md rename to docs/src/pages/demos/image-list/grid-list-ru.md diff --git a/docs/src/pages/demos/grid-list/grid-list-zh.md b/docs/src/pages/demos/image-list/grid-list-zh.md similarity index 100% rename from docs/src/pages/demos/grid-list/grid-list-zh.md rename to docs/src/pages/demos/image-list/grid-list-zh.md diff --git a/docs/src/pages/demos/image-list/image-list.md b/docs/src/pages/demos/image-list/image-list.md new file mode 100644 index 00000000000000..a31278333b5742 --- /dev/null +++ b/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 + +

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.d.ts b/packages/material-ui/src/GridList/GridList.d.ts deleted file mode 100644 index 600b31af9476ca..00000000000000 --- a/packages/material-ui/src/GridList/GridList.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import { StandardProps } from '..'; - -export interface GridListProps - extends StandardProps, GridListClassKey> { - cellHeight?: number | 'auto'; - cols?: number; - component?: React.ElementType; - spacing?: number; -} - -export type GridListClassKey = 'root'; - -declare const GridList: React.ComponentType; - -export default GridList; diff --git a/packages/material-ui/src/GridList/index.d.ts b/packages/material-ui/src/GridList/index.d.ts deleted file mode 100644 index ccb08b003a8dbd..00000000000000 --- a/packages/material-ui/src/GridList/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './GridList'; -export * from './GridList'; diff --git a/packages/material-ui/src/GridList/index.js b/packages/material-ui/src/GridList/index.js deleted file mode 100644 index b31386ab5ae4dc..00000000000000 --- a/packages/material-ui/src/GridList/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './GridList'; diff --git a/packages/material-ui/src/GridListTile/GridListTile.d.ts b/packages/material-ui/src/GridListTile/GridListTile.d.ts deleted file mode 100644 index bfd7a66173f0f6..00000000000000 --- a/packages/material-ui/src/GridListTile/GridListTile.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { StandardProps } from '..'; - -export interface GridListTileProps - extends StandardProps, GridListTileClassKey> { - cols?: number; - component?: React.ElementType; - rows?: number; -} - -export type GridListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth'; - -declare const GridListTile: React.ComponentType; - -export default GridListTile; diff --git a/packages/material-ui/src/GridListTile/index.d.ts b/packages/material-ui/src/GridListTile/index.d.ts deleted file mode 100644 index 25a1add1cf5966..00000000000000 --- a/packages/material-ui/src/GridListTile/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './GridListTile'; -export * from './GridListTile'; diff --git a/packages/material-ui/src/GridListTile/index.js b/packages/material-ui/src/GridListTile/index.js deleted file mode 100644 index a2f96968c37576..00000000000000 --- a/packages/material-ui/src/GridListTile/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './GridListTile'; diff --git a/packages/material-ui/src/GridListTileBar/index.d.ts b/packages/material-ui/src/GridListTileBar/index.d.ts deleted file mode 100644 index 3ecc2f66424d24..00000000000000 --- a/packages/material-ui/src/GridListTileBar/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './GridListTileBar'; -export * from './GridListTileBar'; diff --git a/packages/material-ui/src/GridListTileBar/index.js b/packages/material-ui/src/GridListTileBar/index.js deleted file mode 100644 index 5b368926b920fc..00000000000000 --- a/packages/material-ui/src/GridListTileBar/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './GridListTileBar'; diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts new file mode 100644 index 00000000000000..e1cd03fdad3ca4 --- /dev/null +++ b/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, ImageListClassKey> { + cellHeight?: number | 'auto'; + cols?: number; + component?: React.ElementType; + spacing?: number; +} + +export type ImageListClassKey = 'root'; + +declare const ImageList: React.ComponentType; + +export default ImageList; diff --git a/packages/material-ui/src/GridList/GridList.js b/packages/material-ui/src/ImageList/ImageList.js similarity index 89% rename from packages/material-ui/src/GridList/GridList.js rename to packages/material-ui/src/ImageList/ImageList.js index 6a7cee4fdcd239..de891aad687150 100644 --- a/packages/material-ui/src/GridList/GridList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -16,7 +16,7 @@ export const styles = { }, }; -const GridList = React.forwardRef(function GridList(props, ref) { +const ImageList = React.forwardRef(function ImageList(props, ref) { const { cellHeight, children, @@ -44,7 +44,7 @@ const GridList = React.forwardRef(function GridList(props, ref) { warning( child.type !== React.Fragment, [ - "Material-UI: the GridList component doesn't accept a Fragment as a child.", + "Material-UI: the ImageList component doesn't accept a Fragment as a child.", 'Consider providing an array instead.', ].join('\n'), ); @@ -67,7 +67,7 @@ const GridList = React.forwardRef(function GridList(props, ref) { ); }); -GridList.propTypes = { +ImageList.propTypes = { /** * Number of px for one cell height. * You can set `'auto'` if you want to let the children determine the height. @@ -105,11 +105,11 @@ GridList.propTypes = { style: PropTypes.object, }; -GridList.defaultProps = { +ImageList.defaultProps = { cellHeight: 180, cols: 2, component: 'ul', spacing: 4, }; -export default withStyles(styles, { name: 'MuiGridList' })(GridList); +export default withStyles(styles, { name: 'MuiImageList' })(ImageList); diff --git a/packages/material-ui/src/GridList/GridList.test.js b/packages/material-ui/src/ImageList/ImageList.test.js similarity index 89% rename from packages/material-ui/src/GridList/GridList.test.js rename to packages/material-ui/src/ImageList/ImageList.test.js index 21f3dbbaa4a4d6..aa4a8645173283 100644 --- a/packages/material-ui/src/GridList/GridList.test.js +++ b/packages/material-ui/src/ImageList/ImageList.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow } from '@material-ui/core/test-utils'; -import GridList from './GridList'; +import ImageList from './ImageList'; const tilesData = [ { @@ -16,7 +16,7 @@ const tilesData = [ }, ]; -describe('', () => { +describe('', () => { let shallow; before(() => { @@ -25,18 +25,18 @@ describe('', () => { it('should render a ul', () => { const wrapper = shallow( - +
- , + , ); 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 => ( ', () => { foo ))} - , + , ); 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 => ( ', () => { foo ))} - , + , ); 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 => ( ', () => { foo ))} - , + , ); 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 => ( ', () => { foo ))} - , + , ); 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/GridListTile/GridListTile.js b/packages/material-ui/src/ImageListTile/ImageListTile.js similarity index 92% rename from packages/material-ui/src/GridListTile/GridListTile.js rename to packages/material-ui/src/ImageListTile/ImageListTile.js index 1466b80cd3275a..e408d251a76810 100644 --- a/packages/material-ui/src/GridListTile/GridListTile.js +++ b/packages/material-ui/src/ImageListTile/ImageListTile.js @@ -62,7 +62,7 @@ function ensureImageCover(imgEl, classes) { } } -const GridListTile = React.forwardRef(function GridListTile(props, ref) { +const ImageListTile = React.forwardRef(function ImageListTile(props, ref) { const { children, classes, className, cols, component: Component, rows, ...other } = props; const imgRef = React.useRef(null); @@ -104,10 +104,10 @@ const GridListTile = React.forwardRef(function GridListTile(props, ref) { ); }); -GridListTile.propTypes = { +ImageListTile.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 + * 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, @@ -135,10 +135,10 @@ GridListTile.propTypes = { rows: PropTypes.number, }; -GridListTile.defaultProps = { +ImageListTile.defaultProps = { cols: 1, component: 'li', rows: 1, }; -export default withStyles(styles, { name: 'MuiGridListTile' })(GridListTile); +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( - + foo - , + , ); assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'li'); }); @@ -37,9 +37,9 @@ describe('', () => { describe('prop: component', () => { it('controls the root host node', () => { const wrapper = mount( - + foo - , + , ); assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div'); }); @@ -48,14 +48,14 @@ describe('', () => { describe('prop: children', () => { it('should render children by default', () => { const children = foo; - 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 = foo; - 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/GridListTileBar/GridListTileBar.d.ts b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts similarity index 65% rename from packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts rename to packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts index 3565c3009c3a1d..5beca16689d9e0 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts +++ b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { StandardProps } from '..'; -export interface GridListTileBarProps extends StandardProps<{}, GridListTileBarClassKey> { +export interface ImageListTileBarProps extends StandardProps<{}, ImageListTileBarClassKey> { actionIcon?: React.ReactNode; actionPosition?: 'left' | 'right'; subtitle?: React.ReactNode; @@ -9,7 +9,7 @@ export interface GridListTileBarProps extends StandardProps<{}, GridListTileBarC titlePosition?: 'top' | 'bottom'; } -export type GridListTileBarClassKey = +export type ImageListTileBarClassKey = | 'root' | 'titlePositionBottom' | 'titlePositionTop' @@ -22,6 +22,6 @@ export type GridListTileBarClassKey = | 'actionIcon' | 'actionIconActionPosLeft'; -declare const GridListTileBar: React.ComponentType; +declare const ImageListTileBar: React.ComponentType; -export default GridListTileBar; +export default ImageListTileBar; diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js similarity index 94% rename from packages/material-ui/src/GridListTileBar/GridListTileBar.js rename to packages/material-ui/src/ImageListTileBar/ImageListTileBar.js index b08836e1104fb2..1d8476552baf56 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js +++ b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js @@ -67,7 +67,7 @@ export const styles = theme => ({ }, }); -const GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) { +const ImageListTileBar = React.forwardRef(function ImageListTileBar(props, ref) { const { actionIcon, actionPosition, @@ -115,7 +115,7 @@ const GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) { ); }); -GridListTileBar.propTypes = { +ImageListTileBar.propTypes = { /** * An IconButton element to be used as secondary action target * (primary action target is the tile itself). @@ -148,9 +148,9 @@ GridListTileBar.propTypes = { titlePosition: PropTypes.oneOf(['top', 'bottom']), }; -GridListTileBar.defaultProps = { +ImageListTileBar.defaultProps = { actionPosition: 'right', titlePosition: 'bottom', }; -export default withStyles(styles, { name: 'MuiGridListTileBar' })(GridListTileBar); +export default withStyles(styles, { name: 'MuiImageListTileBar' })(ImageListTileBar); diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.test.js similarity index 76% rename from packages/material-ui/src/GridListTileBar/GridListTileBar.test.js rename to packages/material-ui/src/ImageListTileBar/ImageListTileBar.test.js index 4608181bc3ecc6..d1d73813a65eba 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js +++ b/packages/material-ui/src/ImageListTileBar/ImageListTileBar.test.js @@ -1,9 +1,9 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow } from '@material-ui/core/test-utils'; -import GridListTileBar from './GridListTileBar'; +import ImageListTileBar from './ImageListTileBar'; -describe('', () => { +describe('', () => { let shallow; before(() => { @@ -18,7 +18,7 @@ describe('', () => { describe('prop: title', () => { it('should renders title', () => { - const wrapper = shallow(); + const wrapper = shallow(); assert.strictEqual( wrapper.children('div').text(), diff --git a/packages/material-ui/src/ImageListTileBar/index.d.ts b/packages/material-ui/src/ImageListTileBar/index.d.ts new file mode 100644 index 00000000000000..f6c234d372d026 --- /dev/null +++ b/packages/material-ui/src/ImageListTileBar/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './ImageListTileBar'; +export * from './ImageListTileBar'; diff --git a/packages/material-ui/src/ImageListTileBar/index.js b/packages/material-ui/src/ImageListTileBar/index.js new file mode 100644 index 00000000000000..351e42c714ee66 --- /dev/null +++ b/packages/material-ui/src/ImageListTileBar/index.js @@ -0,0 +1 @@ +export { default } from './ImageListTileBar'; diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index aabdc2b5995682..2e7c42514a405f 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -140,13 +140,13 @@ export { default as FormGroup } from './FormGroup'; export { default as FormHelperText } from './FormHelperText'; export { default as FormLabel } from './FormLabel'; export { default as Grid } from './Grid'; -export { default as GridList } from './GridList'; -export { default as GridListTile } from './GridListTile'; -export { default as GridListTileBar } from './GridListTileBar'; export { default as Grow } from './Grow'; export { default as Hidden } from './Hidden'; export { default as Icon } from './Icon'; export { default as IconButton } from './IconButton'; +export { default as ImageList } from './ImageList'; +export { default as ImageListTile } from './ImageListTile'; +export { default as ImageListTileBar } from './ImageListTileBar'; export { default as Input } from './Input'; export { default as InputAdornment } from './InputAdornment'; export { default as InputBase } from './InputBase'; diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js index d98d339b5aa3c5..59dbe79eef5eeb 100644 --- a/packages/material-ui/src/index.js +++ b/packages/material-ui/src/index.js @@ -51,13 +51,13 @@ export { default as FormGroup } from './FormGroup'; export { default as FormHelperText } from './FormHelperText'; export { default as FormLabel } from './FormLabel'; export { default as Grid } from './Grid'; -export { default as GridList } from './GridList'; -export { default as GridListTile } from './GridListTile'; -export { default as GridListTileBar } from './GridListTileBar'; export { default as Grow } from './Grow'; export { default as Hidden } from './Hidden'; export { default as Icon } from './Icon'; export { default as IconButton } from './IconButton'; +export { default as ImageList } from './ImageList'; +export { default as ImageListTile } from './ImageListTile'; +export { default as ImageListTileBar } from './ImageListTileBar'; export { default as Input } from './Input'; export { default as InputAdornment } from './InputAdornment'; export { default as InputBase } from './InputBase'; diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts index c983c1154cd000..ac6dd4774e15b1 100644 --- a/packages/material-ui/src/styles/overrides.d.ts +++ b/packages/material-ui/src/styles/overrides.d.ts @@ -4,14 +4,13 @@ import { AppBarClassKey } from '../AppBar'; import { AvatarClassKey } from '../Avatar'; import { BackdropClassKey } from '../Backdrop'; import { BadgeClassKey } from '../Badge'; -import { BottomNavigationClassKey } from '../BottomNavigation'; import { BottomNavigationActionClassKey } from '../BottomNavigationAction'; -import { ButtonClassKey } from '../Button'; +import { BottomNavigationClassKey } from '../BottomNavigation'; import { ButtonBaseClassKey } from '../ButtonBase'; -import { TouchRippleClassKey } from '../ButtonBase/TouchRipple'; -import { CardClassKey } from '../Card'; +import { ButtonClassKey } from '../Button'; import { CardActionAreaClassKey } from '../CardActionArea'; import { CardActionsClassKey } from '../CardActions'; +import { CardClassKey } from '../Card'; import { CardContentClassKey } from '../CardContent'; import { CardHeaderClassKey } from '../CardHeader'; import { CardMediaClassKey } from '../CardMedia'; @@ -20,15 +19,15 @@ import { ChipClassKey } from '../Chip'; import { CircularProgressClassKey } from '../CircularProgress'; import { CollapseClassKey } from '../Collapse'; import { CssBaselineClassKey } from '../CssBaseline'; -import { DialogClassKey } from '../Dialog'; import { DialogActionsClassKey } from '../DialogActions'; +import { DialogClassKey } from '../Dialog'; import { DialogContentClassKey } from '../DialogContent'; import { DialogContentTextClassKey } from '../DialogContentText'; import { DialogTitleClassKey } from '../DialogTitle'; import { DividerClassKey } from '../Divider'; import { DrawerClassKey } from '../Drawer'; -import { ExpansionPanelClassKey } from '../ExpansionPanel'; import { ExpansionPanelActionsClassKey } from '../ExpansionPanelActions'; +import { ExpansionPanelClassKey } from '../ExpansionPanel'; import { ExpansionPanelDetailsClassKey } from '../ExpansionPanelDetails'; import { ExpansionPanelSummaryClassKey } from '../ExpansionPanelSummary'; import { FabClassKey } from '../Fab'; @@ -39,21 +38,20 @@ import { FormGroupClassKey } from '../FormGroup'; import { FormHelperTextClassKey } from '../FormHelperText'; import { FormLabelClassKey } from '../FormLabel'; import { GridClassKey } from '../Grid'; -import { GridListClassKey } from '../GridList'; -import { GridListTileClassKey } from '../GridListTile'; -import { GridListTileBarClassKey } from '../GridListTileBar'; -import { IconClassKey } from '../Icon'; import { IconButtonClassKey } from '../IconButton'; -import { InputClassKey } from '../Input'; +import { IconClassKey } from '../Icon'; +import { ImageListClassKey } from '../ImageList'; +import { ImageListTileBarClassKey } from '../ImageListTileBar'; +import { ImageListTileClassKey } from '../ImageListTile'; import { InputAdornmentClassKey } from '../InputAdornment'; import { InputBaseClassKey } from '../InputBase'; +import { InputClassKey } from '../Input'; import { InputLabelClassKey } from '../InputLabel'; -import { SwitchBaseClassKey } from '../internal/SwitchBase'; import { LinearProgressClassKey } from '../LinearProgress'; import { LinkClassKey } from '../Link'; import { ListClassKey } from '../List'; -import { ListItemClassKey } from '../ListItem'; import { ListItemAvatarClassKey } from '../ListItemAvatar'; +import { ListItemClassKey } from '../ListItem'; import { ListItemIconClassKey } from '../ListItemIcon'; import { ListItemSecondaryActionClassKey } from '../ListItemSecondaryAction'; import { ListItemTextClassKey } from '../ListItemText'; @@ -70,19 +68,20 @@ import { RadioClassKey } from '../Radio'; import { SelectClassKey } from '../Select'; import { SnackbarClassKey } from '../Snackbar'; import { SnackbarContentClassKey } from '../SnackbarContent'; -import { StepClasskey } from '../Step'; import { StepButtonClasskey } from '../StepButton'; +import { StepClasskey } from '../Step'; import { StepConnectorClasskey } from '../StepConnector'; import { StepContentClasskey } from '../StepContent'; import { StepIconClasskey } from '../StepIcon'; import { StepLabelClasskey } from '../StepLabel'; import { StepperClasskey } from '../Stepper'; import { SvgIconClassKey } from '../SvgIcon'; +import { SwitchBaseClassKey } from '../internal/SwitchBase'; import { SwitchClassKey } from '../Switch'; import { TabClassKey } from '../Tab'; -import { TableClassKey } from '../Table'; import { TableBodyClassKey } from '../TableBody'; import { TableCellClassKey } from '../TableCell'; +import { TableClassKey } from '../Table'; import { TableFooterClassKey } from '../TableFooter'; import { TableHeadClassKey } from '../TableHead'; import { TablePaginationClassKey } from '../TablePagination'; @@ -92,6 +91,7 @@ import { TabsClassKey } from '../Tabs'; import { TextFieldClassKey } from '../TextField'; import { ToolbarClassKey } from '../Toolbar'; import { TooltipClassKey } from '../Tooltip'; +import { TouchRippleClassKey } from '../ButtonBase/TouchRipple'; import { TypographyClassKey } from '../Typography'; export type Overrides = { @@ -137,11 +137,11 @@ export interface ComponentNameToClassKey { MuiFormHelperText: FormHelperTextClassKey; MuiFormLabel: FormLabelClassKey; MuiGrid: GridClassKey; - MuiGridList: GridListClassKey; - MuiGridListTile: GridListTileClassKey; - MuiGridListTileBar: GridListTileBarClassKey; MuiIcon: IconClassKey; MuiIconButton: IconButtonClassKey; + MuiImageList: ImageListClassKey; + MuiImageListTile: ImageListTileClassKey; + MuiImageListTileBar: ImageListTileBarClassKey; MuiInput: InputClassKey; MuiInputAdornment: InputAdornmentClassKey; MuiInputBase: InputBaseClassKey; diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts index af3c26d1e494fa..efb34e8e5445e7 100644 --- a/packages/material-ui/src/styles/props.d.ts +++ b/packages/material-ui/src/styles/props.d.ts @@ -32,12 +32,12 @@ import { FormControlProps } from '../FormControl'; import { FormGroupProps } from '../FormGroup'; import { FormHelperTextProps } from '../FormHelperText'; import { FormLabelProps } from '../FormLabel'; -import { GridListProps } from '../GridList'; -import { GridListTileBarProps } from '../GridListTileBar'; -import { GridListTileProps } from '../GridListTile'; import { GridProps } from '../Grid'; import { IconButtonProps } from '../IconButton'; import { IconProps } from '../Icon'; +import { ImageListProps } from '../ImageList'; +import { ImageListTileBarProps } from '../ImageListTileBar'; +import { ImageListTileProps } from '../ImageListTile'; import { InputAdornmentProps } from '../InputAdornment'; import { InputLabelProps } from '../InputLabel'; import { InputProps } from '../Input'; @@ -127,11 +127,11 @@ export interface ComponentsPropsList { MuiFormHelperText: FormHelperTextProps; MuiFormLabel: FormLabelProps; MuiGrid: GridProps; - MuiGridList: GridListProps; - MuiGridListTile: GridListTileProps; - MuiGridListTileBar: GridListTileBarProps; MuiIcon: IconProps; MuiIconButton: IconButtonProps; + MuiImageList: ImageListProps; + MuiImageListTile: ImageListTileProps; + MuiImageListTileBar: ImageListTileBarProps; MuiInput: InputProps; MuiInputAdornment: InputAdornmentProps; MuiInputLabel: InputLabelProps; diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx index ad422b817a7916..ebff4dc55c5697 100644 --- a/packages/material-ui/test/typescript/components.spec.tsx +++ b/packages/material-ui/test/typescript/components.spec.tsx @@ -18,9 +18,9 @@ import { ClickAwayListener, Collapse, Dialog, - DialogTitle, DialogContent, DialogContentText, + DialogTitle, Divider, Drawer, ExpansionPanel, @@ -31,15 +31,15 @@ import { FormControlLabel, FormGroup, Grid, - GridList, - GridListTile, Grow, IconButton, + ImageList, + ImageListTile, Input, InputAdornment, InputLabel, - Link, LinearProgress, + Link, List, ListItem, ListItemAvatar, @@ -584,13 +584,13 @@ const GridTest = () => ( ); -const GridListTest = () => ( - log(e)}> - log(e)}> +const ImageListTest = () => ( + log(e)}> + log(e)}> alt text - + , - + ); const ListTest = () => ( 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/grid-list-tile-bar.js b/pages/api/image-list-tile-bar.js similarity index 84% rename from pages/api/grid-list-tile-bar.js rename to pages/api/image-list-tile-bar.js index dfd626349367a4..8b3a3bf3c23d89 100644 --- a/pages/api/grid-list-tile-bar.js +++ b/pages/api/image-list-tile-bar.js @@ -2,7 +2,7 @@ import 'docs/src/modules/components/bootstrap'; // --- Post bootstrap ----- import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './grid-list-tile-bar.md'; +import markdown from './image-list-tile-bar.md'; function Page() { return ; diff --git a/pages/api/grid-list-tile-bar.md b/pages/api/image-list-tile-bar.md similarity index 85% rename from pages/api/grid-list-tile-bar.md rename to pages/api/image-list-tile-bar.md index 0465f16132209b..7411d89bcb4884 100644 --- a/pages/api/grid-list-tile-bar.md +++ b/pages/api/image-list-tile-bar.md @@ -1,15 +1,15 @@ --- -filename: /packages/material-ui/src/GridListTileBar/GridListTileBar.js +filename: /packages/material-ui/src/ImageListTileBar/ImageListTileBar.js --- -# GridListTileBar API +# ImageListTileBar API -

The API documentation of the GridListTileBar React component. Learn more about the properties and the CSS customization points.

+

The API documentation of the ImageListTileBar React component. Learn more about the properties and the CSS customization points.

```js -import GridListTileBar from '@material-ui/core/GridListTileBar'; +import ImageListTileBar from '@material-ui/core/ImageListTileBar'; ``` @@ -48,13 +48,13 @@ This property accepts the following keys: | 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) +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: `MuiGridListTileBar`. +you need to use the following style sheet name: `MuiImageListTileBar`. ## Demos -- [Grid List](/demos/grid-list/) +- [Image List](/demos/image-list/) diff --git a/pages/api/grid-list-tile.js b/pages/api/image-list-tile.js similarity index 85% rename from pages/api/grid-list-tile.js rename to pages/api/image-list-tile.js index 17b9d80fc289e0..e7813e4c163944 100644 --- a/pages/api/grid-list-tile.js +++ b/pages/api/image-list-tile.js @@ -2,7 +2,7 @@ import 'docs/src/modules/components/bootstrap'; // --- Post bootstrap ----- import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './grid-list-tile.md'; +import markdown from './image-list-tile.md'; function Page() { return ; diff --git a/pages/api/grid-list-tile.md b/pages/api/image-list-tile.md similarity index 74% rename from pages/api/grid-list-tile.md rename to pages/api/image-list-tile.md index a6321684de2587..00da27af923c4a 100644 --- a/pages/api/grid-list-tile.md +++ b/pages/api/image-list-tile.md @@ -1,15 +1,15 @@ --- -filename: /packages/material-ui/src/GridListTile/GridListTile.js +filename: /packages/material-ui/src/ImageListTile/ImageListTile.js --- -# GridListTile API +# ImageListTile API -

The API documentation of the GridListTile React component. Learn more about the properties and the CSS customization points.

+

The API documentation of the ImageListTile React component. Learn more about the properties and the CSS customization points.

```js -import GridListTile from '@material-ui/core/GridListTile'; +import ImageListTile from '@material-ui/core/ImageListTile'; ``` @@ -18,7 +18,7 @@ import GridListTile from '@material-ui/core/GridListTile'; | 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`). | +| 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. | @@ -40,13 +40,13 @@ This property accepts the following keys: | 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) +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: `MuiGridListTile`. +you need to use the following style sheet name: `MuiImageListTile`. ## Demos -- [Grid List](/demos/grid-list/) +- [Image List](/demos/image-list/) diff --git a/pages/api/grid-list.js b/pages/api/image-list.js similarity index 86% rename from pages/api/grid-list.js rename to pages/api/image-list.js index 7b706a4645091a..a98d3a2b4cdd6d 100644 --- a/pages/api/grid-list.js +++ b/pages/api/image-list.js @@ -2,7 +2,7 @@ import 'docs/src/modules/components/bootstrap'; // --- Post bootstrap ----- import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './grid-list.md'; +import markdown from './image-list.md'; function Page() { return ; diff --git a/pages/api/grid-list.md b/pages/api/image-list.md similarity index 81% rename from pages/api/grid-list.md rename to pages/api/image-list.md index 092de55212b75b..072e1797ea4a79 100644 --- a/pages/api/grid-list.md +++ b/pages/api/image-list.md @@ -1,15 +1,15 @@ --- -filename: /packages/material-ui/src/GridList/GridList.js +filename: /packages/material-ui/src/ImageList/ImageList.js --- -# GridList API +# ImageList API -

The API documentation of the GridList React component. Learn more about the properties and the CSS customization points.

+

The API documentation of the ImageList React component. Learn more about the properties and the CSS customization points.

```js -import GridList from '@material-ui/core/GridList'; +import ImageList from '@material-ui/core/ImageList'; ``` @@ -38,13 +38,13 @@ This property accepts the following keys: | 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) +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: `MuiGridList`. +you need to use the following style sheet name: `MuiImageList`. ## Demos -- [Grid List](/demos/grid-list/) +- [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 ;