Tile -> Item

mui · Aug 27, 2020 · 3125578 · 3125578
1 parent 59bd813
commit 3125578
Show file tree

Hide file tree

Showing 44 changed files with 738 additions and 172 deletions.
diff --git a/docs/pages/api-docs/icon-button.md b/docs/pages/api-docs/icon-button.md
@@ -73,5 +73,4 @@ You can take advantage of this behavior to [target nested components](/guides/ap
 
 - [Buttons](/components/buttons/)
 - [Grid List](/components/grid-list/)
-- [Image List](/components/image-list/)
 
diff --git a/docs/pages/api-docs/image-list-tile-bar.js → docs/pages/api-docs/image-list-item-bar.js b/docs/pages/api-docs/image-list-tile-bar.js → docs/pages/api-docs/image-list-item-bar.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/image-list-tile-bar';
-const requireRaw = require.context('!raw-loader!./', false, /\/image-list-tile-bar\.md$/);
+const pageFilename = 'api/image-list-item-bar';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item-bar\.md$/);
 
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;

diff --git a/docs/pages/api-docs/image-list-tile-bar.md → docs/pages/api-docs/image-list-item-bar.md b/docs/pages/api-docs/image-list-tile-bar.md → docs/pages/api-docs/image-list-item-bar.md
@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui/src/ImageListTileBar/ImageListTileBar.js
+filename: /packages/material-ui/src/ImageListItemBar/ImageListItemBar.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# ImageListTileBar API
+# ImageListItemBar API
 
-<p class="description">The API documentation of the ImageListTileBar React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the ImageListItemBar React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 // or
-import { ImageListTileBar } from '@material-ui/core';
+import { ImageListItemBar } 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 `MuiImageListTileBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+The `MuiImageListItemBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
 
 ## Props
 
@@ -43,25 +43,25 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListTileBar-root</span> | Styles applied to the root element.
-| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">.MuiImageListTileBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
-| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiImageListTileBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
-| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiImageListTileBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
-| <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiImageListTileBar-titleWrap</span> | Styles applied to the title and subtitle container element.
-| <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiImageListTileBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.
-| <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">.MuiImageListTileBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
-| <span class="prop-name">title</span> | <span class="prop-name">.MuiImageListTileBar-title</span> | Styles applied to the title container element.
-| <span class="prop-name">subtitle</span> | <span class="prop-name">.MuiImageListTileBar-subtitle</span> | Styles applied to the subtitle container element.
-| <span class="prop-name">actionIcon</span> | <span class="prop-name">.MuiImageListTileBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
-| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">.MuiImageListTileBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListItemBar-root</span> | Styles applied to the root element.
+| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
+| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
+| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiImageListItemBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
+| <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiImageListItemBar-titleWrap</span> | Styles applied to the title and subtitle container element.
+| <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.
+| <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
+| <span class="prop-name">title</span> | <span class="prop-name">.MuiImageListItemBar-title</span> | Styles applied to the title container element.
+| <span class="prop-name">subtitle</span> | <span class="prop-name">.MuiImageListItemBar-subtitle</span> | Styles applied to the subtitle container element.
+| <span class="prop-name">actionIcon</span> | <span class="prop-name">.MuiImageListItemBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
+| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">.MuiImageListItemBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
 
 You can override the style of the component thanks to one of these customization points:
 
 - With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ImageListTileBar/ImageListTileBar.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/master/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js) for more detail.
 
 ## Demos
 

diff --git a/docs/pages/api-docs/image-list-tile.js → docs/pages/api-docs/image-list-item.js b/docs/pages/api-docs/image-list-tile.js → docs/pages/api-docs/image-list-item.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/image-list-tile';
-const requireRaw = require.context('!raw-loader!./', false, /\/image-list-tile\.md$/);
+const pageFilename = 'api/image-list-item';
+const requireRaw = require.context('!raw-loader!./', false, /\/image-list-item\.md$/);
 
 export default function Page({ docs }) {
   return <MarkdownDocs docs={docs} />;

diff --git a/docs/pages/api-docs/image-list-tile.md → docs/pages/api-docs/image-list-item.md b/docs/pages/api-docs/image-list-tile.md → docs/pages/api-docs/image-list-item.md
@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui/src/ImageListTile/ImageListTile.js
+filename: /packages/material-ui/src/ImageListItem/ImageListItem.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# ImageListTile API
+# ImageListItem API
 
-<p class="description">The API documentation of the ImageListTile React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the ImageListItem React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import ImageListTile from '@material-ui/core/ImageListTile';
+import ImageListItem from '@material-ui/core/ImageListItem';
 // or
-import { ImageListTile } from '@material-ui/core';
+import { ImageListItem } 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 `MuiImageListTile` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+The `MuiImageListItem` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
 
 ## Props
 
@@ -39,18 +39,18 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListTile-root</span> | Styles applied to the root element.
-| <span class="prop-name">tile</span> | <span class="prop-name">.MuiImageListTile-tile</span> | Styles applied to the `div` element that wraps the children.
-| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">.MuiImageListTile-imgFullHeight</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
-| <span class="prop-name">imgFullWidth</span> | <span class="prop-name">.MuiImageListTile-imgFullWidth</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListItem-root</span> | Styles applied to the root element.
+| <span class="prop-name">tile</span> | <span class="prop-name">.MuiImageListItem-tile</span> | Styles applied to the `div` element that wraps the children.
+| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">.MuiImageListItem-imgFullHeight</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| <span class="prop-name">imgFullWidth</span> | <span class="prop-name">.MuiImageListItem-imgFullWidth</span> | 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:
 
 - With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ImageListTile/ImageListTile.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/master/packages/material-ui/src/ImageListItem/ImageListItem.js) for more detail.
 
 ## Demos
 

diff --git a/docs/pages/api-docs/list-subheader.md b/docs/pages/api-docs/list-subheader.md
@@ -62,6 +62,5 @@ If that's not sufficient, you can check the [implementation of the component](ht
 ## Demos
 
 - [Grid List](/components/grid-list/)
-- [Image List](/components/image-list/)
 - [Lists](/components/lists/)
 
diff --git a/docs/src/pages/components/cards/cards.md b/docs/src/pages/components/cards/cards.md
@@ -25,7 +25,7 @@ Set `variant="outlined"` to render an outlined card.
 
 ## Complex Interaction
 
-On desktop, card content can expand.
+On desktop, card content can expand. (Click the downward chevron to view the recipe.)
 
 {{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}}
 

diff --git a/docs/src/pages/components/image-list/AdvancedImageList.js b/docs/src/pages/components/image-list/AdvancedImageList.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -56,9 +56,9 @@ export default function AdvancedImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
+          <ImageListItem key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               titlePosition="top"
               actionIcon={
@@ -69,7 +69,7 @@ export default function AdvancedImageList() {
               actionPosition="left"
               className={classes.titleBar}
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/AdvancedImageList.tsx b/docs/src/pages/components/image-list/AdvancedImageList.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -58,9 +58,9 @@ export default function AdvancedImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={200} spacing={1} className={classes.gridList}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
+          <ImageListItem key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               titlePosition="top"
               actionIcon={
@@ -71,7 +71,7 @@ export default function AdvancedImageList() {
               actionPosition="left"
               className={classes.titleBar}
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/BasicImageList.js b/docs/src/pages/components/image-list/BasicImageList.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
+import ImageListItem from '@material-ui/core/ImageListItem';
 import tileData from './tileData';
 
 const useStyles = makeStyles((theme) => ({
@@ -43,9 +43,9 @@ export default function BasicImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={160} className={classes.gridList} cols={3}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.cols || 1}>
+          <ImageListItem key={tile.img} cols={tile.cols || 1}>
             <img src={tile.img} alt={tile.title} />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/BasicImageList.tsx b/docs/src/pages/components/image-list/BasicImageList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
+import ImageListItem from '@material-ui/core/ImageListItem';
 import tileData from './tileData';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -45,9 +45,9 @@ export default function BasicImageList() {
     <div className={classes.root}>
       <ImageList cellHeight={160} className={classes.gridList} cols={3}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img} cols={tile.cols || 1}>
+          <ImageListItem key={tile.img} cols={tile.cols || 1}>
             <img src={tile.img} alt={tile.title} />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/SingleLineImageList.js b/docs/src/pages/components/image-list/SingleLineImageList.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -53,9 +53,9 @@ export default function SingleLineImageList() {
     <div className={classes.root}>
       <ImageList className={classes.gridList} cols={2.5}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img}>
+          <ImageListItem key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               classes={{
                 root: classes.titleBar,
@@ -67,7 +67,7 @@ export default function SingleLineImageList() {
                 </IconButton>
               }
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>

diff --git a/docs/src/pages/components/image-list/SingleLineImageList.tsx b/docs/src/pages/components/image-list/SingleLineImageList.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
-import ImageListTile from '@material-ui/core/ImageListTile';
-import ImageListTileBar from '@material-ui/core/ImageListTileBar';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
 import IconButton from '@material-ui/core/IconButton';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import tileData from './tileData';
@@ -55,9 +55,9 @@ export default function SingleLineImageList() {
     <div className={classes.root}>
       <ImageList className={classes.gridList} cols={2.5}>
         {tileData.map((tile) => (
-          <ImageListTile key={tile.img}>
+          <ImageListItem key={tile.img}>
             <img src={tile.img} alt={tile.title} />
-            <ImageListTileBar
+            <ImageListItemBar
               title={tile.title}
               classes={{
                 root: classes.titleBar,
@@ -69,7 +69,7 @@ export default function SingleLineImageList() {
                 </IconButton>
               }
             />
-          </ImageListTile>
+          </ImageListItem>
         ))}
       </ImageList>
     </div>