The API documentation of the GridListTileBar React component. Learn more about the props and the CSS customization points.
+The API documentation of the ImageListTileBar React component. Learn more about the props and the CSS customization points.
## Import ```js -import GridListTileBar from '@material-ui/core/GridListTileBar'; +import ImageListTileBar from '@material-ui/core/ImageListTileBar'; // or -import { GridListTileBar } from '@material-ui/core'; +import { ImageListTileBar } from '@material-ui/core'; ``` You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). @@ -22,7 +22,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi ## Component name -The `MuiGridListTileBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. +The `MuiImageListTileBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props @@ -43,17 +43,17 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiGridListTileBar-root | Styles applied to the root element. -| titlePositionBottom | .MuiGridListTileBar-titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`. -| titlePositionTop | .MuiGridListTileBar-titlePositionTop | Styles applied to the root element if `titlePosition="top"`. -| rootSubtitle | .MuiGridListTileBar-rootSubtitle | Styles applied to the root element if a `subtitle` is provided. -| titleWrap | .MuiGridListTileBar-titleWrap | Styles applied to the title and subtitle container element. -| titleWrapActionPosLeft | .MuiGridListTileBar-titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`. -| titleWrapActionPosRight | .MuiGridListTileBar-titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`. -| title | .MuiGridListTileBar-title | Styles applied to the title container element. -| subtitle | .MuiGridListTileBar-subtitle | Styles applied to the subtitle container element. -| actionIcon | .MuiGridListTileBar-actionIcon | Styles applied to the actionIcon if supplied. -| actionIconActionPosLeft | .MuiGridListTileBar-actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left"`. +| root | .MuiImageListTileBar-root | Styles applied to the root element. +| titlePositionBottom | .MuiImageListTileBar-titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`. +| titlePositionTop | .MuiImageListTileBar-titlePositionTop | Styles applied to the root element if `titlePosition="top"`. +| rootSubtitle | .MuiImageListTileBar-rootSubtitle | Styles applied to the root element if a `subtitle` is provided. +| titleWrap | .MuiImageListTileBar-titleWrap | Styles applied to the title and subtitle container element. +| titleWrapActionPosLeft | .MuiImageListTileBar-titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`. +| titleWrapActionPosRight | .MuiImageListTileBar-titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`. +| title | .MuiImageListTileBar-title | Styles applied to the title container element. +| subtitle | .MuiImageListTileBar-subtitle | Styles applied to the subtitle container element. +| actionIcon | .MuiImageListTileBar-actionIcon | Styles applied to the actionIcon if supplied. +| actionIconActionPosLeft | .MuiImageListTileBar-actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left"`. You can override the style of the component thanks to one of these customization points: @@ -61,9 +61,9 @@ You can override the style of the component thanks to one of these customization - With a [global class name](/customization/components/#overriding-styles-with-global-class-names). - With a theme and an [`overrides` property](/customization/globals/#css). -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/GridListTileBar/GridListTileBar.js) for more detail. +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListTileBar/ImageListTileBar.js) for more detail. ## Demos -- [Grid List](/components/grid-list/) +- [Image List](/components/image-list/) diff --git a/docs/pages/api-docs/grid-list-tile.js b/docs/pages/api-docs/image-list-tile.js similarity index 74% rename from docs/pages/api-docs/grid-list-tile.js rename to docs/pages/api-docs/image-list-tile.js index 254ce412024784..87e81591cb6d14 100644 --- a/docs/pages/api-docs/grid-list-tile.js +++ b/docs/pages/api-docs/image-list-tile.js @@ -2,8 +2,8 @@ import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; -const pageFilename = 'api/grid-list-tile'; -const requireRaw = require.context('!raw-loader!./', false, /\/grid-list-tile\.md$/); +const pageFilename = 'api/image-list-tile'; +const requireRaw = require.context('!raw-loader!./', false, /\/image-list-tile\.md$/); export default function Page({ docs }) { returnThe API documentation of the GridListTile React component. Learn more about the props and the CSS customization points.
+The API documentation of the ImageListTile React component. Learn more about the props and the CSS customization points.
## Import ```js -import GridListTile from '@material-ui/core/GridListTile'; +import ImageListTile from '@material-ui/core/ImageListTile'; // or -import { GridListTile } from '@material-ui/core'; +import { ImageListTile } from '@material-ui/core'; ``` You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). @@ -22,13 +22,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi ## Component name -The `MuiGridListTile` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. +The `MuiImageListTile` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | 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 HTML element or a component. | @@ -42,10 +42,10 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiGridListTile-root | Styles applied to the root element. -| tile | .MuiGridListTile-tile | Styles applied to the `div` element that wraps the children. -| imgFullHeight | .MuiGridListTile-imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the tile. -| imgFullWidth | .MuiGridListTile-imgFullWidth | Styles applied to an `img` element child, if needed to ensure it covers the tile. +| root | .MuiImageListTile-root | Styles applied to the root element. +| tile | .MuiImageListTile-tile | Styles applied to the `div` element that wraps the children. +| imgFullHeight | .MuiImageListTile-imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the tile. +| imgFullWidth | .MuiImageListTile-imgFullWidth | Styles applied to an `img` element child, if needed to ensure it covers the tile. You can override the style of the component thanks to one of these customization points: @@ -53,9 +53,9 @@ You can override the style of the component thanks to one of these customization - With a [global class name](/customization/components/#overriding-styles-with-global-class-names). - With a theme and an [`overrides` property](/customization/globals/#css). -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/GridListTile/GridListTile.js) for more detail. +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ImageListTile/ImageListTile.js) for more detail. ## Demos -- [Grid List](/components/grid-list/) +- [Image List](/components/image-list/) diff --git a/docs/pages/api-docs/grid-list.js b/docs/pages/api-docs/image-list.js similarity index 76% rename from docs/pages/api-docs/grid-list.js rename to docs/pages/api-docs/image-list.js index 004dd933dede76..0c2fa21ec58007 100644 --- a/docs/pages/api-docs/grid-list.js +++ b/docs/pages/api-docs/image-list.js @@ -2,8 +2,8 @@ import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; -const pageFilename = 'api/grid-list'; -const requireRaw = require.context('!raw-loader!./', false, /\/grid-list\.md$/); +const pageFilename = 'api/image-list'; +const requireRaw = require.context('!raw-loader!./', false, /\/image-list\.md$/); export default function Page({ docs }) { returnThe API documentation of the GridList React component. Learn more about the props and the CSS customization points.
+The API documentation of the ImageList React component. Learn more about the props and the CSS customization points.
## Import ```js -import GridList from '@material-ui/core/GridList'; +import ImageList from '@material-ui/core/ImageList'; // or -import { GridList } from '@material-ui/core'; +import { ImageList } from '@material-ui/core'; ``` You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). @@ -22,14 +22,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi ## Component name -The `MuiGridList` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. +The `MuiImageList` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | cellHeight | 'auto'Grid lists display a collection of images in an organized grid.
- -Grid lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Image-only Grid list - -A simple example of a scrollable image `GridList`. - -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} - -## Grid list with titlebars - -This example demonstrates the use of the `GridListTileBar` to add an overlay to each `GridListTile`. -The overlay can accommodate a `title`, `subtitle` and secondary action - in this example an `IconButton`. - -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} - -## Single line Grid list - -This example demonstrates a horizontal scrollable single-line grid list of images. -Horizontally scrolling grid lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension. -One notable exception is a horizontally-scrolling, single-line grid list of images, such as a gallery. - -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} - -## Advanced Grid list - -This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the tile, and the `padding` prop to adjust the spacing. -The tiles have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`. -The secondary action `IconButton` is positioned on the left. - -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/grid-list/AdvancedGridList.js b/docs/src/pages/components/image-list/AdvancedImageList.js similarity index 81% rename from docs/src/pages/components/grid-list/AdvancedGridList.js rename to docs/src/pages/components/image-list/AdvancedImageList.js index 58562c2f28f58a..def1a24757ab68 100644 --- a/docs/src/pages/components/grid-list/AdvancedGridList.js +++ b/docs/src/pages/components/image-list/AdvancedImageList.js @@ -1,8 +1,8 @@ import * as React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; +import ImageList from '@material-ui/core/ImageList'; +import 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'; @@ -49,20 +49,20 @@ const useStyles = makeStyles((theme) => ({ * }, * ]; */ -export default function AdvancedGridList() { +export default function AdvancedImageList() { const classes = useStyles(); return (Image lists display a collection of images in an organized grid.
+ +Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold. + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Basic image list + +A simple example of a scrollable image `ImageList`. + +{{"demo": "pages/components/image-list/BasicImageList.js", "hideEditButton": true}} + +## Image list with titlebars + +This example demonstrates the use of the `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/components/image-list/TitlebarImageList.js", "hideEditButton": true}} + +## Single line image list + +This example demonstrates a horizontal scrollable single-line image list of images. +Horizontally scrolling image lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension. +One notable exception is a horizontally-scrolling, single-line image list of images, such as a gallery. + +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} + +## Advanced image list + +This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the tile, and the `padding` prop to adjust the spacing. +The tiles have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`. +The secondary action `IconButton` is positioned on the left. + +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/grid-list/tileData.d.ts b/docs/src/pages/components/image-list/tileData.d.ts similarity index 100% rename from docs/src/pages/components/grid-list/tileData.d.ts rename to docs/src/pages/components/image-list/tileData.d.ts diff --git a/docs/src/pages/components/grid-list/tileData.js b/docs/src/pages/components/image-list/tileData.js similarity index 58% rename from docs/src/pages/components/grid-list/tileData.js rename to docs/src/pages/components/image-list/tileData.js index 4884061233189d..4bd4f5614428f4 100644 --- a/docs/src/pages/components/grid-list/tileData.js +++ b/docs/src/pages/components/image-list/tileData.js @@ -1,66 +1,66 @@ const tileData = [ { - img: '/static/images/grid-list/breakfast.jpg', + img: '/static/images/image-list/breakfast.jpg', title: 'Breakfast', author: 'jill111', cols: 2, featured: true, }, { - img: '/static/images/grid-list/burgers.jpg', + img: '/static/images/image-list/burgers.jpg', title: 'Tasty burger', author: 'director90', }, { - img: '/static/images/grid-list/camera.jpg', + img: '/static/images/image-list/camera.jpg', title: 'Camera', author: 'Danson67', }, { - img: '/static/images/grid-list/morning.jpg', + img: '/static/images/image-list/morning.jpg', title: 'Morning', author: 'fancycrave1', featured: true, }, { - img: '/static/images/grid-list/hats.jpg', + img: '/static/images/image-list/hats.jpg', title: 'Hats', author: 'Hans', }, { - img: '/static/images/grid-list/honey.jpg', + img: '/static/images/image-list/honey.jpg', title: 'Honey', author: 'fancycravel', }, { - img: '/static/images/grid-list/vegetables.jpg', + img: '/static/images/image-list/vegetables.jpg', title: 'Vegetables', author: 'jill111', cols: 2, }, { - img: '/static/images/grid-list/plant.jpg', + img: '/static/images/image-list/plant.jpg', title: 'Water plant', author: 'BkrmadtyaKarki', }, { - img: '/static/images/grid-list/mushroom.jpg', + img: '/static/images/image-list/mushroom.jpg', title: 'Mushrooms', author: 'PublicDomainPictures', }, { - img: '/static/images/grid-list/olive.jpg', + img: '/static/images/image-list/olive.jpg', title: 'Olive oil', author: 'congerdesign', }, { - img: '/static/images/grid-list/star.jpg', + img: '/static/images/image-list/star.jpg', title: 'Sea star', cols: 2, author: '821292', }, { - img: '/static/images/grid-list/bike.jpg', + img: '/static/images/image-list/bike.jpg', title: 'Bike', author: 'danfador', }, diff --git a/docs/src/pages/components/grid-list/tslint.json b/docs/src/pages/components/image-list/tslint.json similarity index 100% rename from docs/src/pages/components/grid-list/tslint.json rename to docs/src/pages/components/image-list/tslint.json diff --git a/docs/src/pages/getting-started/supported-components/supported-components.md b/docs/src/pages/getting-started/supported-components/supported-components.md index 2df91f12874186..174cbef3a97305 100644 --- a/docs/src/pages/getting-started/supported-components/supported-components.md +++ b/docs/src/pages/getting-started/supported-components/supported-components.md @@ -50,7 +50,7 @@ to discuss the approach before submitting a pull request. - **[Inset](https://material.io/design/components/dividers.html#types) ✓** - **[Middle](https://material.io/design/components/dividers.html#types) ✓** - **[Subheader](https://material.io/design/components/dividers.html#types) ✓** -- **[Image lists](https://material.io/design/components/image-lists.html) ✓** (AKA Grid Lists) +- **[Image lists](https://material.io/components/image-lists) ✓** - **[Lists](https://material.io/design/components/lists.html) ✓** - [Types:](https://material.io/design/components/lists.html#types) - **Single line ✓** diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 54cbcbe0478520..2fe067d7e87e65 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -257,7 +257,7 @@ For a smoother transition, the `adaptV4Theme` helper allows you to iteratively u ### ExpansionPanel -- Rename the `ExpansionPanel` components with `Accordion` to use a more common naming convention: +- Rename the `ExpansionPanel` components to `Accordion` to use a more common naming convention: ```diff -import ExpansionPanel from '@material-ui/core/ExpansionPanel'; @@ -319,6 +319,34 @@ For a smoother transition, the `adaptV4Theme` helper allows you to iteratively u +
+- {
- props: P & {
- /**
- * 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?: React.ReactNode;
- /**
- * Override or extend the styles applied to the component.
- */
- classes?: {
- /** Styles applied to the root element. */
- root?: string;
- /** Styles applied to the `div` element that wraps the children. */
- tile?: string;
- /** Styles applied to an `img` element child, if needed to ensure it covers the tile. */
- imgFullHeight?: string;
- /** Styles applied to an `img` element child, if needed to ensure it covers the tile. */
- imgFullWidth?: string;
- };
- /**
- * Width of the tile in number of grid cells.
- */
- cols?: number;
- /**
- * Height of the tile in number of grid cells.
- */
- rows?: number;
- };
- defaultComponent: D;
-}
-/**
- *
- * Demos:
- *
- * - [Grid List](https://material-ui.com/components/grid-list/)
- *
- * API:
- *
- * - [GridListTile API](https://material-ui.com/api/grid-list-tile/)
- */
-declare const GridListTile: OverridableComponent {
+export interface ImageListTypeMap {
props: P & {
/**
* Number of px for one cell height.
@@ -9,7 +9,7 @@ export interface GridListTypeMap {
*/
cellHeight?: number | 'auto';
/**
- * Grid Tiles that will be in Grid List.
+ * Image Tiles that will be in Image List.
*/
children: NonNullable {
*
* Demos:
*
- * - [Grid List](https://material-ui.com/components/grid-list/)
+ * - [Image List](https://material-ui.com/components/image-list/)
*
* API:
*
- * - [GridList API](https://material-ui.com/api/grid-list/)
+ * - [ImageList API](https://material-ui.com/api/image-list/)
*/
-declare const GridList: OverridableComponent {
+ props: P & {
+ /**
+ * 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?: React.ReactNode;
+ /**
+ * Width of the tile in number of grid cells.
+ */
+ cols?: number;
+ /**
+ * Height of the tile in number of grid cells.
+ */
+ rows?: number;
+ };
+ defaultComponent: D;
+ classKey: ImageListTileClassKey;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Image List](https://material-ui.com/components/image-list/)
+ *
+ * API:
+ *
+ * - [ImageListTile API](https://material-ui.com/api/image-list-tile/)
+ */
+declare const ImageListTile: OverridableComponent (
))}
-
))}
-
))}
-
))}
-
- ;
- const wrapper = mount(
-