From 63fba7306f6df1afa79371bab68e28ed1ca03f8b Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 22 Aug 2020 11:39:26 +0100 Subject: [PATCH 01/29] [GridList] Rename to ImageList & add deprecation warnings --- docs/pages/api-docs/grid-list-tile-bar.md | 3 + docs/pages/api-docs/grid-list-tile.md | 3 + docs/pages/api-docs/grid-list.md | 3 + docs/pages/api-docs/icon-button.md | 1 + docs/pages/api-docs/image-list-tile-bar.js | 15 + docs/pages/api-docs/image-list-tile-bar.md | 69 +++ docs/pages/api-docs/image-list-tile.js | 15 + docs/pages/api-docs/image-list-tile.md | 61 +++ docs/pages/api-docs/image-list.js | 15 + docs/pages/api-docs/image-list.md | 59 ++ docs/pages/api-docs/list-subheader.md | 1 + .../{grid-list.js => image-list.js} | 6 +- .../images/{grid-list => image-list}/bike.jpg | Bin .../{grid-list => image-list}/breakfast.jpg | Bin .../{grid-list => image-list}/burgers.jpg | Bin .../{grid-list => image-list}/camera.jpg | Bin .../images/{grid-list => image-list}/hats.jpg | Bin .../{grid-list => image-list}/honey.jpg | Bin .../{grid-list => image-list}/morning.jpg | Bin .../{grid-list => image-list}/mushroom.jpg | Bin .../{grid-list => image-list}/olive.jpg | Bin .../{grid-list => image-list}/plant.jpg | Bin .../images/{grid-list => image-list}/star.jpg | Bin .../{grid-list => image-list}/vegetables.jpg | Bin docs/src/pages.js | 2 +- .../pages/components/buttons/ButtonBase.js | 6 +- .../pages/components/buttons/ButtonBase.tsx | 6 +- .../AdvancedImageList.js} | 18 +- .../AdvancedImageList.tsx} | 18 +- .../BasicImageList.js} | 14 +- .../BasicImageList.tsx} | 14 +- .../SingleLineImageList.js} | 18 +- .../SingleLineImageList.tsx} | 18 +- .../TitlebarImageList.js} | 22 +- .../TitlebarImageList.tsx} | 22 +- .../image-list-de.md} | 12 +- .../image-list-es.md} | 14 +- .../image-list-fr.md} | 14 +- .../image-list-ja.md} | 14 +- .../image-list-pt.md} | 14 +- .../image-list-ru.md} | 10 +- .../image-list-zh.md} | 14 +- .../pages/components/image-list/image-list.md | 39 ++ .../{grid-list => image-list}/tileData.d.ts | 0 .../{grid-list => image-list}/tileData.js | 24 +- .../{grid-list => image-list}/tslint.json | 0 .../supported-components.md | 3 +- .../pages/guides/migration-v4/migration-v4.md | 502 ++++++++++++++++++ .../material-ui/src/GridList/GridList.d.ts | 3 + packages/material-ui/src/GridList/GridList.js | 22 + .../material-ui/src/GridList/GridList.test.js | 8 + .../src/GridListTile/GridListTile.d.ts | 3 + .../src/GridListTile/GridListTile.js | 22 + .../src/GridListTile/GridListTile.test.js | 9 + .../src/GridListTileBar/GridListTileBar.d.ts | 3 + .../src/GridListTileBar/GridListTileBar.js | 22 + .../GridListTileBar/GridListTileBar.test.js | 10 + .../src/IconButton/IconButton.d.ts | 1 + .../material-ui/src/ImageList/ImageList.d.ts | 39 ++ .../material-ui/src/ImageList/ImageList.js | 109 ++++ .../src/ImageList/ImageList.test.js | 182 +++++++ packages/material-ui/src/ImageList/index.d.ts | 2 + packages/material-ui/src/ImageList/index.js | 1 + .../src/ImageListTile/ImageListTile.d.ts | 43 ++ .../src/ImageListTile/ImageListTile.js | 152 ++++++ .../src/ImageListTile/ImageListTile.test.js | 137 +++++ .../material-ui/src/ImageListTile/index.d.ts | 2 + .../material-ui/src/ImageListTile/index.js | 1 + .../ImageListTileBar/ImageListTileBar.d.ts | 51 ++ .../src/ImageListTileBar/ImageListTileBar.js | 157 ++++++ .../ImageListTileBar/ImageListTileBar.test.js | 39 ++ .../src/ImageListTileBar/index.d.ts | 2 + .../material-ui/src/ImageListTileBar/index.js | 1 + .../src/ListSubheader/ListSubheader.d.ts | 1 + packages/material-ui/src/index.d.ts | 9 + packages/material-ui/src/index.js | 9 + .../material-ui/src/styles/overrides.d.ts | 12 +- packages/material-ui/src/styles/props.d.ts | 12 +- .../test/typescript/components.spec.tsx | 14 +- test/regressions/index.js | 2 +- 80 files changed, 1987 insertions(+), 162 deletions(-) create mode 100644 docs/pages/api-docs/image-list-tile-bar.js create mode 100644 docs/pages/api-docs/image-list-tile-bar.md create mode 100644 docs/pages/api-docs/image-list-tile.js create mode 100644 docs/pages/api-docs/image-list-tile.md create mode 100644 docs/pages/api-docs/image-list.js create mode 100644 docs/pages/api-docs/image-list.md rename docs/pages/components/{grid-list.js => image-list.js} (71%) rename docs/public/static/images/{grid-list => image-list}/bike.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/breakfast.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/burgers.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/camera.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/hats.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/honey.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/morning.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/mushroom.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/olive.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/plant.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/star.jpg (100%) rename docs/public/static/images/{grid-list => image-list}/vegetables.jpg (100%) rename docs/src/pages/components/{grid-list/AdvancedGridList.js => image-list/AdvancedImageList.js} (77%) rename docs/src/pages/components/{grid-list/AdvancedGridList.tsx => image-list/AdvancedImageList.tsx} (78%) rename docs/src/pages/components/{grid-list/ImageGridList.js => image-list/BasicImageList.js} (71%) rename docs/src/pages/components/{grid-list/ImageGridList.tsx => image-list/BasicImageList.tsx} (73%) rename docs/src/pages/components/{grid-list/SingleLineGridList.js => image-list/SingleLineImageList.js} (80%) rename docs/src/pages/components/{grid-list/SingleLineGridList.tsx => image-list/SingleLineImageList.tsx} (80%) rename docs/src/pages/components/{grid-list/TitlebarGridList.js => image-list/TitlebarImageList.js} (73%) rename docs/src/pages/components/{grid-list/TitlebarGridList.tsx => image-list/TitlebarImageList.tsx} (74%) rename docs/src/pages/components/{grid-list/grid-list-de.md => image-list/image-list-de.md} (65%) rename docs/src/pages/components/{grid-list/grid-list-es.md => image-list/image-list-es.md} (65%) rename docs/src/pages/components/{grid-list/grid-list-fr.md => image-list/image-list-fr.md} (63%) rename docs/src/pages/components/{grid-list/grid-list-ja.md => image-list/image-list-ja.md} (65%) rename docs/src/pages/components/{grid-list/grid-list-pt.md => image-list/image-list-pt.md} (64%) rename docs/src/pages/components/{grid-list/grid-list-ru.md => image-list/image-list-ru.md} (86%) rename docs/src/pages/components/{grid-list/grid-list-zh.md => image-list/image-list-zh.md} (62%) create mode 100644 docs/src/pages/components/image-list/image-list.md rename docs/src/pages/components/{grid-list => image-list}/tileData.d.ts (100%) rename docs/src/pages/components/{grid-list => image-list}/tileData.js (58%) rename docs/src/pages/components/{grid-list => image-list}/tslint.json (100%) create mode 100644 docs/src/pages/guides/migration-v4/migration-v4.md create mode 100644 packages/material-ui/src/ImageList/ImageList.d.ts create mode 100644 packages/material-ui/src/ImageList/ImageList.js create mode 100644 packages/material-ui/src/ImageList/ImageList.test.js 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 create mode 100644 packages/material-ui/src/ImageListTile/ImageListTile.js create mode 100644 packages/material-ui/src/ImageListTile/ImageListTile.test.js create mode 100644 packages/material-ui/src/ImageListTile/index.d.ts create mode 100644 packages/material-ui/src/ImageListTile/index.js create mode 100644 packages/material-ui/src/ImageListTileBar/ImageListTileBar.d.ts create mode 100644 packages/material-ui/src/ImageListTileBar/ImageListTileBar.js create mode 100644 packages/material-ui/src/ImageListTileBar/ImageListTileBar.test.js create mode 100644 packages/material-ui/src/ImageListTileBar/index.d.ts create mode 100644 packages/material-ui/src/ImageListTileBar/index.js diff --git a/docs/pages/api-docs/grid-list-tile-bar.md b/docs/pages/api-docs/grid-list-tile-bar.md index 4af37840f475f1..d6ed4ddbee00f8 100644 --- a/docs/pages/api-docs/grid-list-tile-bar.md +++ b/docs/pages/api-docs/grid-list-tile-bar.md @@ -18,7 +18,10 @@ import { GridListTileBar } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +⚠️ The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.. +You should use `import { ImageListTileBar } from '@material-ui/core'` +or `import ImageListTileBar from '@material-ui/core/ImageListTileBar'`. ## Component name diff --git a/docs/pages/api-docs/grid-list-tile.md b/docs/pages/api-docs/grid-list-tile.md index 8b325375e0ebb0..c739fce495bab0 100644 --- a/docs/pages/api-docs/grid-list-tile.md +++ b/docs/pages/api-docs/grid-list-tile.md @@ -18,7 +18,10 @@ import { GridListTile } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +⚠️ The GridList component was renamed to imageList to align with the current Material Design naming.. +You should use `import { ImageListTile } from '@material-ui/core'` +or `import ImageListTile from '@material-ui/core/ImageListTile'`. ## Component name diff --git a/docs/pages/api-docs/grid-list.md b/docs/pages/api-docs/grid-list.md index 89d7014be4af46..73bb57ceccf306 100644 --- a/docs/pages/api-docs/grid-list.md +++ b/docs/pages/api-docs/grid-list.md @@ -18,7 +18,10 @@ import { GridList } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming. +You should use `import { ImageList } from '@material-ui/core'` +or `import ImageList from '@material-ui/core/ImageList'`. ## Component name diff --git a/docs/pages/api-docs/icon-button.md b/docs/pages/api-docs/icon-button.md index 01d1e5407bd450..5a63b1d6513328 100644 --- a/docs/pages/api-docs/icon-button.md +++ b/docs/pages/api-docs/icon-button.md @@ -73,4 +73,5 @@ 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 b/docs/pages/api-docs/image-list-tile-bar.js new file mode 100644 index 00000000000000..cf3b33ee40c355 --- /dev/null +++ b/docs/pages/api-docs/image-list-tile-bar.js @@ -0,0 +1,15 @@ +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$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/api-docs/image-list-tile-bar.md b/docs/pages/api-docs/image-list-tile-bar.md new file mode 100644 index 00000000000000..0176e1d24f606c --- /dev/null +++ b/docs/pages/api-docs/image-list-tile-bar.md @@ -0,0 +1,69 @@ +--- +filename: /packages/material-ui/src/ImageListTileBar/ImageListTileBar.js +--- + + + +# ImageListTileBar API + +

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

+ +## Import + +```js +import ImageListTileBar from '@material-ui/core/ImageListTileBar'; +// or +import { ImageListTileBar } from '@material-ui/core'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## 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. + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the tile itself). | +| actionPosition | 'left'
| 'right' | 'right' | Position of secondary action IconButton. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| subtitle | node | | String or element serving as subtitle (support text). | +| title | node | | Title to be displayed on tile. | +| titlePosition | 'bottom'
| 'top' | 'bottom' | Position of the title bar. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| 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: + +- 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. + +## Demos + +- [Image List](/components/image-list/) + diff --git a/docs/pages/api-docs/image-list-tile.js b/docs/pages/api-docs/image-list-tile.js new file mode 100644 index 00000000000000..87e81591cb6d14 --- /dev/null +++ b/docs/pages/api-docs/image-list-tile.js @@ -0,0 +1,15 @@ +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$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/api-docs/image-list-tile.md b/docs/pages/api-docs/image-list-tile.md new file mode 100644 index 00000000000000..f881898da44eb6 --- /dev/null +++ b/docs/pages/api-docs/image-list-tile.md @@ -0,0 +1,61 @@ +--- +filename: /packages/material-ui/src/ImageListTile/ImageListTile.js +--- + + + +# ImageListTile API + +

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

+ +## Import + +```js +import ImageListTile from '@material-ui/core/ImageListTile'; +// or +import { ImageListTile } from '@material-ui/core'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## 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. + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case ImageListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| cols | number | 1 | Width of the tile in number of image cells. | +| component | elementType | 'li' | The component used for the root node. Either a string to use a HTML element or a component. | +| rows | number | 1 | Height of the tile in number of image cells. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| 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: + +- 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. + +## Demos + +- [Image List](/components/image-list/) + diff --git a/docs/pages/api-docs/image-list.js b/docs/pages/api-docs/image-list.js new file mode 100644 index 00000000000000..0c2fa21ec58007 --- /dev/null +++ b/docs/pages/api-docs/image-list.js @@ -0,0 +1,15 @@ +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'; +const requireRaw = require.context('!raw-loader!./', false, /\/image-list\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/api-docs/image-list.md b/docs/pages/api-docs/image-list.md new file mode 100644 index 00000000000000..31e78b440d4af0 --- /dev/null +++ b/docs/pages/api-docs/image-list.md @@ -0,0 +1,59 @@ +--- +filename: /packages/material-ui/src/ImageList/ImageList.js +--- + + + +# ImageList API + +

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

+ +## Import + +```js +import ImageList from '@material-ui/core/ImageList'; +// or +import { ImageList } from '@material-ui/core'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Component name + +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 | number
| 'auto' | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. | +| children* | node | | Image Tiles that will be in Image List. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| cols | number | 2 | Number of columns. | +| component | elementType | 'ul' | The component used for the root node. Either a string to use a HTML element or a component. | +| spacing | number | 4 | Number of px for the spacing between tiles. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .MuiImageList-root | Styles applied to the root element. + +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/ImageList/ImageList.js) for more detail. + +## Demos + +- [Image List](/components/image-list/) + diff --git a/docs/pages/api-docs/list-subheader.md b/docs/pages/api-docs/list-subheader.md index 1e174241c8682d..3422c7c9bdc55d 100644 --- a/docs/pages/api-docs/list-subheader.md +++ b/docs/pages/api-docs/list-subheader.md @@ -62,5 +62,6 @@ 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/pages/components/grid-list.js b/docs/pages/components/image-list.js similarity index 71% rename from docs/pages/components/grid-list.js rename to docs/pages/components/image-list.js index 2e290836adb4c6..baeeb2c5e17286 100644 --- a/docs/pages/components/grid-list.js +++ b/docs/pages/components/image-list.js @@ -2,10 +2,10 @@ import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; -const pageFilename = 'components/grid-list'; -const requireDemo = require.context('docs/src/pages/components/grid-list', false, /\.(js|tsx)$/); +const pageFilename = 'components/image-list'; +const requireDemo = require.context('docs/src/pages/components/image-list', false, /\.(js|tsx)$/); const requireRaw = require.context( - '!raw-loader!../../src/pages/components/grid-list', + '!raw-loader!../../src/pages/components/image-list', false, /\.(js|md|tsx)$/, ); diff --git a/docs/public/static/images/grid-list/bike.jpg b/docs/public/static/images/image-list/bike.jpg similarity index 100% rename from docs/public/static/images/grid-list/bike.jpg rename to docs/public/static/images/image-list/bike.jpg diff --git a/docs/public/static/images/grid-list/breakfast.jpg b/docs/public/static/images/image-list/breakfast.jpg similarity index 100% rename from docs/public/static/images/grid-list/breakfast.jpg rename to docs/public/static/images/image-list/breakfast.jpg diff --git a/docs/public/static/images/grid-list/burgers.jpg b/docs/public/static/images/image-list/burgers.jpg similarity index 100% rename from docs/public/static/images/grid-list/burgers.jpg rename to docs/public/static/images/image-list/burgers.jpg diff --git a/docs/public/static/images/grid-list/camera.jpg b/docs/public/static/images/image-list/camera.jpg similarity index 100% rename from docs/public/static/images/grid-list/camera.jpg rename to docs/public/static/images/image-list/camera.jpg diff --git a/docs/public/static/images/grid-list/hats.jpg b/docs/public/static/images/image-list/hats.jpg similarity index 100% rename from docs/public/static/images/grid-list/hats.jpg rename to docs/public/static/images/image-list/hats.jpg diff --git a/docs/public/static/images/grid-list/honey.jpg b/docs/public/static/images/image-list/honey.jpg similarity index 100% rename from docs/public/static/images/grid-list/honey.jpg rename to docs/public/static/images/image-list/honey.jpg diff --git a/docs/public/static/images/grid-list/morning.jpg b/docs/public/static/images/image-list/morning.jpg similarity index 100% rename from docs/public/static/images/grid-list/morning.jpg rename to docs/public/static/images/image-list/morning.jpg diff --git a/docs/public/static/images/grid-list/mushroom.jpg b/docs/public/static/images/image-list/mushroom.jpg similarity index 100% rename from docs/public/static/images/grid-list/mushroom.jpg rename to docs/public/static/images/image-list/mushroom.jpg diff --git a/docs/public/static/images/grid-list/olive.jpg b/docs/public/static/images/image-list/olive.jpg similarity index 100% rename from docs/public/static/images/grid-list/olive.jpg rename to docs/public/static/images/image-list/olive.jpg diff --git a/docs/public/static/images/grid-list/plant.jpg b/docs/public/static/images/image-list/plant.jpg similarity index 100% rename from docs/public/static/images/grid-list/plant.jpg rename to docs/public/static/images/image-list/plant.jpg diff --git a/docs/public/static/images/grid-list/star.jpg b/docs/public/static/images/image-list/star.jpg similarity index 100% rename from docs/public/static/images/grid-list/star.jpg rename to docs/public/static/images/image-list/star.jpg diff --git a/docs/public/static/images/grid-list/vegetables.jpg b/docs/public/static/images/image-list/vegetables.jpg similarity index 100% rename from docs/public/static/images/grid-list/vegetables.jpg rename to docs/public/static/images/image-list/vegetables.jpg diff --git a/docs/src/pages.js b/docs/src/pages.js index 00e69f42d7adbe..0b890e94499acd 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -25,8 +25,8 @@ const pages = [ { pathname: '/components/box' }, { pathname: '/components/container' }, { pathname: '/components/grid' }, - { pathname: '/components/grid-list' }, { pathname: '/components/hidden' }, + { pathname: '/components/image-list' }, ], }, { diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js index 2b1926863a84aa..14a1e975216aa1 100644 --- a/docs/src/pages/components/buttons/ButtonBase.js +++ b/docs/src/pages/components/buttons/ButtonBase.js @@ -5,17 +5,17 @@ import Typography from '@material-ui/core/Typography'; const images = [ { - url: '/static/images/grid-list/breakfast.jpg', + url: '/static/images/image-list/breakfast.jpg', title: 'Breakfast', width: '40%', }, { - url: '/static/images/grid-list/burgers.jpg', + url: '/static/images/image-list/burgers.jpg', title: 'Burgers', width: '30%', }, { - url: '/static/images/grid-list/camera.jpg', + url: '/static/images/image-list/camera.jpg', title: 'Camera', width: '30%', }, diff --git a/docs/src/pages/components/buttons/ButtonBase.tsx b/docs/src/pages/components/buttons/ButtonBase.tsx index 92c3baba126cfa..3544d96d04e726 100644 --- a/docs/src/pages/components/buttons/ButtonBase.tsx +++ b/docs/src/pages/components/buttons/ButtonBase.tsx @@ -5,17 +5,17 @@ import Typography from '@material-ui/core/Typography'; const images = [ { - url: '/static/images/grid-list/breakfast.jpg', + url: '/static/images/image-list/breakfast.jpg', title: 'Breakfast', width: '40%', }, { - url: '/static/images/grid-list/burgers.jpg', + url: '/static/images/image-list/burgers.jpg', title: 'Burgers', width: '30%', }, { - url: '/static/images/grid-list/camera.jpg', + url: '/static/images/image-list/camera.jpg', title: 'Camera', width: '30%', }, diff --git a/docs/src/pages/components/grid-list/AdvancedGridList.js b/docs/src/pages/components/image-list/AdvancedImageList.js similarity index 77% rename from docs/src/pages/components/grid-list/AdvancedGridList.js rename to docs/src/pages/components/image-list/AdvancedImageList.js index cc3da68c9f10b4..5225564b6b9d7e 100644 --- a/docs/src/pages/components/grid-list/AdvancedGridList.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 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,16 +49,16 @@ const useStyles = makeStyles((theme) => ({ * }, * ]; */ -export default function AdvancedGridList() { +export default function AdvancedImageList() { const classes = useStyles(); return (
- + {tileData.map((tile) => ( - + {tile.title} - - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/AdvancedGridList.tsx b/docs/src/pages/components/image-list/AdvancedImageList.tsx similarity index 78% rename from docs/src/pages/components/grid-list/AdvancedGridList.tsx rename to docs/src/pages/components/image-list/AdvancedImageList.tsx index 975fa9e9a7f218..3e82f56b6f01e3 100644 --- a/docs/src/pages/components/grid-list/AdvancedGridList.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 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'; @@ -51,16 +51,16 @@ const useStyles = makeStyles((theme: Theme) => * }, * ]; */ -export default function AdvancedGridList() { +export default function AdvancedImageList() { const classes = useStyles(); return (
- + {tileData.map((tile) => ( - + {tile.title} - - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/ImageGridList.js b/docs/src/pages/components/image-list/BasicImageList.js similarity index 71% rename from docs/src/pages/components/grid-list/ImageGridList.js rename to docs/src/pages/components/image-list/BasicImageList.js index d19ca9c30df4e8..f7ef16a3741024 100644 --- a/docs/src/pages/components/grid-list/ImageGridList.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 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 useStyles = makeStyles((theme) => ({ @@ -36,18 +36,18 @@ const useStyles = makeStyles((theme) => ({ * }, * ]; */ -export default function ImageGridList() { +export default function BasicImageList() { const classes = useStyles(); return (
- + {tileData.map((tile) => ( - + {tile.title} - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/ImageGridList.tsx b/docs/src/pages/components/image-list/BasicImageList.tsx similarity index 73% rename from docs/src/pages/components/grid-list/ImageGridList.tsx rename to docs/src/pages/components/image-list/BasicImageList.tsx index ca2c1b3f524c5e..f2b382df5655df 100644 --- a/docs/src/pages/components/grid-list/ImageGridList.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 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 useStyles = makeStyles((theme: Theme) => @@ -38,18 +38,18 @@ const useStyles = makeStyles((theme: Theme) => * }, * ]; */ -export default function ImageGridList() { +export default function BasicImageList() { const classes = useStyles(); return (
- + {tileData.map((tile) => ( - + {tile.title} - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/SingleLineGridList.js b/docs/src/pages/components/image-list/SingleLineImageList.js similarity index 80% rename from docs/src/pages/components/grid-list/SingleLineGridList.js rename to docs/src/pages/components/image-list/SingleLineImageList.js index 34eb5c00cdf077..5f0640dc5d4c13 100644 --- a/docs/src/pages/components/grid-list/SingleLineGridList.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 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'; @@ -46,16 +46,16 @@ const useStyles = makeStyles((theme) => ({ * }, * ]; */ -export default function SingleLineGridList() { +export default function SingleLineImageList() { const classes = useStyles(); return (
- + {tileData.map((tile) => ( - + {tile.title} - } /> - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/SingleLineGridList.tsx b/docs/src/pages/components/image-list/SingleLineImageList.tsx similarity index 80% rename from docs/src/pages/components/grid-list/SingleLineGridList.tsx rename to docs/src/pages/components/image-list/SingleLineImageList.tsx index b2718fafae1238..b7a208fea8b9eb 100644 --- a/docs/src/pages/components/grid-list/SingleLineGridList.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 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'; @@ -48,16 +48,16 @@ const useStyles = makeStyles((theme: Theme) => * }, * ]; */ -export default function SingleLineGridList() { +export default function SingleLineImageList() { const classes = useStyles(); return (
- + {tileData.map((tile) => ( - + {tile.title} - } /> - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/TitlebarGridList.js b/docs/src/pages/components/image-list/TitlebarImageList.js similarity index 73% rename from docs/src/pages/components/grid-list/TitlebarGridList.js rename to docs/src/pages/components/image-list/TitlebarImageList.js index 514063f2ea9ca8..b675a512c6ef6a 100644 --- a/docs/src/pages/components/grid-list/TitlebarGridList.js +++ b/docs/src/pages/components/image-list/TitlebarImageList.js @@ -1,8 +1,8 @@ import 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 ListSubheader from '@material-ui/core/ListSubheader'; import IconButton from '@material-ui/core/IconButton'; import InfoIcon from '@material-ui/icons/Info'; @@ -42,19 +42,19 @@ const useStyles = makeStyles((theme) => ({ * }, * ]; */ -export default function TitlebarGridList() { +export default function TitlebarImageList() { const classes = useStyles(); return (
- - + + December - + {tileData.map((tile) => ( - + {tile.title} - by: {tile.author}} actionIcon={ @@ -63,9 +63,9 @@ export default function TitlebarGridList() { } /> - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/TitlebarGridList.tsx b/docs/src/pages/components/image-list/TitlebarImageList.tsx similarity index 74% rename from docs/src/pages/components/grid-list/TitlebarGridList.tsx rename to docs/src/pages/components/image-list/TitlebarImageList.tsx index 601516440a9bdb..a6db3fcede891e 100644 --- a/docs/src/pages/components/grid-list/TitlebarGridList.tsx +++ b/docs/src/pages/components/image-list/TitlebarImageList.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { Theme, createStyles, 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 ListSubheader from '@material-ui/core/ListSubheader'; import IconButton from '@material-ui/core/IconButton'; import InfoIcon from '@material-ui/icons/Info'; @@ -44,19 +44,19 @@ const useStyles = makeStyles((theme: Theme) => * }, * ]; */ -export default function TitlebarGridList() { +export default function TitlebarImageList() { const classes = useStyles(); return (
- - + + December - + {tileData.map((tile) => ( - + {tile.title} - by: {tile.author}} actionIcon={ @@ -65,9 +65,9 @@ export default function TitlebarGridList() { } /> - + ))} - +
); } diff --git a/docs/src/pages/components/grid-list/grid-list-de.md b/docs/src/pages/components/image-list/image-list-de.md similarity index 65% rename from docs/src/pages/components/grid-list/grid-list-de.md rename to docs/src/pages/components/image-list/image-list-de.md index b9b32b1b6e309d..86d9a57be4e64e 100644 --- a/docs/src/pages/components/grid-list/grid-list-de.md +++ b/docs/src/pages/components/image-list/image-list-de.md @@ -1,6 +1,6 @@ --- title: Grid List React Komponente -components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton +components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton --- # Rasterliste (Grid List) @@ -13,22 +13,22 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton Ein einfaches Beispiel für ein scrollbare `RasterList` mit Bildern. -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}} ## Rasterliste mit Titelleisten -In diesem Beispiel wird die Verwendung der `GridListTileBar` veranschaulicht, um jeweils eine Überlagerung zu jedem `GridListTile`hinzuzufügen. Die Überlagerung kann einen `title`, `subtitle` und eine sekundäre Aktion aufnehmen - in diesem Beispiel ein `IconButton`. +In diesem Beispiel wird die Verwendung der `ImageListTileBar` veranschaulicht, um jeweils eine Überlagerung zu jedem `ImageListTile`hinzuzufügen. Die Überlagerung kann einen `title`, `subtitle` und eine sekundäre Aktion aufnehmen - in diesem Beispiel ein `IconButton`. -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} ## Einzeilige Rasterliste Dieses Beispiel zeigt eine horizontale, durchlaufbare, einzeilige Rasterliste von Bildern. Horizontales Scrollen von Rasterlisten wird empfohlen, da das Scrollen typische Lesemuster stört und das Verständnis beeinträchtigt. Eine Ausnahme ist eine horizontal scrollende, einzeilige Rasterliste von Bildern, z. -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} ## Erweiterte Rasterliste In diesem Beispiel werden "vorgestellte" Fliesen dargestellt, wobei die Eigenschaften `rows` und `cols` die Größe der Kacheln festlegen und der Abstand durch die `padding` Eigenschaft einstellen wird. Die Kacheln haben eine angepasste Titleleiste, an der Spitze positioniert ist und einem benutzerdefinierten Gradienten `titleBackground` hat. Die sekundäre Aktion `IconButton` befindet sich links. -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file diff --git a/docs/src/pages/components/grid-list/grid-list-es.md b/docs/src/pages/components/image-list/image-list-es.md similarity index 65% rename from docs/src/pages/components/grid-list/grid-list-es.md rename to docs/src/pages/components/image-list/image-list-es.md index 60c2860d1894d7..efe2485f488393 100644 --- a/docs/src/pages/components/grid-list/grid-list-es.md +++ b/docs/src/pages/components/image-list/image-list-es.md @@ -1,6 +1,6 @@ --- title: Componente React para Lista cuadriculada -components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton +components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton --- # Lista cuadriculada @@ -11,24 +11,24 @@ Las [Listas cuadriculadas](https://material.io/design/components/image-lists.htm ## Lista cuadriculada sólo con imágenes -Un ejemplo simple de una lista cuadriculada (`GridList`) con imágenes desplazables. +Un ejemplo simple de una lista cuadriculada (`ImageList`) con imágenes desplazables. -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}} ## Lista cuadriculada con barras de título -Este ejemplo demuestra el uso de una barra para cuadro de lista cuadriculada (`GridListTileBar`) que agrega una capa sobrepuesta a cada cuadro en una lista cuadriculada (`GridListTile`). La capa sobrepuesta puede acomodar un título (`title`), subtítulo (`subtitle`), y acción secundaria (en este ejemplo un `IconButton`). +Este ejemplo demuestra el uso de una barra para cuadro de lista cuadriculada (`ImageListTileBar`) que agrega una capa sobrepuesta a cada cuadro en una lista cuadriculada (`ImageListTile`). La capa sobrepuesta puede acomodar un título (`title`), subtítulo (`subtitle`), y acción secundaria (en este ejemplo un `IconButton`). -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} ## Lista cuadriculada con una línea Este ejemplo muestra una lista cuadrícula con una sola línea desplazable horizontalmente. Se desaconseja usar listas cuadriculadas con desplazamiento horizontal ya que estas interfieren con los patrones típicos de lectura, afectando la comprensión. Una excepción notable es una lista cuadriculada que desplaza imágenes horizontalmente en una sola línea, como una galería. -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} ## Lista cuadriculada avanzada Este ejemplo muestra cuadros "destacados" usando los props filas (`rows`) y columnas (`cols`) para ajustar el tamaño del cuadro, y la prop relleno (`padding`) para ajustar el espaciado. Los cuadros tienen una barra de título personalizada, ubicada en la parte superior y un fondo de titulo (`titleBackground`) con degradado personalizado. La acción secundaria `IconButton` está ubicada a la izquierda. -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file diff --git a/docs/src/pages/components/grid-list/grid-list-fr.md b/docs/src/pages/components/image-list/image-list-fr.md similarity index 63% rename from docs/src/pages/components/grid-list/grid-list-fr.md rename to docs/src/pages/components/image-list/image-list-fr.md index fc2fa512f7c3db..ee0eb86516004b 100644 --- a/docs/src/pages/components/grid-list/grid-list-fr.md +++ b/docs/src/pages/components/image-list/image-list-fr.md @@ -1,6 +1,6 @@ --- title: Composant React Grid List -components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton +components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton --- # Grid list @@ -11,24 +11,24 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton ## Grid list contenant uniquement des images -Un exemple simple d'image défilable `GridList`. +Un exemple simple d'image défilable `ImageList`. -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}} ## Grid list avec barres de titre -Cet exemple illustre l'utilisation de `GridListTileBar` pour ajouter une superposition à chaque `GridListTile`. La superposition peut accueillir un `titre`, `sous - titre` et une action secondaire - dans cet exemple un `IconButton`. +Cet exemple illustre l'utilisation de `ImageListTileBar` pour ajouter une superposition à chaque `ImageListTile`. La superposition peut accueillir un `titre`, `sous - titre` et une action secondaire - dans cet exemple un `IconButton`. -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} ## Grid List sur une ligne Cet exemple illustre une grid list défilante horizontale d'images. Les listes de grille défilant horizontalement sont déconseillées car le défilement interfère avec les habitudes de lecture, ce qui affecte la compréhension. Une exception notable est la liste d'images comportant une seule ligne, telle qu'une galerie, qui défile horizontalement. -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} ## Grid list avancée Cet exemple montre des tuiles , en utilisant les `rows` et `cols`props pour ajuster la taille de la tuile, et le `padding` prop pour ajuster l'espacement. Les tuiles ont une barre de titre personnalisée, placée en haut et avec un dégradé personnalisé `titleBackground`. L'action secondaire `IconButton` est positionnée sur la gauche. -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file diff --git a/docs/src/pages/components/grid-list/grid-list-ja.md b/docs/src/pages/components/image-list/image-list-ja.md similarity index 65% rename from docs/src/pages/components/grid-list/grid-list-ja.md rename to docs/src/pages/components/image-list/image-list-ja.md index c1a8b299941a7c..83474bd42f2321 100644 --- a/docs/src/pages/components/grid-list/grid-list-ja.md +++ b/docs/src/pages/components/image-list/image-list-ja.md @@ -1,6 +1,6 @@ --- title: Grid List React component -components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton +components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton --- # Grid List @@ -11,24 +11,24 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton ## 画像のみのGrid list -スクロール可能な画像の簡単な `GridList`の例。 +スクロール可能な画像の簡単な `ImageList`の例。 -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}} ## タイトルバー付きのGrid list -この例は、 `GridListTileBar` を使用して、各 `GridListTile`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。 +この例は、 `ImageListTileBar` を使用して、各 `ImageListTile`オーバーレイを追加する方法を示しています。 オーバーレイには、 `title`, `subtitle` および副次的アクション例えば`IconButton`を含めることができます。 -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} ## Single line Grid list 単一行グリッドリスト この例では、水平スクロール可能な単一行グリッドの画像リストを示します。 水平方向のスクロールグリッドリストは、スクロールが一般的な読み方の邪魔になり理解に影響を与えるため、推奨されません。 注目すべき例外の1つは、水平にスクロールする、ギャラリーなどの画像の1行グリッドリストです。 -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} ## 高度なグリッドリスト この例では、`rows` and `cols` プロップを使用してタイルのサイズを調整し、 `padding`プロップを使用して間隔を調整する方法を示します。 タイルには、上部にカスタムのタイトルバーがあり、カスタムのグラデーション`titleBackground`があります。 セカンダリアクション `IconButton` は左側に配置されます。 -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file diff --git a/docs/src/pages/components/grid-list/grid-list-pt.md b/docs/src/pages/components/image-list/image-list-pt.md similarity index 64% rename from docs/src/pages/components/grid-list/grid-list-pt.md rename to docs/src/pages/components/image-list/image-list-pt.md index 6668c6374fb932..56ac37297109f2 100644 --- a/docs/src/pages/components/grid-list/grid-list-pt.md +++ b/docs/src/pages/components/image-list/image-list-pt.md @@ -1,6 +1,6 @@ --- title: Componente React para Lista de Grade -components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton +components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton --- # Lista de Grade @@ -11,24 +11,24 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton ## Lista de grade com imagens -Um exemplo simples de uma `GridList` com imagens. +Um exemplo simples de uma `ImageList` com imagens. -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}} ## Lista de grade com barras de título -Este exemplo demonstra o uso do `GridListTileBar` para adicionar uma sobreposição a cada `GridListTile`. A sobreposição pode acomodar um `title`, `subtitle` e ação secundária - neste exemplo utilizamos um `IconButton`. +Este exemplo demonstra o uso do `ImageListTileBar` para adicionar uma sobreposição a cada `ImageListTile`. A sobreposição pode acomodar um `title`, `subtitle` e ação secundária - neste exemplo utilizamos um `IconButton`. -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} ## Lista de grade em linha única Este exemplo demonstra uma lista de grade com imagens, em linha unica e rolável horizontalmente. As listas de grade de rolagem horizontal não são recomendadas porque a rolagem interfere nos padrões de leitura típicos, afetando a compreensão. Uma exceção notável para rolagem horizontal, seria uma lista de grade com imagens em linha única, como uma galeria. -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} ## Lista de grade avançada Este exemplo demonstra blocos "em destaque", usando as propriedades `rows` e `cols` para ajustar o tamanho do bloco, e a propriedade `padding` para ajustar o espaçamento. Os blocos tem uma barra de título customizada, posicionada no topo e com um gradiente personalizado `titleBackground`. A ação secundária `IconButton` está posicionada à esquerda. -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file diff --git a/docs/src/pages/components/grid-list/grid-list-ru.md b/docs/src/pages/components/image-list/image-list-ru.md similarity index 86% rename from docs/src/pages/components/grid-list/grid-list-ru.md rename to docs/src/pages/components/image-list/image-list-ru.md index 206ff993f7aa1d..218cd94fd080ce 100644 --- a/docs/src/pages/components/grid-list/grid-list-ru.md +++ b/docs/src/pages/components/image-list/image-list-ru.md @@ -1,6 +1,6 @@ --- title: Сеть изображений, компонент React -components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton +components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton --- # Сеть изображений @@ -13,22 +13,22 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton Простой пример прокручиваемой `Сети изображений`. -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}} ## Сеть изображений с заголовками Этот пример демонстрирует использование `Полосы заголовка сети изображений`, которую следует добавить в каждый `Заголовок сети изображений`. Мы можем указать `заголовок`, `подзаголовок` и дополнительное действие - в этом примере `кнопка-иконка`. -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} ## Сеть изображений в одну строку Данный пример показывает сеть изображений в одну строку с горизонтальной прокруткой. Сети изображений с горизонтальнйо прокруткой не рекомендуется применять, так как это может вызвать дискомфорт у пользователей, ведь обычно при чтении используется вертикальная прокрутка. Исключением из этого правила являются сети с горизонтальной прокруткой в одну строку, например галерея. -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} ## Более сложный пример В этом примере демонстрирует «рекомендуемые» листы, в которых используются свойства `rows` и `cols` чтобы отрегулировать размер плитки, и свойство `padding` чтобы отрегулировать поля между плитками. На плитках можно видеть пользовательскую полосу расположенную вверху с даным значением градиента в свойстве `titleBackground`. Дополнительное действие в `Кнопке-иконке` распложенно по левую сторону. -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file diff --git a/docs/src/pages/components/grid-list/grid-list-zh.md b/docs/src/pages/components/image-list/image-list-zh.md similarity index 62% rename from docs/src/pages/components/grid-list/grid-list-zh.md rename to docs/src/pages/components/image-list/image-list-zh.md index 4734aaba2922d9..c615a6cd9fbe65 100644 --- a/docs/src/pages/components/grid-list/grid-list-zh.md +++ b/docs/src/pages/components/image-list/image-list-zh.md @@ -1,6 +1,6 @@ --- -title: React 网格列表组件 -components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton +title: React Grid List 网格列表组件 +components: ImageList, ImageListTile, ImageListTileBar, ListSubheader, IconButton --- # Grid List 网格列表 @@ -13,22 +13,22 @@ components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton 这是一个可滚动的图像的`网格列表`的简单示例。 -{{"demo": "pages/components/grid-list/ImageGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/ImageImageList.js", "hideEditButton": true}} ## 带有标题栏的网格列表 -此示例演示如何使用 `GridListTileBar` 为每个 `GridListTile` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。 +此示例演示如何使用 `ImageListTileBar` 为每个 `ImageListTile` 添加一个叠加层。 叠加层可以容纳 `title`， `subtitle` 和辅助操作—在本例中为 `IconButton`。 -{{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} ## 单行网格列表 此示例演示了可以在水平方向滚动的单行纯图像网格列表。 我们其实不鼓励水平滚动网格列表，因为滚动会干扰典型的阅读模式，从而影响用户的理解。 一个值得注意的例外是水平滚动的单行网格图像列表，例如图库。 -{{"demo": "pages/components/grid-list/SingleLineGridList.js", "hideEditButton": true}} +{{"demo": "pages/components/image-list/SingleLineImageList.js", "hideEditButton": true}} ## 高级网格列表 此示例演示了“精选的”瓷砖效果 ，使用 `rows` 和 `cols` props 来调整磁贴的大小，并使用 `padding` 属性来调整间距。 瓷砖有一个位于顶部的自定义标题栏，并带有自定义渐变的 `titleBackground `。 而辅助操作的 `IconButton` 则位于左侧。 -{{"demo": "pages/components/grid-list/AdvancedGridList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/image-list/AdvancedImageList.js", "hideEditButton": true, "defaultCodeOpen": false}} \ No newline at end of file diff --git a/docs/src/pages/components/image-list/image-list.md b/docs/src/pages/components/image-list/image-list.md new file mode 100644 index 00000000000000..fa389daa84dc06 --- /dev/null +++ b/docs/src/pages/components/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 represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold. + +## 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 e2a8c2bbba6fcd..0d8f607ce7a68a 100644 --- a/docs/src/pages/getting-started/supported-components/supported-components.md +++ b/docs/src/pages/getting-started/supported-components/supported-components.md @@ -50,8 +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) ✓** -- **[Expansion Panels](https://material.io/archive/guidelines/components/expansion-panels.html) ✓** (*Legacy Material v1*) -- **[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 new file mode 100644 index 00000000000000..9192be226ed084 --- /dev/null +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -0,0 +1,502 @@ +# Migration from v4 to v5 + +

Yeah, v5 has been released!

+ +Looking for the v4 docs? [Find them here](https://material-ui.com/versions/). + +> This document is a work in progress. +> Have you upgraded your site and run into something that's not covered here? +> [Add your changes on GitHub](https://github.com/mui-org/material-ui/blob/next/docs/src/pages/guides/migration-v4/migration-v4.md). + +## Introduction + +This is a reference for upgrading your site from Material-UI v4 to v5. +While there's a lot covered here, you probably won't need to do everything for your site. +We'll do our best to keep things easy to follow, and as sequential as possible so you can quickly get rocking on v5! + +## Why you should migrate + +This documentation page covers the _how_ of migrating from v4 to v5. +The _why_ is covered in the [release blog post on Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701). + +## Updating your dependencies + +The very first thing you will need to do is to update your dependencies. + +### Update Material-UI version + +You need to update your `package.json` to use the latest version of Material-UI. + +```json +"dependencies": { + "@material-ui/core": "^5.0.0-alpha.1" +} +``` + +Or run + +```sh +npm install @material-ui/core@next + +or + +yarn add @material-ui/core@next +``` + +## Handling breaking changes + +### non-ref-forwarding class components + +Support for non-ref-forwarding class components in the `component` prop or as an immediate `children` has been dropped. If you were using `unstable_createStrictModeTheme` or didn't see any warnings related to `findDOMNode` in `React.StrictMode` then you don't need to do anything. +Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate. +This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. ``) + +### Theme + +- The "gutters" abstraction hasn't proven to be used frequently enough to be valuable. + + ```diff + -theme.mixins.gutters(), + +paddingLeft: theme.spacing(2), + +paddingRight: theme.spacing(2), + +[theme.breakpoints.up('sm')]: { + + paddingLeft: theme.spacing(3), + + paddingRight: theme.spacing(3), + +}, + ``` + +### Avatar + +- Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + - + + + + + ``` + +### Badge + +- Rename `circle` to `circular` and `rectangle` to `rectangular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + - + + + + + + ``` + +### BottomNavigation + +- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + + ```diff + -) => {}} /> + + {}} /> + ``` + +### Button + +- The button `color` prop is now "primary" by default, and "default" has been removed. This makes the button closer to the Material Design specification and simplifies the API. + + ```diff + - + + - + + + - + + + ``` + +- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + + ```diff + -, expanded: boolean) => {}} /> + + {}} /> + ``` + +### Fab + +- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + + + ``` + +### Grid + +- Rename `justify` prop with `justifyContent` to be aligned with the CSS property name. + + ```diff + - + + + ``` + +### GridList + +- Rename the `GridList` components to `ImageList` to align with the current Material Design naming. + +```diff +-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'; + +- +- ++ ++ + Image title +- +- +- ++ ++ +``` + +### Menu + +- The onE\* transition props were removed. Use TransitionProps instead. + + ```diff + + ``` + +### Pagination + +- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + + + ``` + +### PaginationItem + +- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + + + ``` + + ### Popover + +- The onE\* transition props were removed. Use TransitionProps instead. + + ```diff + + ``` + +### Rating + +- Rename `visuallyhidden` to `visuallyHidden` for consistency: + + ```diff + + ``` + +### RootRef + +- This component was removed. + You can get a reference to the underlying DOM node of our components via `ref` prop. + The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). + + ```diff + - + - - - - - + - - - + - ``` - -- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. - - ```diff - -, expanded: boolean) => {}} /> - + {}} /> - ``` - -### Fab - -- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: - - ```diff - - - + - ``` - -### Grid - -- Rename `justify` prop with `justifyContent` to be aligned with the CSS property name. - - ```diff - - - + - ``` - -### GridList - -- Rename the `GridList` components to `ImageList` to align with the current Material Design naming. - -```diff --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'; - -- -- -+ -+ - Image title -- -- -- -+ -+ -``` - -### Menu - -- The onE\* transition props were removed. Use TransitionProps instead. - - ```diff - - ``` - -### Pagination - -- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: - - ```diff - - - + - ``` - -### PaginationItem - -- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: - - ```diff - - - + - ``` - - ### Popover - -- The onE\* transition props were removed. Use TransitionProps instead. - - ```diff - - ``` - -### Rating - -- Rename `visuallyhidden` to `visuallyHidden` for consistency: - - ```diff - - ``` - -### RootRef - -- This component was removed. - You can get a reference to the underlying DOM node of our components via `ref` prop. - The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). - - ```diff - - - - + + - + + + - + + + ``` + +- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + + ```diff + -, expanded: boolean) => {}} /> + + {}} /> + ``` + +### Fab + +- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + + + ``` + +### Grid + +- Rename `justify` prop with `justifyContent` to be aligned with the CSS property name. + + ```diff + - + + + ``` + +### GridList + +- Rename the `GridList` components to `ImageList` to align with the current Material Design naming. + +```diff +-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 ImageListItem from '@material-ui/core/ImageListItem'; ++import ImageListItemBar from '@material-ui/core/ImageListItemBar'; + +- +- ++ ++ + Image title +- +- +- ++ ++ +``` + +### Menu + +- The onE\* transition props were removed. Use TransitionProps instead. + + ```diff + + ``` + +### Pagination + +- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + + + ``` + +### PaginationItem + +- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + + + ``` + + ### Popover + +- The onE\* transition props were removed. Use TransitionProps instead. + + ```diff + + ``` + +### Rating + +- Rename `visuallyhidden` to `visuallyHidden` for consistency: + + ```diff + + ``` + +### RootRef + +- This component was removed. + You can get a reference to the underlying DOM node of our components via `ref` prop. + The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). + + ```diff + - + - - - - - + - - - + - ``` - -- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. - - ```diff - -, expanded: boolean) => {}} /> - + {}} /> - ``` - -### Fab - -- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: - - ```diff - - - + - ``` - -### Grid - -- Rename `justify` prop with `justifyContent` to be aligned with the CSS property name. - - ```diff - - - + - ``` - -### GridList - -- Rename the `GridList` components to `ImageList` to align with the current Material Design naming. - -```diff --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 ImageListItem from '@material-ui/core/ImageListItem'; -+import ImageListItemBar from '@material-ui/core/ImageListItemBar'; - -- -- -+ -+ - Image title -- -- -- -+ -+ -``` - -### Menu - -- The onE\* transition props were removed. Use TransitionProps instead. - - ```diff - - ``` - -### Pagination - -- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: - - ```diff - - - + - ``` - -### PaginationItem - -- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns: - - ```diff - - - + - ``` - - ### Popover - -- The onE\* transition props were removed. Use TransitionProps instead. - - ```diff - - ``` - -### Rating - -- Rename `visuallyhidden` to `visuallyHidden` for consistency: - - ```diff - - ``` - -### RootRef - -- This component was removed. - You can get a reference to the underlying DOM node of our components via `ref` prop. - The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). - - ```diff - - - - - + - + diff --git a/docs/src/pages/components/button-group/GroupSizesColors.js b/docs/src/pages/components/button-group/GroupSizesColors.js index 750f520b22760f..b13e750a1053b8 100644 --- a/docs/src/pages/components/button-group/GroupSizesColors.js +++ b/docs/src/pages/components/button-group/GroupSizesColors.js @@ -24,12 +24,19 @@ export default function GroupSizesColors() { - + - + diff --git a/docs/src/pages/components/button-group/SplitButton.js b/docs/src/pages/components/button-group/SplitButton.js index 746ea9732139f1..1a49de95b8869d 100644 --- a/docs/src/pages/components/button-group/SplitButton.js +++ b/docs/src/pages/components/button-group/SplitButton.js @@ -10,7 +10,11 @@ import Popper from '@material-ui/core/Popper'; import MenuItem from '@material-ui/core/MenuItem'; import MenuList from '@material-ui/core/MenuList'; -const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge']; +const options = [ + 'Create a merge commit', + 'Squash and merge', + 'Rebase and merge', +]; export default function SplitButton() { const [open, setOpen] = React.useState(false); @@ -41,7 +45,12 @@ export default function SplitButton() { return ( - + - + {({ TransitionProps, placement }) => ( diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js index 14a1e975216aa1..acd97535e07d3a 100644 --- a/docs/src/pages/components/buttons/ButtonBase.js +++ b/docs/src/pages/components/buttons/ButtonBase.js @@ -81,7 +81,9 @@ const useStyles = makeStyles((theme) => ({ }, imageTitle: { position: 'relative', - padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`, + padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${ + theme.spacing(1) + 6 + }px`, }, imageMarked: { height: 3, diff --git a/docs/src/pages/components/buttons/ButtonSizes.js b/docs/src/pages/components/buttons/ButtonSizes.js index b7e4e7e3ee8e55..c15ff0c253e612 100644 --- a/docs/src/pages/components/buttons/ButtonSizes.js +++ b/docs/src/pages/components/buttons/ButtonSizes.js @@ -31,24 +31,54 @@ export default function ButtonSizes() {
- - -
- - -
diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js index 6cb0cec9bbe568..a99fb3c96113c3 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.js +++ b/docs/src/pages/components/buttons/CustomizedButtons.js @@ -1,5 +1,10 @@ import React from 'react'; -import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles'; +import { + createMuiTheme, + withStyles, + makeStyles, + ThemeProvider, +} from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { green, purple } from '@material-ui/core/colors'; @@ -68,7 +73,11 @@ export default function CustomizedButtons() { return (
- + Custom CSS @@ -76,7 +85,12 @@ export default function CustomizedButtons() { Theme Provider - + Bootstrap
diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js index c41fadc252cd4a..32047dc9deaa3f 100644 --- a/docs/src/pages/components/buttons/UploadButtons.js +++ b/docs/src/pages/components/buttons/UploadButtons.js @@ -32,9 +32,18 @@ export default function UploadButtons() { Upload - + diff --git a/docs/src/pages/components/cards/ImgMediaCard.js b/docs/src/pages/components/cards/ImgMediaCard.js index 1a967b8cc74217..ee5b758e5c3109 100644 --- a/docs/src/pages/components/cards/ImgMediaCard.js +++ b/docs/src/pages/components/cards/ImgMediaCard.js @@ -32,8 +32,8 @@ export default function ImgMediaCard() { Lizard - Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging - across all continents except Antarctica + Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica diff --git a/docs/src/pages/components/cards/MediaCard.js b/docs/src/pages/components/cards/MediaCard.js index f16505dfbe80d1..5cd228dc3cb57d 100644 --- a/docs/src/pages/components/cards/MediaCard.js +++ b/docs/src/pages/components/cards/MediaCard.js @@ -33,8 +33,8 @@ export default function MediaCard() { Lizard - Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging - across all continents except Antarctica + Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica diff --git a/docs/src/pages/components/cards/MediaControlCard.js b/docs/src/pages/components/cards/MediaControlCard.js index 7ec6abd80b0724..fe8715a6d2c82e 100644 --- a/docs/src/pages/components/cards/MediaControlCard.js +++ b/docs/src/pages/components/cards/MediaControlCard.js @@ -52,13 +52,21 @@ export default function MediaControlCard() {
- {theme.direction === 'rtl' ? : } + {theme.direction === 'rtl' ? ( + + ) : ( + + )} - {theme.direction === 'rtl' ? : } + {theme.direction === 'rtl' ? ( + + ) : ( + + )}
diff --git a/docs/src/pages/components/cards/OutlinedCard.js b/docs/src/pages/components/cards/OutlinedCard.js index 1f143544b2b6a4..16359e1d73ee4e 100644 --- a/docs/src/pages/components/cards/OutlinedCard.js +++ b/docs/src/pages/components/cards/OutlinedCard.js @@ -30,7 +30,11 @@ export default function OutlinedCard() { return ( - + Word of the Day diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js index 6272437dfc284b..bd73152f6b1d34 100644 --- a/docs/src/pages/components/cards/RecipeReviewCard.js +++ b/docs/src/pages/components/cards/RecipeReviewCard.js @@ -70,8 +70,9 @@ export default function RecipeReviewCard() { /> - This impressive paella is a perfect party dish and a fun meal to cook together with your - guests. Add 1 cup of frozen peas along with the mussels, if you like. + This impressive paella is a perfect party dish and a fun meal to cook + together with your guests. Add 1 cup of frozen peas along with the + mussels, if you like. @@ -96,26 +97,30 @@ export default function RecipeReviewCard() { Method: - Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 - minutes. + Heat 1/2 cup of the broth in a pot until simmering, add saffron and + set aside for 10 minutes. - Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high - heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly - browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken - and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and - pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add - saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil. + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet + over medium-high heat. Add chicken, shrimp and chorizo, and cook, + stirring occasionally until lightly browned, 6 to 8 minutes. + Transfer shrimp to a large plate and set aside, leaving chicken and + chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, + onion, salt and pepper, and cook, stirring often until thickened and + fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 + cups chicken broth; bring to a boil. - Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook - without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to - medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook - again without stirring, until mussels have opened and rice is just tender, 5 to 7 - minutes more. (Discard any mussels that don’t open.) + Add rice and stir very gently to distribute. Top with artichokes and + peppers, and cook without stirring, until most of the liquid is + absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved + shrimp and mussels, tucking them down into the rice, and cook again + without stirring, until mussels have opened and rice is just tender, + 5 to 7 minutes more. (Discard any mussels that don’t open.) - Set aside off of the heat to let rest for 10 minutes, and then serve. + Set aside off of the heat to let rest for 10 minutes, and then + serve. diff --git a/docs/src/pages/components/cards/SimpleCard.js b/docs/src/pages/components/cards/SimpleCard.js index 79be00bd552a90..bf765591287184 100644 --- a/docs/src/pages/components/cards/SimpleCard.js +++ b/docs/src/pages/components/cards/SimpleCard.js @@ -30,7 +30,11 @@ export default function SimpleCard() { return ( - + Word of the Day diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js index a628ecb069fa17..b20637873d1d59 100644 --- a/docs/src/pages/components/checkboxes/CheckboxLabels.js +++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js @@ -34,7 +34,13 @@ export default function CheckboxLabels() { return ( } + control={ + + } label="Secondary" /> - } label="Uncontrolled" /> - } label="Disabled" /> - } label="Disabled" /> + } + label="Uncontrolled" + /> + } + label="Disabled" + /> + } + label="Disabled" + /> } + control={ + + } label="Custom color" /> } checkedIcon={} name="checkedH" />} + control={ + } + checkedIcon={} + name="checkedH" + /> + } label="Custom icon" /> - + Assign responsibility } + control={ + + } label="Gilad Gray" /> } + control={ + + } label="Jason Killian" /> } + control={ + + } label="Antoine Llorca" /> Be careful - + Pick two } + control={ + + } label="Gilad Gray" /> } + control={ + + } label="Jason Killian" /> } + control={ + + } label="Antoine Llorca" /> diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js index 09a95fb5833bc0..74cd7ff84c3656 100644 --- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js +++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js @@ -13,9 +13,11 @@ const useStyles = makeStyles({ borderRadius: 3, width: 16, height: 16, - boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + boxShadow: + 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', backgroundColor: '#f5f8fa', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + backgroundImage: + 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '$root.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, @@ -30,7 +32,8 @@ const useStyles = makeStyles({ }, checkedIcon: { backgroundColor: '#137cbd', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', + backgroundImage: + 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', '&:before': { display: 'block', width: 16, diff --git a/docs/src/pages/components/chips/Chips.js b/docs/src/pages/components/chips/Chips.js index 5237d2f321f426..61c0a2bc107138 100644 --- a/docs/src/pages/components/chips/Chips.js +++ b/docs/src/pages/components/chips/Chips.js @@ -31,7 +31,11 @@ export default function Chips() {
- M} label="Clickable" onClick={handleClick} /> + M} + label="Clickable" + onClick={handleClick} + /> } label="Deletable" diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js index 58f7ffab7c4672..9bcfc59adf80b5 100644 --- a/docs/src/pages/components/chips/ChipsArray.js +++ b/docs/src/pages/components/chips/ChipsArray.js @@ -29,7 +29,9 @@ export default function ChipsArray() { ]); const handleDelete = (chipToDelete) => () => { - setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key)); + setChipData((chips) => + chips.filter((chip) => chip.key !== chipToDelete.key), + ); }; return ( diff --git a/docs/src/pages/components/chips/OutlinedChips.js b/docs/src/pages/components/chips/OutlinedChips.js index 9ff2f40198d117..8a2dec9fd5516f 100644 --- a/docs/src/pages/components/chips/OutlinedChips.js +++ b/docs/src/pages/components/chips/OutlinedChips.js @@ -57,7 +57,13 @@ export default function OutlinedChips() { deleteIcon={} variant="outlined" /> - + M} label="Primary clickable" @@ -76,7 +82,12 @@ export default function OutlinedChips() { deleteIcon={} variant="outlined" /> - + } label="Deletable secondary" diff --git a/docs/src/pages/components/chips/SmallChips.js b/docs/src/pages/components/chips/SmallChips.js index 49e817bac7e85f..156330a282548e 100644 --- a/docs/src/pages/components/chips/SmallChips.js +++ b/docs/src/pages/components/chips/SmallChips.js @@ -30,7 +30,12 @@ export default function SmallChips() { return (
- M} label="Clickable" onClick={handleClick} /> + M} + label="Clickable" + onClick={handleClick} + /> } @@ -51,7 +56,13 @@ export default function SmallChips() { onDelete={handleDelete} deleteIcon={} /> - + M} @@ -70,7 +81,12 @@ export default function SmallChips() { onDelete={handleDelete} deleteIcon={} /> - + } diff --git a/docs/src/pages/components/container/FixedContainer.js b/docs/src/pages/components/container/FixedContainer.js index 4aeda75ba0d03b..76331f527140b5 100644 --- a/docs/src/pages/components/container/FixedContainer.js +++ b/docs/src/pages/components/container/FixedContainer.js @@ -8,7 +8,10 @@ export default function FixedContainer() { - + ); diff --git a/docs/src/pages/components/container/SimpleContainer.js b/docs/src/pages/components/container/SimpleContainer.js index dea58d8e902ac1..adc34924706f18 100644 --- a/docs/src/pages/components/container/SimpleContainer.js +++ b/docs/src/pages/components/container/SimpleContainer.js @@ -8,7 +8,10 @@ export default function SimpleContainer() { - + ); diff --git a/docs/src/pages/components/dialogs/AlertDialog.js b/docs/src/pages/components/dialogs/AlertDialog.js index 611e6631a93ef7..9ad7a21fbd6ee3 100644 --- a/docs/src/pages/components/dialogs/AlertDialog.js +++ b/docs/src/pages/components/dialogs/AlertDialog.js @@ -28,11 +28,13 @@ export default function AlertDialog() { aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > - {"Use Google's location service?"} + + {"Use Google's location service?"} + - Let Google help apps determine location. This means sending anonymous location data to - Google, even when no apps are running. + Let Google help apps determine location. This means sending + anonymous location data to Google, even when no apps are running. diff --git a/docs/src/pages/components/dialogs/AlertDialogSlide.js b/docs/src/pages/components/dialogs/AlertDialogSlide.js index c54bf4a505124e..776845c4d8e242 100644 --- a/docs/src/pages/components/dialogs/AlertDialogSlide.js +++ b/docs/src/pages/components/dialogs/AlertDialogSlide.js @@ -35,11 +35,13 @@ export default function AlertDialogSlide() { aria-labelledby="alert-dialog-slide-title" aria-describedby="alert-dialog-slide-description" > - {"Use Google's location service?"} + + {"Use Google's location service?"} + - Let Google help apps determine location. This means sending anonymous location data to - Google, even when no apps are running. + Let Google help apps determine location. This means sending + anonymous location data to Google, even when no apps are running. diff --git a/docs/src/pages/components/dialogs/ConfirmationDialog.js b/docs/src/pages/components/dialogs/ConfirmationDialog.js index 5c4bbe175faaa4..4069cb20ade440 100644 --- a/docs/src/pages/components/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/components/dialogs/ConfirmationDialog.js @@ -79,7 +79,12 @@ function ConfirmationDialogRaw(props) { onChange={handleChange} > {options.map((option) => ( - } label={option} /> + } + label={option} + /> ))} @@ -148,7 +153,10 @@ export default function ConfirmationDialog() { - + { {children} {onClose ? ( - + ) : null} @@ -64,23 +68,29 @@ export default function CustomizedDialogs() { - + Modal title - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, + dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta + ac consectetur ac, vestibulum at eros. - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor + auctor. - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Donec sed odio + dui. Donec ullamcorper nulla non metus auctor fringilla. diff --git a/docs/src/pages/components/dialogs/DraggableDialog.js b/docs/src/pages/components/dialogs/DraggableDialog.js index 5c437ed96a00a9..086a938aad65bd 100644 --- a/docs/src/pages/components/dialogs/DraggableDialog.js +++ b/docs/src/pages/components/dialogs/DraggableDialog.js @@ -10,7 +10,10 @@ import Draggable from 'react-draggable'; function PaperComponent(props) { return ( - + ); @@ -43,8 +46,8 @@ export default function DraggableDialog() { - To subscribe to this website, please enter your email address here. We will send updates - occasionally. + To subscribe to this website, please enter your email address here. + We will send updates occasionally. diff --git a/docs/src/pages/components/dialogs/FormDialog.js b/docs/src/pages/components/dialogs/FormDialog.js index 2a7a6b61e9b530..c1aa1f22dc57f6 100644 --- a/docs/src/pages/components/dialogs/FormDialog.js +++ b/docs/src/pages/components/dialogs/FormDialog.js @@ -23,12 +23,16 @@ export default function FormDialog() { - + Subscribe - To subscribe to this website, please enter your email address here. We will send updates - occasionally. + To subscribe to this website, please enter your email address here. + We will send updates occasionally. Open full-screen dialog - + - + @@ -64,7 +74,10 @@ export default function FullScreenDialog() { - + diff --git a/docs/src/pages/components/dialogs/MaxWidthDialog.js b/docs/src/pages/components/dialogs/MaxWidthDialog.js index c630595b59a95f..650ae40615f559 100644 --- a/docs/src/pages/components/dialogs/MaxWidthDialog.js +++ b/docs/src/pages/components/dialogs/MaxWidthDialog.js @@ -90,7 +90,9 @@ export default function MaxWidthDialog() { } + control={ + + } label="Full width" /> diff --git a/docs/src/pages/components/dialogs/ResponsiveDialog.js b/docs/src/pages/components/dialogs/ResponsiveDialog.js index 599d0d7cee70da..5b450aca868498 100644 --- a/docs/src/pages/components/dialogs/ResponsiveDialog.js +++ b/docs/src/pages/components/dialogs/ResponsiveDialog.js @@ -32,11 +32,13 @@ export default function ResponsiveDialog() { onClose={handleClose} aria-labelledby="responsive-dialog-title" > - {"Use Google's location service?"} + + {"Use Google's location service?"} + - Let Google help apps determine location. This means sending anonymous location data to - Google, even when no apps are running. + Let Google help apps determine location. This means sending + anonymous location data to Google, even when no apps are running. diff --git a/docs/src/pages/components/dialogs/SimpleDialog.js b/docs/src/pages/components/dialogs/SimpleDialog.js index 38b189941a6891..7b19e845e48da3 100644 --- a/docs/src/pages/components/dialogs/SimpleDialog.js +++ b/docs/src/pages/components/dialogs/SimpleDialog.js @@ -35,11 +35,19 @@ function SimpleDialog(props) { }; return ( - + Set backup account {emails.map((email) => ( - handleListItemClick(email)} key={email}> + handleListItemClick(email)} + key={email} + > @@ -49,7 +57,11 @@ function SimpleDialog(props) { ))} - handleListItemClick('addAccount')}> + handleListItemClick('addAccount')} + > @@ -88,7 +100,11 @@ export default function SimpleDialogDemo() { - +
); } diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js index 433727b27f6059..ed1dedcb8c2079 100644 --- a/docs/src/pages/components/dividers/MiddleDividers.js +++ b/docs/src/pages/components/dividers/MiddleDividers.js @@ -45,8 +45,8 @@ export default function MiddleDividers() { - Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the - hall. + Pinstriped cornflower blue cotton blouse takes you on a walk to the + park or just down the hall.
diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js index b29b3cf7beaa94..89ffe37d93bca0 100644 --- a/docs/src/pages/components/drawers/ClippedDrawer.js +++ b/docs/src/pages/components/drawers/ClippedDrawer.js @@ -63,7 +63,9 @@ export default function ClippedDrawer() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -72,7 +74,9 @@ export default function ClippedDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -82,27 +86,33 @@ export default function ClippedDrawer() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum - facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit - gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id - donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. - Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis - imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget - arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem - donec massa sapien faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla - facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac - tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat - consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed - vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In - hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et - tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin - nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas - accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js index 723bc2065ebd45..f636694001a3c2 100644 --- a/docs/src/pages/components/drawers/MiniDrawer.js +++ b/docs/src/pages/components/drawers/MiniDrawer.js @@ -136,14 +136,20 @@ export default function MiniDrawer() { >
- {theme.direction === 'rtl' ? : } + {theme.direction === 'rtl' ? ( + + ) : ( + + )}
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -152,7 +158,9 @@ export default function MiniDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -161,27 +169,33 @@ export default function MiniDrawer() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum - facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit - gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id - donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. - Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis - imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget - arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem - donec massa sapien faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla - facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac - tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat - consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed - vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In - hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et - tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin - nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas - accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.js b/docs/src/pages/components/drawers/PermanentDrawerLeft.js index b8a5303c259ffb..fe3070fb729937 100644 --- a/docs/src/pages/components/drawers/PermanentDrawerLeft.js +++ b/docs/src/pages/components/drawers/PermanentDrawerLeft.js @@ -65,7 +65,9 @@ export default function PermanentDrawerLeft() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -74,7 +76,9 @@ export default function PermanentDrawerLeft() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -83,27 +87,33 @@ export default function PermanentDrawerLeft() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum - facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit - gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id - donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. - Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis - imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget - arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem - donec massa sapien faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla - facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac - tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat - consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed - vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In - hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et - tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin - nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas - accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.js b/docs/src/pages/components/drawers/PermanentDrawerRight.js index 5045b9cd777d0e..5ba597b174a23c 100644 --- a/docs/src/pages/components/drawers/PermanentDrawerRight.js +++ b/docs/src/pages/components/drawers/PermanentDrawerRight.js @@ -55,27 +55,33 @@ export default function PermanentDrawerRight() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum - facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit - gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id - donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. - Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis - imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget - arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem - donec massa sapien faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla - facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac - tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat - consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed - vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In - hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et - tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin - nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas - accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a.
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -100,7 +108,9 @@ export default function PermanentDrawerRight() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.js b/docs/src/pages/components/drawers/PersistentDrawerLeft.js index b8acf88133c5d6..8dd75c44f41176 100644 --- a/docs/src/pages/components/drawers/PersistentDrawerLeft.js +++ b/docs/src/pages/components/drawers/PersistentDrawerLeft.js @@ -125,14 +125,20 @@ export default function PersistentDrawerLeft() { >
- {theme.direction === 'ltr' ? : } + {theme.direction === 'ltr' ? ( + + ) : ( + + )}
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -141,7 +147,9 @@ export default function PersistentDrawerLeft() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -154,27 +162,33 @@ export default function PersistentDrawerLeft() { >
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum - facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit - gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id - donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. - Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis - imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget - arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem - donec massa sapien faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla - facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac - tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat - consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed - vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In - hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et - tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin - nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas - accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/PersistentDrawerRight.js b/docs/src/pages/components/drawers/PersistentDrawerRight.js index bada510ed2c497..9f0ce805b47957 100644 --- a/docs/src/pages/components/drawers/PersistentDrawerRight.js +++ b/docs/src/pages/components/drawers/PersistentDrawerRight.js @@ -121,27 +121,33 @@ export default function PersistentDrawerRight() { >
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum - facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit - gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id - donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. - Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis - imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget - arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem - donec massa sapien faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla - facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac - tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat - consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed - vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In - hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et - tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin - nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas - accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a.
- {theme.direction === 'rtl' ? : } + {theme.direction === 'rtl' ? ( + + ) : ( + + )}
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -171,7 +183,9 @@ export default function PersistentDrawerRight() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js index 93d3231fc983a6..919bab8343c21a 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.js +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js @@ -69,7 +69,9 @@ function ResponsiveDrawer(props) { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -78,7 +80,9 @@ function ResponsiveDrawer(props) { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -86,7 +90,8 @@ function ResponsiveDrawer(props) {
); - const container = window !== undefined ? () => window().document.body : undefined; + const container = + window !== undefined ? () => window().document.body : undefined; return (
@@ -141,27 +146,33 @@ function ResponsiveDrawer(props) {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum - facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit - gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id - donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. - Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis - imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget - arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem - donec massa sapien faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus + dolor purus non enim praesent elementum facilisis leo vel. Risus at + ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum + quisque non tellus. Convallis convallis tellus id interdum velit + laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed + adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies + integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate + eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo + quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat + vivamus at augue. At augue eget arcu dictum varius duis at consectetur + lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien + faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla - facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac - tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat - consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed - vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In - hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et - tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin - nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas - accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est + ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar + elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse + sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat + mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis + risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas + purus viverra accumsan in. In hendrerit gravida rutrum quisque non + tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant + morbi tristique senectus et. Adipiscing elit duis tristique + sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis + eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla + posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js index 4dfc8434405bfd..4370d0f0d66378 100644 --- a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js +++ b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js @@ -30,7 +30,11 @@ export default function SwipeableTemporaryDrawer() { }); const toggleDrawer = (anchor, open) => (event) => { - if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { + if ( + event && + event.type === 'keydown' && + (event.key === 'Tab' || event.key === 'Shift') + ) { return; } @@ -49,7 +53,9 @@ export default function SwipeableTemporaryDrawer() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -58,7 +64,9 @@ export default function SwipeableTemporaryDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} diff --git a/docs/src/pages/components/drawers/TemporaryDrawer.js b/docs/src/pages/components/drawers/TemporaryDrawer.js index 2cadd9cca37ddb..6bf70eaaf12094 100644 --- a/docs/src/pages/components/drawers/TemporaryDrawer.js +++ b/docs/src/pages/components/drawers/TemporaryDrawer.js @@ -30,7 +30,10 @@ export default function TemporaryDrawer() { }); const toggleDrawer = (anchor, open) => (event) => { - if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { + if ( + event.type === 'keydown' && + (event.key === 'Tab' || event.key === 'Shift') + ) { return; } @@ -49,7 +52,9 @@ export default function TemporaryDrawer() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -58,7 +63,9 @@ export default function TemporaryDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - {index % 2 === 0 ? : } + + {index % 2 === 0 ? : } + ))} @@ -71,7 +78,11 @@ export default function TemporaryDrawer() { {['left', 'right', 'top', 'bottom'].map((anchor) => ( - + {list(anchor)} diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js index 235fbe8a7c0882..873ded1d0e0c15 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js @@ -19,10 +19,20 @@ export default function FloatingActionButtonSize() { return (
- + - + @@ -50,7 +60,12 @@ export default function FloatingActionButtonSize() { Extended - + Extended diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js index b85e43150e7c09..0a4744f9c3562d 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js @@ -34,8 +34,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.any.isRequired, - value: PropTypes.any.isRequired, + index: PropTypes.number.isRequired, + value: PropTypes.number.isRequired, }; function a11yProps(index) { @@ -142,11 +142,17 @@ export default function FloatingActionButtonZoom() { in={value === index} timeout={transitionDuration} style={{ - transitionDelay: `${value === index ? transitionDuration.exit : 0}ms`, + transitionDelay: `${ + value === index ? transitionDuration.exit : 0 + }ms`, }} unmountOnExit > - + {fab.icon} diff --git a/docs/src/pages/components/grid/ComplexGrid.js b/docs/src/pages/components/grid/ComplexGrid.js index 50eaf95bd79408..76cfd5bf5889de 100644 --- a/docs/src/pages/components/grid/ComplexGrid.js +++ b/docs/src/pages/components/grid/ComplexGrid.js @@ -35,7 +35,11 @@ export default function ComplexGrid() { - complex + complex diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js index 54872088b17a2f..1f1232807e3a99 100644 --- a/docs/src/pages/components/grid/InteractiveGrid.js +++ b/docs/src/pages/components/grid/InteractiveGrid.js @@ -56,7 +56,10 @@ export default function InteractiveGrid() { {`Cell ${value + 1}`} @@ -79,9 +82,21 @@ export default function InteractiveGrid() { setDirection(event.target.value); }} > - } label="row" /> - } label="row-reverse" /> - } label="column" /> + } + label="row" + /> + } + label="row-reverse" + /> + } + label="column" + /> } @@ -102,16 +117,36 @@ export default function InteractiveGrid() { setJustify(event.target.value); }} > - } label="flex-start" /> - } label="center" /> - } label="flex-end" /> + } + label="flex-start" + /> + } + label="center" + /> + } + label="flex-end" + /> } label="space-between" /> - } label="space-around" /> - } label="space-evenly" /> + } + label="space-around" + /> + } + label="space-evenly" + /> @@ -127,11 +162,31 @@ export default function InteractiveGrid() { setAlignItems(event.target.value); }} > - } label="flex-start" /> - } label="center" /> - } label="flex-end" /> - } label="stretch" /> - } label="baseline" /> + } + label="flex-start" + /> + } + label="center" + /> + } + label="flex-end" + /> + } + label="stretch" + /> + } + label="baseline" + /> diff --git a/docs/src/pages/components/image-list/AdvancedImageList.js b/docs/src/pages/components/image-list/AdvancedImageList.js index 3574808acf542e..1ad13eccf7a6b7 100644 --- a/docs/src/pages/components/image-list/AdvancedImageList.js +++ b/docs/src/pages/components/image-list/AdvancedImageList.js @@ -54,15 +54,22 @@ export default function AdvancedImageList() { return (
- + {itemData.map((item) => ( - + {item.title} + } diff --git a/docs/src/pages/components/image-list/AdvancedImageList.tsx b/docs/src/pages/components/image-list/AdvancedImageList.tsx index 9053edb6b29d61..c9461cf83351a8 100644 --- a/docs/src/pages/components/image-list/AdvancedImageList.tsx +++ b/docs/src/pages/components/image-list/AdvancedImageList.tsx @@ -56,7 +56,7 @@ export default function AdvancedImageList() { return (
- + {itemData.map((item) => ( {item.title} diff --git a/docs/src/pages/components/image-list/TitlebarImageList.js b/docs/src/pages/components/image-list/TitlebarImageList.js index 4177fc01e75ad4..17b8c5a20fc719 100644 --- a/docs/src/pages/components/image-list/TitlebarImageList.js +++ b/docs/src/pages/components/image-list/TitlebarImageList.js @@ -58,7 +58,10 @@ export default function TitlebarImageList() { title={item.title} subtitle={by: {item.author}} actionIcon={ - + } diff --git a/docs/src/pages/components/image-list/image-list.md b/docs/src/pages/components/image-list/image-list.md index 6db1cd00a8a076..c97eae1bf42536 100644 --- a/docs/src/pages/components/image-list/image-list.md +++ b/docs/src/pages/components/image-list/image-list.md @@ -32,8 +32,8 @@ One notable exception is a horizontally-scrolling, single-line image list of ima ## Advanced image list -This example demonstrates "featured" items, using the `rows` and `cols` props to adjust the size of the item, and the `padding` prop to adjust the spacing. -The items have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`. +This example demonstrates "featured" items, using the `rows` and `cols` props to adjust the size of the item, and the `gap` prop to adjust the spacing. +The items 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/lists/CheckboxList.js b/docs/src/pages/components/lists/CheckboxList.js index 2ef8bb1811cd1e..1872cdf3030626 100644 --- a/docs/src/pages/components/lists/CheckboxList.js +++ b/docs/src/pages/components/lists/CheckboxList.js @@ -40,7 +40,13 @@ export default function CheckboxList() { const labelId = `checkbox-list-label-${value}`; return ( - + setDense(event.target.checked)} /> + setDense(event.target.checked)} + /> } label="Enable dense" /> diff --git a/docs/src/pages/components/lists/SwitchListSecondary.js b/docs/src/pages/components/lists/SwitchListSecondary.js index d6a2238982c930..f2b758276c8a8d 100644 --- a/docs/src/pages/components/lists/SwitchListSecondary.js +++ b/docs/src/pages/components/lists/SwitchListSecondary.js @@ -36,7 +36,10 @@ export default function SwitchListSecondary() { }; return ( - Settings} className={classes.root}> + Settings} + className={classes.root} + > diff --git a/docs/src/pages/components/menus/ContextMenu.js b/docs/src/pages/components/menus/ContextMenu.js index b5296d581974ab..2c2cb170619f27 100644 --- a/docs/src/pages/components/menus/ContextMenu.js +++ b/docs/src/pages/components/menus/ContextMenu.js @@ -26,13 +26,15 @@ export default function ContextMenu() { return (
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit - amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi - finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada - ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis - finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet - facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse - lacinia tellus a libero volutpat maximus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum + purus, bibendum sit amet vulputate eget, porta semper ligula. Donec + bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed + dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam + quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, + quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus + finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan + metus vel maximus consequat. Suspendisse lacinia tellus a libero + volutpat maximus. - {options.map((option) => ( - + {option} ))} diff --git a/docs/src/pages/components/menus/MenuListComposition.js b/docs/src/pages/components/menus/MenuListComposition.js index 4effad0c7f67d9..d01d68e6d450cd 100644 --- a/docs/src/pages/components/menus/MenuListComposition.js +++ b/docs/src/pages/components/menus/MenuListComposition.js @@ -69,15 +69,28 @@ export default function MenuListComposition() { > Toggle Menu Grow - + {({ TransitionProps, placement }) => ( - + Profile My account Logout diff --git a/docs/src/pages/components/menus/MenuPopupState.js b/docs/src/pages/components/menus/MenuPopupState.js index 615d8667e141d7..b9d78abb263e55 100644 --- a/docs/src/pages/components/menus/MenuPopupState.js +++ b/docs/src/pages/components/menus/MenuPopupState.js @@ -9,7 +9,11 @@ export default function MenuPopupState() { {(popupState) => ( - diff --git a/docs/src/pages/components/menus/SimpleListMenu.js b/docs/src/pages/components/menus/SimpleListMenu.js index 1dd93c3deb67dd..09653b7879ee79 100644 --- a/docs/src/pages/components/menus/SimpleListMenu.js +++ b/docs/src/pages/components/menus/SimpleListMenu.js @@ -47,7 +47,10 @@ export default function SimpleListMenu() { aria-label="when device is locked" onClick={handleClickListItem} > - + - - A very long text that overflows + + A very long text that overflows + diff --git a/docs/src/pages/components/modal/ServerModal.js b/docs/src/pages/components/modal/ServerModal.js index ba6ddd854a5c9f..3d7885a848df99 100644 --- a/docs/src/pages/components/modal/ServerModal.js +++ b/docs/src/pages/components/modal/ServerModal.js @@ -47,7 +47,9 @@ export default function ServerModal() { >

Server-side modal

-

If you disable JavaScript, you will still see me.

+

+ If you disable JavaScript, you will still see me. +

diff --git a/docs/src/pages/components/modal/TransitionsModal.js b/docs/src/pages/components/modal/TransitionsModal.js index 5a990c35f917eb..39b71b70dd2c14 100644 --- a/docs/src/pages/components/modal/TransitionsModal.js +++ b/docs/src/pages/components/modal/TransitionsModal.js @@ -50,7 +50,9 @@ export default function TransitionsModal() {

Transition modal

-

react-transition-group animates me.

+

+ react-transition-group animates me. +

diff --git a/docs/src/pages/components/no-ssr/FrameDeferring.js b/docs/src/pages/components/no-ssr/FrameDeferring.js index 191e4e96490b94..9ab01554ff138b 100644 --- a/docs/src/pages/components/no-ssr/FrameDeferring.js +++ b/docs/src/pages/components/no-ssr/FrameDeferring.js @@ -11,7 +11,9 @@ const useStyles = makeStyles({ }); function LargeTree() { - return Array.from(new Array(5000)).map((_, index) => .); + return Array.from(new Array(5000)).map((_, index) => ( + . + )); } export default function FrameDeferring() { diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js index 1cc2ec165afb3c..df94d70a721157 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.js +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -17,7 +17,12 @@ export default function PaginationRanges() {
{/* Default ranges */} - +
); diff --git a/docs/src/pages/components/pagination/UsePagination.js b/docs/src/pages/components/pagination/UsePagination.js index 7300c86401809f..c06abc89cd419e 100644 --- a/docs/src/pages/components/pagination/UsePagination.js +++ b/docs/src/pages/components/pagination/UsePagination.js @@ -27,7 +27,11 @@ export default function UsePagination() { children = '…'; } else if (type === 'page') { children = ( - ); diff --git a/docs/src/pages/components/pickers/MaterialUIPickers.js b/docs/src/pages/components/pickers/MaterialUIPickers.js index 68cadce376d04f..b683dea2842c8e 100644 --- a/docs/src/pages/components/pickers/MaterialUIPickers.js +++ b/docs/src/pages/components/pickers/MaterialUIPickers.js @@ -10,7 +10,9 @@ import { export default function MaterialUIPickers() { // The first commit of Material-UI - const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54')); + const [selectedDate, setSelectedDate] = React.useState( + new Date('2014-08-18T21:11:54'), + ); const handleDateChange = (date) => { setSelectedDate(date); diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js index ff531218d3f98b..00ffbbbaca7315 100644 --- a/docs/src/pages/components/popover/PopoverPopupState.js +++ b/docs/src/pages/components/popover/PopoverPopupState.js @@ -10,7 +10,11 @@ export default function PopoverPopupState() { {(popupState) => (
- - - The content of the Popover. + + The content of the Popover. +
); diff --git a/docs/src/pages/components/popper/FakedReferencePopper.js b/docs/src/pages/components/popper/FakedReferencePopper.js index d978ee9e854ca1..9b8e709fb92098 100644 --- a/docs/src/pages/components/popper/FakedReferencePopper.js +++ b/docs/src/pages/components/popper/FakedReferencePopper.js @@ -29,7 +29,8 @@ export default function FakedReferencePopper() { return; } - const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect(); + const getBoundingClientRect = () => + selection.getRangeAt(0).getBoundingClientRect(); setOpen(true); setAnchorEl({ @@ -44,19 +45,29 @@ export default function FakedReferencePopper() { return (
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit - amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi - finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada - ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis - finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet - facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse - lacinia tellus a libero volutpat maximus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum + purus, bibendum sit amet vulputate eget, porta semper ligula. Donec + bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed + dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam + quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, + quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus + finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan + metus vel maximus consequat. Suspendisse lacinia tellus a libero + volutpat maximus. - + {({ TransitionProps }) => ( - The content of the Popper. + + The content of the Popper. + )} diff --git a/docs/src/pages/components/popper/PopperPopupState.js b/docs/src/pages/components/popper/PopperPopupState.js index 2ba20369d81976..1d3b6da4f6545b 100644 --- a/docs/src/pages/components/popper/PopperPopupState.js +++ b/docs/src/pages/components/popper/PopperPopupState.js @@ -20,14 +20,20 @@ export default function PopperPopupState() { {(popupState) => (
- {({ TransitionProps }) => ( - The content of the Popper. + + The content of the Popper. + )} diff --git a/docs/src/pages/components/popper/PositionedPopper.js b/docs/src/pages/components/popper/PositionedPopper.js index b3f7655f85c2a9..c4fda82e99ea80 100644 --- a/docs/src/pages/components/popper/PositionedPopper.js +++ b/docs/src/pages/components/popper/PositionedPopper.js @@ -34,7 +34,9 @@ export default function PositionedPopper() { {({ TransitionProps }) => ( - The content of the Popper. + + The content of the Popper. + )} diff --git a/docs/src/pages/components/progress/CircularDeterminate.js b/docs/src/pages/components/progress/CircularDeterminate.js index 46d191e544ce0f..bc1cbaa79a7af8 100644 --- a/docs/src/pages/components/progress/CircularDeterminate.js +++ b/docs/src/pages/components/progress/CircularDeterminate.js @@ -17,7 +17,9 @@ export default function CircularDeterminate() { React.useEffect(() => { const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); + setProgress((prevProgress) => + prevProgress >= 100 ? 0 : prevProgress + 10, + ); }, 800); return () => { diff --git a/docs/src/pages/components/progress/CircularIntegration.js b/docs/src/pages/components/progress/CircularIntegration.js index d0ffd41fadf0da..9941092329bad4 100644 --- a/docs/src/pages/components/progress/CircularIntegration.js +++ b/docs/src/pages/components/progress/CircularIntegration.js @@ -78,7 +78,9 @@ export default function CircularIntegration() { > {success ? : } - {loading && } + {loading && ( + + )}
- {loading && } + {loading && ( + + )}
); diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.js b/docs/src/pages/components/progress/CircularWithValueLabel.js index 15d90065e38cc2..ccb414814db64c 100644 --- a/docs/src/pages/components/progress/CircularWithValueLabel.js +++ b/docs/src/pages/components/progress/CircularWithValueLabel.js @@ -18,9 +18,11 @@ function CircularProgressWithLabel(props) { alignItems="center" justifyContent="center" > - {`${Math.round( - props.value, - )}%`} + {`${Math.round(props.value)}%`} ); @@ -30,6 +32,7 @@ CircularProgressWithLabel.propTypes = { /** * The value of the progress indicator for the determinate variant. * Value between 0 and 100. + * @default 0 */ value: PropTypes.number.isRequired, }; @@ -39,7 +42,9 @@ export default function CircularStatic() { React.useEffect(() => { const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); + setProgress((prevProgress) => + prevProgress >= 100 ? 0 : prevProgress + 10, + ); }, 800); return () => { clearInterval(timer); diff --git a/docs/src/pages/components/progress/CustomizedProgressBars.js b/docs/src/pages/components/progress/CustomizedProgressBars.js index cfafdf0f590f2d..44e2d95d71834e 100644 --- a/docs/src/pages/components/progress/CustomizedProgressBars.js +++ b/docs/src/pages/components/progress/CustomizedProgressBars.js @@ -9,7 +9,8 @@ const BorderLinearProgress = withStyles((theme) => ({ borderRadius: 5, }, colorPrimary: { - backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], + backgroundColor: + theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], }, bar: { borderRadius: 5, diff --git a/docs/src/pages/components/progress/LinearWithValueLabel.js b/docs/src/pages/components/progress/LinearWithValueLabel.js index cead8d1ec692ce..9411f8241c8cda 100644 --- a/docs/src/pages/components/progress/LinearWithValueLabel.js +++ b/docs/src/pages/components/progress/LinearWithValueLabel.js @@ -40,7 +40,9 @@ export default function LinearWithValueLabel() { React.useEffect(() => { const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress + 10)); + setProgress((prevProgress) => + prevProgress >= 100 ? 10 : prevProgress + 10, + ); }, 800); return () => { clearInterval(timer); diff --git a/docs/src/pages/components/radio-buttons/CustomizedRadios.js b/docs/src/pages/components/radio-buttons/CustomizedRadios.js index c703cf238c76c2..c089b6f1725eac 100644 --- a/docs/src/pages/components/radio-buttons/CustomizedRadios.js +++ b/docs/src/pages/components/radio-buttons/CustomizedRadios.js @@ -17,9 +17,11 @@ const useStyles = makeStyles({ borderRadius: '50%', width: 16, height: 16, - boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + boxShadow: + 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', backgroundColor: '#f5f8fa', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + backgroundImage: + 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '$root.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, @@ -34,7 +36,8 @@ const useStyles = makeStyles({ }, checkedIcon: { backgroundColor: '#137cbd', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', + backgroundImage: + 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', '&:before': { display: 'block', width: 16, @@ -68,10 +71,22 @@ export default function CustomizedRadios() { return ( Gender - - } label="Female" /> + + } + label="Female" + /> } label="Male" /> - } label="Other" /> + } + label="Other" + /> - + Pop quiz: Material-UI is... - - } label="The best!" /> - } label="The worst." /> + + } + label="The best!" + /> + } + label="The worst." + /> {helperText} - diff --git a/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js b/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js index 47f9820292ce2a..b10b4c2d430e74 100644 --- a/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js +++ b/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js @@ -28,7 +28,11 @@ export default function FormControlLabelPlacement() { label="Bottom" labelPlacement="bottom" /> - } label="End" /> + } + label="End" + /> ); diff --git a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js index fb8b88e3bbc700..e738714ac61acc 100644 --- a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js +++ b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js @@ -15,11 +15,21 @@ export default function RadioButtonsGroup() { return ( Gender - + } label="Female" /> } label="Male" /> } label="Other" /> - } label="(Disabled option)" /> + } + label="(Disabled option)" + /> ); diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js index 45158891678622..24bf10fe802721 100644 --- a/docs/src/pages/components/rating/HalfRating.js +++ b/docs/src/pages/components/rating/HalfRating.js @@ -18,7 +18,12 @@ export default function HalfRating() { return (
- +
); } diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js index 761a8b555c7345..7a33c7faa4fd7b 100644 --- a/docs/src/pages/components/rating/HoverRating.js +++ b/docs/src/pages/components/rating/HoverRating.js @@ -42,7 +42,9 @@ export default function HoverRating() { setHover(newHover); }} /> - {value !== null && {labels[hover !== -1 ? hover : value]}} + {value !== null && ( + {labels[hover !== -1 ? hover : value]} + )}
); } diff --git a/docs/src/pages/components/selects/DialogSelect.js b/docs/src/pages/components/selects/DialogSelect.js index 5744f2ada95e8b..3a613a01589fb7 100644 --- a/docs/src/pages/components/selects/DialogSelect.js +++ b/docs/src/pages/components/selects/DialogSelect.js @@ -42,7 +42,12 @@ export default function DialogSelect() { return (
- + Fill the form
diff --git a/docs/src/pages/components/selects/MultipleSelect.js b/docs/src/pages/components/selects/MultipleSelect.js index 937352d6fdbf27..8c0e6df9b7c35d 100644 --- a/docs/src/pages/components/selects/MultipleSelect.js +++ b/docs/src/pages/components/selects/MultipleSelect.js @@ -95,7 +95,11 @@ export default function MultipleSelect() { MenuProps={MenuProps} > {names.map((name) => ( - + {name} ))} @@ -140,7 +144,11 @@ export default function MultipleSelect() { MenuProps={MenuProps} > {names.map((name) => ( - + {name} ))} @@ -167,7 +175,11 @@ export default function MultipleSelect() { Placeholder {names.map((name) => ( - + {name} ))} diff --git a/docs/src/pages/components/skeleton/Facebook.js b/docs/src/pages/components/skeleton/Facebook.js index 330d72dc429cab..d6950bb3b7975f 100644 --- a/docs/src/pages/components/skeleton/Facebook.js +++ b/docs/src/pages/components/skeleton/Facebook.js @@ -30,7 +30,12 @@ function Media(props) { + ) : ( + ) : ( 'Ted' ) } - subheader={loading ? : '5 hours ago'} + subheader={ + loading ? ( + + ) : ( + '5 hours ago' + ) + } /> {loading ? ( @@ -67,7 +83,11 @@ function Media(props) { {loading ? ( - + ) : ( diff --git a/docs/src/pages/components/skeleton/YouTube.js b/docs/src/pages/components/skeleton/YouTube.js index 2776cda6b7f87a..82129d1646b5d0 100644 --- a/docs/src/pages/components/skeleton/YouTube.js +++ b/docs/src/pages/components/skeleton/YouTube.js @@ -40,7 +40,11 @@ function Media(props) { {(loading ? Array.from(new Array(3)) : data).map((item, index) => ( {item ? ( - {item.title} + {item.title} ) : ( )} @@ -50,7 +54,11 @@ function Media(props) { {item.title} - + {item.channel} diff --git a/docs/src/pages/components/slider/ContinuousSlider.js b/docs/src/pages/components/slider/ContinuousSlider.js index cd8ecd9ed0b56f..f304f7a8b597da 100644 --- a/docs/src/pages/components/slider/ContinuousSlider.js +++ b/docs/src/pages/components/slider/ContinuousSlider.js @@ -30,7 +30,11 @@ export default function ContinuousSlider() { - + diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index db0648b268ab5c..1a504dd4c37981 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -62,7 +62,8 @@ const IOSSlider = withStyles({ marginTop: -14, marginLeft: -14, '&:focus, &:hover, &$active': { - boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', + boxShadow: + '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { boxShadow: iOSBoxShadow, @@ -181,10 +182,19 @@ export default function CustomizedSlider() { return (
iOS - +
pretto.fr - +
Tooltip value label Airbnb (index === 0 ? 'Minimum price' : 'Maximum price')} + getAriaLabel={(index) => + index === 0 ? 'Minimum price' : 'Maximum price' + } defaultValue={[20, 40]} />
diff --git a/docs/src/pages/components/snackbars/IntegrationNotistack.js b/docs/src/pages/components/snackbars/IntegrationNotistack.js index 4b61cac3ceb88f..74c0727f2b3659 100644 --- a/docs/src/pages/components/snackbars/IntegrationNotistack.js +++ b/docs/src/pages/components/snackbars/IntegrationNotistack.js @@ -17,7 +17,9 @@ function MyApp() { return ( - + ); } diff --git a/docs/src/pages/components/snackbars/LongTextSnackbar.js b/docs/src/pages/components/snackbars/LongTextSnackbar.js index 1cb1212263e20c..ab398e3a8aa477 100644 --- a/docs/src/pages/components/snackbars/LongTextSnackbar.js +++ b/docs/src/pages/components/snackbars/LongTextSnackbar.js @@ -30,7 +30,10 @@ export default function LongTextSnackbar() { I love cheesecake. I love chocolate.' } /> - + - - - + + - - - + + ); diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.js b/docs/src/pages/components/snackbars/SimpleSnackbar.js index a4f5f1ff3aa7db..d2d067ef47ed8c 100644 --- a/docs/src/pages/components/snackbars/SimpleSnackbar.js +++ b/docs/src/pages/components/snackbars/SimpleSnackbar.js @@ -36,7 +36,12 @@ export default function SimpleSnackbar() { - + diff --git a/docs/src/pages/components/speed-dial/SpeedDials.js b/docs/src/pages/components/speed-dial/SpeedDials.js index 9d1c2a165a0dce..bf2d9c94942d89 100644 --- a/docs/src/pages/components/speed-dial/SpeedDials.js +++ b/docs/src/pages/components/speed-dial/SpeedDials.js @@ -73,7 +73,13 @@ export default function SpeedDials() { return (
} + control={ + + } label="Hidden" /> diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js index d546c499514469..cb9839a0a4cfb5 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.js +++ b/docs/src/pages/components/steppers/CustomizedSteppers.js @@ -69,7 +69,11 @@ function QontoStepIcon(props) { [classes.active]: active, })} > - {completed ? :
} + {completed ? ( + + ) : ( +
+ )}
); } @@ -77,10 +81,12 @@ function QontoStepIcon(props) { QontoStepIcon.propTypes = { /** * Whether this step is active. + * @default false */ active: PropTypes.bool, /** * Mark the step as completed. Is passed to child components. + * @default false */ completed: PropTypes.bool, }; @@ -157,10 +163,12 @@ function ColorlibStepIcon(props) { ColorlibStepIcon.propTypes = { /** * Whether this step is active. + * @default false */ active: PropTypes.bool, /** * Mark the step as completed. Is passed to child components. + * @default false */ completed: PropTypes.bool, /** @@ -225,14 +233,22 @@ export default function CustomizedSteppers() { ))} - }> + } + > {steps.map((label) => ( {label} ))} - }> + } + > {steps.map((label) => ( {label} @@ -251,9 +267,15 @@ export default function CustomizedSteppers() {
) : (
- {getStepContent(activeStep)} + + {getStepContent(activeStep)} +
- } backButton={ } diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js index 143f2510e5596b..e6bba2e9fad411 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js @@ -20,7 +20,11 @@ const useStyles = makeStyles((theme) => ({ })); function getSteps() { - return ['Select master blaster campaign settings', 'Create an ad group', 'Create an ad']; + return [ + 'Select master blaster campaign settings', + 'Create an ad group', + 'Create an ad', + ]; } function getStepContent(stepIndex) { @@ -65,12 +69,16 @@ export default function HorizontalLabelPositionBelowStepper() {
{activeStep === steps.length ? (
- All steps completed + + All steps completed +
) : (
- {getStepContent(activeStep)} + + {getStepContent(activeStep)} +
) : (
- {getStepContent(activeStep)} + + {getStepContent(activeStep)} +
- {isStepOptional(activeStep) && ( diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js index 9156d1890a9ed9..e43a99ac2e8908 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js @@ -96,7 +96,10 @@ export default function HorizontalNonLinearStepper() { {steps.map((label, index) => ( - + {label} @@ -112,9 +115,15 @@ export default function HorizontalNonLinearStepper() {
) : (
- {getStepContent(activeStep)} + + {getStepContent(activeStep)} +
- ))}
diff --git a/docs/src/pages/components/steppers/ProgressMobileStepper.js b/docs/src/pages/components/steppers/ProgressMobileStepper.js index 5785487d9e728a..1b1ba384dbefe1 100644 --- a/docs/src/pages/components/steppers/ProgressMobileStepper.js +++ b/docs/src/pages/components/steppers/ProgressMobileStepper.js @@ -35,12 +35,20 @@ export default function ProgressMobileStepper() { nextButton={ } backButton={ } diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js index 76b9a5aa0a6f61..0e6fe3ba5b4e9f 100644 --- a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js +++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js @@ -92,7 +92,11 @@ function SwipeableTextMobileStepper() { {tutorialSteps.map((step, index) => (
{Math.abs(activeStep - index) <= 2 ? ( - {step.label} + {step.label} ) : null}
))} @@ -103,14 +107,26 @@ function SwipeableTextMobileStepper() { variant="text" activeStep={activeStep} nextButton={ - } backButton={ } diff --git a/docs/src/pages/components/steppers/TextMobileStepper.js b/docs/src/pages/components/steppers/TextMobileStepper.js index 5f35381caa131f..1c63443aaac5be 100644 --- a/docs/src/pages/components/steppers/TextMobileStepper.js +++ b/docs/src/pages/components/steppers/TextMobileStepper.js @@ -86,14 +86,26 @@ export default function TextMobileStepper() { variant="text" activeStep={activeStep} nextButton={ - } backButton={ } diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js index 32ff2e0e92fc05..ee89e86712a011 100644 --- a/docs/src/pages/components/switches/CustomizedSwitches.js +++ b/docs/src/pages/components/switches/CustomizedSwitches.js @@ -122,18 +122,34 @@ export default function CustomizedSwitches() { return ( } + control={ + + } label="Custom color" /> } + control={ + + } label="iOS style" /> Off - + On diff --git a/docs/src/pages/components/switches/SwitchLabels.js b/docs/src/pages/components/switches/SwitchLabels.js index 4f39011c3860f5..ef31026618c12a 100644 --- a/docs/src/pages/components/switches/SwitchLabels.js +++ b/docs/src/pages/components/switches/SwitchLabels.js @@ -16,7 +16,13 @@ export default function SwitchLabels() { return ( } + control={ + + } label="Secondary" /> } label="Uncontrolled" /> } label="Disabled" /> - } label="Disabled" /> + } + label="Disabled" + /> ); } diff --git a/docs/src/pages/components/switches/Switches.js b/docs/src/pages/components/switches/Switches.js index 851b59eadbaa2a..48a2c04e96f949 100644 --- a/docs/src/pages/components/switches/Switches.js +++ b/docs/src/pages/components/switches/Switches.js @@ -28,7 +28,11 @@ export default function Switches() { /> - + Assign responsibility } + control={ + + } label="Gilad Gray" /> } + control={ + + } label="Jason Killian" /> } + control={ + + } label="Antoine Llorca" /> diff --git a/docs/src/pages/components/switches/SwitchesSize.js b/docs/src/pages/components/switches/SwitchesSize.js index 65f65dfa64c758..e271913579e021 100644 --- a/docs/src/pages/components/switches/SwitchesSize.js +++ b/docs/src/pages/components/switches/SwitchesSize.js @@ -13,7 +13,9 @@ export default function SwitchesSize() { return ( } + control={ + + } label="Small" /> - setOpen(!open)}> + setOpen(!open)} + > {open ? : } diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js index 6e4ed723d275dd..dd4a16544b47b4 100644 --- a/docs/src/pages/components/tables/CustomPaginationActionsTable.js +++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.js @@ -52,15 +52,27 @@ function TablePaginationActions(props) { > {theme.direction === 'rtl' ? : } - - {theme.direction === 'rtl' ? : } + + {theme.direction === 'rtl' ? ( + + ) : ( + + )} = Math.ceil(count / rowsPerPage) - 1} aria-label="next page" > - {theme.direction === 'rtl' ? : } + {theme.direction === 'rtl' ? ( + + ) : ( + + )} { setPage(newPage); diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 5d1732174b5b29..f3fe7a6db6e10a 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -68,7 +68,12 @@ function stableSort(array, comparator) { } const headCells = [ - { id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' }, + { + id: 'name', + numeric: false, + disablePadding: true, + label: 'Dessert (100g serving)', + }, { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' }, { id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' }, { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' }, @@ -76,7 +81,15 @@ const headCells = [ ]; function EnhancedTableHead(props) { - const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props; + const { + classes, + onSelectAllClick, + order, + orderBy, + numSelected, + rowCount, + onRequestSort, + } = props; const createSortHandler = (property) => (event) => { onRequestSort(event, property); }; @@ -159,11 +172,21 @@ const EnhancedTableToolbar = (props) => { })} > {numSelected > 0 ? ( - + {numSelected} selected ) : ( - + Nutrition )} @@ -272,7 +295,8 @@ export default function EnhancedTable() { const isSelected = (name) => selected.indexOf(name) !== -1; - const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); + const emptyRows = + rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); return (
@@ -317,7 +341,12 @@ export default function EnhancedTable() { inputProps={{ 'aria-labelledby': labelId }} /> - + {row.name} {row.calories} diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.js b/docs/src/pages/components/tables/ReactVirtualizedTable.js index 5a423298f03b7c..8b419b65044cd7 100644 --- a/docs/src/pages/components/tables/ReactVirtualizedTable.js +++ b/docs/src/pages/components/tables/ReactVirtualizedTable.js @@ -60,7 +60,11 @@ class MuiVirtualizedTable extends React.PureComponent { })} variant="body" style={{ height: rowHeight }} - align={(columnIndex != null && columns[columnIndex].numeric) || false ? 'right' : 'left'} + align={ + (columnIndex != null && columns[columnIndex].numeric) || false + ? 'right' + : 'left' + } > {cellData} @@ -73,7 +77,11 @@ class MuiVirtualizedTable extends React.PureComponent { return ( {({ height, width }) => ( diff --git a/docs/src/pages/components/tables/SpanningTable.js b/docs/src/pages/components/tables/SpanningTable.js index eb172345d20186..53addfa178f800 100644 --- a/docs/src/pages/components/tables/SpanningTable.js +++ b/docs/src/pages/components/tables/SpanningTable.js @@ -80,7 +80,9 @@ export default function SpanningTable() { Tax - {`${(TAX_RATE * 100).toFixed(0)} %`} + {`${(TAX_RATE * 100).toFixed( + 0, + )} %`} {ccyFormat(invoiceTaxes)} diff --git a/docs/src/pages/components/tables/StickyHeadTable.js b/docs/src/pages/components/tables/StickyHeadTable.js index c44606b55c0a2f..33a0aa386878df 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.js +++ b/docs/src/pages/components/tables/StickyHeadTable.js @@ -99,20 +99,24 @@ export default function StickyHeadTable() { - {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => { - return ( - - {columns.map((column) => { - const value = row[column.id]; - return ( - - {column.format && typeof value === 'number' ? column.format(value) : value} - - ); - })} - - ); - })} + {rows + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row) => { + return ( + + {columns.map((column) => { + const value = row[column.id]; + return ( + + {column.format && typeof value === 'number' + ? column.format(value) + : value} + + ); + })} + + ); + })} diff --git a/docs/src/pages/components/tabs/AccessibleTabs.js b/docs/src/pages/components/tabs/AccessibleTabs.js index b091b133496302..8769c3add9b46d 100644 --- a/docs/src/pages/components/tabs/AccessibleTabs.js +++ b/docs/src/pages/components/tabs/AccessibleTabs.js @@ -46,7 +46,11 @@ function DemoTabs(props) { > - + ); @@ -87,7 +91,11 @@ export default function AccessibleTabs() { Tabs where each tab needs to be selected manually - + Item One diff --git a/docs/src/pages/components/tabs/CustomizedTabs.js b/docs/src/pages/components/tabs/CustomizedTabs.js index 4092e10ccd6fac..3619a979cfb774 100644 --- a/docs/src/pages/components/tabs/CustomizedTabs.js +++ b/docs/src/pages/components/tabs/CustomizedTabs.js @@ -106,7 +106,11 @@ export default function CustomizedTabs() {
- + diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js index e1a1b2e5e27c34..9b677421563043 100644 --- a/docs/src/pages/components/tabs/FullWidthTabs.js +++ b/docs/src/pages/components/tabs/FullWidthTabs.js @@ -30,8 +30,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.any.isRequired, - value: PropTypes.any.isRequired, + index: PropTypes.number.isRequired, + value: PropTypes.number.isRequired, }; function a11yProps(index) { diff --git a/docs/src/pages/components/tabs/NavTabs.js b/docs/src/pages/components/tabs/NavTabs.js index 9c6a2bbc361f27..0ab6b511ec94c0 100644 --- a/docs/src/pages/components/tabs/NavTabs.js +++ b/docs/src/pages/components/tabs/NavTabs.js @@ -29,8 +29,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.any.isRequired, - value: PropTypes.any.isRequired, + index: PropTypes.number.isRequired, + value: PropTypes.number.isRequired, }; function a11yProps(index) { diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js index 79ffa21dc2d800..5d94d78220c9df 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; @@ -27,12 +26,6 @@ function TabPanel(props) { ); } -TabPanel.propTypes = { - children: PropTypes.node, - index: PropTypes.any.isRequired, - value: PropTypes.any.isRequired, -}; - function a11yProps(index) { return { id: `scrollable-auto-tab-${index}`, diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js index c739f70416fc76..1918cb74e1d0ec 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; @@ -34,12 +33,6 @@ function TabPanel(props) { ); } -TabPanel.propTypes = { - children: PropTypes.node, - index: PropTypes.any.isRequired, - value: PropTypes.any.isRequired, -}; - function a11yProps(index) { return { id: `scrollable-force-tab-${index}`, diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js index dbb8c34d2ace3b..85fabba898fe9e 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; @@ -34,12 +33,6 @@ function TabPanel(props) { ); } -TabPanel.propTypes = { - children: PropTypes.node, - index: PropTypes.any.isRequired, - value: PropTypes.any.isRequired, -}; - function a11yProps(index) { return { id: `scrollable-prevent-tab-${index}`, @@ -74,10 +67,18 @@ export default function ScrollableTabsButtonPrevent() { aria-label="scrollable prevent tabs example" > } aria-label="phone" {...a11yProps(0)} /> - } aria-label="favorite" {...a11yProps(1)} /> + } + aria-label="favorite" + {...a11yProps(1)} + /> } aria-label="person" {...a11yProps(2)} /> } aria-label="help" {...a11yProps(3)} /> - } aria-label="shopping" {...a11yProps(4)} /> + } + aria-label="shopping" + {...a11yProps(4)} + /> } aria-label="up" {...a11yProps(5)} /> } aria-label="down" {...a11yProps(6)} /> diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js index 670de0970ef7dd..7977107ee32196 100644 --- a/docs/src/pages/components/tabs/TabsWrappedLabel.js +++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js @@ -29,8 +29,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.any.isRequired, - value: PropTypes.any.isRequired, + index: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, }; function a11yProps(index) { @@ -58,7 +58,11 @@ export default function TabsWrappedLabel() { return (
- + - + - Some important helper text + + Some important helper text + Name @@ -56,11 +58,20 @@ export default function ComposedTextField() { Name - + Name - + ); diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.js b/docs/src/pages/components/text-fields/CustomizedInputBase.js index 260bfd30a15b6c..492a3f90d19025 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.js +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.js @@ -41,11 +41,19 @@ export default function CustomizedInputBase() { placeholder="Search Google Maps" inputProps={{ 'aria-label': 'search google maps' }} /> - + - + diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js index 07aaac51ac5818..9c1528cc586e9d 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.js +++ b/docs/src/pages/components/text-fields/CustomizedInputs.js @@ -91,7 +91,9 @@ const useStylesReddit = makeStyles((theme) => ({ function RedditTextField(props) { const classes = useStylesReddit(); - return ; + return ( + + ); } const useStyles = makeStyles((theme) => ({ @@ -132,7 +134,11 @@ export default function CustomizedInputs() { return (
- +
- - + + - + - + { inputRef(ref ? ref.inputElement : null); }} - mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} + mask={[ + '(', + /[1-9]/, + /\d/, + /\d/, + ')', + ' ', + /\d/, + /\d/, + /\d/, + '-', + /\d/, + /\d/, + /\d/, + /\d/, + ]} placeholderChar={'\u2000'} showMask /> @@ -81,7 +96,9 @@ export default function FormattedInputs() { return (
- react-text-mask + + react-text-mask + Kg, + startAdornment: ( + Kg + ), }} /> - + - Weight + + Weight + - Password + + Password + Kg, + startAdornment: ( + Kg + ), }} variant="filled" /> - + Weight - + Password Kg, + startAdornment: ( + Kg + ), }} variant="outlined" /> - + - Weight + + Weight + - - Password + + + Password + - With a start adornment + + With a start adornment + - - - - + + + + ); } diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js index 3b2e7dc2ecab3e..03197914df97f9 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.js +++ b/docs/src/pages/components/text-fields/StateTextFields.js @@ -21,8 +21,17 @@ export default function StateTextFields() { return (
- - + +
- - + +
- +
- + ; + return ( + + ); } diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js index b01e16caf8ff3f..3685288b9076ed 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js +++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js @@ -62,7 +62,11 @@ export default function ToggleButtonNotEmpty() {
- + diff --git a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js index 2dfba966848995..d4a08fb1266962 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js +++ b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js @@ -17,7 +17,12 @@ export default function ToggleButtonSizes() { return ( - + @@ -33,7 +38,12 @@ export default function ToggleButtonSizes() { - + @@ -49,7 +59,12 @@ export default function ToggleButtonSizes() { - + diff --git a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js index a50585cb284c3c..4b56491c6edd9f 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js +++ b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js @@ -15,7 +15,11 @@ export default function ToggleButtonsMultiple() { }; return ( - + diff --git a/docs/src/pages/components/toggle-button/VerticalToggleButtons.js b/docs/src/pages/components/toggle-button/VerticalToggleButtons.js index 180f4c0e9e2c4c..502669872e3c24 100644 --- a/docs/src/pages/components/toggle-button/VerticalToggleButtons.js +++ b/docs/src/pages/components/toggle-button/VerticalToggleButtons.js @@ -13,7 +13,12 @@ export default function VerticalToggleButtons() { }; return ( - + diff --git a/docs/src/pages/components/tooltips/TransitionsTooltips.js b/docs/src/pages/components/tooltips/TransitionsTooltips.js index 5e11c90949dac3..ce76b21eb76b33 100644 --- a/docs/src/pages/components/tooltips/TransitionsTooltips.js +++ b/docs/src/pages/components/tooltips/TransitionsTooltips.js @@ -10,7 +10,11 @@ export default function TransitionsTooltips() { - + diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.js b/docs/src/pages/components/transfer-list/SelectAllTransferList.js index 80251070eecb87..dbfc7a50444821 100644 --- a/docs/src/pages/components/transfer-list/SelectAllTransferList.js +++ b/docs/src/pages/components/transfer-list/SelectAllTransferList.js @@ -92,8 +92,13 @@ export default function TransferList() { avatar={ @@ -107,7 +112,12 @@ export default function TransferList() { const labelId = `transfer-list-all-item-${value}-label`; return ( - + + {customList('Choices', left)} diff --git a/docs/src/pages/components/transfer-list/TransferList.js b/docs/src/pages/components/transfer-list/TransferList.js index be5282befdd64a..82b85b37b46356 100644 --- a/docs/src/pages/components/transfer-list/TransferList.js +++ b/docs/src/pages/components/transfer-list/TransferList.js @@ -82,7 +82,12 @@ export default function TransferList() { const labelId = `transfer-list-item-${value}-label`; return ( - + + {customList(left)} diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js index 2f4a59c4989e49..363b4342aa9f0d 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.js +++ b/docs/src/pages/components/transitions/SimpleCollapse.js @@ -44,14 +44,20 @@ export default function SimpleCollapse() { - + - + diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js index ede6c30ca25508..bfc87dcb8d6f5e 100644 --- a/docs/src/pages/components/transitions/SimpleFade.js +++ b/docs/src/pages/components/transitions/SimpleFade.js @@ -44,7 +44,10 @@ export default function SimpleFade() { - + diff --git a/docs/src/pages/components/transitions/SimpleGrow.js b/docs/src/pages/components/transitions/SimpleGrow.js index f92492973b1a31..e1a372df0d7b9c 100644 --- a/docs/src/pages/components/transitions/SimpleGrow.js +++ b/docs/src/pages/components/transitions/SimpleGrow.js @@ -44,7 +44,10 @@ export default function SimpleGrow() { - + @@ -56,7 +59,10 @@ export default function SimpleGrow() { > - + diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js index 70bc6ef7b27e44..280e5e30782e59 100644 --- a/docs/src/pages/components/transitions/SimpleSlide.js +++ b/docs/src/pages/components/transitions/SimpleSlide.js @@ -46,7 +46,10 @@ export default function SimpleSlide() { - + diff --git a/docs/src/pages/components/transitions/SimpleZoom.js b/docs/src/pages/components/transitions/SimpleZoom.js index 04862fb571dd7b..12b73791b0fe0a 100644 --- a/docs/src/pages/components/transitions/SimpleZoom.js +++ b/docs/src/pages/components/transitions/SimpleZoom.js @@ -44,14 +44,23 @@ export default function SimpleZoom() { - + - + - + diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.js b/docs/src/pages/components/tree-view/CustomizedTreeView.js index ee10f7ca2338a7..02ce7967ed2cb0 100644 --- a/docs/src/pages/components/tree-view/CustomizedTreeView.js +++ b/docs/src/pages/components/tree-view/CustomizedTreeView.js @@ -27,7 +27,12 @@ function PlusSquare(props) { function CloseSquare(props) { return ( - + {/* tslint:disable-next-line: max-line-length */} @@ -37,7 +42,10 @@ function CloseSquare(props) { function TransitionComponent(props) { const style = useSpring({ from: { opacity: 0, transform: 'translate3d(20px,0,0)' }, - to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` }, + to: { + opacity: props.in ? 1 : 0, + transform: `translate3d(${props.in ? 0 : 20}px,0,0)`, + }, }); return ( @@ -65,7 +73,9 @@ const StyledTreeItem = withStyles((theme) => ({ paddingLeft: 18, borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`, }, -}))((props) => ); +}))((props) => ( + +)); const useStyles = makeStyles({ root: { diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js index 19d1101bf3d1b5..c789a46d516762 100644 --- a/docs/src/pages/components/tree-view/GmailTreeView.js +++ b/docs/src/pages/components/tree-view/GmailTreeView.js @@ -66,7 +66,14 @@ const useTreeItemStyles = makeStyles((theme) => ({ function StyledTreeItem(props) { const classes = useTreeItemStyles(); - const { labelText, labelIcon: LabelIcon, labelInfo, color, bgColor, ...other } = props; + const { + labelText, + labelIcon: LabelIcon, + labelInfo, + color, + bgColor, + ...other + } = props; return ( - subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur - subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur - body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam - dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos + blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur, neque doloribus, cupiditate numquam dignissimos laborum + fugiat deleniti? Eum quasi quidem quibusdam. - body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam - dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos + blanditiis tenetur unde suscipit, quam beatae rerum inventore + consectetur, neque doloribus, cupiditate numquam dignissimos laborum + fugiat deleniti? Eum quasi quidem quibusdam. button text diff --git a/docs/src/pages/components/typography/TypographyTheme.js b/docs/src/pages/components/typography/TypographyTheme.js index a78b985e28abee..1f2b5108129005 100644 --- a/docs/src/pages/components/typography/TypographyTheme.js +++ b/docs/src/pages/components/typography/TypographyTheme.js @@ -12,5 +12,9 @@ const useStyles = makeStyles((theme) => ({ export default function TypographyTheme() { const classes = useStyles(); - return
{"This div's text looks like that of a button."}
; + return ( +
+ {"This div's text looks like that of a button."} +
+ ); } diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.js b/docs/src/pages/components/use-media-query/ThemeHelper.js index 2c538a9005be3c..0391723897a8c4 100644 --- a/docs/src/pages/components/use-media-query/ThemeHelper.js +++ b/docs/src/pages/components/use-media-query/ThemeHelper.js @@ -1,5 +1,9 @@ import React from 'react'; -import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; +import { + createMuiTheme, + ThemeProvider, + useTheme, +} from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js index ce42a8c65cd478..393c83a27f882c 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.js +++ b/docs/src/pages/components/use-media-query/UseWidth.js @@ -1,5 +1,9 @@ import React from 'react'; -import { ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; +import { + ThemeProvider, + useTheme, + createMuiTheme, +} from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; /** diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.js b/docs/src/pages/customization/components/DynamicCSSVariables.js index 77c1706e4d7561..e15d0b73b7ff54 100644 --- a/docs/src/pages/customization/components/DynamicCSSVariables.js +++ b/docs/src/pages/customization/components/DynamicCSSVariables.js @@ -6,7 +6,8 @@ import Switch from '@material-ui/core/Switch'; const useStyles = makeStyles({ button: { - background: 'linear-gradient(45deg, var(--background-start) 30%, var(--background-end) 90%)', + background: + 'linear-gradient(45deg, var(--background-start) 30%, var(--background-end) 90%)', borderRadius: 3, border: 0, color: 'white', diff --git a/docs/src/pages/customization/theming/CustomStyles.js b/docs/src/pages/customization/theming/CustomStyles.js index 7f7b07eb90ed35..2caaacc64af3d6 100644 --- a/docs/src/pages/customization/theming/CustomStyles.js +++ b/docs/src/pages/customization/theming/CustomStyles.js @@ -1,6 +1,10 @@ import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; -import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; +import { + createMuiTheme, + makeStyles, + ThemeProvider, +} from '@material-ui/core/styles'; import { orange } from '@material-ui/core/colors'; const useStyles = makeStyles((theme) => ({ diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.js b/docs/src/pages/customization/typography/ResponsiveFontSizes.js index 23d8338fbfae3e..99d8ae9e08c990 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.js @@ -1,5 +1,9 @@ import React from 'react'; -import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles'; +import { + createMuiTheme, + responsiveFontSizes, + ThemeProvider, +} from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; let theme = createMuiTheme(); diff --git a/docs/src/pages/guides/composition/ListRouter.js b/docs/src/pages/guides/composition/ListRouter.js index 62a5cda98879e8..ba47ce6bf4461f 100644 --- a/docs/src/pages/guides/composition/ListRouter.js +++ b/docs/src/pages/guides/composition/ListRouter.js @@ -17,7 +17,10 @@ function ListItemLink(props) { const { icon, primary, to } = props; const renderLink = React.useMemo( - () => React.forwardRef((itemProps, ref) => ), + () => + React.forwardRef((itemProps, ref) => ( + + )), [to], ); @@ -51,7 +54,9 @@ export default function ListRouter() {
{({ location }) => ( - Current route: {location.pathname} + + Current route: {location.pathname} + )} diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index 4b09485b7163b3..009702fe08da24 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -10,7 +10,8 @@ export default function EmotionCSS() { css={css` background-color: #6772e5; color: #fff; - box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), + 0 1px 3px rgba(0, 0, 0, 0.08); padding: 7px 14px; &:hover { background-color: #5469d4; diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index 113fec183cbf07..afaea5beee6469 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -25,7 +25,8 @@ export default function EmotionTheme() { css={(theme) => css` background-color: ${theme.palette.primary.main}; color: #fff; - box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), + 0 1px 3px rgba(0, 0, 0, 0.08); padding: 4px 10px; font-size: 13px; &:hover { diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index 4bb731c9f9f2b7..f8ffad11c0ea8b 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -12,10 +12,14 @@ export default function Locales() { return (
- createMuiTheme(outerTheme, locales[locale])}> + createMuiTheme(outerTheme, locales[locale])} + > `${key.substring(0, 2)}-${key.substring(2, 4)}`} + getOptionLabel={(key) => + `${key.substring(0, 2)}-${key.substring(2, 4)}` + } style={{ width: 300 }} value={locale} disableClearable @@ -23,7 +27,12 @@ export default function Locales() { setLocale(newValue); }} renderInput={(params) => ( - + )} /> - + @@ -58,7 +63,11 @@ function Content(props) { /> - diff --git a/docs/src/pages/premium-themes/paperbase/Header.js b/docs/src/pages/premium-themes/paperbase/Header.js index 39a0a527af7797..e83cade2fa8df6 100644 --- a/docs/src/pages/premium-themes/paperbase/Header.js +++ b/docs/src/pages/premium-themes/paperbase/Header.js @@ -97,7 +97,12 @@ function Header(props) { - diff --git a/docs/src/pages/premium-themes/paperbase/Navigator.js b/docs/src/pages/premium-themes/paperbase/Navigator.js index f9f7bcf216e918..6cc19e9b0d3935 100644 --- a/docs/src/pages/premium-themes/paperbase/Navigator.js +++ b/docs/src/pages/premium-themes/paperbase/Navigator.js @@ -88,7 +88,9 @@ function Navigator(props) { return ( - + Paperbase diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index d70b8a4163f049..2b28c6551419ae 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js @@ -1,6 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { createMuiTheme, ThemeProvider, withStyles } from '@material-ui/core/styles'; +import { + createMuiTheme, + ThemeProvider, + withStyles, +} from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Hidden from '@material-ui/core/Hidden'; import Typography from '@material-ui/core/Typography'; diff --git a/docs/src/pages/styles/advanced/GlobalClassName.js b/docs/src/pages/styles/advanced/GlobalClassName.js index 4fdd1899e30f78..328eab88dd2baf 100644 --- a/docs/src/pages/styles/advanced/GlobalClassName.js +++ b/docs/src/pages/styles/advanced/GlobalClassName.js @@ -22,7 +22,11 @@ const StyledTextField = styled(TextField)` export default function GlobalClassName() { return ( - + ); } diff --git a/docs/src/pages/styles/basics/AdaptingHOC.js b/docs/src/pages/styles/basics/AdaptingHOC.js index 930e6a840c5b73..47cc617a9516f2 100644 --- a/docs/src/pages/styles/basics/AdaptingHOC.js +++ b/docs/src/pages/styles/basics/AdaptingHOC.js @@ -28,9 +28,6 @@ function MyButtonRaw(props) { } MyButtonRaw.propTypes = { - /** - * Override or extend the styles applied to the component. - */ classes: PropTypes.object.isRequired, color: PropTypes.oneOf(['blue', 'red']).isRequired, }; diff --git a/docs/src/pages/styles/basics/StressTest.js b/docs/src/pages/styles/basics/StressTest.js index e8703521ec0c5a..6a1ad4843eccf2 100644 --- a/docs/src/pages/styles/basics/StressTest.js +++ b/docs/src/pages/styles/basics/StressTest.js @@ -52,10 +52,17 @@ export default function StressTest() {
- +
- + - + CssProp diff --git a/docs/src/pages/system/basics/Demo.js b/docs/src/pages/system/basics/Demo.js index db049102bfa0a5..f20a3ef7715078 100644 --- a/docs/src/pages/system/basics/Demo.js +++ b/docs/src/pages/system/basics/Demo.js @@ -4,7 +4,9 @@ import NoSsr from '@material-ui/core/NoSsr'; import { createMuiTheme } from '@material-ui/core/styles'; import { palette, spacing, typography } from '@material-ui/system'; -const Box = styled.div`${palette}${spacing}${typography}`; +const Box = styled.div` + ${palette}${spacing}${typography} +`; // or import Box from '@material-ui/core/Box'; const theme = createMuiTheme(); diff --git a/docs/src/pages/system/basics/RealWorld.js b/docs/src/pages/system/basics/RealWorld.js index 561a2d5911b3e4..890d511d0f2912 100644 --- a/docs/src/pages/system/basics/RealWorld.js +++ b/docs/src/pages/system/basics/RealWorld.js @@ -20,7 +20,9 @@ export default function RealWorld() { - You have lost connection to the internet. This app is offline. + + You have lost connection to the internet. This app is offline. + diff --git a/docs/src/pages/system/display/Block.js b/docs/src/pages/system/display/Block.js index f1a26d4e69e0c2..5521bb0fcff01c 100644 --- a/docs/src/pages/system/display/Block.js +++ b/docs/src/pages/system/display/Block.js @@ -4,10 +4,22 @@ import Box from '@material-ui/core/Box'; export default function Block() { return (
- + block - + block
diff --git a/docs/src/pages/system/display/Inline.js b/docs/src/pages/system/display/Inline.js index fe3af1493576e1..bb0d225bbb6728 100644 --- a/docs/src/pages/system/display/Inline.js +++ b/docs/src/pages/system/display/Inline.js @@ -4,10 +4,22 @@ import Box from '@material-ui/core/Box'; export default function Inline() { return (
- + inline - + inline
diff --git a/docs/src/pages/system/display/TextOverflow.js b/docs/src/pages/system/display/TextOverflow.js index a2add7201139f5..a79b4a43e6aaae 100644 --- a/docs/src/pages/system/display/TextOverflow.js +++ b/docs/src/pages/system/display/TextOverflow.js @@ -4,7 +4,13 @@ import Box from '@material-ui/core/Box'; export default function TextOverflow() { return (
- + Text Overflow Clip. Text Overflow Clip. - + Visibility Visible - + Visibility Hidden
diff --git a/docs/src/pages/system/display/WhiteSpace.js b/docs/src/pages/system/display/WhiteSpace.js index 1c08c8674dc443..543326b89992ee 100644 --- a/docs/src/pages/system/display/WhiteSpace.js +++ b/docs/src/pages/system/display/WhiteSpace.js @@ -4,10 +4,20 @@ import Box from '@material-ui/core/Box'; export default function WhiteSpace() { return (
- + White Space Nowrap. White Space Nowrap. - + White Space Normal. White Space Normal.
diff --git a/docs/src/pages/system/flexbox/FlexDirection.js b/docs/src/pages/system/flexbox/FlexDirection.js index 560b1f15272fdd..2d596b7a3282a8 100644 --- a/docs/src/pages/system/flexbox/FlexDirection.js +++ b/docs/src/pages/system/flexbox/FlexDirection.js @@ -4,7 +4,13 @@ import Box from '@material-ui/core/Box'; export default function FlexDirection() { return (
- + Item 1 @@ -15,7 +21,13 @@ export default function FlexDirection() { Item 3 - + Item 1 diff --git a/docs/src/pages/system/flexbox/JustifyContent.js b/docs/src/pages/system/flexbox/JustifyContent.js index 6a39177439e871..d051c0bcc67318 100644 --- a/docs/src/pages/system/flexbox/JustifyContent.js +++ b/docs/src/pages/system/flexbox/JustifyContent.js @@ -4,7 +4,13 @@ import Box from '@material-ui/core/Box'; export default function JustifyContent() { return (
- + Item 1 @@ -15,7 +21,13 @@ export default function JustifyContent() { Item 1 - + Item 1 @@ -26,7 +38,13 @@ export default function JustifyContent() { Item 1 - + Item 1 diff --git a/docs/src/pages/system/sizing/Height.js b/docs/src/pages/system/sizing/Height.js index 97bde16cd5593f..f783ae2228b279 100644 --- a/docs/src/pages/system/sizing/Height.js +++ b/docs/src/pages/system/sizing/Height.js @@ -4,16 +4,40 @@ import Box from '@material-ui/core/Box'; export default function Height() { return ( - + Height 25% - + Height 50% - + Height 75% - + Height 100% diff --git a/docs/src/pages/system/typography/TextAlignment.js b/docs/src/pages/system/typography/TextAlignment.js index 0800bade22d47a..a374cfc00212d1 100644 --- a/docs/src/pages/system/typography/TextAlignment.js +++ b/docs/src/pages/system/typography/TextAlignment.js @@ -6,8 +6,8 @@ export default function TextAlignment() { return ( - Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. - Donec sed odio operae, eu vulputate felis rhoncus. + Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit + amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Left aligned text. diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts index 7d8740a1d47606..e6b9c16409f16a 100644 --- a/packages/material-ui/src/ImageList/ImageList.d.ts +++ b/packages/material-ui/src/ImageList/ImageList.d.ts @@ -5,7 +5,7 @@ export interface ImageListTypeMap

{ props: P & { cellHeight?: number | 'auto'; cols?: number; - spacing?: number; + gap?: number; }; defaultComponent: D; classKey: ImageListClassKey; diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index 33eced2e68d128..955af84a775b24 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -24,7 +24,7 @@ const ImageList = React.forwardRef(function ImageList(props, ref) { className, cols = 2, component: Component = 'ul', - spacing = 4, + gap = 4, style, ...other } = props; @@ -33,7 +33,7 @@ const ImageList = React.forwardRef(function ImageList(props, ref) { {React.Children.map(children, (child) => { @@ -58,8 +58,8 @@ const ImageList = React.forwardRef(function ImageList(props, ref) { return React.cloneElement(child, { style: { width: `${(100 / cols) * childCols}%`, - height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing, - padding: spacing / 2, + height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + gap, + padding: gap / 2, ...child.props.style, }, }); @@ -102,7 +102,7 @@ ImageList.propTypes = { /** * @ignore */ - spacing: PropTypes.number, + gap: PropTypes.number, /** * @ignore */ diff --git a/packages/material-ui/src/ImageList/ImageList.test.js b/packages/material-ui/src/ImageList/ImageList.test.js index 9f4d7f7da98348..b430115b633d59 100644 --- a/packages/material-ui/src/ImageList/ImageList.test.js +++ b/packages/material-ui/src/ImageList/ImageList.test.js @@ -103,10 +103,10 @@ describe('', () => { expect(wrapper.children().at(0).props().style.width).to.equal('25%'); }); - it('renders children and change spacing', () => { - const spacing = 10; + it('renders children and change gap', () => { + const gap = 10; const wrapper = shallow( - + {itemsData.map((item) => ( ', () => { ); expect(wrapper.find('.image-item').length).to.equal(2); - expect(wrapper.children().at(0).props().style.padding).to.equal(spacing / 2); + expect(wrapper.children().at(0).props().style.padding).to.equal(gap / 2); }); it('should render children and overwrite style', () => { From 481891c3a74766ecb2676c2e488c53031b7a9ec4 Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 15 Sep 2020 01:55:47 +0100 Subject: [PATCH 18/29] cellHeight -> rowHeight --- .../pages/components/image-list/AdvancedImageList.js | 2 +- .../components/image-list/AdvancedImageList.tsx | 2 +- .../pages/components/image-list/BasicImageList.js | 2 +- .../pages/components/image-list/BasicImageList.tsx | 2 +- .../pages/components/image-list/TitlebarImageList.js | 2 +- .../components/image-list/TitlebarImageList.tsx | 2 +- packages/material-ui/src/ImageList/ImageList.d.ts | 2 +- packages/material-ui/src/ImageList/ImageList.js | 6 +++--- packages/material-ui/src/ImageList/ImageList.test.js | 12 ++++++------ 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/src/pages/components/image-list/AdvancedImageList.js b/docs/src/pages/components/image-list/AdvancedImageList.js index 1ad13eccf7a6b7..5f75cbc405d5ff 100644 --- a/docs/src/pages/components/image-list/AdvancedImageList.js +++ b/docs/src/pages/components/image-list/AdvancedImageList.js @@ -54,7 +54,7 @@ export default function AdvancedImageList() { return (

- + {itemData.map((item) => ( - + {itemData.map((item) => ( {item.title} diff --git a/docs/src/pages/components/image-list/BasicImageList.js b/docs/src/pages/components/image-list/BasicImageList.js index 67b2563be3aa03..5cf29a6b8d7043 100644 --- a/docs/src/pages/components/image-list/BasicImageList.js +++ b/docs/src/pages/components/image-list/BasicImageList.js @@ -41,7 +41,7 @@ export default function BasicImageList() { return (
- + {itemData.map((item) => ( {item.title} diff --git a/docs/src/pages/components/image-list/BasicImageList.tsx b/docs/src/pages/components/image-list/BasicImageList.tsx index 26e4860378f15e..f39308d97d326b 100644 --- a/docs/src/pages/components/image-list/BasicImageList.tsx +++ b/docs/src/pages/components/image-list/BasicImageList.tsx @@ -43,7 +43,7 @@ export default function BasicImageList() { return (
- + {itemData.map((item) => ( {item.title} diff --git a/docs/src/pages/components/image-list/TitlebarImageList.js b/docs/src/pages/components/image-list/TitlebarImageList.js index 17b8c5a20fc719..8b810a2dfa4932 100644 --- a/docs/src/pages/components/image-list/TitlebarImageList.js +++ b/docs/src/pages/components/image-list/TitlebarImageList.js @@ -47,7 +47,7 @@ export default function TitlebarImageList() { return (
- + December diff --git a/docs/src/pages/components/image-list/TitlebarImageList.tsx b/docs/src/pages/components/image-list/TitlebarImageList.tsx index dc30762571f8f8..01f523c5825c6b 100644 --- a/docs/src/pages/components/image-list/TitlebarImageList.tsx +++ b/docs/src/pages/components/image-list/TitlebarImageList.tsx @@ -49,7 +49,7 @@ export default function TitlebarImageList() { return (
- + December diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts index e6b9c16409f16a..e75c5ca19db5b2 100644 --- a/packages/material-ui/src/ImageList/ImageList.d.ts +++ b/packages/material-ui/src/ImageList/ImageList.d.ts @@ -3,7 +3,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ImageListTypeMap

{ props: P & { - cellHeight?: number | 'auto'; + rowHeight?: number | 'auto'; cols?: number; gap?: number; }; diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index 955af84a775b24..a30deefa86da51 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -18,7 +18,7 @@ export const styles = { const ImageList = React.forwardRef(function ImageList(props, ref) { const { - cellHeight = 180, + rowHeight = 180, children, classes, className, @@ -58,7 +58,7 @@ const ImageList = React.forwardRef(function ImageList(props, ref) { return React.cloneElement(child, { style: { width: `${(100 / cols) * childCols}%`, - height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + gap, + height: rowHeight === 'auto' ? 'auto' : rowHeight * childRows + gap, padding: gap / 2, ...child.props.style, }, @@ -76,7 +76,7 @@ ImageList.propTypes = { /** * @ignore */ - cellHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), /** * @ignore */ diff --git a/packages/material-ui/src/ImageList/ImageList.test.js b/packages/material-ui/src/ImageList/ImageList.test.js index b430115b633d59..9bd8bddbb477b8 100644 --- a/packages/material-ui/src/ImageList/ImageList.test.js +++ b/packages/material-ui/src/ImageList/ImageList.test.js @@ -42,10 +42,10 @@ describe('', () => { }), ); - it('should render children and change cellHeight', () => { - const cellHeight = 250; + it('should render children and change rowHeight', () => { + const rowHeight = 250; const wrapper = shallow( - + {itemsData.map((item) => ( ', () => { ); expect(wrapper.find('.image-item').length).to.equal(2); - expect(wrapper.children().at(0).props().style.height).to.equal(cellHeight + 4); + expect(wrapper.children().at(0).props().style.height).to.equal(rowHeight + 4); }); it('renders children by default', () => { @@ -145,10 +145,10 @@ describe('', () => { expect(wrapper.props().style.backgroundColor).to.equal(style.backgroundColor); }); - describe('prop: cellHeight', () => { + describe('prop: rowHeight', () => { it('should accept auto as a property', () => { const wrapper = shallow( - +
, ); From 0d39555f4670668db71c20c799e35123642f4899 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 16 Sep 2020 00:09:16 +0100 Subject: [PATCH 19/29] titlePosition -> position --- .../components/image-list/AdvancedImageList.js | 2 +- .../components/image-list/AdvancedImageList.tsx | 2 +- .../src/ImageListItemBar/ImageListItemBar.d.ts | 6 +++--- .../src/ImageListItemBar/ImageListItemBar.js | 16 ++++++++-------- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/src/pages/components/image-list/AdvancedImageList.js b/docs/src/pages/components/image-list/AdvancedImageList.js index 5f75cbc405d5ff..6c9ab5c32c2be6 100644 --- a/docs/src/pages/components/image-list/AdvancedImageList.js +++ b/docs/src/pages/components/image-list/AdvancedImageList.js @@ -64,7 +64,7 @@ export default function AdvancedImageList() { {item.title} diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts index 4851a8ff2df0e7..1285c31b66fcbd 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts @@ -22,13 +22,13 @@ export interface ImageListItemBarProps extends StandardProps<{}, ImageListItemBa /** * Position of the title bar. */ - titlePosition?: 'top' | 'bottom'; + position?: 'top' | 'bottom'; } export type ImageListItemBarClassKey = | 'root' - | 'titlePositionBottom' - | 'titlePositionTop' + | 'positionBottom' + | 'positionTop' | 'rootSubtitle' | 'titleWrap' | 'titleWrapActionPosLeft' diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js index 79f1c1b0fa7c0a..dfff270349a075 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js @@ -15,12 +15,12 @@ export const styles = (theme) => ({ alignItems: 'center', fontFamily: theme.typography.fontFamily, }, - /* Styles applied to the root element if `titlePosition="bottom"`. */ - titlePositionBottom: { + /* Styles applied to the root element if `position="bottom"`. */ + positionBottom: { bottom: 0, }, - /* Styles applied to the root element if `titlePosition="top"`. */ - titlePositionTop: { + /* Styles applied to the root element if `position="top"`. */ + positionTop: { top: 0, }, /* Styles applied to the root element if a `subtitle` is provided. */ @@ -75,7 +75,7 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) className, subtitle, title, - titlePosition = 'bottom', + position = 'bottom', ...other } = props; @@ -86,8 +86,8 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) className={clsx( classes.root, { - [classes.titlePositionBottom]: titlePosition === 'bottom', - [classes.titlePositionTop]: titlePosition === 'top', + [classes.positionBottom]: position === 'bottom', + [classes.positionTop]: position === 'top', [classes.rootSubtitle]: subtitle, }, className, @@ -151,7 +151,7 @@ ImageListItemBar.propTypes = { /** * Position of the title bar. */ - titlePosition: PropTypes.oneOf(['bottom', 'top']), + position: PropTypes.oneOf(['bottom', 'top']), }; export default withStyles(styles, { name: 'MuiImageListItemBar' })(ImageListItemBar); From d44589b1e736c2076db9745ead2fbf2234f377f7 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 16 Sep 2020 00:35:14 +0100 Subject: [PATCH 20/29] deprecations --- docs/pages/api-docs/image-list-item-bar.md | 6 +-- docs/pages/api-docs/image-list-item.md | 3 ++ docs/pages/api-docs/image-list.md | 4 ++ .../material-ui/src/ImageList/ImageList.js | 37 +++++++++++++------ .../src/ImageListItem/ImageListItem.js | 10 ++--- .../src/ImageListItemBar/ImageListItemBar.js | 16 ++++++-- 6 files changed, 51 insertions(+), 25 deletions(-) diff --git a/docs/pages/api-docs/image-list-item-bar.md b/docs/pages/api-docs/image-list-item-bar.md index 06e04bb483a11a..07e6eb02b3c83d 100644 --- a/docs/pages/api-docs/image-list-item-bar.md +++ b/docs/pages/api-docs/image-list-item-bar.md @@ -31,9 +31,9 @@ The `MuiImageListItemBar` name can be used for providing [default props](/custom | actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the item itself). | | actionPosition | 'left'
| 'right' | 'right' | Position of secondary action IconButton. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| position | 'bottom'
| 'top' | 'bottom' | Position of the title bar. | | subtitle | node | | String or element serving as subtitle (support text). | | title | node | | Title to be displayed on item. | -| titlePosition | 'bottom'
| 'top' | 'bottom' | Position of the title bar. | The `ref` is forwarded to the root element. @@ -44,8 +44,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| | root | .MuiImageListItemBar-root | Styles applied to the root element. -| titlePositionBottom | .MuiImageListItemBar-titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`. -| titlePositionTop | .MuiImageListItemBar-titlePositionTop | Styles applied to the root element if `titlePosition="top"`. +| positionBottom | .MuiImageListItemBar-positionBottom | Styles applied to the root element if `position="bottom"`. +| positionTop | .MuiImageListItemBar-positionTop | Styles applied to the root element if `position="top"`. | rootSubtitle | .MuiImageListItemBar-rootSubtitle | Styles applied to the root element if a `subtitle` is provided. | titleWrap | .MuiImageListItemBar-titleWrap | Styles applied to the title and subtitle container element. | titleWrapActionPosLeft | .MuiImageListItemBar-titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`. diff --git a/docs/pages/api-docs/image-list-item.md b/docs/pages/api-docs/image-list-item.md index 9752b55b6a7aff..75c7ea7b720b08 100644 --- a/docs/pages/api-docs/image-list-item.md +++ b/docs/pages/api-docs/image-list-item.md @@ -28,8 +28,11 @@ The `MuiImageListItem` name can be used for providing [default props](/customiza | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| children | node | | While you can pass any node as children, the main use case is for an img. | | 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 item in number of grid columns. | | component | elementType | 'li' | The component used for the root node. Either a string to use a HTML element or a component. | +| rows | number | 1 | Height of the item in number of grid rows. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/image-list.md b/docs/pages/api-docs/image-list.md index e4c19687754ed2..04dd565772bebe 100644 --- a/docs/pages/api-docs/image-list.md +++ b/docs/pages/api-docs/image-list.md @@ -28,8 +28,12 @@ The `MuiImageList` name can be used for providing [default props](/customization | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| children* | node | | Items that will be in the image list. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| cols | number | 2 | Number of columns. | | component | elementType | 'ul' | The component used for the root node. Either a string to use a HTML element or a component. | +| gap | number | 4 | The gap between items in `px`. | +| rowHeight | number
| 'auto' | 180 | The height of one row in `px`. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index a30deefa86da51..e3c295f9e640a7 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -3,6 +3,7 @@ import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '../styles/withStyles'; +import deprecatedPropType from '../utils/deprecatedPropType'; export const styles = { /* Styles applied to the root element. */ @@ -18,17 +19,22 @@ export const styles = { const ImageList = React.forwardRef(function ImageList(props, ref) { const { - rowHeight = 180, + cellHeight, children, classes, className, cols = 2, component: Component = 'ul', - gap = 4, + gap: gapProp = 4, + rowHeight: rowHeightProp = 180, + spacing, style, ...other } = props; + const gap = spacing || gapProp; + const rowHeight = cellHeight || rowHeightProp; + return ( ({ /* Styles applied to the root element. */ @@ -75,10 +76,12 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) className, subtitle, title, - position = 'bottom', + position: positionProp = 'bottom', + titlePosition, ...other } = props; + const position = titlePosition || positionProp; const actionPos = actionIcon && actionPosition; return ( @@ -140,6 +143,10 @@ ImageListItemBar.propTypes = { * @ignore */ className: PropTypes.string, + /** + * Position of the title bar. + */ + position: PropTypes.oneOf(['bottom', 'top']), /** * String or element serving as subtitle (support text). */ @@ -149,9 +156,12 @@ ImageListItemBar.propTypes = { */ title: PropTypes.node, /** - * Position of the title bar. + * @ignore */ - position: PropTypes.oneOf(['bottom', 'top']), + titlePosition: deprecatedPropType( + PropTypes.oneOf(['bottom', 'top']), + 'Use the `position` prop instead.', + ), }; export default withStyles(styles, { name: 'MuiImageListItemBar' })(ImageListItemBar); From 7b3c1c8b37e0a90e6132e5070c6b5c294198d0ca Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 16 Sep 2020 01:03:57 +0100 Subject: [PATCH 21/29] prettier --- .../accordion/ActionsInAccordionSummary.js | 14 ++-- .../accordion/ControlledAccordions.js | 41 ++++------ .../accordion/CustomizedAccordions.js | 39 +++------- .../components/accordion/DetailedAccordion.js | 4 +- .../components/accordion/SimpleAccordion.js | 12 ++- docs/src/pages/components/alert/IconAlerts.js | 4 +- .../src/pages/components/app-bar/BackToTop.js | 4 +- .../pages/components/app-bar/BottomAppBar.js | 21 ++--- .../pages/components/app-bar/ButtonAppBar.js | 7 +- .../pages/components/app-bar/DenseAppBar.js | 7 +- .../pages/components/app-bar/MenuAppBar.js | 15 +--- .../components/app-bar/ProminentAppBar.js | 6 +- .../components/autocomplete/Asynchronous.js | 8 +- .../components/autocomplete/CheckboxesTags.js | 7 +- .../pages/components/autocomplete/ComboBox.js | 7 +- .../autocomplete/ControllableStates.js | 4 +- .../components/autocomplete/CountrySelect.js | 4 +- .../components/autocomplete/CustomizedHook.js | 3 +- .../autocomplete/DisabledOptions.js | 9 +-- .../pages/components/autocomplete/Filter.js | 11 +-- .../components/autocomplete/FixedTags.js | 10 +-- .../pages/components/autocomplete/FreeSolo.js | 10 +-- .../autocomplete/FreeSoloCreateOption.js | 13 +--- .../FreeSoloCreateOptionDialog.js | 21 ++--- .../components/autocomplete/GitHubLabel.js | 5 +- .../components/autocomplete/GoogleMaps.js | 19 +---- .../pages/components/autocomplete/Grouped.js | 11 +-- .../components/autocomplete/Highlights.js | 15 +--- .../components/autocomplete/LimitTags.js | 10 +-- .../components/autocomplete/Playground.js | 63 ++++----------- .../pages/components/autocomplete/Sizes.js | 45 ++--------- .../src/pages/components/autocomplete/Tags.js | 16 +--- .../autocomplete/UseAutocomplete.js | 3 +- .../components/autocomplete/Virtualize.js | 12 +-- .../pages/components/avatars/BadgeAvatars.js | 4 +- .../components/avatars/FallbackAvatars.js | 12 +-- .../pages/components/avatars/SizeAvatars.js | 12 +-- .../pages/components/badges/BadgeOverlap.js | 7 +- .../components/badges/BadgeVisibility.js | 8 +- .../LabelBottomNavigation.js | 30 ++----- .../breadcrumbs/ActiveLastBreadcrumb.js | 6 +- .../components/breadcrumbs/CustomSeparator.js | 23 +----- .../breadcrumbs/CustomizedBreadcrumbs.js | 7 +- .../components/breadcrumbs/IconBreadcrumbs.js | 7 +- .../breadcrumbs/RouterBreadcrumbs.js | 5 +- .../breadcrumbs/SimpleBreadcrumbs.js | 6 +- .../button-group/BasicButtonGroup.js | 12 +-- .../button-group/GroupSizesColors.js | 11 +-- .../components/button-group/SplitButton.js | 24 +----- .../pages/components/buttons/ButtonBase.js | 4 +- .../pages/components/buttons/ButtonSizes.js | 42 ++-------- .../components/buttons/CustomizedButtons.js | 20 +---- .../pages/components/buttons/UploadButtons.js | 13 +--- .../pages/components/cards/ImgMediaCard.js | 4 +- docs/src/pages/components/cards/MediaCard.js | 4 +- .../components/cards/MediaControlCard.js | 12 +-- .../pages/components/cards/OutlinedCard.js | 6 +- .../components/cards/RecipeReviewCard.js | 37 ++++----- docs/src/pages/components/cards/SimpleCard.js | 6 +- .../components/checkboxes/CheckboxLabels.js | 41 ++-------- .../pages/components/checkboxes/Checkboxes.js | 6 +- .../components/checkboxes/CheckboxesGroup.js | 39 ++-------- .../checkboxes/CustomizedCheckbox.js | 9 +-- docs/src/pages/components/chips/Chips.js | 6 +- docs/src/pages/components/chips/ChipsArray.js | 4 +- .../pages/components/chips/OutlinedChips.js | 15 +--- docs/src/pages/components/chips/SmallChips.js | 22 +----- .../components/container/FixedContainer.js | 5 +- .../components/container/SimpleContainer.js | 5 +- .../pages/components/dialogs/AlertDialog.js | 8 +- .../components/dialogs/AlertDialogSlide.js | 8 +- .../components/dialogs/ConfirmationDialog.js | 12 +-- .../components/dialogs/CustomizedDialogs.js | 28 +++---- .../components/dialogs/DraggableDialog.js | 9 +-- .../pages/components/dialogs/FormDialog.js | 10 +-- .../components/dialogs/FullScreenDialog.js | 19 +---- .../components/dialogs/MaxWidthDialog.js | 4 +- .../components/dialogs/ResponsiveDialog.js | 8 +- .../pages/components/dialogs/SimpleDialog.js | 24 +----- .../components/dividers/MiddleDividers.js | 4 +- .../pages/components/drawers/ClippedDrawer.js | 52 +++++-------- .../pages/components/drawers/MiniDrawer.js | 58 ++++++-------- .../components/drawers/PermanentDrawerLeft.js | 52 +++++-------- .../drawers/PermanentDrawerRight.js | 52 +++++-------- .../drawers/PersistentDrawerLeft.js | 58 ++++++-------- .../drawers/PersistentDrawerRight.js | 58 ++++++-------- .../components/drawers/ResponsiveDrawer.js | 55 ++++++------- .../drawers/SwipeableTemporaryDrawer.js | 14 +--- .../components/drawers/TemporaryDrawer.js | 19 +---- .../FloatingActionButtonSize.js | 21 +---- .../FloatingActionButtonZoom.js | 10 +-- docs/src/pages/components/grid/ComplexGrid.js | 6 +- .../pages/components/grid/InteractiveGrid.js | 78 ++++--------------- .../image-list/AdvancedImageList.js | 11 +-- .../image-list/TitlebarImageList.js | 5 +- .../pages/components/lists/CheckboxList.js | 8 +- .../pages/components/lists/InteractiveList.js | 5 +- .../components/lists/SwitchListSecondary.js | 5 +- .../src/pages/components/menus/ContextMenu.js | 16 ++-- docs/src/pages/components/menus/FadeMenu.js | 6 +- docs/src/pages/components/menus/LongMenu.js | 6 +- .../components/menus/MenuListComposition.js | 17 +--- .../pages/components/menus/MenuPopupState.js | 6 +- .../pages/components/menus/SimpleListMenu.js | 5 +- docs/src/pages/components/menus/SimpleMenu.js | 6 +- .../pages/components/menus/TypographyMenu.js | 4 +- .../src/pages/components/modal/ServerModal.js | 4 +- .../components/modal/TransitionsModal.js | 4 +- .../pages/components/no-ssr/FrameDeferring.js | 4 +- .../components/pagination/PaginationRanges.js | 7 +- .../components/pagination/UsePagination.js | 6 +- .../components/pickers/MaterialUIPickers.js | 4 +- .../components/popover/PopoverPopupState.js | 6 +- .../pages/components/popover/SimplePopover.js | 11 +-- .../components/popper/FakedReferencePopper.js | 31 +++----- .../components/popper/PopperPopupState.js | 10 +-- .../components/popper/PositionedPopper.js | 4 +- .../progress/CircularDeterminate.js | 4 +- .../progress/CircularIntegration.js | 8 +- .../progress/CircularWithValueLabel.js | 12 +-- .../progress/CustomizedProgressBars.js | 3 +- .../progress/LinearWithValueLabel.js | 4 +- .../radio-buttons/CustomizedRadios.js | 27 ++----- .../components/radio-buttons/ErrorRadios.js | 32 ++------ .../FormControlLabelPlacement.js | 6 +- .../radio-buttons/RadioButtonsGroup.js | 14 +--- .../src/pages/components/rating/HalfRating.js | 7 +- .../pages/components/rating/HoverRating.js | 4 +- .../pages/components/selects/DialogSelect.js | 7 +- .../components/selects/MultipleSelect.js | 18 +---- .../src/pages/components/skeleton/Facebook.js | 28 +------ docs/src/pages/components/skeleton/YouTube.js | 12 +-- .../components/slider/ContinuousSlider.js | 6 +- .../components/slider/CustomizedSlider.js | 20 +---- .../snackbars/IntegrationNotistack.js | 4 +- .../components/snackbars/LongTextSnackbar.js | 5 +- .../snackbars/PositionedSnackbar.js | 24 ++---- .../components/snackbars/SimpleSnackbar.js | 7 +- .../pages/components/speed-dial/SpeedDials.js | 8 +- .../components/steppers/CustomizedSteppers.js | 28 ++----- .../components/steppers/DotsMobileStepper.js | 12 +-- ...HorizontalLinearAlternativeLabelStepper.js | 14 +--- .../steppers/HorizontalLinearStepper.js | 14 +--- .../steppers/HorizontalNonLinearStepper.js | 25 ++---- .../steppers/ProgressMobileStepper.js | 12 +-- .../steppers/SwipeableTextMobileStepper.js | 24 +----- .../components/steppers/TextMobileStepper.js | 18 +---- .../components/switches/CustomizedSwitches.js | 22 +----- .../pages/components/switches/SwitchLabels.js | 14 +--- .../src/pages/components/switches/Switches.js | 6 +- .../components/switches/SwitchesGroup.js | 24 +----- .../pages/components/switches/SwitchesSize.js | 4 +- .../components/tables/CollapsibleTable.js | 6 +- .../tables/CustomPaginationActionsTable.js | 21 +---- .../pages/components/tables/EnhancedTable.js | 34 ++------ .../tables/ReactVirtualizedTable.js | 20 +---- .../pages/components/tables/SpanningTable.js | 4 +- .../components/tables/StickyHeadTable.js | 32 ++++---- .../pages/components/tabs/AccessibleTabs.js | 12 +-- .../pages/components/tabs/CustomizedTabs.js | 6 +- .../tabs/ScrollableTabsButtonPrevent.js | 12 +-- .../pages/components/tabs/TabsWrappedLabel.js | 6 +- .../components/text-fields/ColorTextFields.js | 6 +- .../text-fields/ComposedTextField.js | 17 +--- .../text-fields/CustomizedInputBase.js | 12 +-- .../text-fields/CustomizedInputs.js | 10 +-- .../text-fields/FormPropsTextFields.js | 28 +------ .../components/text-fields/FormattedInputs.js | 21 +---- .../components/text-fields/InputAdornments.js | 56 +++---------- .../components/text-fields/InputWithIcon.js | 4 +- .../pages/components/text-fields/Inputs.js | 22 +----- .../components/text-fields/StateTextFields.js | 13 +--- .../components/text-fields/TextFieldSizes.js | 20 +---- .../text-fields/ValidationTextFields.js | 7 +- .../textarea-autosize/MinHeightTextarea.js | 8 +- .../toggle-button/ToggleButtonNotEmpty.js | 6 +- .../toggle-button/ToggleButtonSizes.js | 21 +---- .../toggle-button/ToggleButtonsMultiple.js | 6 +- .../toggle-button/VerticalToggleButtons.js | 7 +- .../tooltips/TransitionsTooltips.js | 6 +- .../transfer-list/SelectAllTransferList.js | 24 +----- .../components/transfer-list/TransferList.js | 15 +--- .../components/transitions/SimpleCollapse.js | 10 +-- .../components/transitions/SimpleFade.js | 5 +- .../components/transitions/SimpleGrow.js | 10 +-- .../components/transitions/SimpleSlide.js | 5 +- .../components/transitions/SimpleZoom.js | 15 +--- .../tree-view/CustomizedTreeView.js | 11 +-- .../components/tree-view/GmailTreeView.js | 9 +-- docs/src/pages/components/typography/Types.js | 20 ++--- .../components/typography/TypographyTheme.js | 6 +- .../components/use-media-query/ThemeHelper.js | 6 +- .../components/use-media-query/UseWidth.js | 6 +- .../components/DynamicCSSVariables.js | 3 +- .../customization/theming/CustomStyles.js | 6 +- .../typography/ResponsiveFontSizes.js | 6 +- .../pages/guides/composition/ListRouter.js | 9 +-- .../guides/interoperability/EmotionCSS.js | 3 +- .../guides/interoperability/EmotionTheme.js | 3 +- docs/src/pages/guides/localization/Locales.js | 15 +--- .../pages/premium-themes/paperbase/Content.js | 13 +--- .../pages/premium-themes/paperbase/Header.js | 7 +- .../premium-themes/paperbase/Navigator.js | 4 +- .../premium-themes/paperbase/Paperbase.js | 6 +- .../pages/styles/advanced/GlobalClassName.js | 6 +- docs/src/pages/styles/basics/StressTest.js | 11 +-- docs/src/pages/system/basics/CssProp.js | 5 +- docs/src/pages/system/basics/RealWorld.js | 4 +- docs/src/pages/system/display/Block.js | 16 +--- docs/src/pages/system/display/Inline.js | 16 +--- docs/src/pages/system/display/TextOverflow.js | 8 +- docs/src/pages/system/display/Visibility.js | 16 +--- docs/src/pages/system/display/WhiteSpace.js | 14 +--- .../src/pages/system/flexbox/FlexDirection.js | 16 +--- .../pages/system/flexbox/JustifyContent.js | 24 +----- docs/src/pages/system/sizing/Height.js | 32 +------- .../pages/system/typography/TextAlignment.js | 4 +- 217 files changed, 701 insertions(+), 2400 deletions(-) diff --git a/docs/src/pages/components/accordion/ActionsInAccordionSummary.js b/docs/src/pages/components/accordion/ActionsInAccordionSummary.js index 866436bb982e0e..a074bea0cbaf69 100644 --- a/docs/src/pages/components/accordion/ActionsInAccordionSummary.js +++ b/docs/src/pages/components/accordion/ActionsInAccordionSummary.js @@ -36,8 +36,8 @@ export default function ActionsInAccordionSummary() { - The click event of the nested action will propagate up and expand - the accordion unless you explicitly stop it. + The click event of the nested action will propagate up and expand the accordion unless + you explicitly stop it. @@ -58,8 +58,8 @@ export default function ActionsInAccordionSummary() { - The focus event of the nested action will propagate up and also - focus the accordion unless you explicitly stop it. + The focus event of the nested action will propagate up and also focus the accordion + unless you explicitly stop it. @@ -80,9 +80,9 @@ export default function ActionsInAccordionSummary() { - If you forget to put an aria-label on the nested action, the label - of the action will also be included in the label of the parent - button that controls the accordion expansion. + If you forget to put an aria-label on the nested action, the label of the action will + also be included in the label of the parent button that controls the accordion + expansion. diff --git a/docs/src/pages/components/accordion/ControlledAccordions.js b/docs/src/pages/components/accordion/ControlledAccordions.js index e2d4bd6379c13b..f22b8d0564e45d 100644 --- a/docs/src/pages/components/accordion/ControlledAccordions.js +++ b/docs/src/pages/components/accordion/ControlledAccordions.js @@ -31,31 +31,23 @@ export default function ControlledAccordions() { return (

- + } aria-controls="panel1bh-content" id="panel1bh-header" > General settings - - I am an accordion - + I am an accordion - Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. - Aliquam eget maximus est, id dignissim quam. + Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget + maximus est, id dignissim quam. - + } aria-controls="panel2bh-content" @@ -68,16 +60,12 @@ export default function ControlledAccordions() { - Donec placerat, lectus sed mattis semper, neque lectus feugiat - lectus, varius pulvinar diam eros in elit. Pellentesque convallis - laoreet laoreet. + Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar + diam eros in elit. Pellentesque convallis laoreet laoreet. - + } aria-controls="panel3bh-content" @@ -90,15 +78,12 @@ export default function ControlledAccordions() { - Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer - sit amet egestas eros, vitae egestas augue. Duis vel est augue. + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, + vitae egestas augue. Duis vel est augue. - + } aria-controls="panel4bh-content" @@ -108,8 +93,8 @@ export default function ControlledAccordions() { - Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer - sit amet egestas eros, vitae egestas augue. Duis vel est augue. + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, + vitae egestas augue. Duis vel est augue. diff --git a/docs/src/pages/components/accordion/CustomizedAccordions.js b/docs/src/pages/components/accordion/CustomizedAccordions.js index 9afa155568e035..02f49cfc07d119 100644 --- a/docs/src/pages/components/accordion/CustomizedAccordions.js +++ b/docs/src/pages/components/accordion/CustomizedAccordions.js @@ -55,54 +55,39 @@ export default function CustomizedAccordions() { return (
- + Collapsible Group Item #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum - dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada - lacus ex, sit amet blandit leo lobortis eget. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - + Collapsible Group Item #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum - dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada - lacus ex, sit amet blandit leo lobortis eget. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - + Collapsible Group Item #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum - dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada - lacus ex, sit amet blandit leo lobortis eget. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. diff --git a/docs/src/pages/components/accordion/DetailedAccordion.js b/docs/src/pages/components/accordion/DetailedAccordion.js index 844d2775232e41..6b6aac58250067 100644 --- a/docs/src/pages/components/accordion/DetailedAccordion.js +++ b/docs/src/pages/components/accordion/DetailedAccordion.js @@ -61,9 +61,7 @@ export default function DetailedAccordion() { Location
- - Select trip destination - + Select trip destination
diff --git a/docs/src/pages/components/accordion/SimpleAccordion.js b/docs/src/pages/components/accordion/SimpleAccordion.js index af20634e2cbbfc..3dece0f807e0c7 100644 --- a/docs/src/pages/components/accordion/SimpleAccordion.js +++ b/docs/src/pages/components/accordion/SimpleAccordion.js @@ -31,8 +31,8 @@ export default function SimpleAccordion() { - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. @@ -46,8 +46,8 @@ export default function SimpleAccordion() { - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. @@ -57,9 +57,7 @@ export default function SimpleAccordion() { aria-controls="panel3a-content" id="panel3a-header" > - - Disabled Accordion - + Disabled Accordion
diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js index eddb972b2e1e39..d6e2be0f9352a7 100644 --- a/docs/src/pages/components/alert/IconAlerts.js +++ b/docs/src/pages/components/alert/IconAlerts.js @@ -21,9 +21,7 @@ export default function IconAlerts() { } severity="success"> This is a success alert — check it out! - }} - > + }}> This is a success alert — check it out! diff --git a/docs/src/pages/components/app-bar/BackToTop.js b/docs/src/pages/components/app-bar/BackToTop.js index d3fc49bef5cc62..5ac3757a8d74f9 100644 --- a/docs/src/pages/components/app-bar/BackToTop.js +++ b/docs/src/pages/components/app-bar/BackToTop.js @@ -33,9 +33,7 @@ function ScrollTop(props) { }); const handleClick = (event) => { - const anchor = (event.target.ownerDocument || document).querySelector( - '#back-to-top-anchor', - ); + const anchor = (event.target.ownerDocument || document).querySelector('#back-to-top-anchor'); if (anchor) { anchor.scrollIntoView({ behavior: 'smooth', block: 'center' }); diff --git a/docs/src/pages/components/app-bar/BottomAppBar.js b/docs/src/pages/components/app-bar/BottomAppBar.js index 0e793d89779587..aff556b916c8eb 100644 --- a/docs/src/pages/components/app-bar/BottomAppBar.js +++ b/docs/src/pages/components/app-bar/BottomAppBar.js @@ -22,8 +22,7 @@ const messages = [ { id: 1, primary: 'Brunch this week?', - secondary: - "I'll be in the neighbourhood this week. Let's grab a bite to eat", + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", person: '/static/images/avatar/5.jpg', }, { @@ -36,8 +35,7 @@ const messages = [ { id: 3, primary: 'Recipe to try', - secondary: - 'I am try out this new BBQ recipe, I think this might be amazing', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', person: '/static/images/avatar/2.jpg', }, { @@ -49,8 +47,7 @@ const messages = [ { id: 5, primary: "Doctor's Appointment", - secondary: - 'My appointment for the doctor was rescheduled for next Saturday.', + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', person: '/static/images/avatar/4.jpg', }, { @@ -113,16 +110,8 @@ export default function BottomAppBar() { {messages.map(({ id, primary, secondary, person }) => ( - {id === 1 && ( - - Today - - )} - {id === 3 && ( - - Yesterday - - )} + {id === 1 && Today} + {id === 3 && Yesterday} diff --git a/docs/src/pages/components/app-bar/ButtonAppBar.js b/docs/src/pages/components/app-bar/ButtonAppBar.js index 493fe43a9cc1ae..a597f2c9dc4b63 100644 --- a/docs/src/pages/components/app-bar/ButtonAppBar.js +++ b/docs/src/pages/components/app-bar/ButtonAppBar.js @@ -26,12 +26,7 @@ export default function ButtonAppBar() {
- + diff --git a/docs/src/pages/components/app-bar/DenseAppBar.js b/docs/src/pages/components/app-bar/DenseAppBar.js index bdb0d5aa640737..1804e7add08edc 100644 --- a/docs/src/pages/components/app-bar/DenseAppBar.js +++ b/docs/src/pages/components/app-bar/DenseAppBar.js @@ -22,12 +22,7 @@ export default function DenseAppBar() {
- + diff --git a/docs/src/pages/components/app-bar/MenuAppBar.js b/docs/src/pages/components/app-bar/MenuAppBar.js index da5bce33722fa8..55e28fdd855571 100644 --- a/docs/src/pages/components/app-bar/MenuAppBar.js +++ b/docs/src/pages/components/app-bar/MenuAppBar.js @@ -46,24 +46,13 @@ export default function MenuAppBar() {
- } + control={} label={auth ? 'Logout' : 'Login'} /> - + diff --git a/docs/src/pages/components/app-bar/ProminentAppBar.js b/docs/src/pages/components/app-bar/ProminentAppBar.js index c1fa49b8e0c106..4c3d0189dd997c 100644 --- a/docs/src/pages/components/app-bar/ProminentAppBar.js +++ b/docs/src/pages/components/app-bar/ProminentAppBar.js @@ -48,11 +48,7 @@ export default function ProminentAppBar() { - + diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js index f98bb586d00edb..9ff1deb9616c93 100644 --- a/docs/src/pages/components/autocomplete/Asynchronous.js +++ b/docs/src/pages/components/autocomplete/Asynchronous.js @@ -24,9 +24,7 @@ export default function Asynchronous() { } (async () => { - const response = await fetch( - 'https://country.register.gov.uk/records.json?page-size=5000', - ); + const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000'); await sleep(1e3); // For demo purposes. const countries = await response.json(); @@ -70,9 +68,7 @@ export default function Asynchronous() { ...params.InputProps, endAdornment: ( - {loading ? ( - - ) : null} + {loading ? : null} {params.InputProps.endAdornment} ), diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.js b/docs/src/pages/components/autocomplete/CheckboxesTags.js index 6ece079f803b2f..97e99d45740040 100644 --- a/docs/src/pages/components/autocomplete/CheckboxesTags.js +++ b/docs/src/pages/components/autocomplete/CheckboxesTags.js @@ -31,12 +31,7 @@ export default function CheckboxesTags() { )} style={{ width: 500 }} renderInput={(params) => ( - + )} /> ); diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js index 8a657e688ce3b0..76a88823916296 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.js +++ b/docs/src/pages/components/autocomplete/ComboBox.js @@ -10,9 +10,7 @@ export default function ComboBox() { options={top100Films} getOptionLabel={(option) => option.title} style={{ width: 300 }} - renderInput={(params) => ( - - )} + renderInput={(params) => } /> ); } @@ -72,8 +70,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/ControllableStates.js b/docs/src/pages/components/autocomplete/ControllableStates.js index 028179932394fd..23ac08fe5838b0 100644 --- a/docs/src/pages/components/autocomplete/ControllableStates.js +++ b/docs/src/pages/components/autocomplete/ControllableStates.js @@ -25,9 +25,7 @@ export default function ControllableStates() { id="controllable-states-demo" options={options} style={{ width: 300 }} - renderInput={(params) => ( - - )} + renderInput={(params) => } />
); diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js index d379ee8b17e56b..cc359fc2386e2d 100644 --- a/docs/src/pages/components/autocomplete/CountrySelect.js +++ b/docs/src/pages/components/autocomplete/CountrySelect.js @@ -10,9 +10,7 @@ function countryToFlag(isoCode) { return typeof String.fromCodePoint !== 'undefined' ? isoCode .toUpperCase() - .replace(/./g, (char) => - String.fromCodePoint(char.charCodeAt(0) + 127397), - ) + .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397)) : isoCode; } diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js index 7f3bb0fef8bd3b..c9d8e21166d4ed 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.js +++ b/docs/src/pages/components/autocomplete/CustomizedHook.js @@ -229,8 +229,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js index 0eac30c783d45b..2159c1455eb2d9 100644 --- a/docs/src/pages/components/autocomplete/DisabledOptions.js +++ b/docs/src/pages/components/autocomplete/DisabledOptions.js @@ -8,9 +8,7 @@ export default function DisabledOptions() { - option === timeSlots[0] || option === timeSlots[2] - } + getOptionDisabled={(option) => option === timeSlots[0] || option === timeSlots[2]} style={{ width: 300 }} renderInput={(params) => ( @@ -21,8 +19,5 @@ export default function DisabledOptions() { // One time slot every 30 minutes. const timeSlots = Array.from(new Array(24 * 2)).map( - (_, index) => - `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${ - index % 2 === 0 ? '00' : '30' - }`, + (_, index) => `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${index % 2 === 0 ? '00' : '30'}`, ); diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js index 03d71480d9bacd..2effd521928c1e 100644 --- a/docs/src/pages/components/autocomplete/Filter.js +++ b/docs/src/pages/components/autocomplete/Filter.js @@ -1,9 +1,7 @@ /* eslint-disable no-use-before-define */ import React from 'react'; import TextField from '@material-ui/core/TextField'; -import Autocomplete, { - createFilterOptions, -} from '@material-ui/lab/Autocomplete'; +import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete'; const filterOptions = createFilterOptions({ matchFrom: 'start', @@ -18,9 +16,7 @@ export default function Filter() { getOptionLabel={(option) => option.title} filterOptions={filterOptions} style={{ width: 300 }} - renderInput={(params) => ( - - )} + renderInput={(params) => } /> ); } @@ -80,8 +76,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js index bf61bcc39eaf18..2999d1af55b833 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.js +++ b/docs/src/pages/components/autocomplete/FixedTags.js @@ -32,12 +32,7 @@ export default function FixedTags() { } style={{ width: 500 }} renderInput={(params) => ( - + )} /> ); @@ -98,8 +93,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js index c23133d28aa0c6..39ba501c4dd29a 100644 --- a/docs/src/pages/components/autocomplete/FreeSolo.js +++ b/docs/src/pages/components/autocomplete/FreeSolo.js @@ -11,12 +11,7 @@ export default function FreeSolo() { freeSolo options={top100Films.map((option) => option.title)} renderInput={(params) => ( - + )} /> ( - + )} /> ); @@ -126,8 +120,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js index 6b00bb17bea6e0..de2eb00636fa66 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -7,9 +7,7 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogActions from '@material-ui/core/DialogActions'; import Button from '@material-ui/core/Button'; -import Autocomplete, { - createFilterOptions, -} from '@material-ui/lab/Autocomplete'; +import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete'; const filter = createFilterOptions(); @@ -99,11 +97,7 @@ export default function FreeSoloCreateOptionDialog() { )} /> - + Add a new film @@ -115,9 +109,7 @@ export default function FreeSoloCreateOptionDialog() { margin="dense" id="name" value={dialogValue.title} - onChange={(event) => - setDialogValue({ ...dialogValue, title: event.target.value }) - } + onChange={(event) => setDialogValue({ ...dialogValue, title: event.target.value })} label="title" type="text" /> @@ -125,9 +117,7 @@ export default function FreeSoloCreateOptionDialog() { margin="dense" id="name" value={dialogValue.year} - onChange={(event) => - setDialogValue({ ...dialogValue, year: event.target.value }) - } + onChange={(event) => setDialogValue({ ...dialogValue, year: event.target.value })} label="year" type="number" /> @@ -201,8 +191,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js index c9c072f96f5647..2f1c309bd48db3 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.js +++ b/docs/src/pages/components/autocomplete/GitHubLabel.js @@ -198,10 +198,7 @@ export default function GitHubLabel() { className={classes.iconSelected} style={{ visibility: selected ? 'visible' : 'hidden' }} /> - +
{option.name}
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js index f28f9032a47015..88d13c9656bba4 100644 --- a/docs/src/pages/components/autocomplete/GoogleMaps.js +++ b/docs/src/pages/components/autocomplete/GoogleMaps.js @@ -96,9 +96,7 @@ export default function GoogleMaps() { - typeof option === 'string' ? option : option.description - } + getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)} filterOptions={(x) => x} options={options} autoComplete @@ -113,16 +111,10 @@ export default function GoogleMaps() { setInputValue(newInputValue); }} renderInput={(params) => ( - + )} renderOption={(option) => { - const matches = - option.structured_formatting.main_text_matched_substrings; + const matches = option.structured_formatting.main_text_matched_substrings; const parts = parse( option.structured_formatting.main_text, matches.map((match) => [match.offset, match.offset + match.length]), @@ -135,10 +127,7 @@ export default function GoogleMaps() { {parts.map((part, index) => ( - + {part.text} ))} diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js index 1332887425b8e9..dfe3722853ef98 100644 --- a/docs/src/pages/components/autocomplete/Grouped.js +++ b/docs/src/pages/components/autocomplete/Grouped.js @@ -15,15 +15,11 @@ export default function Grouped() { return ( -b.firstLetter.localeCompare(a.firstLetter), - )} + options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))} groupBy={(option) => option.firstLetter} getOptionLabel={(option) => option.title} style={{ width: 300 }} - renderInput={(params) => ( - - )} + renderInput={(params) => } /> ); } @@ -83,8 +79,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js index 86c8bc8c34012b..f8a4e4cf9a586d 100644 --- a/docs/src/pages/components/autocomplete/Highlights.js +++ b/docs/src/pages/components/autocomplete/Highlights.js @@ -13,12 +13,7 @@ export default function Highlights() { options={top100Films} getOptionLabel={(option) => option.title} renderInput={(params) => ( - + )} renderOption={(option, { inputValue }) => { const matches = match(option.title, inputValue); @@ -27,10 +22,7 @@ export default function Highlights() { return (
{parts.map((part, index) => ( - + {part.text} ))} @@ -96,8 +88,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/LimitTags.js b/docs/src/pages/components/autocomplete/LimitTags.js index 8efd2bdf1bcf26..b0e41010b8db8f 100644 --- a/docs/src/pages/components/autocomplete/LimitTags.js +++ b/docs/src/pages/components/autocomplete/LimitTags.js @@ -26,12 +26,7 @@ export default function LimitTags() { getOptionLabel={(option) => option.title} defaultValue={[top100Films[13], top100Films[12], top100Films[11]]} renderInput={(params) => ( - + )} />
@@ -93,8 +88,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index 19a941da9de666..50005bb6b06075 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/docs/src/pages/components/autocomplete/Playground.js @@ -21,9 +21,7 @@ export default function Playground() { {...defaultProps} id="debug" debug - renderInput={(params) => ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> { setValue(newValue); }} - renderInput={(params) => ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } /> ( - - )} + renderInput={(params) => } />
); @@ -215,8 +185,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/Sizes.js b/docs/src/pages/components/autocomplete/Sizes.js index 358857380ec050..d93e3430f6b579 100644 --- a/docs/src/pages/components/autocomplete/Sizes.js +++ b/docs/src/pages/components/autocomplete/Sizes.js @@ -26,12 +26,7 @@ export default function Sizes() { getOptionLabel={(option) => option.title} defaultValue={top100Films[13]} renderInput={(params) => ( - + )} /> option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( - + )} /> option.title} defaultValue={top100Films[13]} renderInput={(params) => ( - + )} /> option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( - + )} /> ( - + )} /> ( - + )} />
@@ -191,8 +161,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js index 94f4e7970e261f..40e0fc547e94a4 100644 --- a/docs/src/pages/components/autocomplete/Tags.js +++ b/docs/src/pages/components/autocomplete/Tags.js @@ -58,20 +58,11 @@ export default function Tags() { freeSolo renderTags={(value, getTagProps) => value.map((option, index) => ( - + )) } renderInput={(params) => ( - + )} />
@@ -133,8 +124,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.js b/docs/src/pages/components/autocomplete/UseAutocomplete.js index 644dc7986f5830..2653610ed1b1b9 100644 --- a/docs/src/pages/components/autocomplete/UseAutocomplete.js +++ b/docs/src/pages/components/autocomplete/UseAutocomplete.js @@ -122,8 +122,7 @@ const top100Films = [ { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, { - title: - 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964, }, { title: 'The Great Dictator', year: 1940 }, diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.js index bd18c10440b4cb..03c876f31e3ece 100644 --- a/docs/src/pages/components/autocomplete/Virtualize.js +++ b/docs/src/pages/components/autocomplete/Virtualize.js @@ -38,10 +38,7 @@ function useResetCache(data) { } // Adapter for react-window -const ListboxComponent = React.forwardRef(function ListboxComponent( - props, - ref, -) { +const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) { const { children, ...other } = props; const itemData = React.Children.toArray(children); const theme = useTheme(); @@ -92,8 +89,7 @@ ListboxComponent.propTypes = { }; function random(length) { - const characters = - 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i < length; i += 1) { @@ -137,9 +133,7 @@ export default function Virtualize() { renderGroup={renderGroup} options={OPTIONS} groupBy={(option) => option[0].toUpperCase()} - renderInput={(params) => ( - - )} + renderInput={(params) => } renderOption={(option) => {option}} /> ); diff --git a/docs/src/pages/components/avatars/BadgeAvatars.js b/docs/src/pages/components/avatars/BadgeAvatars.js index 38fe4f78aa8bcb..e047ffbf3584d1 100644 --- a/docs/src/pages/components/avatars/BadgeAvatars.js +++ b/docs/src/pages/components/avatars/BadgeAvatars.js @@ -70,9 +70,7 @@ export default function BadgeAvatars() { vertical: 'bottom', horizontal: 'right', }} - badgeContent={ - - } + badgeContent={} > diff --git a/docs/src/pages/components/avatars/FallbackAvatars.js b/docs/src/pages/components/avatars/FallbackAvatars.js index 891043714c2d65..dbaa10c1273e99 100644 --- a/docs/src/pages/components/avatars/FallbackAvatars.js +++ b/docs/src/pages/components/avatars/FallbackAvatars.js @@ -21,18 +21,10 @@ export default function FallbackAvatars() { return (
- + B - +
); diff --git a/docs/src/pages/components/avatars/SizeAvatars.js b/docs/src/pages/components/avatars/SizeAvatars.js index f19e8f94d110db..2312e92a7a78c2 100644 --- a/docs/src/pages/components/avatars/SizeAvatars.js +++ b/docs/src/pages/components/avatars/SizeAvatars.js @@ -24,17 +24,9 @@ export default function ImageAvatars() { return (
- + - +
); } diff --git a/docs/src/pages/components/badges/BadgeOverlap.js b/docs/src/pages/components/badges/BadgeOverlap.js index 032564e56b0a0e..a5c4bea79c1a38 100644 --- a/docs/src/pages/components/badges/BadgeOverlap.js +++ b/docs/src/pages/components/badges/BadgeOverlap.js @@ -36,12 +36,7 @@ export default function BadgeOverlap() { {circle} - + {circle}
diff --git a/docs/src/pages/components/badges/BadgeVisibility.js b/docs/src/pages/components/badges/BadgeVisibility.js index 2d836fb26a8245..e18744432877a6 100644 --- a/docs/src/pages/components/badges/BadgeVisibility.js +++ b/docs/src/pages/components/badges/BadgeVisibility.js @@ -61,13 +61,7 @@ export default function BadgeVisibility() { - } + control={} label="Show Badge" />
diff --git a/docs/src/pages/components/bottom-navigation/LabelBottomNavigation.js b/docs/src/pages/components/bottom-navigation/LabelBottomNavigation.js index 87c24173564d8f..3d9bce5d507429 100644 --- a/docs/src/pages/components/bottom-navigation/LabelBottomNavigation.js +++ b/docs/src/pages/components/bottom-navigation/LabelBottomNavigation.js @@ -22,31 +22,11 @@ export default function LabelBottomNavigation() { }; return ( - - } - /> - } - /> - } - /> - } - /> + + } /> + } /> + } /> + } /> ); } diff --git a/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js index 503885d68713ec..622b1362719eda 100644 --- a/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js +++ b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js @@ -13,11 +13,7 @@ export default function ActiveLastBreadcrumb() { Material-UI - + Core Material-UI - + Core Breadcrumb @@ -40,27 +36,16 @@ export default function CustomSeparator() { Material-UI - + Core Breadcrumb - } - aria-label="breadcrumb" - > + } aria-label="breadcrumb"> Material-UI - + Core Breadcrumb diff --git a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js index ea3f7850a63d29..aea881e9e1d071 100644 --- a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js @@ -36,12 +36,7 @@ export default function CustomizedBreadcrumbs() { icon={} onClick={handleClick} /> - + } diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js index 55771bea46b840..703be643166cf0 100644 --- a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js @@ -28,12 +28,7 @@ export default function IconBreadcrumbs() { return ( - + Material-UI diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js index 19b86d6806052c..e76c4b24fc7628 100644 --- a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js @@ -101,10 +101,7 @@ export default function RouterBreadcrumbs() { - + diff --git a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js index 4b412144451a92..e125a996845ba2 100644 --- a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js @@ -14,11 +14,7 @@ export default function SimpleBreadcrumbs() { Material-UI - + Core Breadcrumb diff --git a/docs/src/pages/components/button-group/BasicButtonGroup.js b/docs/src/pages/components/button-group/BasicButtonGroup.js index 27451a0fcbda3a..de94dac8594798 100644 --- a/docs/src/pages/components/button-group/BasicButtonGroup.js +++ b/docs/src/pages/components/button-group/BasicButtonGroup.js @@ -24,20 +24,12 @@ export default function BasicButtonGroup() { - + - + diff --git a/docs/src/pages/components/button-group/GroupSizesColors.js b/docs/src/pages/components/button-group/GroupSizesColors.js index b13e750a1053b8..750f520b22760f 100644 --- a/docs/src/pages/components/button-group/GroupSizesColors.js +++ b/docs/src/pages/components/button-group/GroupSizesColors.js @@ -24,19 +24,12 @@ export default function GroupSizesColors() { - + - + diff --git a/docs/src/pages/components/button-group/SplitButton.js b/docs/src/pages/components/button-group/SplitButton.js index 1a49de95b8869d..746ea9732139f1 100644 --- a/docs/src/pages/components/button-group/SplitButton.js +++ b/docs/src/pages/components/button-group/SplitButton.js @@ -10,11 +10,7 @@ import Popper from '@material-ui/core/Popper'; import MenuItem from '@material-ui/core/MenuItem'; import MenuList from '@material-ui/core/MenuList'; -const options = [ - 'Create a merge commit', - 'Squash and merge', - 'Rebase and merge', -]; +const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge']; export default function SplitButton() { const [open, setOpen] = React.useState(false); @@ -45,12 +41,7 @@ export default function SplitButton() { return ( - + - + {({ TransitionProps, placement }) => ( diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js index acd97535e07d3a..14a1e975216aa1 100644 --- a/docs/src/pages/components/buttons/ButtonBase.js +++ b/docs/src/pages/components/buttons/ButtonBase.js @@ -81,9 +81,7 @@ const useStyles = makeStyles((theme) => ({ }, imageTitle: { position: 'relative', - padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${ - theme.spacing(1) + 6 - }px`, + padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`, }, imageMarked: { height: 3, diff --git a/docs/src/pages/components/buttons/ButtonSizes.js b/docs/src/pages/components/buttons/ButtonSizes.js index c15ff0c253e612..b7e4e7e3ee8e55 100644 --- a/docs/src/pages/components/buttons/ButtonSizes.js +++ b/docs/src/pages/components/buttons/ButtonSizes.js @@ -31,54 +31,24 @@ export default function ButtonSizes() {
- - -
- - -
diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js index a99fb3c96113c3..6cb0cec9bbe568 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.js +++ b/docs/src/pages/components/buttons/CustomizedButtons.js @@ -1,10 +1,5 @@ import React from 'react'; -import { - createMuiTheme, - withStyles, - makeStyles, - ThemeProvider, -} from '@material-ui/core/styles'; +import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import { green, purple } from '@material-ui/core/colors'; @@ -73,11 +68,7 @@ export default function CustomizedButtons() { return (
- + Custom CSS @@ -85,12 +76,7 @@ export default function CustomizedButtons() { Theme Provider - + Bootstrap
diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js index 32047dc9deaa3f..c41fadc252cd4a 100644 --- a/docs/src/pages/components/buttons/UploadButtons.js +++ b/docs/src/pages/components/buttons/UploadButtons.js @@ -32,18 +32,9 @@ export default function UploadButtons() { Upload - + diff --git a/docs/src/pages/components/cards/ImgMediaCard.js b/docs/src/pages/components/cards/ImgMediaCard.js index ee5b758e5c3109..1a967b8cc74217 100644 --- a/docs/src/pages/components/cards/ImgMediaCard.js +++ b/docs/src/pages/components/cards/ImgMediaCard.js @@ -32,8 +32,8 @@ export default function ImgMediaCard() { Lizard - Lizards are a widespread group of squamate reptiles, with over 6,000 - species, ranging across all continents except Antarctica + Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging + across all continents except Antarctica diff --git a/docs/src/pages/components/cards/MediaCard.js b/docs/src/pages/components/cards/MediaCard.js index 5cd228dc3cb57d..f16505dfbe80d1 100644 --- a/docs/src/pages/components/cards/MediaCard.js +++ b/docs/src/pages/components/cards/MediaCard.js @@ -33,8 +33,8 @@ export default function MediaCard() { Lizard - Lizards are a widespread group of squamate reptiles, with over 6,000 - species, ranging across all continents except Antarctica + Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging + across all continents except Antarctica diff --git a/docs/src/pages/components/cards/MediaControlCard.js b/docs/src/pages/components/cards/MediaControlCard.js index fe8715a6d2c82e..7ec6abd80b0724 100644 --- a/docs/src/pages/components/cards/MediaControlCard.js +++ b/docs/src/pages/components/cards/MediaControlCard.js @@ -52,21 +52,13 @@ export default function MediaControlCard() {
- {theme.direction === 'rtl' ? ( - - ) : ( - - )} + {theme.direction === 'rtl' ? : } - {theme.direction === 'rtl' ? ( - - ) : ( - - )} + {theme.direction === 'rtl' ? : }
diff --git a/docs/src/pages/components/cards/OutlinedCard.js b/docs/src/pages/components/cards/OutlinedCard.js index 16359e1d73ee4e..1f143544b2b6a4 100644 --- a/docs/src/pages/components/cards/OutlinedCard.js +++ b/docs/src/pages/components/cards/OutlinedCard.js @@ -30,11 +30,7 @@ export default function OutlinedCard() { return ( - + Word of the Day diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js index bd73152f6b1d34..6272437dfc284b 100644 --- a/docs/src/pages/components/cards/RecipeReviewCard.js +++ b/docs/src/pages/components/cards/RecipeReviewCard.js @@ -70,9 +70,8 @@ export default function RecipeReviewCard() { /> - This impressive paella is a perfect party dish and a fun meal to cook - together with your guests. Add 1 cup of frozen peas along with the - mussels, if you like. + This impressive paella is a perfect party dish and a fun meal to cook together with your + guests. Add 1 cup of frozen peas along with the mussels, if you like. @@ -97,30 +96,26 @@ export default function RecipeReviewCard() { Method: - Heat 1/2 cup of the broth in a pot until simmering, add saffron and - set aside for 10 minutes. + Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 + minutes. - Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet - over medium-high heat. Add chicken, shrimp and chorizo, and cook, - stirring occasionally until lightly browned, 6 to 8 minutes. - Transfer shrimp to a large plate and set aside, leaving chicken and - chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, - onion, salt and pepper, and cook, stirring often until thickened and - fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 - cups chicken broth; bring to a boil. + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high + heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly + browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken + and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and + pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add + saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil. - Add rice and stir very gently to distribute. Top with artichokes and - peppers, and cook without stirring, until most of the liquid is - absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved - shrimp and mussels, tucking them down into the rice, and cook again - without stirring, until mussels have opened and rice is just tender, - 5 to 7 minutes more. (Discard any mussels that don’t open.) + Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook + without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to + medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook + again without stirring, until mussels have opened and rice is just tender, 5 to 7 + minutes more. (Discard any mussels that don’t open.) - Set aside off of the heat to let rest for 10 minutes, and then - serve. + Set aside off of the heat to let rest for 10 minutes, and then serve. diff --git a/docs/src/pages/components/cards/SimpleCard.js b/docs/src/pages/components/cards/SimpleCard.js index bf765591287184..79be00bd552a90 100644 --- a/docs/src/pages/components/cards/SimpleCard.js +++ b/docs/src/pages/components/cards/SimpleCard.js @@ -30,11 +30,7 @@ export default function SimpleCard() { return ( - + Word of the Day diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js index b20637873d1d59..a628ecb069fa17 100644 --- a/docs/src/pages/components/checkboxes/CheckboxLabels.js +++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js @@ -34,13 +34,7 @@ export default function CheckboxLabels() { return ( - } + control={} label="Secondary" /> - } - label="Uncontrolled" - /> - } - label="Disabled" - /> - } - label="Disabled" - /> + } label="Uncontrolled" /> + } label="Disabled" /> + } label="Disabled" /> - } + control={} label="Custom color" /> } - checkedIcon={} - name="checkedH" - /> - } + control={} checkedIcon={} name="checkedH" />} label="Custom icon" /> - + Assign responsibility - } + control={} label="Gilad Gray" /> - } + control={} label="Jason Killian" /> - } + control={} label="Antoine Llorca" /> Be careful - + Pick two - } + control={} label="Gilad Gray" /> - } + control={} label="Jason Killian" /> - } + control={} label="Antoine Llorca" /> diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js index 74cd7ff84c3656..09a95fb5833bc0 100644 --- a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js +++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js @@ -13,11 +13,9 @@ const useStyles = makeStyles({ borderRadius: 3, width: 16, height: 16, - boxShadow: - 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', backgroundColor: '#f5f8fa', - backgroundImage: - 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '$root.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, @@ -32,8 +30,7 @@ const useStyles = makeStyles({ }, checkedIcon: { backgroundColor: '#137cbd', - backgroundImage: - 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', '&:before': { display: 'block', width: 16, diff --git a/docs/src/pages/components/chips/Chips.js b/docs/src/pages/components/chips/Chips.js index 61c0a2bc107138..5237d2f321f426 100644 --- a/docs/src/pages/components/chips/Chips.js +++ b/docs/src/pages/components/chips/Chips.js @@ -31,11 +31,7 @@ export default function Chips() {
- M} - label="Clickable" - onClick={handleClick} - /> + M} label="Clickable" onClick={handleClick} /> } label="Deletable" diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js index 9bcfc59adf80b5..58f7ffab7c4672 100644 --- a/docs/src/pages/components/chips/ChipsArray.js +++ b/docs/src/pages/components/chips/ChipsArray.js @@ -29,9 +29,7 @@ export default function ChipsArray() { ]); const handleDelete = (chipToDelete) => () => { - setChipData((chips) => - chips.filter((chip) => chip.key !== chipToDelete.key), - ); + setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key)); }; return ( diff --git a/docs/src/pages/components/chips/OutlinedChips.js b/docs/src/pages/components/chips/OutlinedChips.js index 8a2dec9fd5516f..9ff2f40198d117 100644 --- a/docs/src/pages/components/chips/OutlinedChips.js +++ b/docs/src/pages/components/chips/OutlinedChips.js @@ -57,13 +57,7 @@ export default function OutlinedChips() { deleteIcon={} variant="outlined" /> - + M} label="Primary clickable" @@ -82,12 +76,7 @@ export default function OutlinedChips() { deleteIcon={} variant="outlined" /> - + } label="Deletable secondary" diff --git a/docs/src/pages/components/chips/SmallChips.js b/docs/src/pages/components/chips/SmallChips.js index 156330a282548e..49e817bac7e85f 100644 --- a/docs/src/pages/components/chips/SmallChips.js +++ b/docs/src/pages/components/chips/SmallChips.js @@ -30,12 +30,7 @@ export default function SmallChips() { return (
- M} - label="Clickable" - onClick={handleClick} - /> + M} label="Clickable" onClick={handleClick} /> } @@ -56,13 +51,7 @@ export default function SmallChips() { onDelete={handleDelete} deleteIcon={} /> - + M} @@ -81,12 +70,7 @@ export default function SmallChips() { onDelete={handleDelete} deleteIcon={} /> - + } diff --git a/docs/src/pages/components/container/FixedContainer.js b/docs/src/pages/components/container/FixedContainer.js index 76331f527140b5..4aeda75ba0d03b 100644 --- a/docs/src/pages/components/container/FixedContainer.js +++ b/docs/src/pages/components/container/FixedContainer.js @@ -8,10 +8,7 @@ export default function FixedContainer() { - + ); diff --git a/docs/src/pages/components/container/SimpleContainer.js b/docs/src/pages/components/container/SimpleContainer.js index adc34924706f18..dea58d8e902ac1 100644 --- a/docs/src/pages/components/container/SimpleContainer.js +++ b/docs/src/pages/components/container/SimpleContainer.js @@ -8,10 +8,7 @@ export default function SimpleContainer() { - + ); diff --git a/docs/src/pages/components/dialogs/AlertDialog.js b/docs/src/pages/components/dialogs/AlertDialog.js index 9ad7a21fbd6ee3..611e6631a93ef7 100644 --- a/docs/src/pages/components/dialogs/AlertDialog.js +++ b/docs/src/pages/components/dialogs/AlertDialog.js @@ -28,13 +28,11 @@ export default function AlertDialog() { aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > - - {"Use Google's location service?"} - + {"Use Google's location service?"} - Let Google help apps determine location. This means sending - anonymous location data to Google, even when no apps are running. + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. diff --git a/docs/src/pages/components/dialogs/AlertDialogSlide.js b/docs/src/pages/components/dialogs/AlertDialogSlide.js index 776845c4d8e242..c54bf4a505124e 100644 --- a/docs/src/pages/components/dialogs/AlertDialogSlide.js +++ b/docs/src/pages/components/dialogs/AlertDialogSlide.js @@ -35,13 +35,11 @@ export default function AlertDialogSlide() { aria-labelledby="alert-dialog-slide-title" aria-describedby="alert-dialog-slide-description" > - - {"Use Google's location service?"} - + {"Use Google's location service?"} - Let Google help apps determine location. This means sending - anonymous location data to Google, even when no apps are running. + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. diff --git a/docs/src/pages/components/dialogs/ConfirmationDialog.js b/docs/src/pages/components/dialogs/ConfirmationDialog.js index 4069cb20ade440..5c4bbe175faaa4 100644 --- a/docs/src/pages/components/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/components/dialogs/ConfirmationDialog.js @@ -79,12 +79,7 @@ function ConfirmationDialogRaw(props) { onChange={handleChange} > {options.map((option) => ( - } - label={option} - /> + } label={option} /> ))} @@ -153,10 +148,7 @@ export default function ConfirmationDialog() { - + { {children} {onClose ? ( - + ) : null} @@ -68,29 +64,23 @@ export default function CustomizedDialogs() { - + Modal title - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, - dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta - ac consectetur ac, vestibulum at eros. + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor - auctor. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo - cursus magna, vel scelerisque nisl consectetur et. Donec sed odio - dui. Donec ullamcorper nulla non metus auctor fringilla. + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. diff --git a/docs/src/pages/components/dialogs/DraggableDialog.js b/docs/src/pages/components/dialogs/DraggableDialog.js index 086a938aad65bd..5c437ed96a00a9 100644 --- a/docs/src/pages/components/dialogs/DraggableDialog.js +++ b/docs/src/pages/components/dialogs/DraggableDialog.js @@ -10,10 +10,7 @@ import Draggable from 'react-draggable'; function PaperComponent(props) { return ( - + ); @@ -46,8 +43,8 @@ export default function DraggableDialog() { - To subscribe to this website, please enter your email address here. - We will send updates occasionally. + To subscribe to this website, please enter your email address here. We will send updates + occasionally. diff --git a/docs/src/pages/components/dialogs/FormDialog.js b/docs/src/pages/components/dialogs/FormDialog.js index c1aa1f22dc57f6..2a7a6b61e9b530 100644 --- a/docs/src/pages/components/dialogs/FormDialog.js +++ b/docs/src/pages/components/dialogs/FormDialog.js @@ -23,16 +23,12 @@ export default function FormDialog() { - + Subscribe - To subscribe to this website, please enter your email address here. - We will send updates occasionally. + To subscribe to this website, please enter your email address here. We will send updates + occasionally. Open full-screen dialog - + - + @@ -74,10 +64,7 @@ export default function FullScreenDialog() { - + diff --git a/docs/src/pages/components/dialogs/MaxWidthDialog.js b/docs/src/pages/components/dialogs/MaxWidthDialog.js index 650ae40615f559..c630595b59a95f 100644 --- a/docs/src/pages/components/dialogs/MaxWidthDialog.js +++ b/docs/src/pages/components/dialogs/MaxWidthDialog.js @@ -90,9 +90,7 @@ export default function MaxWidthDialog() { - } + control={} label="Full width" /> diff --git a/docs/src/pages/components/dialogs/ResponsiveDialog.js b/docs/src/pages/components/dialogs/ResponsiveDialog.js index 5b450aca868498..599d0d7cee70da 100644 --- a/docs/src/pages/components/dialogs/ResponsiveDialog.js +++ b/docs/src/pages/components/dialogs/ResponsiveDialog.js @@ -32,13 +32,11 @@ export default function ResponsiveDialog() { onClose={handleClose} aria-labelledby="responsive-dialog-title" > - - {"Use Google's location service?"} - + {"Use Google's location service?"} - Let Google help apps determine location. This means sending - anonymous location data to Google, even when no apps are running. + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. diff --git a/docs/src/pages/components/dialogs/SimpleDialog.js b/docs/src/pages/components/dialogs/SimpleDialog.js index 7b19e845e48da3..38b189941a6891 100644 --- a/docs/src/pages/components/dialogs/SimpleDialog.js +++ b/docs/src/pages/components/dialogs/SimpleDialog.js @@ -35,19 +35,11 @@ function SimpleDialog(props) { }; return ( - + Set backup account {emails.map((email) => ( - handleListItemClick(email)} - key={email} - > + handleListItemClick(email)} key={email}> @@ -57,11 +49,7 @@ function SimpleDialog(props) { ))} - handleListItemClick('addAccount')} - > + handleListItemClick('addAccount')}> @@ -100,11 +88,7 @@ export default function SimpleDialogDemo() { - +
); } diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js index ed1dedcb8c2079..433727b27f6059 100644 --- a/docs/src/pages/components/dividers/MiddleDividers.js +++ b/docs/src/pages/components/dividers/MiddleDividers.js @@ -45,8 +45,8 @@ export default function MiddleDividers() { - Pinstriped cornflower blue cotton blouse takes you on a walk to the - park or just down the hall. + Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the + hall.
diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js index 89ffe37d93bca0..b29b3cf7beaa94 100644 --- a/docs/src/pages/components/drawers/ClippedDrawer.js +++ b/docs/src/pages/components/drawers/ClippedDrawer.js @@ -63,9 +63,7 @@ export default function ClippedDrawer() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -74,9 +72,7 @@ export default function ClippedDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -86,33 +82,27 @@ export default function ClippedDrawer() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus - dolor purus non enim praesent elementum facilisis leo vel. Risus at - ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum - quisque non tellus. Convallis convallis tellus id interdum velit - laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed - adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies - integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate - eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo - quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat - vivamus at augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien - faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum + facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit + gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id + donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit + adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. + Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis + imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget + arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem + donec massa sapien faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse - sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat - mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis - risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas - purus viverra accumsan in. In hendrerit gravida rutrum quisque non - tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant - morbi tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla + facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac + tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat + consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed + vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In + hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et + tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin + nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas + accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js index f636694001a3c2..723bc2065ebd45 100644 --- a/docs/src/pages/components/drawers/MiniDrawer.js +++ b/docs/src/pages/components/drawers/MiniDrawer.js @@ -136,20 +136,14 @@ export default function MiniDrawer() { >
- {theme.direction === 'rtl' ? ( - - ) : ( - - )} + {theme.direction === 'rtl' ? : }
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -158,9 +152,7 @@ export default function MiniDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -169,33 +161,27 @@ export default function MiniDrawer() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus - dolor purus non enim praesent elementum facilisis leo vel. Risus at - ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum - quisque non tellus. Convallis convallis tellus id interdum velit - laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed - adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies - integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate - eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo - quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat - vivamus at augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien - faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum + facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit + gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id + donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit + adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. + Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis + imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget + arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem + donec massa sapien faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse - sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat - mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis - risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas - purus viverra accumsan in. In hendrerit gravida rutrum quisque non - tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant - morbi tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla + facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac + tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat + consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed + vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In + hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et + tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin + nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas + accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.js b/docs/src/pages/components/drawers/PermanentDrawerLeft.js index fe3070fb729937..b8a5303c259ffb 100644 --- a/docs/src/pages/components/drawers/PermanentDrawerLeft.js +++ b/docs/src/pages/components/drawers/PermanentDrawerLeft.js @@ -65,9 +65,7 @@ export default function PermanentDrawerLeft() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -76,9 +74,7 @@ export default function PermanentDrawerLeft() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -87,33 +83,27 @@ export default function PermanentDrawerLeft() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus - dolor purus non enim praesent elementum facilisis leo vel. Risus at - ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum - quisque non tellus. Convallis convallis tellus id interdum velit - laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed - adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies - integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate - eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo - quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat - vivamus at augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien - faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum + facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit + gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id + donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit + adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. + Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis + imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget + arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem + donec massa sapien faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse - sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat - mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis - risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas - purus viverra accumsan in. In hendrerit gravida rutrum quisque non - tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant - morbi tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla + facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac + tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat + consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed + vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In + hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et + tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin + nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas + accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.js b/docs/src/pages/components/drawers/PermanentDrawerRight.js index 5ba597b174a23c..5045b9cd777d0e 100644 --- a/docs/src/pages/components/drawers/PermanentDrawerRight.js +++ b/docs/src/pages/components/drawers/PermanentDrawerRight.js @@ -55,33 +55,27 @@ export default function PermanentDrawerRight() {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus - dolor purus non enim praesent elementum facilisis leo vel. Risus at - ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum - quisque non tellus. Convallis convallis tellus id interdum velit - laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed - adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies - integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate - eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo - quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat - vivamus at augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien - faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum + facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit + gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id + donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit + adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. + Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis + imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget + arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem + donec massa sapien faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse - sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat - mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis - risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas - purus viverra accumsan in. In hendrerit gravida rutrum quisque non - tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant - morbi tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla + facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac + tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat + consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed + vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In + hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et + tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin + nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas + accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -108,9 +100,7 @@ export default function PermanentDrawerRight() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.js b/docs/src/pages/components/drawers/PersistentDrawerLeft.js index 8dd75c44f41176..b8acf88133c5d6 100644 --- a/docs/src/pages/components/drawers/PersistentDrawerLeft.js +++ b/docs/src/pages/components/drawers/PersistentDrawerLeft.js @@ -125,20 +125,14 @@ export default function PersistentDrawerLeft() { >
- {theme.direction === 'ltr' ? ( - - ) : ( - - )} + {theme.direction === 'ltr' ? : }
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -147,9 +141,7 @@ export default function PersistentDrawerLeft() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -162,33 +154,27 @@ export default function PersistentDrawerLeft() { >
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus - dolor purus non enim praesent elementum facilisis leo vel. Risus at - ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum - quisque non tellus. Convallis convallis tellus id interdum velit - laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed - adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies - integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate - eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo - quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat - vivamus at augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien - faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum + facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit + gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id + donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit + adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. + Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis + imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget + arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem + donec massa sapien faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse - sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat - mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis - risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas - purus viverra accumsan in. In hendrerit gravida rutrum quisque non - tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant - morbi tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla + facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac + tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat + consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed + vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In + hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et + tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin + nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas + accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/PersistentDrawerRight.js b/docs/src/pages/components/drawers/PersistentDrawerRight.js index 9f0ce805b47957..bada510ed2c497 100644 --- a/docs/src/pages/components/drawers/PersistentDrawerRight.js +++ b/docs/src/pages/components/drawers/PersistentDrawerRight.js @@ -121,33 +121,27 @@ export default function PersistentDrawerRight() { >
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus - dolor purus non enim praesent elementum facilisis leo vel. Risus at - ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum - quisque non tellus. Convallis convallis tellus id interdum velit - laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed - adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies - integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate - eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo - quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat - vivamus at augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien - faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum + facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit + gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id + donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit + adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. + Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis + imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget + arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem + donec massa sapien faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse - sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat - mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis - risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas - purus viverra accumsan in. In hendrerit gravida rutrum quisque non - tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant - morbi tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla + facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac + tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat + consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed + vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In + hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et + tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin + nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas + accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
- {theme.direction === 'rtl' ? ( - - ) : ( - - )} + {theme.direction === 'rtl' ? : }
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -183,9 +171,7 @@ export default function PersistentDrawerRight() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js index 919bab8343c21a..93d3231fc983a6 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.js +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js @@ -69,9 +69,7 @@ function ResponsiveDrawer(props) { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -80,9 +78,7 @@ function ResponsiveDrawer(props) { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -90,8 +86,7 @@ function ResponsiveDrawer(props) {
); - const container = - window !== undefined ? () => window().document.body : undefined; + const container = window !== undefined ? () => window().document.body : undefined; return (
@@ -146,33 +141,27 @@ function ResponsiveDrawer(props) {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus - dolor purus non enim praesent elementum facilisis leo vel. Risus at - ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum - quisque non tellus. Convallis convallis tellus id interdum velit - laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed - adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies - integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate - eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo - quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat - vivamus at augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien - faucibus et molestie ac. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum + facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit + gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id + donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit + adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. + Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis + imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget + arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem + donec massa sapien faucibus et molestie ac. - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse - sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat - mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis - risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas - purus viverra accumsan in. In hendrerit gravida rutrum quisque non - tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant - morbi tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. + Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla + facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac + tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat + consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed + vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In + hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et + tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin + nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas + accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
diff --git a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js index 4370d0f0d66378..4dfc8434405bfd 100644 --- a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js +++ b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js @@ -30,11 +30,7 @@ export default function SwipeableTemporaryDrawer() { }); const toggleDrawer = (anchor, open) => (event) => { - if ( - event && - event.type === 'keydown' && - (event.key === 'Tab' || event.key === 'Shift') - ) { + if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { return; } @@ -53,9 +49,7 @@ export default function SwipeableTemporaryDrawer() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -64,9 +58,7 @@ export default function SwipeableTemporaryDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} diff --git a/docs/src/pages/components/drawers/TemporaryDrawer.js b/docs/src/pages/components/drawers/TemporaryDrawer.js index 6bf70eaaf12094..2cadd9cca37ddb 100644 --- a/docs/src/pages/components/drawers/TemporaryDrawer.js +++ b/docs/src/pages/components/drawers/TemporaryDrawer.js @@ -30,10 +30,7 @@ export default function TemporaryDrawer() { }); const toggleDrawer = (anchor, open) => (event) => { - if ( - event.type === 'keydown' && - (event.key === 'Tab' || event.key === 'Shift') - ) { + if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { return; } @@ -52,9 +49,7 @@ export default function TemporaryDrawer() { {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -63,9 +58,7 @@ export default function TemporaryDrawer() { {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - + {index % 2 === 0 ? : } ))} @@ -78,11 +71,7 @@ export default function TemporaryDrawer() { {['left', 'right', 'top', 'bottom'].map((anchor) => ( - + {list(anchor)} diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js index 873ded1d0e0c15..235fbe8a7c0882 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js @@ -19,20 +19,10 @@ export default function FloatingActionButtonSize() { return (
- + - + @@ -60,12 +50,7 @@ export default function FloatingActionButtonSize() { Extended - + Extended diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js index 0a4744f9c3562d..d0d2f7f156289c 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js @@ -142,17 +142,11 @@ export default function FloatingActionButtonZoom() { in={value === index} timeout={transitionDuration} style={{ - transitionDelay: `${ - value === index ? transitionDuration.exit : 0 - }ms`, + transitionDelay: `${value === index ? transitionDuration.exit : 0}ms`, }} unmountOnExit > - + {fab.icon} diff --git a/docs/src/pages/components/grid/ComplexGrid.js b/docs/src/pages/components/grid/ComplexGrid.js index 76cfd5bf5889de..50eaf95bd79408 100644 --- a/docs/src/pages/components/grid/ComplexGrid.js +++ b/docs/src/pages/components/grid/ComplexGrid.js @@ -35,11 +35,7 @@ export default function ComplexGrid() { - complex + complex diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js index 1f1232807e3a99..de9a9f8464db43 100644 --- a/docs/src/pages/components/grid/InteractiveGrid.js +++ b/docs/src/pages/components/grid/InteractiveGrid.js @@ -82,21 +82,9 @@ export default function InteractiveGrid() { setDirection(event.target.value); }} > - } - label="row" - /> - } - label="row-reverse" - /> - } - label="column" - /> + } label="row" /> + } label="row-reverse" /> + } label="column" /> } @@ -117,36 +105,16 @@ export default function InteractiveGrid() { setJustify(event.target.value); }} > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> + } label="flex-start" /> + } label="center" /> + } label="flex-end" /> } label="space-between" /> - } - label="space-around" - /> - } - label="space-evenly" - /> + } label="space-around" /> + } label="space-evenly" /> @@ -162,31 +130,11 @@ export default function InteractiveGrid() { setAlignItems(event.target.value); }} > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> - } - label="stretch" - /> - } - label="baseline" - /> + } label="flex-start" /> + } label="center" /> + } label="flex-end" /> + } label="stretch" /> + } label="baseline" /> diff --git a/docs/src/pages/components/image-list/AdvancedImageList.js b/docs/src/pages/components/image-list/AdvancedImageList.js index 6c9ab5c32c2be6..41068edfa6a06a 100644 --- a/docs/src/pages/components/image-list/AdvancedImageList.js +++ b/docs/src/pages/components/image-list/AdvancedImageList.js @@ -56,20 +56,13 @@ export default function AdvancedImageList() {
{itemData.map((item) => ( - + {item.title} + } diff --git a/docs/src/pages/components/image-list/TitlebarImageList.js b/docs/src/pages/components/image-list/TitlebarImageList.js index 8b810a2dfa4932..a4da239fe9a22f 100644 --- a/docs/src/pages/components/image-list/TitlebarImageList.js +++ b/docs/src/pages/components/image-list/TitlebarImageList.js @@ -58,10 +58,7 @@ export default function TitlebarImageList() { title={item.title} subtitle={by: {item.author}} actionIcon={ - + } diff --git a/docs/src/pages/components/lists/CheckboxList.js b/docs/src/pages/components/lists/CheckboxList.js index 1872cdf3030626..2ef8bb1811cd1e 100644 --- a/docs/src/pages/components/lists/CheckboxList.js +++ b/docs/src/pages/components/lists/CheckboxList.js @@ -40,13 +40,7 @@ export default function CheckboxList() { const labelId = `checkbox-list-label-${value}`; return ( - + setDense(event.target.checked)} - /> + setDense(event.target.checked)} /> } label="Enable dense" /> diff --git a/docs/src/pages/components/lists/SwitchListSecondary.js b/docs/src/pages/components/lists/SwitchListSecondary.js index f2b758276c8a8d..d6a2238982c930 100644 --- a/docs/src/pages/components/lists/SwitchListSecondary.js +++ b/docs/src/pages/components/lists/SwitchListSecondary.js @@ -36,10 +36,7 @@ export default function SwitchListSecondary() { }; return ( - Settings} - className={classes.root} - > + Settings} className={classes.root}> diff --git a/docs/src/pages/components/menus/ContextMenu.js b/docs/src/pages/components/menus/ContextMenu.js index 2c2cb170619f27..b5296d581974ab 100644 --- a/docs/src/pages/components/menus/ContextMenu.js +++ b/docs/src/pages/components/menus/ContextMenu.js @@ -26,15 +26,13 @@ export default function ContextMenu() { return (
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum - purus, bibendum sit amet vulputate eget, porta semper ligula. Donec - bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed - dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam - quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, - quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus - finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan - metus vel maximus consequat. Suspendisse lacinia tellus a libero - volutpat maximus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit + amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi + finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada + ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis + finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet + facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse + lacinia tellus a libero volutpat maximus. - {options.map((option) => ( - + {option} ))} diff --git a/docs/src/pages/components/menus/MenuListComposition.js b/docs/src/pages/components/menus/MenuListComposition.js index d01d68e6d450cd..4d3fd50e023760 100644 --- a/docs/src/pages/components/menus/MenuListComposition.js +++ b/docs/src/pages/components/menus/MenuListComposition.js @@ -69,28 +69,17 @@ export default function MenuListComposition() { > Toggle Menu Grow - + {({ TransitionProps, placement }) => ( - + Profile My account Logout diff --git a/docs/src/pages/components/menus/MenuPopupState.js b/docs/src/pages/components/menus/MenuPopupState.js index b9d78abb263e55..615d8667e141d7 100644 --- a/docs/src/pages/components/menus/MenuPopupState.js +++ b/docs/src/pages/components/menus/MenuPopupState.js @@ -9,11 +9,7 @@ export default function MenuPopupState() { {(popupState) => ( - diff --git a/docs/src/pages/components/menus/SimpleListMenu.js b/docs/src/pages/components/menus/SimpleListMenu.js index 09653b7879ee79..1dd93c3deb67dd 100644 --- a/docs/src/pages/components/menus/SimpleListMenu.js +++ b/docs/src/pages/components/menus/SimpleListMenu.js @@ -47,10 +47,7 @@ export default function SimpleListMenu() { aria-label="when device is locked" onClick={handleClickListItem} > - + - - - A very long text that overflows - + A very long text that overflows diff --git a/docs/src/pages/components/modal/ServerModal.js b/docs/src/pages/components/modal/ServerModal.js index 3d7885a848df99..ba6ddd854a5c9f 100644 --- a/docs/src/pages/components/modal/ServerModal.js +++ b/docs/src/pages/components/modal/ServerModal.js @@ -47,9 +47,7 @@ export default function ServerModal() { >

Server-side modal

-

- If you disable JavaScript, you will still see me. -

+

If you disable JavaScript, you will still see me.

diff --git a/docs/src/pages/components/modal/TransitionsModal.js b/docs/src/pages/components/modal/TransitionsModal.js index 39b71b70dd2c14..5a990c35f917eb 100644 --- a/docs/src/pages/components/modal/TransitionsModal.js +++ b/docs/src/pages/components/modal/TransitionsModal.js @@ -50,9 +50,7 @@ export default function TransitionsModal() {

Transition modal

-

- react-transition-group animates me. -

+

react-transition-group animates me.

 diff --git a/docs/src/pages/components/no-ssr/FrameDeferring.js b/docs/src/pages/components/no-ssr/FrameDeferring.js index 9ab01554ff138b..191e4e96490b94 100644 --- a/docs/src/pages/components/no-ssr/FrameDeferring.js +++ b/docs/src/pages/components/no-ssr/FrameDeferring.js @@ -11,9 +11,7 @@ const useStyles = makeStyles({ }); function LargeTree() { - return Array.from(new Array(5000)).map((_, index) => ( - . - )); + return Array.from(new Array(5000)).map((_, index) => .); } export default function FrameDeferring() { diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js index df94d70a721157..1cc2ec165afb3c 100644 --- a/docs/src/pages/components/pagination/PaginationRanges.js +++ b/docs/src/pages/components/pagination/PaginationRanges.js @@ -17,12 +17,7 @@ export default function PaginationRanges() {
{/* Default ranges */} - +
); diff --git a/docs/src/pages/components/pagination/UsePagination.js b/docs/src/pages/components/pagination/UsePagination.js index c06abc89cd419e..7300c86401809f 100644 --- a/docs/src/pages/components/pagination/UsePagination.js +++ b/docs/src/pages/components/pagination/UsePagination.js @@ -27,11 +27,7 @@ export default function UsePagination() { children = '…'; } else if (type === 'page') { children = ( - ); diff --git a/docs/src/pages/components/pickers/MaterialUIPickers.js b/docs/src/pages/components/pickers/MaterialUIPickers.js index b683dea2842c8e..68cadce376d04f 100644 --- a/docs/src/pages/components/pickers/MaterialUIPickers.js +++ b/docs/src/pages/components/pickers/MaterialUIPickers.js @@ -10,9 +10,7 @@ import { export default function MaterialUIPickers() { // The first commit of Material-UI - const [selectedDate, setSelectedDate] = React.useState( - new Date('2014-08-18T21:11:54'), - ); + const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54')); const handleDateChange = (date) => { setSelectedDate(date); diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js index 00ffbbbaca7315..ff531218d3f98b 100644 --- a/docs/src/pages/components/popover/PopoverPopupState.js +++ b/docs/src/pages/components/popover/PopoverPopupState.js @@ -10,11 +10,7 @@ export default function PopoverPopupState() { {(popupState) => (
- - - - The content of the Popover. - + The content of the Popover.
); diff --git a/docs/src/pages/components/popper/FakedReferencePopper.js b/docs/src/pages/components/popper/FakedReferencePopper.js index 9b8e709fb92098..d978ee9e854ca1 100644 --- a/docs/src/pages/components/popper/FakedReferencePopper.js +++ b/docs/src/pages/components/popper/FakedReferencePopper.js @@ -29,8 +29,7 @@ export default function FakedReferencePopper() { return; } - const getBoundingClientRect = () => - selection.getRangeAt(0).getBoundingClientRect(); + const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect(); setOpen(true); setAnchorEl({ @@ -45,29 +44,19 @@ export default function FakedReferencePopper() { return (
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum - purus, bibendum sit amet vulputate eget, porta semper ligula. Donec - bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed - dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam - quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, - quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus - finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan - metus vel maximus consequat. Suspendisse lacinia tellus a libero - volutpat maximus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit + amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi + finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada + ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis + finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet + facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse + lacinia tellus a libero volutpat maximus. - + {({ TransitionProps }) => ( - - The content of the Popper. - + The content of the Popper. )} diff --git a/docs/src/pages/components/popper/PopperPopupState.js b/docs/src/pages/components/popper/PopperPopupState.js index 1d3b6da4f6545b..2ba20369d81976 100644 --- a/docs/src/pages/components/popper/PopperPopupState.js +++ b/docs/src/pages/components/popper/PopperPopupState.js @@ -20,20 +20,14 @@ export default function PopperPopupState() { {(popupState) => (
- {({ TransitionProps }) => ( - - The content of the Popper. - + The content of the Popper. )} diff --git a/docs/src/pages/components/popper/PositionedPopper.js b/docs/src/pages/components/popper/PositionedPopper.js index c4fda82e99ea80..b3f7655f85c2a9 100644 --- a/docs/src/pages/components/popper/PositionedPopper.js +++ b/docs/src/pages/components/popper/PositionedPopper.js @@ -34,9 +34,7 @@ export default function PositionedPopper() { {({ TransitionProps }) => ( - - The content of the Popper. - + The content of the Popper. )} diff --git a/docs/src/pages/components/progress/CircularDeterminate.js b/docs/src/pages/components/progress/CircularDeterminate.js index bc1cbaa79a7af8..46d191e544ce0f 100644 --- a/docs/src/pages/components/progress/CircularDeterminate.js +++ b/docs/src/pages/components/progress/CircularDeterminate.js @@ -17,9 +17,7 @@ export default function CircularDeterminate() { React.useEffect(() => { const timer = setInterval(() => { - setProgress((prevProgress) => - prevProgress >= 100 ? 0 : prevProgress + 10, - ); + setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); }, 800); return () => { diff --git a/docs/src/pages/components/progress/CircularIntegration.js b/docs/src/pages/components/progress/CircularIntegration.js index 9941092329bad4..d0ffd41fadf0da 100644 --- a/docs/src/pages/components/progress/CircularIntegration.js +++ b/docs/src/pages/components/progress/CircularIntegration.js @@ -78,9 +78,7 @@ export default function CircularIntegration() { > {success ? : } - {loading && ( - - )} + {loading && }
- {loading && ( - - )} + {loading && }
); diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.js b/docs/src/pages/components/progress/CircularWithValueLabel.js index ccb414814db64c..ab34c5d692fb44 100644 --- a/docs/src/pages/components/progress/CircularWithValueLabel.js +++ b/docs/src/pages/components/progress/CircularWithValueLabel.js @@ -18,11 +18,9 @@ function CircularProgressWithLabel(props) { alignItems="center" justifyContent="center" > - {`${Math.round(props.value)}%`} + {`${Math.round( + props.value, + )}%`} ); @@ -42,9 +40,7 @@ export default function CircularStatic() { React.useEffect(() => { const timer = setInterval(() => { - setProgress((prevProgress) => - prevProgress >= 100 ? 0 : prevProgress + 10, - ); + setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); }, 800); return () => { clearInterval(timer); diff --git a/docs/src/pages/components/progress/CustomizedProgressBars.js b/docs/src/pages/components/progress/CustomizedProgressBars.js index 44e2d95d71834e..cfafdf0f590f2d 100644 --- a/docs/src/pages/components/progress/CustomizedProgressBars.js +++ b/docs/src/pages/components/progress/CustomizedProgressBars.js @@ -9,8 +9,7 @@ const BorderLinearProgress = withStyles((theme) => ({ borderRadius: 5, }, colorPrimary: { - backgroundColor: - theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], + backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], }, bar: { borderRadius: 5, diff --git a/docs/src/pages/components/progress/LinearWithValueLabel.js b/docs/src/pages/components/progress/LinearWithValueLabel.js index 9411f8241c8cda..cead8d1ec692ce 100644 --- a/docs/src/pages/components/progress/LinearWithValueLabel.js +++ b/docs/src/pages/components/progress/LinearWithValueLabel.js @@ -40,9 +40,7 @@ export default function LinearWithValueLabel() { React.useEffect(() => { const timer = setInterval(() => { - setProgress((prevProgress) => - prevProgress >= 100 ? 10 : prevProgress + 10, - ); + setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress + 10)); }, 800); return () => { clearInterval(timer); diff --git a/docs/src/pages/components/radio-buttons/CustomizedRadios.js b/docs/src/pages/components/radio-buttons/CustomizedRadios.js index c089b6f1725eac..c703cf238c76c2 100644 --- a/docs/src/pages/components/radio-buttons/CustomizedRadios.js +++ b/docs/src/pages/components/radio-buttons/CustomizedRadios.js @@ -17,11 +17,9 @@ const useStyles = makeStyles({ borderRadius: '50%', width: 16, height: 16, - boxShadow: - 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', backgroundColor: '#f5f8fa', - backgroundImage: - 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '$root.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, @@ -36,8 +34,7 @@ const useStyles = makeStyles({ }, checkedIcon: { backgroundColor: '#137cbd', - backgroundImage: - 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', '&:before': { display: 'block', width: 16, @@ -71,22 +68,10 @@ export default function CustomizedRadios() { return ( Gender - - } - label="Female" - /> + + } label="Female" /> } label="Male" /> - } - label="Other" - /> + } label="Other" /> - + Pop quiz: Material-UI is... - - } - label="The best!" - /> - } - label="The worst." - /> + + } label="The best!" /> + } label="The worst." /> {helperText} - diff --git a/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js b/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js index b10b4c2d430e74..47f9820292ce2a 100644 --- a/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js +++ b/docs/src/pages/components/radio-buttons/FormControlLabelPlacement.js @@ -28,11 +28,7 @@ export default function FormControlLabelPlacement() { label="Bottom" labelPlacement="bottom" /> - } - label="End" - /> + } label="End" /> ); diff --git a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js index e738714ac61acc..fb8b88e3bbc700 100644 --- a/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js +++ b/docs/src/pages/components/radio-buttons/RadioButtonsGroup.js @@ -15,21 +15,11 @@ export default function RadioButtonsGroup() { return ( Gender - + } label="Female" /> } label="Male" /> } label="Other" /> - } - label="(Disabled option)" - /> + } label="(Disabled option)" /> ); diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js index 24bf10fe802721..45158891678622 100644 --- a/docs/src/pages/components/rating/HalfRating.js +++ b/docs/src/pages/components/rating/HalfRating.js @@ -18,12 +18,7 @@ export default function HalfRating() { return (
- +
); } diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js index 7a33c7faa4fd7b..761a8b555c7345 100644 --- a/docs/src/pages/components/rating/HoverRating.js +++ b/docs/src/pages/components/rating/HoverRating.js @@ -42,9 +42,7 @@ export default function HoverRating() { setHover(newHover); }} /> - {value !== null && ( - {labels[hover !== -1 ? hover : value]} - )} + {value !== null && {labels[hover !== -1 ? hover : value]}}
); } diff --git a/docs/src/pages/components/selects/DialogSelect.js b/docs/src/pages/components/selects/DialogSelect.js index 3a613a01589fb7..5744f2ada95e8b 100644 --- a/docs/src/pages/components/selects/DialogSelect.js +++ b/docs/src/pages/components/selects/DialogSelect.js @@ -42,12 +42,7 @@ export default function DialogSelect() { return (
- + Fill the form
diff --git a/docs/src/pages/components/selects/MultipleSelect.js b/docs/src/pages/components/selects/MultipleSelect.js index 8c0e6df9b7c35d..937352d6fdbf27 100644 --- a/docs/src/pages/components/selects/MultipleSelect.js +++ b/docs/src/pages/components/selects/MultipleSelect.js @@ -95,11 +95,7 @@ export default function MultipleSelect() { MenuProps={MenuProps} > {names.map((name) => ( - + {name} ))} @@ -144,11 +140,7 @@ export default function MultipleSelect() { MenuProps={MenuProps} > {names.map((name) => ( - + {name} ))} @@ -175,11 +167,7 @@ export default function MultipleSelect() { Placeholder {names.map((name) => ( - + {name} ))} diff --git a/docs/src/pages/components/skeleton/Facebook.js b/docs/src/pages/components/skeleton/Facebook.js index d6950bb3b7975f..330d72dc429cab 100644 --- a/docs/src/pages/components/skeleton/Facebook.js +++ b/docs/src/pages/components/skeleton/Facebook.js @@ -30,12 +30,7 @@ function Media(props) { + ) : ( + ) : ( 'Ted' ) } - subheader={ - loading ? ( - - ) : ( - '5 hours ago' - ) - } + subheader={loading ? : '5 hours ago'} /> {loading ? ( @@ -83,11 +67,7 @@ function Media(props) { {loading ? ( - + ) : ( diff --git a/docs/src/pages/components/skeleton/YouTube.js b/docs/src/pages/components/skeleton/YouTube.js index 82129d1646b5d0..2776cda6b7f87a 100644 --- a/docs/src/pages/components/skeleton/YouTube.js +++ b/docs/src/pages/components/skeleton/YouTube.js @@ -40,11 +40,7 @@ function Media(props) { {(loading ? Array.from(new Array(3)) : data).map((item, index) => ( {item ? ( - {item.title} + {item.title} ) : ( )} @@ -54,11 +50,7 @@ function Media(props) { {item.title} - + {item.channel} diff --git a/docs/src/pages/components/slider/ContinuousSlider.js b/docs/src/pages/components/slider/ContinuousSlider.js index f304f7a8b597da..cd8ecd9ed0b56f 100644 --- a/docs/src/pages/components/slider/ContinuousSlider.js +++ b/docs/src/pages/components/slider/ContinuousSlider.js @@ -30,11 +30,7 @@ export default function ContinuousSlider() { - + diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index 1a504dd4c37981..db0648b268ab5c 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -62,8 +62,7 @@ const IOSSlider = withStyles({ marginTop: -14, marginLeft: -14, '&:focus, &:hover, &$active': { - boxShadow: - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', + boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { boxShadow: iOSBoxShadow, @@ -182,19 +181,10 @@ export default function CustomizedSlider() { return (
iOS - +
pretto.fr - +
Tooltip value label Airbnb - index === 0 ? 'Minimum price' : 'Maximum price' - } + getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')} defaultValue={[20, 40]} />
diff --git a/docs/src/pages/components/snackbars/IntegrationNotistack.js b/docs/src/pages/components/snackbars/IntegrationNotistack.js index 74c0727f2b3659..4b61cac3ceb88f 100644 --- a/docs/src/pages/components/snackbars/IntegrationNotistack.js +++ b/docs/src/pages/components/snackbars/IntegrationNotistack.js @@ -17,9 +17,7 @@ function MyApp() { return ( - + ); } diff --git a/docs/src/pages/components/snackbars/LongTextSnackbar.js b/docs/src/pages/components/snackbars/LongTextSnackbar.js index ab398e3a8aa477..1cb1212263e20c 100644 --- a/docs/src/pages/components/snackbars/LongTextSnackbar.js +++ b/docs/src/pages/components/snackbars/LongTextSnackbar.js @@ -30,10 +30,7 @@ export default function LongTextSnackbar() { I love cheesecake. I love chocolate.' } /> - + - - - + + - - - + + ); diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.js b/docs/src/pages/components/snackbars/SimpleSnackbar.js index d2d067ef47ed8c..a4f5f1ff3aa7db 100644 --- a/docs/src/pages/components/snackbars/SimpleSnackbar.js +++ b/docs/src/pages/components/snackbars/SimpleSnackbar.js @@ -36,12 +36,7 @@ export default function SimpleSnackbar() { - + diff --git a/docs/src/pages/components/speed-dial/SpeedDials.js b/docs/src/pages/components/speed-dial/SpeedDials.js index bf2d9c94942d89..9d1c2a165a0dce 100644 --- a/docs/src/pages/components/speed-dial/SpeedDials.js +++ b/docs/src/pages/components/speed-dial/SpeedDials.js @@ -73,13 +73,7 @@ export default function SpeedDials() { return (
- } + control={} label="Hidden" /> diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js index cb9839a0a4cfb5..548bbbcf2c1734 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.js +++ b/docs/src/pages/components/steppers/CustomizedSteppers.js @@ -69,11 +69,7 @@ function QontoStepIcon(props) { [classes.active]: active, })} > - {completed ? ( - - ) : ( -
- )} + {completed ? :
}
); } @@ -233,22 +229,14 @@ export default function CustomizedSteppers() { ))} - } - > + }> {steps.map((label) => ( {label} ))} - } - > + }> {steps.map((label) => ( {label} @@ -267,15 +255,9 @@ export default function CustomizedSteppers() {
) : (
- - {getStepContent(activeStep)} - + {getStepContent(activeStep)}
- } backButton={ } diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js index e6bba2e9fad411..143f2510e5596b 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js @@ -20,11 +20,7 @@ const useStyles = makeStyles((theme) => ({ })); function getSteps() { - return [ - 'Select master blaster campaign settings', - 'Create an ad group', - 'Create an ad', - ]; + return ['Select master blaster campaign settings', 'Create an ad group', 'Create an ad']; } function getStepContent(stepIndex) { @@ -69,16 +65,12 @@ export default function HorizontalLabelPositionBelowStepper() {
{activeStep === steps.length ? (
- - All steps completed - + All steps completed
) : (
- - {getStepContent(activeStep)} - + {getStepContent(activeStep)}
) : (
- - {getStepContent(activeStep)} - + {getStepContent(activeStep)}
- {isStepOptional(activeStep) && ( diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js index e43a99ac2e8908..9156d1890a9ed9 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js @@ -96,10 +96,7 @@ export default function HorizontalNonLinearStepper() { {steps.map((label, index) => ( - + {label} @@ -115,15 +112,9 @@ export default function HorizontalNonLinearStepper() {
) : (
- - {getStepContent(activeStep)} - + {getStepContent(activeStep)}
- ))}
diff --git a/docs/src/pages/components/steppers/ProgressMobileStepper.js b/docs/src/pages/components/steppers/ProgressMobileStepper.js index 1b1ba384dbefe1..5785487d9e728a 100644 --- a/docs/src/pages/components/steppers/ProgressMobileStepper.js +++ b/docs/src/pages/components/steppers/ProgressMobileStepper.js @@ -35,20 +35,12 @@ export default function ProgressMobileStepper() { nextButton={ } backButton={ } diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js index 0e6fe3ba5b4e9f..76b9a5aa0a6f61 100644 --- a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js +++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js @@ -92,11 +92,7 @@ function SwipeableTextMobileStepper() { {tutorialSteps.map((step, index) => (
{Math.abs(activeStep - index) <= 2 ? ( - {step.label} + {step.label} ) : null}
))} @@ -107,26 +103,14 @@ function SwipeableTextMobileStepper() { variant="text" activeStep={activeStep} nextButton={ - } backButton={ } diff --git a/docs/src/pages/components/steppers/TextMobileStepper.js b/docs/src/pages/components/steppers/TextMobileStepper.js index 1c63443aaac5be..5f35381caa131f 100644 --- a/docs/src/pages/components/steppers/TextMobileStepper.js +++ b/docs/src/pages/components/steppers/TextMobileStepper.js @@ -86,26 +86,14 @@ export default function TextMobileStepper() { variant="text" activeStep={activeStep} nextButton={ - } backButton={ } diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js index ee89e86712a011..32ff2e0e92fc05 100644 --- a/docs/src/pages/components/switches/CustomizedSwitches.js +++ b/docs/src/pages/components/switches/CustomizedSwitches.js @@ -122,34 +122,18 @@ export default function CustomizedSwitches() { return ( - } + control={} label="Custom color" /> - } + control={} label="iOS style" /> Off - + On diff --git a/docs/src/pages/components/switches/SwitchLabels.js b/docs/src/pages/components/switches/SwitchLabels.js index ef31026618c12a..4f39011c3860f5 100644 --- a/docs/src/pages/components/switches/SwitchLabels.js +++ b/docs/src/pages/components/switches/SwitchLabels.js @@ -16,13 +16,7 @@ export default function SwitchLabels() { return ( - } + control={} label="Secondary" /> } label="Uncontrolled" /> } label="Disabled" /> - } - label="Disabled" - /> + } label="Disabled" /> ); } diff --git a/docs/src/pages/components/switches/Switches.js b/docs/src/pages/components/switches/Switches.js index 48a2c04e96f949..851b59eadbaa2a 100644 --- a/docs/src/pages/components/switches/Switches.js +++ b/docs/src/pages/components/switches/Switches.js @@ -28,11 +28,7 @@ export default function Switches() { /> - + Assign responsibility - } + control={} label="Gilad Gray" /> - } + control={} label="Jason Killian" /> - } + control={} label="Antoine Llorca" /> diff --git a/docs/src/pages/components/switches/SwitchesSize.js b/docs/src/pages/components/switches/SwitchesSize.js index e271913579e021..65f65dfa64c758 100644 --- a/docs/src/pages/components/switches/SwitchesSize.js +++ b/docs/src/pages/components/switches/SwitchesSize.js @@ -13,9 +13,7 @@ export default function SwitchesSize() { return ( - } + control={} label="Small" /> - setOpen(!open)} - > + setOpen(!open)}> {open ? : } diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js index dd4a16544b47b4..6e4ed723d275dd 100644 --- a/docs/src/pages/components/tables/CustomPaginationActionsTable.js +++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.js @@ -52,27 +52,15 @@ function TablePaginationActions(props) { > {theme.direction === 'rtl' ? : } - - {theme.direction === 'rtl' ? ( - - ) : ( - - )} + + {theme.direction === 'rtl' ? : } = Math.ceil(count / rowsPerPage) - 1} aria-label="next page" > - {theme.direction === 'rtl' ? ( - - ) : ( - - )} + {theme.direction === 'rtl' ? : } { setPage(newPage); diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index f3fe7a6db6e10a..7fe1ec406dacf2 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -81,15 +81,7 @@ const headCells = [ ]; function EnhancedTableHead(props) { - const { - classes, - onSelectAllClick, - order, - orderBy, - numSelected, - rowCount, - onRequestSort, - } = props; + const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props; const createSortHandler = (property) => (event) => { onRequestSort(event, property); }; @@ -172,21 +164,11 @@ const EnhancedTableToolbar = (props) => { })} > {numSelected > 0 ? ( - + {numSelected} selected ) : ( - + Nutrition )} @@ -295,8 +277,7 @@ export default function EnhancedTable() { const isSelected = (name) => selected.indexOf(name) !== -1; - const emptyRows = - rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); + const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); return (
@@ -341,12 +322,7 @@ export default function EnhancedTable() { inputProps={{ 'aria-labelledby': labelId }} /> - + {row.name} {row.calories} diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.js b/docs/src/pages/components/tables/ReactVirtualizedTable.js index 8b419b65044cd7..5a423298f03b7c 100644 --- a/docs/src/pages/components/tables/ReactVirtualizedTable.js +++ b/docs/src/pages/components/tables/ReactVirtualizedTable.js @@ -60,11 +60,7 @@ class MuiVirtualizedTable extends React.PureComponent { })} variant="body" style={{ height: rowHeight }} - align={ - (columnIndex != null && columns[columnIndex].numeric) || false - ? 'right' - : 'left' - } + align={(columnIndex != null && columns[columnIndex].numeric) || false ? 'right' : 'left'} > {cellData} @@ -77,11 +73,7 @@ class MuiVirtualizedTable extends React.PureComponent { return ( {({ height, width }) => ( diff --git a/docs/src/pages/components/tables/SpanningTable.js b/docs/src/pages/components/tables/SpanningTable.js index 53addfa178f800..eb172345d20186 100644 --- a/docs/src/pages/components/tables/SpanningTable.js +++ b/docs/src/pages/components/tables/SpanningTable.js @@ -80,9 +80,7 @@ export default function SpanningTable() { Tax - {`${(TAX_RATE * 100).toFixed( - 0, - )} %`} + {`${(TAX_RATE * 100).toFixed(0)} %`} {ccyFormat(invoiceTaxes)} diff --git a/docs/src/pages/components/tables/StickyHeadTable.js b/docs/src/pages/components/tables/StickyHeadTable.js index 33a0aa386878df..c44606b55c0a2f 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.js +++ b/docs/src/pages/components/tables/StickyHeadTable.js @@ -99,24 +99,20 @@ export default function StickyHeadTable() { - {rows - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row) => { - return ( - - {columns.map((column) => { - const value = row[column.id]; - return ( - - {column.format && typeof value === 'number' - ? column.format(value) - : value} - - ); - })} - - ); - })} + {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => { + return ( + + {columns.map((column) => { + const value = row[column.id]; + return ( + + {column.format && typeof value === 'number' ? column.format(value) : value} + + ); + })} + + ); + })} diff --git a/docs/src/pages/components/tabs/AccessibleTabs.js b/docs/src/pages/components/tabs/AccessibleTabs.js index 8769c3add9b46d..b091b133496302 100644 --- a/docs/src/pages/components/tabs/AccessibleTabs.js +++ b/docs/src/pages/components/tabs/AccessibleTabs.js @@ -46,11 +46,7 @@ function DemoTabs(props) { > - + ); @@ -91,11 +87,7 @@ export default function AccessibleTabs() { Tabs where each tab needs to be selected manually - + Item One diff --git a/docs/src/pages/components/tabs/CustomizedTabs.js b/docs/src/pages/components/tabs/CustomizedTabs.js index 3619a979cfb774..4092e10ccd6fac 100644 --- a/docs/src/pages/components/tabs/CustomizedTabs.js +++ b/docs/src/pages/components/tabs/CustomizedTabs.js @@ -106,11 +106,7 @@ export default function CustomizedTabs() {
- + diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js index 85fabba898fe9e..a15561074ad8e9 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js @@ -67,18 +67,10 @@ export default function ScrollableTabsButtonPrevent() { aria-label="scrollable prevent tabs example" > } aria-label="phone" {...a11yProps(0)} /> - } - aria-label="favorite" - {...a11yProps(1)} - /> + } aria-label="favorite" {...a11yProps(1)} /> } aria-label="person" {...a11yProps(2)} /> } aria-label="help" {...a11yProps(3)} /> - } - aria-label="shopping" - {...a11yProps(4)} - /> + } aria-label="shopping" {...a11yProps(4)} /> } aria-label="up" {...a11yProps(5)} /> } aria-label="down" {...a11yProps(6)} /> diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js index 7977107ee32196..c453cc8e5269f6 100644 --- a/docs/src/pages/components/tabs/TabsWrappedLabel.js +++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js @@ -58,11 +58,7 @@ export default function TabsWrappedLabel() { return (
- + - + - - Some important helper text - + Some important helper text Name @@ -58,20 +56,11 @@ export default function ComposedTextField() { Name - + Name - + ); diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.js b/docs/src/pages/components/text-fields/CustomizedInputBase.js index 492a3f90d19025..260bfd30a15b6c 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.js +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.js @@ -41,19 +41,11 @@ export default function CustomizedInputBase() { placeholder="Search Google Maps" inputProps={{ 'aria-label': 'search google maps' }} /> - + - + diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js index 9c1528cc586e9d..07aaac51ac5818 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.js +++ b/docs/src/pages/components/text-fields/CustomizedInputs.js @@ -91,9 +91,7 @@ const useStylesReddit = makeStyles((theme) => ({ function RedditTextField(props) { const classes = useStylesReddit(); - return ( - - ); + return ; } const useStyles = makeStyles((theme) => ({ @@ -134,11 +132,7 @@ export default function CustomizedInputs() { return (
- +
- - + + - + - + { inputRef(ref ? ref.inputElement : null); }} - mask={[ - '(', - /[1-9]/, - /\d/, - /\d/, - ')', - ' ', - /\d/, - /\d/, - /\d/, - '-', - /\d/, - /\d/, - /\d/, - /\d/, - ]} + mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} placeholderChar={'\u2000'} showMask /> @@ -96,9 +81,7 @@ export default function FormattedInputs() { return (
- - react-text-mask - + react-text-mask Kg - ), + startAdornment: Kg, }} /> - + - - Weight - + Weight - - Password - + Password Kg - ), + startAdornment: Kg, }} variant="filled" /> - + Weight - + Password Kg - ), + startAdornment: Kg, }} variant="outlined" /> - + - - Weight - + Weight - - - Password - + + Password - - With a start adornment - + With a start adornment - - - - + + + + ); } diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js index 03197914df97f9..3b2e7dc2ecab3e 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.js +++ b/docs/src/pages/components/text-fields/StateTextFields.js @@ -21,17 +21,8 @@ export default function StateTextFields() { return (
- - + +
- - + +
- +
- + - ); + return ; } diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js index 3685288b9076ed..b01e16caf8ff3f 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js +++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js @@ -62,11 +62,7 @@ export default function ToggleButtonNotEmpty() {
- + diff --git a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js index d4a08fb1266962..2dfba966848995 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js +++ b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js @@ -17,12 +17,7 @@ export default function ToggleButtonSizes() { return ( - + @@ -38,12 +33,7 @@ export default function ToggleButtonSizes() { - + @@ -59,12 +49,7 @@ export default function ToggleButtonSizes() { - + diff --git a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js index 4b56491c6edd9f..a50585cb284c3c 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js +++ b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js @@ -15,11 +15,7 @@ export default function ToggleButtonsMultiple() { }; return ( - + diff --git a/docs/src/pages/components/toggle-button/VerticalToggleButtons.js b/docs/src/pages/components/toggle-button/VerticalToggleButtons.js index 502669872e3c24..180f4c0e9e2c4c 100644 --- a/docs/src/pages/components/toggle-button/VerticalToggleButtons.js +++ b/docs/src/pages/components/toggle-button/VerticalToggleButtons.js @@ -13,12 +13,7 @@ export default function VerticalToggleButtons() { }; return ( - + diff --git a/docs/src/pages/components/tooltips/TransitionsTooltips.js b/docs/src/pages/components/tooltips/TransitionsTooltips.js index ce76b21eb76b33..5e11c90949dac3 100644 --- a/docs/src/pages/components/tooltips/TransitionsTooltips.js +++ b/docs/src/pages/components/tooltips/TransitionsTooltips.js @@ -10,11 +10,7 @@ export default function TransitionsTooltips() { - + diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.js b/docs/src/pages/components/transfer-list/SelectAllTransferList.js index dbfc7a50444821..80251070eecb87 100644 --- a/docs/src/pages/components/transfer-list/SelectAllTransferList.js +++ b/docs/src/pages/components/transfer-list/SelectAllTransferList.js @@ -92,13 +92,8 @@ export default function TransferList() { avatar={ @@ -112,12 +107,7 @@ export default function TransferList() { const labelId = `transfer-list-all-item-${value}-label`; return ( - + + {customList('Choices', left)} diff --git a/docs/src/pages/components/transfer-list/TransferList.js b/docs/src/pages/components/transfer-list/TransferList.js index 82b85b37b46356..be5282befdd64a 100644 --- a/docs/src/pages/components/transfer-list/TransferList.js +++ b/docs/src/pages/components/transfer-list/TransferList.js @@ -82,12 +82,7 @@ export default function TransferList() { const labelId = `transfer-list-item-${value}-label`; return ( - + + {customList(left)} diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js index 363b4342aa9f0d..2f4a59c4989e49 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.js +++ b/docs/src/pages/components/transitions/SimpleCollapse.js @@ -44,20 +44,14 @@ export default function SimpleCollapse() { - + - + diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js index bfc87dcb8d6f5e..ede6c30ca25508 100644 --- a/docs/src/pages/components/transitions/SimpleFade.js +++ b/docs/src/pages/components/transitions/SimpleFade.js @@ -44,10 +44,7 @@ export default function SimpleFade() { - + diff --git a/docs/src/pages/components/transitions/SimpleGrow.js b/docs/src/pages/components/transitions/SimpleGrow.js index e1a372df0d7b9c..f92492973b1a31 100644 --- a/docs/src/pages/components/transitions/SimpleGrow.js +++ b/docs/src/pages/components/transitions/SimpleGrow.js @@ -44,10 +44,7 @@ export default function SimpleGrow() { - + @@ -59,10 +56,7 @@ export default function SimpleGrow() { > - + diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js index 280e5e30782e59..70bc6ef7b27e44 100644 --- a/docs/src/pages/components/transitions/SimpleSlide.js +++ b/docs/src/pages/components/transitions/SimpleSlide.js @@ -46,10 +46,7 @@ export default function SimpleSlide() { - + diff --git a/docs/src/pages/components/transitions/SimpleZoom.js b/docs/src/pages/components/transitions/SimpleZoom.js index 12b73791b0fe0a..04862fb571dd7b 100644 --- a/docs/src/pages/components/transitions/SimpleZoom.js +++ b/docs/src/pages/components/transitions/SimpleZoom.js @@ -44,23 +44,14 @@ export default function SimpleZoom() { - + - + - + diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.js b/docs/src/pages/components/tree-view/CustomizedTreeView.js index 02ce7967ed2cb0..977be0a425cd3d 100644 --- a/docs/src/pages/components/tree-view/CustomizedTreeView.js +++ b/docs/src/pages/components/tree-view/CustomizedTreeView.js @@ -27,12 +27,7 @@ function PlusSquare(props) { function CloseSquare(props) { return ( - + {/* tslint:disable-next-line: max-line-length */} @@ -73,9 +68,7 @@ const StyledTreeItem = withStyles((theme) => ({ paddingLeft: 18, borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`, }, -}))((props) => ( - -)); +}))((props) => ); const useStyles = makeStyles({ root: { diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js index c789a46d516762..19d1101bf3d1b5 100644 --- a/docs/src/pages/components/tree-view/GmailTreeView.js +++ b/docs/src/pages/components/tree-view/GmailTreeView.js @@ -66,14 +66,7 @@ const useTreeItemStyles = makeStyles((theme) => ({ function StyledTreeItem(props) { const classes = useTreeItemStyles(); - const { - labelText, - labelIcon: LabelIcon, - labelInfo, - color, - bgColor, - ...other - } = props; + const { labelText, labelIcon: LabelIcon, labelInfo, color, bgColor, ...other } = props; return ( - subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur + subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur + subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos - blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur, neque doloribus, cupiditate numquam dignissimos laborum - fugiat deleniti? Eum quasi quidem quibusdam. + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam + dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. - body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos - blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur, neque doloribus, cupiditate numquam dignissimos laborum - fugiat deleniti? Eum quasi quidem quibusdam. + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam + dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. button text diff --git a/docs/src/pages/components/typography/TypographyTheme.js b/docs/src/pages/components/typography/TypographyTheme.js index 1f2b5108129005..a78b985e28abee 100644 --- a/docs/src/pages/components/typography/TypographyTheme.js +++ b/docs/src/pages/components/typography/TypographyTheme.js @@ -12,9 +12,5 @@ const useStyles = makeStyles((theme) => ({ export default function TypographyTheme() { const classes = useStyles(); - return ( -
- {"This div's text looks like that of a button."} -
- ); + return
{"This div's text looks like that of a button."}
; } diff --git a/docs/src/pages/components/use-media-query/ThemeHelper.js b/docs/src/pages/components/use-media-query/ThemeHelper.js index 0391723897a8c4..2c538a9005be3c 100644 --- a/docs/src/pages/components/use-media-query/ThemeHelper.js +++ b/docs/src/pages/components/use-media-query/ThemeHelper.js @@ -1,9 +1,5 @@ import React from 'react'; -import { - createMuiTheme, - ThemeProvider, - useTheme, -} from '@material-ui/core/styles'; +import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; function MyComponent() { diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js index 393c83a27f882c..ce42a8c65cd478 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.js +++ b/docs/src/pages/components/use-media-query/UseWidth.js @@ -1,9 +1,5 @@ import React from 'react'; -import { - ThemeProvider, - useTheme, - createMuiTheme, -} from '@material-ui/core/styles'; +import { ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; /** diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.js b/docs/src/pages/customization/components/DynamicCSSVariables.js index e15d0b73b7ff54..77c1706e4d7561 100644 --- a/docs/src/pages/customization/components/DynamicCSSVariables.js +++ b/docs/src/pages/customization/components/DynamicCSSVariables.js @@ -6,8 +6,7 @@ import Switch from '@material-ui/core/Switch'; const useStyles = makeStyles({ button: { - background: - 'linear-gradient(45deg, var(--background-start) 30%, var(--background-end) 90%)', + background: 'linear-gradient(45deg, var(--background-start) 30%, var(--background-end) 90%)', borderRadius: 3, border: 0, color: 'white', diff --git a/docs/src/pages/customization/theming/CustomStyles.js b/docs/src/pages/customization/theming/CustomStyles.js index 2caaacc64af3d6..7f7b07eb90ed35 100644 --- a/docs/src/pages/customization/theming/CustomStyles.js +++ b/docs/src/pages/customization/theming/CustomStyles.js @@ -1,10 +1,6 @@ import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; -import { - createMuiTheme, - makeStyles, - ThemeProvider, -} from '@material-ui/core/styles'; +import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import { orange } from '@material-ui/core/colors'; const useStyles = makeStyles((theme) => ({ diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizes.js b/docs/src/pages/customization/typography/ResponsiveFontSizes.js index 99d8ae9e08c990..23d8338fbfae3e 100644 --- a/docs/src/pages/customization/typography/ResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/ResponsiveFontSizes.js @@ -1,9 +1,5 @@ import React from 'react'; -import { - createMuiTheme, - responsiveFontSizes, - ThemeProvider, -} from '@material-ui/core/styles'; +import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; let theme = createMuiTheme(); diff --git a/docs/src/pages/guides/composition/ListRouter.js b/docs/src/pages/guides/composition/ListRouter.js index ba47ce6bf4461f..62a5cda98879e8 100644 --- a/docs/src/pages/guides/composition/ListRouter.js +++ b/docs/src/pages/guides/composition/ListRouter.js @@ -17,10 +17,7 @@ function ListItemLink(props) { const { icon, primary, to } = props; const renderLink = React.useMemo( - () => - React.forwardRef((itemProps, ref) => ( - - )), + () => React.forwardRef((itemProps, ref) => ), [to], ); @@ -54,9 +51,7 @@ export default function ListRouter() {
{({ location }) => ( - - Current route: {location.pathname} - + Current route: {location.pathname} )} diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index 009702fe08da24..4b09485b7163b3 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -10,8 +10,7 @@ export default function EmotionCSS() { css={css` background-color: #6772e5; color: #fff; - box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), - 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); padding: 7px 14px; &:hover { background-color: #5469d4; diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index afaea5beee6469..113fec183cbf07 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -25,8 +25,7 @@ export default function EmotionTheme() { css={(theme) => css` background-color: ${theme.palette.primary.main}; color: #fff; - box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), - 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); padding: 4px 10px; font-size: 13px; &:hover { diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index f8ffad11c0ea8b..4bb731c9f9f2b7 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -12,14 +12,10 @@ export default function Locales() { return (
- createMuiTheme(outerTheme, locales[locale])} - > + createMuiTheme(outerTheme, locales[locale])}> - `${key.substring(0, 2)}-${key.substring(2, 4)}` - } + getOptionLabel={(key) => `${key.substring(0, 2)}-${key.substring(2, 4)}`} style={{ width: 300 }} value={locale} disableClearable @@ -27,12 +23,7 @@ export default function Locales() { setLocale(newValue); }} renderInput={(params) => ( - + )} /> - + @@ -63,11 +58,7 @@ function Content(props) { /> - diff --git a/docs/src/pages/premium-themes/paperbase/Header.js b/docs/src/pages/premium-themes/paperbase/Header.js index e83cade2fa8df6..39a0a527af7797 100644 --- a/docs/src/pages/premium-themes/paperbase/Header.js +++ b/docs/src/pages/premium-themes/paperbase/Header.js @@ -97,12 +97,7 @@ function Header(props) { - diff --git a/docs/src/pages/premium-themes/paperbase/Navigator.js b/docs/src/pages/premium-themes/paperbase/Navigator.js index 6cc19e9b0d3935..f9f7bcf216e918 100644 --- a/docs/src/pages/premium-themes/paperbase/Navigator.js +++ b/docs/src/pages/premium-themes/paperbase/Navigator.js @@ -88,9 +88,7 @@ function Navigator(props) { return ( - + Paperbase diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index 2b28c6551419ae..d70b8a4163f049 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js @@ -1,10 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { - createMuiTheme, - ThemeProvider, - withStyles, -} from '@material-ui/core/styles'; +import { createMuiTheme, ThemeProvider, withStyles } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Hidden from '@material-ui/core/Hidden'; import Typography from '@material-ui/core/Typography'; diff --git a/docs/src/pages/styles/advanced/GlobalClassName.js b/docs/src/pages/styles/advanced/GlobalClassName.js index 328eab88dd2baf..4fdd1899e30f78 100644 --- a/docs/src/pages/styles/advanced/GlobalClassName.js +++ b/docs/src/pages/styles/advanced/GlobalClassName.js @@ -22,11 +22,7 @@ const StyledTextField = styled(TextField)` export default function GlobalClassName() { return ( - + ); } diff --git a/docs/src/pages/styles/basics/StressTest.js b/docs/src/pages/styles/basics/StressTest.js index 6a1ad4843eccf2..e8703521ec0c5a 100644 --- a/docs/src/pages/styles/basics/StressTest.js +++ b/docs/src/pages/styles/basics/StressTest.js @@ -52,17 +52,10 @@ export default function StressTest() {
- +
- + - + CssProp diff --git a/docs/src/pages/system/basics/RealWorld.js b/docs/src/pages/system/basics/RealWorld.js index 890d511d0f2912..561a2d5911b3e4 100644 --- a/docs/src/pages/system/basics/RealWorld.js +++ b/docs/src/pages/system/basics/RealWorld.js @@ -20,9 +20,7 @@ export default function RealWorld() { - - You have lost connection to the internet. This app is offline. - + You have lost connection to the internet. This app is offline. diff --git a/docs/src/pages/system/display/Block.js b/docs/src/pages/system/display/Block.js index 5521bb0fcff01c..f1a26d4e69e0c2 100644 --- a/docs/src/pages/system/display/Block.js +++ b/docs/src/pages/system/display/Block.js @@ -4,22 +4,10 @@ import Box from '@material-ui/core/Box'; export default function Block() { return (
- + block - + block
diff --git a/docs/src/pages/system/display/Inline.js b/docs/src/pages/system/display/Inline.js index bb0d225bbb6728..fe3af1493576e1 100644 --- a/docs/src/pages/system/display/Inline.js +++ b/docs/src/pages/system/display/Inline.js @@ -4,22 +4,10 @@ import Box from '@material-ui/core/Box'; export default function Inline() { return (
- + inline - + inline
diff --git a/docs/src/pages/system/display/TextOverflow.js b/docs/src/pages/system/display/TextOverflow.js index a79b4a43e6aaae..a2add7201139f5 100644 --- a/docs/src/pages/system/display/TextOverflow.js +++ b/docs/src/pages/system/display/TextOverflow.js @@ -4,13 +4,7 @@ import Box from '@material-ui/core/Box'; export default function TextOverflow() { return (
- + Text Overflow Clip. Text Overflow Clip. - + Visibility Visible - + Visibility Hidden
diff --git a/docs/src/pages/system/display/WhiteSpace.js b/docs/src/pages/system/display/WhiteSpace.js index 543326b89992ee..1c08c8674dc443 100644 --- a/docs/src/pages/system/display/WhiteSpace.js +++ b/docs/src/pages/system/display/WhiteSpace.js @@ -4,20 +4,10 @@ import Box from '@material-ui/core/Box'; export default function WhiteSpace() { return (
- + White Space Nowrap. White Space Nowrap. - + White Space Normal. White Space Normal.
diff --git a/docs/src/pages/system/flexbox/FlexDirection.js b/docs/src/pages/system/flexbox/FlexDirection.js index 2d596b7a3282a8..560b1f15272fdd 100644 --- a/docs/src/pages/system/flexbox/FlexDirection.js +++ b/docs/src/pages/system/flexbox/FlexDirection.js @@ -4,13 +4,7 @@ import Box from '@material-ui/core/Box'; export default function FlexDirection() { return (
- + Item 1 @@ -21,13 +15,7 @@ export default function FlexDirection() { Item 3 - + Item 1 diff --git a/docs/src/pages/system/flexbox/JustifyContent.js b/docs/src/pages/system/flexbox/JustifyContent.js index d051c0bcc67318..6a39177439e871 100644 --- a/docs/src/pages/system/flexbox/JustifyContent.js +++ b/docs/src/pages/system/flexbox/JustifyContent.js @@ -4,13 +4,7 @@ import Box from '@material-ui/core/Box'; export default function JustifyContent() { return (
- + Item 1 @@ -21,13 +15,7 @@ export default function JustifyContent() { Item 1 - + Item 1 @@ -38,13 +26,7 @@ export default function JustifyContent() { Item 1 - + Item 1 diff --git a/docs/src/pages/system/sizing/Height.js b/docs/src/pages/system/sizing/Height.js index f783ae2228b279..97bde16cd5593f 100644 --- a/docs/src/pages/system/sizing/Height.js +++ b/docs/src/pages/system/sizing/Height.js @@ -4,40 +4,16 @@ import Box from '@material-ui/core/Box'; export default function Height() { return ( - + Height 25% - + Height 50% - + Height 75% - + Height 100% diff --git a/docs/src/pages/system/typography/TextAlignment.js b/docs/src/pages/system/typography/TextAlignment.js index a374cfc00212d1..0800bade22d47a 100644 --- a/docs/src/pages/system/typography/TextAlignment.js +++ b/docs/src/pages/system/typography/TextAlignment.js @@ -6,8 +6,8 @@ export default function TextAlignment() { return ( - Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit - amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. + Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. + Donec sed odio operae, eu vulputate felis rhoncus. Left aligned text. From 2bc243d6c44cf3ae84f3ba1f9eaa107be00598a7 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 16 Sep 2020 02:02:07 +0100 Subject: [PATCH 22/29] proptypes --- .../src/ImageListItemBar/ImageListItemBar.d.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts index 1285c31b66fcbd..07197b42a6a7fc 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts @@ -11,6 +11,10 @@ export interface ImageListItemBarProps extends StandardProps<{}, ImageListItemBa * Position of secondary action IconButton. */ actionPosition?: 'left' | 'right'; + /** + * Position of the title bar. + */ + position?: 'top' | 'bottom'; /** * String or element serving as subtitle (support text). */ @@ -20,9 +24,9 @@ export interface ImageListItemBarProps extends StandardProps<{}, ImageListItemBa */ title?: React.ReactNode; /** - * Position of the title bar. + * @ignore */ - position?: 'top' | 'bottom'; + titlePosition?: 'top' | 'bottom'; } export type ImageListItemBarClassKey = From 80bf913af1b85ba70b7a25794cfdadc31c19a796 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 16 Sep 2020 15:57:54 +0200 Subject: [PATCH 23/29] yarn proptypes --disable-cache --- .../material-ui/src/ImageList/ImageList.js | 25 +++++++------------ .../src/ImageListItem/ImageListItem.js | 10 +++++--- 2 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index e3c295f9e640a7..2c728550a82fc2 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -75,28 +75,25 @@ const ImageList = React.forwardRef(function ImageList(props, ref) { }); ImageList.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * @ignore */ - cellHeight: deprecatedPropType( - PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]), - 'Use the `rowHeight` prop instead.', - ), - /** - * Items that will be in the image list. - */ - children: PropTypes.node.isRequired, + children: PropTypes.node, /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ className: PropTypes.string, /** - * Number of columns. + * @ignore */ cols: PropTypes.number, /** @@ -105,17 +102,13 @@ ImageList.propTypes = { */ component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** - * The gap between items in `px`. + * @ignore */ gap: PropTypes.number, - /** - * The height of one row in `px`. - */ - rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]), /** * @ignore */ - spacing: deprecatedPropType(PropTypes.number, 'Use the `rowHeight` prop instead.'), + rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), /** * @ignore */ diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.js b/packages/material-ui/src/ImageListItem/ImageListItem.js index 29cb8f044f9314..3b00f8812040e9 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.js +++ b/packages/material-ui/src/ImageListItem/ImageListItem.js @@ -119,8 +119,12 @@ const ImageListItem = React.forwardRef(function ImageListItem(props, ref) { }); ImageListItem.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** - * While you can pass any node as children, the main use case is for an img. + * @ignore */ children: PropTypes.node, /** @@ -133,7 +137,7 @@ ImageListItem.propTypes = { */ className: PropTypes.string, /** - * Width of the item in number of grid columns. + * @ignore */ cols: PropTypes.number, /** @@ -142,7 +146,7 @@ ImageListItem.propTypes = { */ component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** - * Height of the item in number of grid rows. + * @ignore */ rows: PropTypes.number, }; From f73b694bc5250c29742e33b58660f60551091eeb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 16 Sep 2020 16:00:05 +0200 Subject: [PATCH 24/29] yarn docs:typescript:formatted --disable-cache --- docs/src/pages/components/autocomplete/ComboBox.js | 5 +---- .../pages/components/autocomplete/CountrySelect.js | 12 ++---------- .../pages/components/autocomplete/CustomizedHook.js | 5 +---- docs/src/pages/components/autocomplete/Filter.js | 5 +---- docs/src/pages/components/autocomplete/FixedTags.js | 5 +---- docs/src/pages/components/autocomplete/FreeSolo.js | 5 +---- docs/src/pages/components/autocomplete/Grouped.js | 5 +---- docs/src/pages/components/autocomplete/Highlights.js | 5 +---- docs/src/pages/components/autocomplete/LimitTags.js | 5 +---- docs/src/pages/components/autocomplete/Playground.js | 5 +---- docs/src/pages/components/autocomplete/Sizes.js | 5 +---- docs/src/pages/components/autocomplete/Tags.js | 5 +---- .../pages/components/autocomplete/UseAutocomplete.js | 5 +---- .../FloatingActionButtonZoom.js | 4 ++-- docs/src/pages/components/grid/InteractiveGrid.js | 5 +---- .../pages/components/menus/MenuListComposition.js | 4 +--- .../components/progress/CircularWithValueLabel.js | 1 - .../pages/components/steppers/CustomizedSteppers.js | 4 ---- docs/src/pages/components/tables/EnhancedTable.js | 7 +------ docs/src/pages/components/tabs/FullWidthTabs.js | 4 ++-- docs/src/pages/components/tabs/NavTabs.js | 4 ++-- .../components/tabs/ScrollableTabsButtonAuto.js | 7 +++++++ .../components/tabs/ScrollableTabsButtonForce.js | 7 +++++++ .../components/tabs/ScrollableTabsButtonPrevent.js | 7 +++++++ docs/src/pages/components/tabs/TabsWrappedLabel.js | 4 ++-- docs/src/pages/components/tabs/VerticalTabs.js | 4 ++-- .../pages/components/tree-view/CustomizedTreeView.js | 5 +---- docs/src/pages/styles/basics/AdaptingHOC.js | 3 +++ docs/src/pages/system/basics/Demo.js | 4 +--- 29 files changed, 53 insertions(+), 93 deletions(-) diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js index 76a88823916296..6c996784ceb5b7 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.js +++ b/docs/src/pages/components/autocomplete/ComboBox.js @@ -69,10 +69,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js index cc359fc2386e2d..87e7cd6da01afc 100644 --- a/docs/src/pages/components/autocomplete/CountrySelect.js +++ b/docs/src/pages/components/autocomplete/CountrySelect.js @@ -148,11 +148,7 @@ const countries = [ { code: 'GP', label: 'Guadeloupe', phone: '590' }, { code: 'GQ', label: 'Equatorial Guinea', phone: '240' }, { code: 'GR', label: 'Greece', phone: '30' }, - { - code: 'GS', - label: 'South Georgia and the South Sandwich Islands', - phone: '500', - }, + { code: 'GS', label: 'South Georgia and the South Sandwich Islands', phone: '500' }, { code: 'GT', label: 'Guatemala', phone: '502' }, { code: 'GU', label: 'Guam', phone: '1-671' }, { code: 'GW', label: 'Guinea-Bissau', phone: '245' }, @@ -206,11 +202,7 @@ const countries = [ { code: 'MF', label: 'Saint Martin (French part)', phone: '590' }, { code: 'MG', label: 'Madagascar', phone: '261' }, { code: 'MH', label: 'Marshall Islands', phone: '692' }, - { - code: 'MK', - label: 'Macedonia, the Former Yugoslav Republic of', - phone: '389', - }, + { code: 'MK', label: 'Macedonia, the Former Yugoslav Republic of', phone: '389' }, { code: 'ML', label: 'Mali', phone: '223' }, { code: 'MM', label: 'Myanmar', phone: '95' }, { code: 'MN', label: 'Mongolia', phone: '976' }, diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js index c9d8e21166d4ed..29d0f94e0d9516 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.js +++ b/docs/src/pages/components/autocomplete/CustomizedHook.js @@ -228,10 +228,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js index 2effd521928c1e..5d750037522dfe 100644 --- a/docs/src/pages/components/autocomplete/Filter.js +++ b/docs/src/pages/components/autocomplete/Filter.js @@ -75,10 +75,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js index 2999d1af55b833..ec0daee80f8c94 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.js +++ b/docs/src/pages/components/autocomplete/FixedTags.js @@ -92,10 +92,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js index 39ba501c4dd29a..dc2372f2a71713 100644 --- a/docs/src/pages/components/autocomplete/FreeSolo.js +++ b/docs/src/pages/components/autocomplete/FreeSolo.js @@ -87,10 +87,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js index dfe3722853ef98..8fbd2cf626f9c1 100644 --- a/docs/src/pages/components/autocomplete/Grouped.js +++ b/docs/src/pages/components/autocomplete/Grouped.js @@ -78,10 +78,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js index f8a4e4cf9a586d..ae7f8a522bf295 100644 --- a/docs/src/pages/components/autocomplete/Highlights.js +++ b/docs/src/pages/components/autocomplete/Highlights.js @@ -87,10 +87,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/LimitTags.js b/docs/src/pages/components/autocomplete/LimitTags.js index b0e41010b8db8f..f3c666b2bdb83d 100644 --- a/docs/src/pages/components/autocomplete/LimitTags.js +++ b/docs/src/pages/components/autocomplete/LimitTags.js @@ -87,10 +87,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index 50005bb6b06075..fd118d1029a0ea 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/docs/src/pages/components/autocomplete/Playground.js @@ -184,10 +184,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/Sizes.js b/docs/src/pages/components/autocomplete/Sizes.js index d93e3430f6b579..475226fb7be104 100644 --- a/docs/src/pages/components/autocomplete/Sizes.js +++ b/docs/src/pages/components/autocomplete/Sizes.js @@ -160,10 +160,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js index 40e0fc547e94a4..f5c867e4d2e3f1 100644 --- a/docs/src/pages/components/autocomplete/Tags.js +++ b/docs/src/pages/components/autocomplete/Tags.js @@ -123,10 +123,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.js b/docs/src/pages/components/autocomplete/UseAutocomplete.js index 2653610ed1b1b9..9ac6e9448ae4ed 100644 --- a/docs/src/pages/components/autocomplete/UseAutocomplete.js +++ b/docs/src/pages/components/autocomplete/UseAutocomplete.js @@ -121,10 +121,7 @@ const top100Films = [ { title: 'Apocalypse Now', year: 1979 }, { title: 'Alien', year: 1979 }, { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, + { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 }, { title: 'The Great Dictator', year: 1940 }, { title: 'Cinema Paradiso', year: 1988 }, { title: 'The Lives of Others', year: 2006 }, diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js index d0d2f7f156289c..b85e43150e7c09 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js @@ -34,8 +34,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, }; function a11yProps(index) { diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js index de9a9f8464db43..54872088b17a2f 100644 --- a/docs/src/pages/components/grid/InteractiveGrid.js +++ b/docs/src/pages/components/grid/InteractiveGrid.js @@ -56,10 +56,7 @@ export default function InteractiveGrid() { {`Cell ${value + 1}`} diff --git a/docs/src/pages/components/menus/MenuListComposition.js b/docs/src/pages/components/menus/MenuListComposition.js index 4d3fd50e023760..4effad0c7f67d9 100644 --- a/docs/src/pages/components/menus/MenuListComposition.js +++ b/docs/src/pages/components/menus/MenuListComposition.js @@ -73,9 +73,7 @@ export default function MenuListComposition() { {({ TransitionProps, placement }) => ( diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.js b/docs/src/pages/components/progress/CircularWithValueLabel.js index ab34c5d692fb44..15d90065e38cc2 100644 --- a/docs/src/pages/components/progress/CircularWithValueLabel.js +++ b/docs/src/pages/components/progress/CircularWithValueLabel.js @@ -30,7 +30,6 @@ CircularProgressWithLabel.propTypes = { /** * The value of the progress indicator for the determinate variant. * Value between 0 and 100. - * @default 0 */ value: PropTypes.number.isRequired, }; diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js index 548bbbcf2c1734..d546c499514469 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.js +++ b/docs/src/pages/components/steppers/CustomizedSteppers.js @@ -77,12 +77,10 @@ function QontoStepIcon(props) { QontoStepIcon.propTypes = { /** * Whether this step is active. - * @default false */ active: PropTypes.bool, /** * Mark the step as completed. Is passed to child components. - * @default false */ completed: PropTypes.bool, }; @@ -159,12 +157,10 @@ function ColorlibStepIcon(props) { ColorlibStepIcon.propTypes = { /** * Whether this step is active. - * @default false */ active: PropTypes.bool, /** * Mark the step as completed. Is passed to child components. - * @default false */ completed: PropTypes.bool, /** diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 7fe1ec406dacf2..5d1732174b5b29 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -68,12 +68,7 @@ function stableSort(array, comparator) { } const headCells = [ - { - id: 'name', - numeric: false, - disablePadding: true, - label: 'Dessert (100g serving)', - }, + { id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' }, { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' }, { id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' }, { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' }, diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js index 9b677421563043..e1a1b2e5e27c34 100644 --- a/docs/src/pages/components/tabs/FullWidthTabs.js +++ b/docs/src/pages/components/tabs/FullWidthTabs.js @@ -30,8 +30,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, }; function a11yProps(index) { diff --git a/docs/src/pages/components/tabs/NavTabs.js b/docs/src/pages/components/tabs/NavTabs.js index 0ab6b511ec94c0..9c6a2bbc361f27 100644 --- a/docs/src/pages/components/tabs/NavTabs.js +++ b/docs/src/pages/components/tabs/NavTabs.js @@ -29,8 +29,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, }; function a11yProps(index) { diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js index 5d94d78220c9df..79ffa21dc2d800 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; @@ -26,6 +27,12 @@ function TabPanel(props) { ); } +TabPanel.propTypes = { + children: PropTypes.node, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, +}; + function a11yProps(index) { return { id: `scrollable-auto-tab-${index}`, diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js index 1918cb74e1d0ec..c739f70416fc76 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; @@ -33,6 +34,12 @@ function TabPanel(props) { ); } +TabPanel.propTypes = { + children: PropTypes.node, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, +}; + function a11yProps(index) { return { id: `scrollable-force-tab-${index}`, diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js index a15561074ad8e9..dbb8c34d2ace3b 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; @@ -33,6 +34,12 @@ function TabPanel(props) { ); } +TabPanel.propTypes = { + children: PropTypes.node, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, +}; + function a11yProps(index) { return { id: `scrollable-prevent-tab-${index}`, diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js index c453cc8e5269f6..670de0970ef7dd 100644 --- a/docs/src/pages/components/tabs/TabsWrappedLabel.js +++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js @@ -29,8 +29,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, }; function a11yProps(index) { diff --git a/docs/src/pages/components/tabs/VerticalTabs.js b/docs/src/pages/components/tabs/VerticalTabs.js index 9d90d77091fcc5..10958261a5eaf3 100644 --- a/docs/src/pages/components/tabs/VerticalTabs.js +++ b/docs/src/pages/components/tabs/VerticalTabs.js @@ -28,8 +28,8 @@ function TabPanel(props) { TabPanel.propTypes = { children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, + index: PropTypes.any.isRequired, + value: PropTypes.any.isRequired, }; function a11yProps(index) { diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.js b/docs/src/pages/components/tree-view/CustomizedTreeView.js index 977be0a425cd3d..ee10f7ca2338a7 100644 --- a/docs/src/pages/components/tree-view/CustomizedTreeView.js +++ b/docs/src/pages/components/tree-view/CustomizedTreeView.js @@ -37,10 +37,7 @@ function CloseSquare(props) { function TransitionComponent(props) { const style = useSpring({ from: { opacity: 0, transform: 'translate3d(20px,0,0)' }, - to: { - opacity: props.in ? 1 : 0, - transform: `translate3d(${props.in ? 0 : 20}px,0,0)`, - }, + to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` }, }); return ( diff --git a/docs/src/pages/styles/basics/AdaptingHOC.js b/docs/src/pages/styles/basics/AdaptingHOC.js index 47cc617a9516f2..930e6a840c5b73 100644 --- a/docs/src/pages/styles/basics/AdaptingHOC.js +++ b/docs/src/pages/styles/basics/AdaptingHOC.js @@ -28,6 +28,9 @@ function MyButtonRaw(props) { } MyButtonRaw.propTypes = { + /** + * Override or extend the styles applied to the component. + */ classes: PropTypes.object.isRequired, color: PropTypes.oneOf(['blue', 'red']).isRequired, }; diff --git a/docs/src/pages/system/basics/Demo.js b/docs/src/pages/system/basics/Demo.js index f20a3ef7715078..db049102bfa0a5 100644 --- a/docs/src/pages/system/basics/Demo.js +++ b/docs/src/pages/system/basics/Demo.js @@ -4,9 +4,7 @@ import NoSsr from '@material-ui/core/NoSsr'; import { createMuiTheme } from '@material-ui/core/styles'; import { palette, spacing, typography } from '@material-ui/system'; -const Box = styled.div` - ${palette}${spacing}${typography} -`; +const Box = styled.div`${palette}${spacing}${typography}`; // or import Box from '@material-ui/core/Box'; const theme = createMuiTheme(); From 1b98f79f50c908171de9c82c1794c42aaf8c1a66 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 16 Sep 2020 16:07:11 +0200 Subject: [PATCH 25/29] yarn docs:api --- docs/pages/api-docs/image-list-item.md | 3 --- docs/pages/api-docs/image-list.md | 4 ---- 2 files changed, 7 deletions(-) diff --git a/docs/pages/api-docs/image-list-item.md b/docs/pages/api-docs/image-list-item.md index 75c7ea7b720b08..9752b55b6a7aff 100644 --- a/docs/pages/api-docs/image-list-item.md +++ b/docs/pages/api-docs/image-list-item.md @@ -28,11 +28,8 @@ The `MuiImageListItem` name can be used for providing [default props](/customiza | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | While you can pass any node as children, the main use case is for an img. | | 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 item in number of grid columns. | | component | elementType | 'li' | The component used for the root node. Either a string to use a HTML element or a component. | -| rows | number | 1 | Height of the item in number of grid rows. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/image-list.md b/docs/pages/api-docs/image-list.md index 04dd565772bebe..e4c19687754ed2 100644 --- a/docs/pages/api-docs/image-list.md +++ b/docs/pages/api-docs/image-list.md @@ -28,12 +28,8 @@ The `MuiImageList` name can be used for providing [default props](/customization | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children* | node | | Items that will be in the image list. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| cols | number | 2 | Number of columns. | | component | elementType | 'ul' | The component used for the root node. Either a string to use a HTML element or a component. | -| gap | number | 4 | The gap between items in `px`. | -| rowHeight | number
| 'auto' | 180 | The height of one row in `px`. | The `ref` is forwarded to the root element. From 3e4c48fe217acadef2500ea2056f3e5902007f68 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 18 Sep 2020 16:22:43 +0200 Subject: [PATCH 26/29] Matt review --- docs/pages/api-docs/image-list.md | 2 ++ packages/material-ui/src/ImageList/ImageList.d.ts | 10 +++++++++- packages/material-ui/src/ImageList/ImageList.js | 11 +++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/image-list.md b/docs/pages/api-docs/image-list.md index e4c19687754ed2..03857a186c1211 100644 --- a/docs/pages/api-docs/image-list.md +++ b/docs/pages/api-docs/image-list.md @@ -28,8 +28,10 @@ The `MuiImageList` name can be used for providing [default props](/customization | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| ~~cellHeight~~ | oneOfType([PropTypes.number | | *Deprecated*. Use the `rowHeight` prop instead.

| | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'ul' | The component used for the root node. Either a string to use a HTML element or a component. | +| ~~spacing~~ | number | | *Deprecated*. Use the `rowHeight` prop instead.

| The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts index e75c5ca19db5b2..a33857804f3b96 100644 --- a/packages/material-ui/src/ImageList/ImageList.d.ts +++ b/packages/material-ui/src/ImageList/ImageList.d.ts @@ -3,9 +3,17 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ImageListTypeMap

{ props: P & { - rowHeight?: number | 'auto'; + /** + * @deprecated use rowHeight instead. + */ + cellHeight?: number | 'auto'; cols?: number; gap?: number; + rowHeight?: number | 'auto'; + /** + * @deprecated use gap instead. + */ + spacing?: number; }; defaultComponent: D; classKey: ImageListClassKey; diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index 2c728550a82fc2..0fae28e91315aa 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -79,6 +79,13 @@ ImageList.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * @deprecated use rowHeight instead. + */ + cellHeight: deprecatedPropType( + PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]), + 'Use the `rowHeight` prop instead.', + ), /** * @ignore */ @@ -109,6 +116,10 @@ ImageList.propTypes = { * @ignore */ rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + /** + * @deprecated use gap instead. + */ + spacing: deprecatedPropType(PropTypes.number, 'Use the `rowHeight` prop instead.'), /** * @ignore */ From 90e7679b00a09aa42dbd0f094b1bc5d4cee9b838 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 18 Sep 2020 22:49:00 +0200 Subject: [PATCH 27/29] add more descriptions --- docs/pages/api-docs/image-list.md | 7 +++++-- packages/material-ui/src/ImageList/ImageList.d.ts | 12 ++++++++++++ packages/material-ui/src/ImageList/ImageList.js | 11 +++++++---- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/docs/pages/api-docs/image-list.md b/docs/pages/api-docs/image-list.md index 03857a186c1211..a5a922df6d558d 100644 --- a/docs/pages/api-docs/image-list.md +++ b/docs/pages/api-docs/image-list.md @@ -28,10 +28,13 @@ The `MuiImageList` name can be used for providing [default props](/customization | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| ~~cellHeight~~ | oneOfType([PropTypes.number | | *Deprecated*. Use the `rowHeight` prop instead.

| +| ~~cellHeight~~ | oneOfType([PropTypes.number | | *Deprecated*. Use the `rowHeight` prop instead.

Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| cols | number | 2 | Number of columns. | | component | elementType | 'ul' | The component used for the root node. Either a string to use a HTML element or a component. | -| ~~spacing~~ | number | | *Deprecated*. Use the `rowHeight` prop instead.

| +| gap | number | 4 | The gap between items in px. | +| rowHeight | 'auto'
| number | 180 | The height of one row in px. | +| ~~spacing~~ | number | | *Deprecated*. Use the `gap` prop instead.

Number of px for the spacing between tiles. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts index a33857804f3b96..210f4b6ba356e6 100644 --- a/packages/material-ui/src/ImageList/ImageList.d.ts +++ b/packages/material-ui/src/ImageList/ImageList.d.ts @@ -4,13 +4,25 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ImageListTypeMap

{ props: P & { /** + * Number of px for one cell height. + * You can set `'auto'` if you want to let the children determine the height. * @deprecated use rowHeight instead. */ cellHeight?: number | 'auto'; + /** + * Number of columns. + */ cols?: number; + /** + * The gap between items in px. + */ gap?: number; + /** + * The height of one row in px. + */ rowHeight?: number | 'auto'; /** + * Number of px for the spacing between tiles. * @deprecated use gap instead. */ spacing?: number; diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index 0fae28e91315aa..6cd533c4247281 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -80,6 +80,8 @@ ImageList.propTypes = { // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** + * Number of px for one cell height. + * You can set `'auto'` if you want to let the children determine the height. * @deprecated use rowHeight instead. */ cellHeight: deprecatedPropType( @@ -100,7 +102,7 @@ ImageList.propTypes = { */ className: PropTypes.string, /** - * @ignore + * Number of columns. */ cols: PropTypes.number, /** @@ -109,17 +111,18 @@ ImageList.propTypes = { */ component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** - * @ignore + * The gap between items in px. */ gap: PropTypes.number, /** - * @ignore + * The height of one row in px. */ rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), /** + * Number of px for the spacing between tiles. * @deprecated use gap instead. */ - spacing: deprecatedPropType(PropTypes.number, 'Use the `rowHeight` prop instead.'), + spacing: deprecatedPropType(PropTypes.number, 'Use the `gap` prop instead.'), /** * @ignore */ From 8e280c28d5e5b42381cc0a3df2cb2e49ee9a9340 Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 19 Sep 2020 17:45:27 +0100 Subject: [PATCH 28/29] Restore yet more prop descriptions mysteriously killed by 'yarn proptypes --disable-cache' --- docs/pages/api-docs/image-list-item-bar.md | 1 + docs/pages/api-docs/image-list-item.md | 3 +++ docs/pages/api-docs/image-list.md | 9 +++++---- .../material-ui/src/ImageList/ImageList.d.ts | 18 +++++++++++------- .../material-ui/src/ImageList/ImageList.js | 16 ++++++++-------- .../src/ImageListItem/ImageListItem.d.ts | 16 +++++++++++++--- .../src/ImageListItem/ImageListItem.js | 6 +++--- .../src/ImageListItemBar/ImageListItemBar.d.ts | 3 ++- .../src/ImageListItemBar/ImageListItemBar.js | 3 ++- 9 files changed, 48 insertions(+), 27 deletions(-) diff --git a/docs/pages/api-docs/image-list-item-bar.md b/docs/pages/api-docs/image-list-item-bar.md index 07e6eb02b3c83d..4a92a46fae3c5f 100644 --- a/docs/pages/api-docs/image-list-item-bar.md +++ b/docs/pages/api-docs/image-list-item-bar.md @@ -34,6 +34,7 @@ The `MuiImageListItemBar` name can be used for providing [default props](/custom | position | 'bottom'
| 'top' | 'bottom' | Position of the title bar. | | subtitle | node | | String or element serving as subtitle (support text). | | title | node | | Title to be displayed on item. | +| ~~titlePosition~~ | oneOf(['bottom' | | *Deprecated*. Use the `position` prop instead.

Position of the title bar. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/image-list-item.md b/docs/pages/api-docs/image-list-item.md index 9752b55b6a7aff..75c7ea7b720b08 100644 --- a/docs/pages/api-docs/image-list-item.md +++ b/docs/pages/api-docs/image-list-item.md @@ -28,8 +28,11 @@ The `MuiImageListItem` name can be used for providing [default props](/customiza | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| children | node | | While you can pass any node as children, the main use case is for an img. | | 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 item in number of grid columns. | | component | elementType | 'li' | The component used for the root node. Either a string to use a HTML element or a component. | +| rows | number | 1 | Height of the item in number of grid rows. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/image-list.md b/docs/pages/api-docs/image-list.md index a5a922df6d558d..37e10c1ba9a58a 100644 --- a/docs/pages/api-docs/image-list.md +++ b/docs/pages/api-docs/image-list.md @@ -28,13 +28,14 @@ The `MuiImageList` name can be used for providing [default props](/customization | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| ~~cellHeight~~ | oneOfType([PropTypes.number | | *Deprecated*. Use the `rowHeight` prop instead.

Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. | +| ~~cellHeight~~ | oneOfType([PropTypes.number | | *Deprecated*. Use the `rowHeight` prop instead.

Cell height in `px`. Set to `'auto'` to let the children determine the height. | +| children | node | | Items that will be in the image list. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | cols | number | 2 | Number of columns. | | component | elementType | 'ul' | The component used for the root node. Either a string to use a HTML element or a component. | -| gap | number | 4 | The gap between items in px. | -| rowHeight | 'auto'
| number | 180 | The height of one row in px. | -| ~~spacing~~ | number | | *Deprecated*. Use the `gap` prop instead.

Number of px for the spacing between tiles. | +| gap | number | 4 | The gap between items in `px`. | +| rowHeight | 'auto'
| number | 180 | The height of one row in `px`. | +| ~~spacing~~ | number | | *Deprecated*. Use the `gap` prop instead.

The spacing between items in `px`. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts index 210f4b6ba356e6..e33a6c4d65e17c 100644 --- a/packages/material-ui/src/ImageList/ImageList.d.ts +++ b/packages/material-ui/src/ImageList/ImageList.d.ts @@ -4,26 +4,30 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ImageListTypeMap

{ props: P & { /** - * Number of px for one cell height. - * You can set `'auto'` if you want to let the children determine the height. - * @deprecated use rowHeight instead. + * Cell height in `px`. + * Set to `'auto'` to let the children determine the height. + * @deprecated Use rowHeight instead. */ cellHeight?: number | 'auto'; + /** + * Items that will be in the image list. + */ + children?: React.ReactNode; /** * Number of columns. */ cols?: number; /** - * The gap between items in px. + * The gap between items in `px`. */ gap?: number; /** - * The height of one row in px. + * The height of one row in `px`. */ rowHeight?: number | 'auto'; /** - * Number of px for the spacing between tiles. - * @deprecated use gap instead. + * The spacing between items in `px`. + * @deprecated Use gap instead. */ spacing?: number; }; diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index 6cd533c4247281..409957ffd7bdef 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -80,16 +80,16 @@ ImageList.propTypes = { // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * Number of px for one cell height. - * You can set `'auto'` if you want to let the children determine the height. - * @deprecated use rowHeight instead. + * Cell height in `px`. + * Set to `'auto'` to let the children determine the height. + * @deprecated Use rowHeight instead. */ cellHeight: deprecatedPropType( PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]), 'Use the `rowHeight` prop instead.', ), /** - * @ignore + * Items that will be in the image list. */ children: PropTypes.node, /** @@ -111,16 +111,16 @@ ImageList.propTypes = { */ component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** - * The gap between items in px. + * The gap between items in `px`. */ gap: PropTypes.number, /** - * The height of one row in px. + * The height of one row in `px`. */ rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), /** - * Number of px for the spacing between tiles. - * @deprecated use gap instead. + * The spacing between items in `px`. + * @deprecated Use gap instead. */ spacing: deprecatedPropType(PropTypes.number, 'Use the `gap` prop instead.'), /** diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts index 7f382543b3a34e..86b8a64b4c54be 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts +++ b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts @@ -2,9 +2,19 @@ import * as React from 'react'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ImageListItemTypeMap

{ - props: P & { - cols?: number; - rows?: number; + props: P & { + /** + * While you can pass any node as children, the main use case is for an img. + */ + children?: React.ReactNode, + /** + * Width of the item in number of grid columns. + */ + cols?: number; + /** + * Height of the item in number of grid rows. + */ + rows?: number; }; defaultComponent: D; classKey: ImageListItemClassKey; diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.js b/packages/material-ui/src/ImageListItem/ImageListItem.js index 3b00f8812040e9..0e91b53e54a525 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.js +++ b/packages/material-ui/src/ImageListItem/ImageListItem.js @@ -124,7 +124,7 @@ ImageListItem.propTypes = { // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * @ignore + * While you can pass any node as children, the main use case is for an img. */ children: PropTypes.node, /** @@ -137,7 +137,7 @@ ImageListItem.propTypes = { */ className: PropTypes.string, /** - * @ignore + * Width of the item in number of grid columns. */ cols: PropTypes.number, /** @@ -146,7 +146,7 @@ ImageListItem.propTypes = { */ component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** - * @ignore + * Height of the item in number of grid rows. */ rows: PropTypes.number, }; diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts index 07197b42a6a7fc..bedb12aa15603e 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts @@ -24,7 +24,8 @@ export interface ImageListItemBarProps extends StandardProps<{}, ImageListItemBa */ title?: React.ReactNode; /** - * @ignore + * Position of the title bar. + * @deprecated Use position instead. */ titlePosition?: 'top' | 'bottom'; } diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js index 918e953fa3dfaa..c64258104c8845 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js @@ -156,7 +156,8 @@ ImageListItemBar.propTypes = { */ title: PropTypes.node, /** - * @ignore + * Position of the title bar. + * @deprecated Use position instead. */ titlePosition: deprecatedPropType( PropTypes.oneOf(['bottom', 'top']), From 3e8b0ee68d796831c6e94fa95b7ba0e7d3afeeaf Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 19 Sep 2020 18:05:43 +0100 Subject: [PATCH 29/29] prettier --- .../src/ImageListItem/ImageListItem.d.ts | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts index 86b8a64b4c54be..0e60f3cea17f4b 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts +++ b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts @@ -2,19 +2,19 @@ import * as React from 'react'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ImageListItemTypeMap

{ - props: P & { - /** - * While you can pass any node as children, the main use case is for an img. - */ - children?: React.ReactNode, - /** - * Width of the item in number of grid columns. - */ - cols?: number; - /** - * Height of the item in number of grid rows. - */ - rows?: number; + props: P & { + /** + * While you can pass any node as children, the main use case is for an img. + */ + children?: React.ReactNode; + /** + * Width of the item in number of grid columns. + */ + cols?: number; + /** + * Height of the item in number of grid rows. + */ + rows?: number; }; defaultComponent: D; classKey: ImageListItemClassKey;