From 931add6334e9df8441bc4433c7dcc9e91fe6423d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 16 Nov 2019 13:32:14 +0100 Subject: [PATCH] [docs] Increase the contrast of the demos --- docs/src/modules/components/Demo.js | 21 ++++-- docs/src/modules/utils/getJsxPreview.js | 4 +- docs/src/modules/utils/getJsxPreview.test.js | 17 ----- .../pages/components/avatars/IconAvatars.js | 28 ++++---- .../pages/components/avatars/IconAvatars.tsx | 46 ++++++------ .../pages/components/avatars/ImageAvatars.js | 19 ++--- .../pages/components/avatars/ImageAvatars.tsx | 33 +++++---- .../pages/components/avatars/LetterAvatars.js | 28 ++++---- .../components/avatars/LetterAvatars.tsx | 46 ++++++------ .../components/avatars/VariantAvatars.js | 10 +-- .../components/avatars/VariantAvatars.tsx | 36 +++++----- .../bottom-navigation/bottom-navigation.md | 4 +- .../breadcrumbs/ActiveLastBreadcrumb.js | 29 ++++++++ .../breadcrumbs/ActiveLastBreadcrumb.tsx | 29 ++++++++ .../breadcrumbs/CollapsedBreadcrumbs.js | 46 ++++-------- .../breadcrumbs/CollapsedBreadcrumbs.tsx | 48 ++++--------- .../components/breadcrumbs/CustomSeparator.js | 71 ++++++++----------- .../breadcrumbs/CustomSeparator.tsx | 71 ++++++++----------- .../breadcrumbs/CustomizedBreadcrumbs.js | 49 +++++-------- .../breadcrumbs/CustomizedBreadcrumbs.tsx | 51 +++++-------- .../components/breadcrumbs/IconBreadcrumbs.js | 44 +++++------- .../breadcrumbs/IconBreadcrumbs.tsx | 44 +++++------- .../breadcrumbs/SimpleBreadcrumbs.js | 55 +++----------- .../breadcrumbs/SimpleBreadcrumbs.tsx | 57 +++------------ .../components/breadcrumbs/breadcrumbs.md | 8 ++- .../components/buttons/ContainedButtons.js | 35 +++------ .../components/buttons/ContainedButtons.tsx | 35 +++------ .../buttons/FloatingActionButtons.js | 18 ++--- .../buttons/FloatingActionButtons.tsx | 18 ++--- .../pages/components/buttons/IconButtons.js | 31 +++----- .../pages/components/buttons/IconButtons.tsx | 31 +++----- .../components/buttons/OutlinedButtons.js | 38 +++------- .../components/buttons/OutlinedButtons.tsx | 38 +++------- .../pages/components/buttons/TextButtons.js | 41 +++-------- .../pages/components/buttons/TextButtons.tsx | 41 +++-------- .../pages/components/buttons/UploadButtons.js | 65 +++++++++++++++++ .../components/buttons/UploadButtons.tsx | 67 +++++++++++++++++ docs/src/pages/components/buttons/buttons.md | 6 +- docs/src/pages/components/cards/cards.md | 10 +-- docs/src/pages/components/chips/chips.md | 6 +- .../click-away-listener/ClickAway.js | 6 +- .../click-away-listener/ClickAway.tsx | 6 +- .../pages/components/dialogs/ScrollDialog.js | 8 ++- .../pages/components/dialogs/ScrollDialog.tsx | 8 ++- .../src/pages/components/dividers/dividers.md | 10 +-- .../expansion-panels/expansion-panels.md | 8 +-- docs/src/pages/components/grid/grid.md | 18 ++--- docs/src/pages/components/hidden/hidden.md | 8 +-- docs/src/pages/components/links/Links.js | 14 ++-- docs/src/pages/components/links/Links.tsx | 14 ++-- docs/src/pages/components/lists/lists.md | 24 +++---- .../material-icons/material-icons.md | 2 +- .../pages/components/menus/MenuPopupState.js | 2 +- docs/src/pages/components/menus/menus.md | 4 +- docs/src/pages/components/paper/paper.md | 2 +- .../components/popover/PopoverPopupState.js | 16 ++--- .../pages/components/popover/SimplePopover.js | 2 +- .../components/popover/SimplePopover.tsx | 2 +- .../components/popper/PopperPopupState.js | 2 +- docs/src/pages/components/popper/popper.md | 4 +- .../src/pages/components/rating/RatingSize.js | 17 ++--- .../pages/components/rating/RatingSize.tsx | 17 ++--- docs/src/pages/components/skeleton/YouTube.js | 11 +-- .../src/pages/components/skeleton/YouTube.tsx | 11 +-- .../src/pages/components/skeleton/skeleton.md | 2 +- .../components/slider/CustomizedSlider.js | 6 +- .../components/slider/CustomizedSlider.tsx | 6 +- .../src/pages/components/steppers/steppers.md | 22 +++--- docs/src/pages/components/tables/tables.md | 20 +++--- docs/src/pages/components/tabs/tabs.md | 26 +++---- .../components/text-fields/BasicTextFields.js | 44 +++--------- .../text-fields/BasicTextFields.tsx | 44 +++--------- .../components/text-fields/text-fields.md | 2 +- .../components/toggle-button/toggle-button.md | 2 +- .../components/tooltips/ControlledTooltips.js | 6 +- .../tooltips/ControlledTooltips.tsx | 6 +- .../components/transfer-list/transfer-list.md | 4 +- .../pages/components/tree-view/tree-view.md | 10 +-- .../src/pages/customization/color/color-fr.md | 4 +- .../discover-more/languages/languages.md | 2 +- .../pages/discover-more/showcase/showcase.md | 2 +- docs/src/pages/discover-more/team/team.md | 2 +- .../getting-started/templates/templates.md | 2 +- docs/src/pages/getting-started/usage/usage.md | 2 +- .../pages/styles/basics/NestedStylesHook.js | 5 +- .../pages/styles/basics/NestedStylesHook.tsx | 5 +- docs/src/pages/system/basics/basics.md | 2 +- docs/src/pages/system/borders/borders.md | 4 +- docs/src/pages/system/display/display.md | 4 +- docs/src/pages/system/flexbox/flexbox.md | 20 +++--- docs/src/pages/system/positions/positions.md | 2 +- docs/src/pages/system/shadows/shadows.md | 2 +- docs/src/pages/system/sizing/Height.js | 2 +- docs/src/pages/system/sizing/Height.tsx | 2 +- docs/src/pages/system/sizing/Values.js | 2 +- docs/src/pages/system/sizing/Values.tsx | 2 +- docs/src/pages/system/sizing/Width.js | 2 +- docs/src/pages/system/sizing/Width.tsx | 2 +- docs/src/pages/system/spacing/spacing.md | 4 +- packages/material-ui/src/Switch/Switch.js | 5 +- 100 files changed, 851 insertions(+), 1018 deletions(-) create mode 100644 docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js create mode 100644 docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.tsx create mode 100644 docs/src/pages/components/buttons/UploadButtons.js create mode 100644 docs/src/pages/components/buttons/UploadButtons.tsx diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 1df8ca92ad480d..b6d90041186ded 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import copy from 'clipboard-copy'; import { useSelector, useDispatch } from 'react-redux'; -import { withStyles } from '@material-ui/core/styles'; +import { withStyles, fade } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import Collapse from '@material-ui/core/Collapse'; @@ -54,14 +54,18 @@ const styles = theme => ({ outline: 0, margin: 'auto', borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.background.level2, display: 'flex', justifyContent: 'center', + border: `1px solid ${fade(theme.palette.action.active, 0.12)}`, padding: 20, [theme.breakpoints.up('sm')]: { padding: theme.spacing(3), }, }, + demoBg: { + border: 'none', + backgroundColor: theme.palette.background.level2, + }, demoHiddenHeader: { paddingTop: theme.spacing(2), [theme.breakpoints.up('sm')]: { @@ -133,7 +137,6 @@ function Demo(props) { const dispatch = useDispatch(); const t = useSelector(state => state.options.t); const codeVariant = useSelector(state => state.options.codeVariant); - const demoData = getDemoData(codeVariant, demo, githubLocation); const [sourceHintSeen, setSourceHintSeen] = React.useState(false); @@ -241,6 +244,10 @@ function Demo(props) { [demoOptions.height, demoOptions.maxWidth], ); + if (demoOptions.iframe) { + demoOptions.bg = true; + } + const createHandleCodeSourceLink = anchor => async () => { try { await copy(`${window.location.href.split('#')[0]}#${anchor}`); @@ -266,9 +273,12 @@ function Demo(props) { const match = useMediaQuery(theme => theme.breakpoints.up('sm')); - const jsx = getJsxPreview(demoData.raw || '', demoOptions.defaultCodeOpen); + const jsx = getJsxPreview(demoData.raw || ''); const showPreview = - !demoOptions.hideHeader && jsx !== demoData.raw && jsx.split(/\n/).length <= 20; + !demoOptions.hideHeader && + demoOptions.defaultCodeOpen !== false && + jsx !== demoData.raw && + jsx.split(/\n/).length <= 15; let showCodeLabel; if (codeOpen) { @@ -282,6 +292,7 @@ function Demo(props) {
; } -`); - }); - it('should return all if defaultCodeOpen is false', () => { - expect( - getJsxPreview( - ` -export default function UseWidth() { - return ; -} -`, - false, - ), - ).to.equal(` -export default function UseWidth() { - return ; -} - `); }); }); diff --git a/docs/src/pages/components/avatars/IconAvatars.js b/docs/src/pages/components/avatars/IconAvatars.js index a4c7add20a0343..e18afa154c505e 100644 --- a/docs/src/pages/components/avatars/IconAvatars.js +++ b/docs/src/pages/components/avatars/IconAvatars.js @@ -5,38 +5,38 @@ import Avatar from '@material-ui/core/Avatar'; import FolderIcon from '@material-ui/icons/Folder'; import PageviewIcon from '@material-ui/icons/Pageview'; import AssignmentIcon from '@material-ui/icons/Assignment'; -import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles({ - avatar: { - margin: 10, +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + '& > *': { + margin: theme.spacing(1), + }, }, - pinkAvatar: { - margin: 10, + pink: { color: '#fff', backgroundColor: pink[500], }, - greenAvatar: { - margin: 10, + green: { color: '#fff', backgroundColor: green[500], }, -}); +})); export default function IconAvatars() { const classes = useStyles(); return ( - - +
+ - + - + - +
); } diff --git a/docs/src/pages/components/avatars/IconAvatars.tsx b/docs/src/pages/components/avatars/IconAvatars.tsx index a4c7add20a0343..e4611b50f73ff0 100644 --- a/docs/src/pages/components/avatars/IconAvatars.tsx +++ b/docs/src/pages/components/avatars/IconAvatars.tsx @@ -1,42 +1,44 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { green, pink } from '@material-ui/core/colors'; import Avatar from '@material-ui/core/Avatar'; import FolderIcon from '@material-ui/icons/Folder'; import PageviewIcon from '@material-ui/icons/Pageview'; import AssignmentIcon from '@material-ui/icons/Assignment'; -import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles({ - avatar: { - margin: 10, - }, - pinkAvatar: { - margin: 10, - color: '#fff', - backgroundColor: pink[500], - }, - greenAvatar: { - margin: 10, - color: '#fff', - backgroundColor: green[500], - }, -}); +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: 'flex', + '& > *': { + margin: theme.spacing(1), + }, + }, + pink: { + color: '#fff', + backgroundColor: pink[500], + }, + green: { + color: '#fff', + backgroundColor: green[500], + }, + }), +); export default function IconAvatars() { const classes = useStyles(); return ( - - +
+ - + - + - +
); } diff --git a/docs/src/pages/components/avatars/ImageAvatars.js b/docs/src/pages/components/avatars/ImageAvatars.js index 6ad814e3f53c0a..33bec663f1f6db 100644 --- a/docs/src/pages/components/avatars/ImageAvatars.js +++ b/docs/src/pages/components/avatars/ImageAvatars.js @@ -1,26 +1,27 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; -import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles({ - avatar: { - margin: 10, +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + '& > *': { + margin: theme.spacing(1), + }, }, bigAvatar: { - margin: 10, width: 60, height: 60, }, -}); +})); export default function ImageAvatars() { const classes = useStyles(); return ( - - +
+ - +
); } diff --git a/docs/src/pages/components/avatars/ImageAvatars.tsx b/docs/src/pages/components/avatars/ImageAvatars.tsx index 6ad814e3f53c0a..9739765e4541a9 100644 --- a/docs/src/pages/components/avatars/ImageAvatars.tsx +++ b/docs/src/pages/components/avatars/ImageAvatars.tsx @@ -1,26 +1,29 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; -import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles({ - avatar: { - margin: 10, - }, - bigAvatar: { - margin: 10, - width: 60, - height: 60, - }, -}); +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: 'flex', + '& > *': { + margin: theme.spacing(1), + }, + }, + bigAvatar: { + width: 60, + height: 60, + }, + }), +); export default function ImageAvatars() { const classes = useStyles(); return ( - - +
+ - +
); } diff --git a/docs/src/pages/components/avatars/LetterAvatars.js b/docs/src/pages/components/avatars/LetterAvatars.js index c4b0d9353535a4..a272dfd400059e 100644 --- a/docs/src/pages/components/avatars/LetterAvatars.js +++ b/docs/src/pages/components/avatars/LetterAvatars.js @@ -2,32 +2,32 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; import { deepOrange, deepPurple } from '@material-ui/core/colors'; -import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles({ - avatar: { - margin: 10, +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + '& > *': { + margin: theme.spacing(1), + }, }, - orangeAvatar: { - margin: 10, + orange: { color: '#fff', backgroundColor: deepOrange[500], }, - purpleAvatar: { - margin: 10, + purple: { color: '#fff', backgroundColor: deepPurple[500], }, -}); +})); export default function LetterAvatars() { const classes = useStyles(); return ( - - H - N - OP - +
+ H + N + OP +
); } diff --git a/docs/src/pages/components/avatars/LetterAvatars.tsx b/docs/src/pages/components/avatars/LetterAvatars.tsx index c4b0d9353535a4..1f7157f24f12c1 100644 --- a/docs/src/pages/components/avatars/LetterAvatars.tsx +++ b/docs/src/pages/components/avatars/LetterAvatars.tsx @@ -1,33 +1,35 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; import { deepOrange, deepPurple } from '@material-ui/core/colors'; -import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles({ - avatar: { - margin: 10, - }, - orangeAvatar: { - margin: 10, - color: '#fff', - backgroundColor: deepOrange[500], - }, - purpleAvatar: { - margin: 10, - color: '#fff', - backgroundColor: deepPurple[500], - }, -}); +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: 'flex', + '& > *': { + margin: theme.spacing(1), + }, + }, + orange: { + color: '#fff', + backgroundColor: deepOrange[500], + }, + purple: { + color: '#fff', + backgroundColor: deepPurple[500], + }, + }), +); export default function LetterAvatars() { const classes = useStyles(); return ( - - H - N - OP - +
+ H + N + OP +
); } diff --git a/docs/src/pages/components/avatars/VariantAvatars.js b/docs/src/pages/components/avatars/VariantAvatars.js index 22a2e527f114bd..dbe5e004335d59 100644 --- a/docs/src/pages/components/avatars/VariantAvatars.js +++ b/docs/src/pages/components/avatars/VariantAvatars.js @@ -1,14 +1,14 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { deepOrange, green } from '@material-ui/core/colors'; import Avatar from '@material-ui/core/Avatar'; +import { deepOrange, green } from '@material-ui/core/colors'; import AssignmentIcon from '@material-ui/icons/Assignment'; -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ root: { display: 'flex', - '& > * + *': { - marginLeft: 16, + '& > *': { + margin: theme.spacing(1), }, }, square: { @@ -19,7 +19,7 @@ const useStyles = makeStyles({ color: '#fff', backgroundColor: green[500], }, -}); +})); export default function VariantAvatars() { const classes = useStyles(); diff --git a/docs/src/pages/components/avatars/VariantAvatars.tsx b/docs/src/pages/components/avatars/VariantAvatars.tsx index 22a2e527f114bd..27255d4b6e35c8 100644 --- a/docs/src/pages/components/avatars/VariantAvatars.tsx +++ b/docs/src/pages/components/avatars/VariantAvatars.tsx @@ -1,25 +1,27 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import { deepOrange, green } from '@material-ui/core/colors'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; +import { deepOrange, green } from '@material-ui/core/colors'; import AssignmentIcon from '@material-ui/icons/Assignment'; -const useStyles = makeStyles({ - root: { - display: 'flex', - '& > * + *': { - marginLeft: 16, +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: 'flex', + '& > *': { + margin: theme.spacing(1), + }, + }, + square: { + color: '#fff', + backgroundColor: deepOrange[500], + }, + rounded: { + color: '#fff', + backgroundColor: green[500], }, - }, - square: { - color: '#fff', - backgroundColor: deepOrange[500], - }, - rounded: { - color: '#fff', - backgroundColor: green[500], - }, -}); + }), +); export default function VariantAvatars() { const classes = useStyles(); diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation.md b/docs/src/pages/components/bottom-navigation/bottom-navigation.md index 1cce57f35b48d2..e3c39151cec0c0 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation.md @@ -13,10 +13,10 @@ components: BottomNavigation, BottomNavigationAction When there are only **three** actions, display both icons and text labels at all times. -{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js"}} +{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} ## Bottom Navigation with no label If there are **four** or **five** actions, display inactive views as icons only. -{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js"}} +{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}} diff --git a/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js new file mode 100644 index 00000000000000..622b1362719eda --- /dev/null +++ b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js @@ -0,0 +1,29 @@ +import React from 'react'; +import Breadcrumbs from '@material-ui/core/Breadcrumbs'; +import Link from '@material-ui/core/Link'; + +function handleClick(event) { + event.preventDefault(); + console.info('You clicked a breadcrumb.'); +} + +export default function ActiveLastBreadcrumb() { + return ( + + + Material-UI + + + Core + + + Breadcrumb + + + ); +} diff --git a/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.tsx b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.tsx new file mode 100644 index 00000000000000..bf2e4f9d0c4187 --- /dev/null +++ b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import Breadcrumbs from '@material-ui/core/Breadcrumbs'; +import Link from '@material-ui/core/Link'; + +function handleClick(event: React.MouseEvent) { + event.preventDefault(); + console.info('You clicked a breadcrumb.'); +} + +export default function ActiveLastBreadcrumb() { + return ( + + + Material-UI + + + Core + + + Breadcrumb + + + ); +} diff --git a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js index a6945738943d45..59060193882e2f 100644 --- a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js @@ -1,46 +1,30 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles(theme => ({ - root: { - justifyContent: 'center', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(1, 2), - }, -})); - function handleClick(event) { event.preventDefault(); console.info('You clicked a breadcrumb.'); } export default function CollapsedBreadcrumbs() { - const classes = useStyles(); - return ( - - - - Home - - - Catalog - - - Accessories - - - New Collection - - Belts - - + + + Home + + + Catalog + + + Accessories + + + New Collection + + Belts + ); } diff --git a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx index e1f217dde586ae..bc8bfe51fd49f9 100644 --- a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx +++ b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx @@ -1,48 +1,30 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - justifyContent: 'center', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(1, 2), - }, - }), -); - function handleClick(event: React.MouseEvent) { event.preventDefault(); console.info('You clicked a breadcrumb.'); } export default function CollapsedBreadcrumbs() { - const classes = useStyles(); - return ( - - - - Home - - - Catalog - - - Accessories - - - New Collection - - Belts - - + + + Home + + + Catalog + + + Accessories + + + New Collection + + Belts + ); } diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.js b/docs/src/pages/components/breadcrumbs/CustomSeparator.js index 41e5bf4d53b841..47f87526444c9d 100644 --- a/docs/src/pages/components/breadcrumbs/CustomSeparator.js +++ b/docs/src/pages/components/breadcrumbs/CustomSeparator.js @@ -1,6 +1,5 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; @@ -8,11 +7,9 @@ import NavigateNextIcon from '@material-ui/icons/NavigateNext'; const useStyles = makeStyles(theme => ({ root: { - justifyContent: 'center', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(1, 2), + '& > * + *': { + marginTop: theme.spacing(2), + }, }, })); @@ -26,41 +23,33 @@ export default function CustomSeparator() { return (
- - - - Material-UI - - - Core - - Breadcrumb - - -
- - - - Material-UI - - - Core - - Breadcrumb - - -
- - } aria-label="breadcrumb"> - - Material-UI - - - Core - - Breadcrumb - - + + + Material-UI + + + Core + + Breadcrumb + + + + Material-UI + + + Core + + Breadcrumb + + } aria-label="breadcrumb"> + + Material-UI + + + Core + + Breadcrumb +
); } diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx b/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx index 88409a13ba8753..c060ef0db5d860 100644 --- a/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx +++ b/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; @@ -9,11 +8,9 @@ import NavigateNextIcon from '@material-ui/icons/NavigateNext'; const useStyles = makeStyles((theme: Theme) => createStyles({ root: { - justifyContent: 'center', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(1, 2), + '& > * + *': { + marginTop: theme.spacing(2), + }, }, }), ); @@ -28,41 +25,33 @@ export default function CustomSeparator() { return (
- - - - Material-UI - - - Core - - Breadcrumb - - -
- - - - Material-UI - - - Core - - Breadcrumb - - -
- - } aria-label="breadcrumb"> - - Material-UI - - - Core - - Breadcrumb - - + + + Material-UI + + + Core + + Breadcrumb + + + + Material-UI + + + Core + + 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 db8fbaeef4337e..4ca9d97d0a627e 100644 --- a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js @@ -1,6 +1,5 @@ import React from 'react'; -import { emphasize, withStyles, makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; +import { emphasize, withStyles } from '@material-ui/core/styles'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Chip from '@material-ui/core/Chip'; import HomeIcon from '@material-ui/icons/Home'; @@ -27,37 +26,23 @@ function handleClick(event) { console.info('You clicked a breadcrumb.'); } -const useStyles = makeStyles(theme => ({ - root: { - padding: theme.spacing(1), - }, - avatar: { - background: 'none', - marginRight: -theme.spacing(1.5), - }, -})); - export default function CustomizedBreadcrumbs() { - const classes = useStyles(); - return ( - - - } - onClick={handleClick} - /> - - } - onClick={handleClick} - onDelete={handleClick} - /> - - + + } + onClick={handleClick} + /> + + } + onClick={handleClick} + onDelete={handleClick} + /> + ); } diff --git a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx index 17a24297a0cdb7..faa7a412353b0c 100644 --- a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx +++ b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { emphasize, withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; +import { emphasize, withStyles, Theme } from '@material-ui/core/styles'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Chip from '@material-ui/core/Chip'; import HomeIcon from '@material-ui/icons/Home'; @@ -27,39 +26,23 @@ function handleClick(event: React.MouseEvent) { console.info('You clicked a breadcrumb.'); } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - padding: theme.spacing(1), - }, - avatar: { - background: 'none', - marginRight: -theme.spacing(1.5), - }, - }), -); - export default function CustomizedBreadcrumbs() { - const classes = useStyles(); - return ( - - - } - onClick={handleClick} - /> - - } - onClick={handleClick} - onDelete={handleClick} - /> - - + + } + onClick={handleClick} + /> + + } + onClick={handleClick} + onDelete={handleClick} + /> + ); } diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js index 0f5ceb3a13646c..452da3413df3c5 100644 --- a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js @@ -1,6 +1,5 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Link from '@material-ui/core/Link'; @@ -9,9 +8,6 @@ import WhatshotIcon from '@material-ui/icons/Whatshot'; import GrainIcon from '@material-ui/icons/Grain'; const useStyles = makeStyles(theme => ({ - root: { - padding: theme.spacing(1, 2), - }, link: { display: 'flex', }, @@ -31,26 +27,24 @@ export default function IconBreadcrumbs() { const classes = useStyles(); return ( - - - - - Material-UI - - - - Core - - - - Breadcrumb - - - + + + + Material-UI + + + + Core + + + + Breadcrumb + + ); } diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx index 96d3a1e91c10fb..939e5991cee7ca 100644 --- a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx +++ b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Link from '@material-ui/core/Link'; @@ -10,9 +9,6 @@ import GrainIcon from '@material-ui/icons/Grain'; const useStyles = makeStyles((theme: Theme) => createStyles({ - root: { - padding: theme.spacing(1, 2), - }, link: { display: 'flex', }, @@ -33,26 +29,24 @@ export default function IconBreadcrumbs() { const classes = useStyles(); return ( - - - - - Material-UI - - - - Core - - - - Breadcrumb - - - + + + + Material-UI + + + + Core + + + + Breadcrumb + + ); } diff --git a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js index cd80a2d97732cd..e125a996845ba2 100644 --- a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js @@ -1,60 +1,23 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles(theme => ({ - root: { - justifyContent: 'center', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(1, 2), - }, -})); - function handleClick(event) { event.preventDefault(); console.info('You clicked a breadcrumb.'); } export default function SimpleBreadcrumbs() { - const classes = useStyles(); - return ( -
- - - - Material-UI - - - Core - - Breadcrumb - - -
- - - - Material-UI - - - Core - - - Breadcrumb - - - -
+ + + Material-UI + + + Core + + Breadcrumb + ); } diff --git a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx index a11391c6a997a9..222fe9703bf563 100644 --- a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx +++ b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx @@ -1,62 +1,23 @@ import React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - justifyContent: 'center', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(1, 2), - }, - }), -); - function handleClick(event: React.MouseEvent) { event.preventDefault(); console.info('You clicked a breadcrumb.'); } export default function SimpleBreadcrumbs() { - const classes = useStyles(); - return ( -
- - - - Material-UI - - - Core - - Breadcrumb - - -
- - - - Material-UI - - - Core - - - Breadcrumb - - - -
+ + + Material-UI + + + Core + + Breadcrumb + ); } diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs.md b/docs/src/pages/components/breadcrumbs/breadcrumbs.md index 023b118f1271fa..2e0d4762a0aebb 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs.md @@ -11,6 +11,12 @@ components: Breadcrumbs, Link, Typography {{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} +## Active last breadcrumb + +Keep the last breadcrumb interactive. + +{{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} + ## Custom separator In the following examples, we are using two string separators, and an SVG icon. @@ -34,7 +40,7 @@ Here is an example of customizing the component. You can learn more about this i ## Integration with react-router -{{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js"}} +{{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js", "bg": true}} ## Accessibility diff --git a/docs/src/pages/components/buttons/ContainedButtons.js b/docs/src/pages/components/buttons/ContainedButtons.js index a482b6e9824053..368423b512fcf0 100644 --- a/docs/src/pages/components/buttons/ContainedButtons.js +++ b/docs/src/pages/components/buttons/ContainedButtons.js @@ -3,11 +3,10 @@ import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles(theme => ({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, })); @@ -15,34 +14,20 @@ export default function ContainedButtons() { const classes = useStyles(); return ( -
- - + - - - - -
); } diff --git a/docs/src/pages/components/buttons/ContainedButtons.tsx b/docs/src/pages/components/buttons/ContainedButtons.tsx index 219711787693a5..7857907e9064d2 100644 --- a/docs/src/pages/components/buttons/ContainedButtons.tsx +++ b/docs/src/pages/components/buttons/ContainedButtons.tsx @@ -4,11 +4,10 @@ import Button from '@material-ui/core/Button'; const useStyles = makeStyles((theme: Theme) => createStyles({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, }), ); @@ -17,34 +16,20 @@ export default function ContainedButtons() { const classes = useStyles(); return ( -
- - + - - - - -
); } diff --git a/docs/src/pages/components/buttons/FloatingActionButtons.js b/docs/src/pages/components/buttons/FloatingActionButtons.js index 0b6ee8143de78c..b913f10bd3eb78 100644 --- a/docs/src/pages/components/buttons/FloatingActionButtons.js +++ b/docs/src/pages/components/buttons/FloatingActionButtons.js @@ -7,8 +7,10 @@ import FavoriteIcon from '@material-ui/icons/Favorite'; import NavigationIcon from '@material-ui/icons/Navigation'; const useStyles = makeStyles(theme => ({ - fab: { - margin: theme.spacing(1), + root: { + '& > *': { + margin: theme.spacing(1), + }, }, extendedIcon: { marginRight: theme.spacing(1), @@ -19,18 +21,18 @@ export default function FloatingActionButtons() { const classes = useStyles(); return ( -
- +
+ - + - + - Extended + Navigate - +
diff --git a/docs/src/pages/components/buttons/FloatingActionButtons.tsx b/docs/src/pages/components/buttons/FloatingActionButtons.tsx index b78d486633de12..ec87391a04e136 100644 --- a/docs/src/pages/components/buttons/FloatingActionButtons.tsx +++ b/docs/src/pages/components/buttons/FloatingActionButtons.tsx @@ -8,8 +8,10 @@ import NavigationIcon from '@material-ui/icons/Navigation'; const useStyles = makeStyles((theme: Theme) => createStyles({ - fab: { - margin: theme.spacing(1), + root: { + '& > *': { + margin: theme.spacing(1), + }, }, extendedIcon: { marginRight: theme.spacing(1), @@ -21,18 +23,18 @@ export default function FloatingActionButtons() { const classes = useStyles(); return ( -
- +
+ - + - + - Extended + Navigate - +
diff --git a/docs/src/pages/components/buttons/IconButtons.js b/docs/src/pages/components/buttons/IconButtons.js index f599a3ba1a8d1a..c99035c6077e47 100644 --- a/docs/src/pages/components/buttons/IconButtons.js +++ b/docs/src/pages/components/buttons/IconButtons.js @@ -4,14 +4,12 @@ import IconButton from '@material-ui/core/IconButton'; import DeleteIcon from '@material-ui/icons/Delete'; import AlarmIcon from '@material-ui/icons/Alarm'; import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'; -import PhotoCamera from '@material-ui/icons/PhotoCamera'; const useStyles = makeStyles(theme => ({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, })); @@ -19,30 +17,19 @@ export default function IconButtons() { const classes = useStyles(); return ( -
- +
+ - + - + - + - -
); } diff --git a/docs/src/pages/components/buttons/IconButtons.tsx b/docs/src/pages/components/buttons/IconButtons.tsx index c369aadcc96e15..48d2a8372cdb58 100644 --- a/docs/src/pages/components/buttons/IconButtons.tsx +++ b/docs/src/pages/components/buttons/IconButtons.tsx @@ -4,15 +4,13 @@ import IconButton from '@material-ui/core/IconButton'; import DeleteIcon from '@material-ui/icons/Delete'; import AlarmIcon from '@material-ui/icons/Alarm'; import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'; -import PhotoCamera from '@material-ui/icons/PhotoCamera'; const useStyles = makeStyles((theme: Theme) => createStyles({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, }), ); @@ -21,30 +19,19 @@ export default function IconButtons() { const classes = useStyles(); return ( -
- +
+ - + - + - + - -
); } diff --git a/docs/src/pages/components/buttons/OutlinedButtons.js b/docs/src/pages/components/buttons/OutlinedButtons.js index fc7fd093728719..101029c8cbe363 100644 --- a/docs/src/pages/components/buttons/OutlinedButtons.js +++ b/docs/src/pages/components/buttons/OutlinedButtons.js @@ -3,11 +3,10 @@ import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles(theme => ({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, })); @@ -15,37 +14,20 @@ export default function OutlinedButtons() { const classes = useStyles(); return ( -
- - + - - - - - -
); } diff --git a/docs/src/pages/components/buttons/OutlinedButtons.tsx b/docs/src/pages/components/buttons/OutlinedButtons.tsx index 135b007b18ab0a..011b0a64fefc55 100644 --- a/docs/src/pages/components/buttons/OutlinedButtons.tsx +++ b/docs/src/pages/components/buttons/OutlinedButtons.tsx @@ -4,11 +4,10 @@ import Button from '@material-ui/core/Button'; const useStyles = makeStyles((theme: Theme) => createStyles({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, }), ); @@ -17,37 +16,20 @@ export default function OutlinedButtons() { const classes = useStyles(); return ( -
- - + - - - - - -
); } diff --git a/docs/src/pages/components/buttons/TextButtons.js b/docs/src/pages/components/buttons/TextButtons.js index 598b5b80cd7102..0fe62bc3030e52 100644 --- a/docs/src/pages/components/buttons/TextButtons.js +++ b/docs/src/pages/components/buttons/TextButtons.js @@ -3,11 +3,10 @@ import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles(theme => ({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, })); @@ -15,32 +14,12 @@ export default function TextButtons() { const classes = useStyles(); return ( -
- - - - - - - +
+ + + + +
); } diff --git a/docs/src/pages/components/buttons/TextButtons.tsx b/docs/src/pages/components/buttons/TextButtons.tsx index 1334a7ddcacf43..15e497feaaa9d8 100644 --- a/docs/src/pages/components/buttons/TextButtons.tsx +++ b/docs/src/pages/components/buttons/TextButtons.tsx @@ -4,11 +4,10 @@ import Button from '@material-ui/core/Button'; const useStyles = makeStyles((theme: Theme) => createStyles({ - button: { - margin: theme.spacing(1), - }, - input: { - display: 'none', + root: { + '& > *': { + margin: theme.spacing(1), + }, }, }), ); @@ -17,32 +16,12 @@ export default function TextButtons() { const classes = useStyles(); return ( -
- - - - - - - +
+ + + + +
); } diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js new file mode 100644 index 00000000000000..576f2cb3f14329 --- /dev/null +++ b/docs/src/pages/components/buttons/UploadButtons.js @@ -0,0 +1,65 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import PhotoCamera from '@material-ui/icons/PhotoCamera'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + }, + }, + input: { + display: 'none', + }, +})); + +export default function UploadButtons() { + const classes = useStyles(); + + return ( +
+ + + + + + + + +
+ ); +} diff --git a/docs/src/pages/components/buttons/UploadButtons.tsx b/docs/src/pages/components/buttons/UploadButtons.tsx new file mode 100644 index 00000000000000..f35595ea03d5cc --- /dev/null +++ b/docs/src/pages/components/buttons/UploadButtons.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import PhotoCamera from '@material-ui/icons/PhotoCamera'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + margin: theme.spacing(1), + }, + }, + input: { + display: 'none', + }, + }), +); + +export default function UploadButtons() { + const classes = useStyles(); + + return ( +
+ + + + + + + + +
+ ); +} diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index f953af2bc14804..1fc59ac9a4d9bb 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -84,7 +84,11 @@ The Zoom transition can be used to achieve this. Note that since both the exitin animations are triggered at the same time, we use `enterDelay` to allow the outgoing Floating Action Button's animation to finish before the new one enters. -{{"demo": "pages/components/buttons/FloatingActionButtonZoom.js"}} +{{"demo": "pages/components/buttons/FloatingActionButtonZoom.js", "bg": true}} + +## Upload button + +{{"demo": "pages/components/buttons/UploadButtons.js"}} ## Sizes diff --git a/docs/src/pages/components/cards/cards.md b/docs/src/pages/components/cards/cards.md index 35edfdd182ce8f..be5b859255bddc 100644 --- a/docs/src/pages/components/cards/cards.md +++ b/docs/src/pages/components/cards/cards.md @@ -15,23 +15,23 @@ They should be easy to scan for relevant and actionable information. Elements, l Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information. -{{"demo": "pages/components/cards/SimpleCard.js"}} +{{"demo": "pages/components/cards/SimpleCard.js", "bg": true}} ## Complex Interaction On desktop, card content can expand. -{{"demo": "pages/components/cards/RecipeReviewCard.js"}} +{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}} ## Media Example of a card using an image to reinforce the content. -{{"demo": "pages/components/cards/MediaCard.js"}} +{{"demo": "pages/components/cards/MediaCard.js", "bg": true}} By default, we use the combination of a `
` element and a *background image* to display the media. It can be problematic in some situations. For instance, you might want to display a video or a responsive image. Use the `component` property for these use cases: -{{"demo": "pages/components/cards/ImgMediaCard.js"}} +{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} > ⚠️ When `component="img"`, CardMedia relies on `object-fit` for centering the image. It's not supported by IE 11. @@ -41,4 +41,4 @@ Supplemental actions within the card are explicitly called out using icons, text Here's an example of a media control card. -{{"demo": "pages/components/cards/MediaControlCard.js"}} +{{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}} diff --git a/docs/src/pages/components/chips/chips.md b/docs/src/pages/components/chips/chips.md index 90d7b1cbfcc71a..cd357725a5576b 100644 --- a/docs/src/pages/components/chips/chips.md +++ b/docs/src/pages/components/chips/chips.md @@ -38,11 +38,11 @@ Deleting a chip removes it from the array. Note that since no `onClick` property is defined, the Chip can be focused, but does not gain depth while clicked or touched. -{{"demo": "pages/components/chips/ChipsArray.js"}} +{{"demo": "pages/components/chips/ChipsArray.js", "bg": true}} ## Small Chip -You can use the `size` prop to define a small Chip. +You can use the `size` prop to define a small Chip. ### Default variant @@ -54,4 +54,4 @@ You can use the `size` prop to define a small Chip. ## Chip Playground -{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}} +{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true, "bg": true}} diff --git a/docs/src/pages/components/click-away-listener/ClickAway.js b/docs/src/pages/components/click-away-listener/ClickAway.js index 1c59a64d080284..77363e8f881db3 100644 --- a/docs/src/pages/components/click-away-listener/ClickAway.js +++ b/docs/src/pages/components/click-away-listener/ClickAway.js @@ -35,7 +35,11 @@ export default function ClickAway() { - {open ?
Click me, I will stay visible.
: null} + {open ? ( +
+ Click me, I will stay visible until you click outside. +
+ ) : null}
); diff --git a/docs/src/pages/components/click-away-listener/ClickAway.tsx b/docs/src/pages/components/click-away-listener/ClickAway.tsx index f90360573a7246..efc34f87dde74f 100644 --- a/docs/src/pages/components/click-away-listener/ClickAway.tsx +++ b/docs/src/pages/components/click-away-listener/ClickAway.tsx @@ -37,7 +37,11 @@ export default function ClickAway() { - {open ?
Click me, I will stay visible.
: null} + {open ? ( +
+ Click me, I will stay visible until you click outside. +
+ ) : null}
); diff --git a/docs/src/pages/components/dialogs/ScrollDialog.js b/docs/src/pages/components/dialogs/ScrollDialog.js index 94441b3ed58fb7..fc317f46454d77 100644 --- a/docs/src/pages/components/dialogs/ScrollDialog.js +++ b/docs/src/pages/components/dialogs/ScrollDialog.js @@ -21,9 +21,11 @@ export default function ScrollDialog() { const descriptionElementRef = React.useRef(null); React.useEffect(() => { - const { current: descriptionElement } = descriptionElementRef; - if (descriptionElement !== null) { - descriptionElement.focus(); + if (open) { + const { current: descriptionElement } = descriptionElementRef; + if (descriptionElement !== null) { + descriptionElement.focus(); + } } }, [open]); diff --git a/docs/src/pages/components/dialogs/ScrollDialog.tsx b/docs/src/pages/components/dialogs/ScrollDialog.tsx index 71a9a8e5c39ba1..ccb9101bf4e9d8 100644 --- a/docs/src/pages/components/dialogs/ScrollDialog.tsx +++ b/docs/src/pages/components/dialogs/ScrollDialog.tsx @@ -21,9 +21,11 @@ export default function ScrollDialog() { const descriptionElementRef = React.useRef(null); React.useEffect(() => { - const { current: descriptionElement } = descriptionElementRef; - if (descriptionElement !== null) { - descriptionElement.focus(); + if (open) { + const { current: descriptionElement } = descriptionElementRef; + if (descriptionElement !== null) { + descriptionElement.focus(); + } } }, [open]); diff --git a/docs/src/pages/components/dividers/dividers.md b/docs/src/pages/components/dividers/dividers.md index 09030eff59affc..ae75312046cf8b 100644 --- a/docs/src/pages/components/dividers/dividers.md +++ b/docs/src/pages/components/dividers/dividers.md @@ -14,7 +14,7 @@ components: Divider The divider renders as an `
` by default. You can save rendering this DOM element by using the `divider` property on the `ListItem` component. -{{"demo": "pages/components/dividers/ListDividers.js"}} +{{"demo": "pages/components/dividers/ListDividers.js", "bg": true}} ## HTML5 Specification @@ -23,18 +23,18 @@ The examples below show two ways of achieving this. ## Inset Dividers -{{"demo": "pages/components/dividers/InsetDividers.js"}} +{{"demo": "pages/components/dividers/InsetDividers.js", "bg": true}} ## Subheader Dividers -{{"demo": "pages/components/dividers/SubheaderDividers.js"}} +{{"demo": "pages/components/dividers/SubheaderDividers.js", "bg": true}} ## Middle Dividers -{{"demo": "pages/components/dividers/MiddleDividers.js"}} +{{"demo": "pages/components/dividers/MiddleDividers.js", "bg": true}} ## Vertical Dividers You can also render a divider vertically using the `orientation` prop. -{{"demo": "pages/components/dividers/VerticalDividers.js"}} +{{"demo": "pages/components/dividers/VerticalDividers.js", "bg": true}} diff --git a/docs/src/pages/components/expansion-panels/expansion-panels.md b/docs/src/pages/components/expansion-panels/expansion-panels.md index ca84c269dcbf4c..379bec46370663 100644 --- a/docs/src/pages/components/expansion-panels/expansion-panels.md +++ b/docs/src/pages/components/expansion-panels/expansion-panels.md @@ -13,13 +13,13 @@ components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, Expans ## Simple Expansion Panel -{{"demo": "pages/components/expansion-panels/SimpleExpansionPanel.js"}} +{{"demo": "pages/components/expansion-panels/SimpleExpansionPanel.js", "bg": true}} ## Controlled Accordion Extend the default panel behavior to create an accordion with the `ExpansionPanel` component. -{{"demo": "pages/components/expansion-panels/ControlledExpansionPanels.js"}} +{{"demo": "pages/components/expansion-panels/ControlledExpansionPanels.js", "bg": true}} ## Customized expansion panels @@ -35,7 +35,7 @@ expanding/collapsing when using the action. You should also provide an `aria-label` for the action, otherwise the label of the nested action will be included in the label of the parent button that controls the panel expansion. -{{"demo": "pages/components/expansion-panels/ActionsInExpansionPanelSummary.js"}} +{{"demo": "pages/components/expansion-panels/ActionsInExpansionPanelSummary.js", "bg": true}} ## Performance @@ -56,7 +56,7 @@ bottlenecks first and then try out these optimization strategies. Multiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user. -{{"demo": "pages/components/expansion-panels/DetailedExpansionPanel.js"}} +{{"demo": "pages/components/expansion-panels/DetailedExpansionPanel.js", "bg": true}} ## Accessibility diff --git a/docs/src/pages/components/grid/grid.md b/docs/src/pages/components/grid/grid.md index 465149ea002066..f38ae4e2816a43 100644 --- a/docs/src/pages/components/grid/grid.md +++ b/docs/src/pages/components/grid/grid.md @@ -31,7 +31,7 @@ By default, the spacing between two grid items follows a linear function: `outpu This output transformation function can be customized [using the theme](/customization/spacing/). -{{"demo": "pages/components/grid/SpacingGrid.js"}} +{{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}} ## Fluid grids @@ -41,32 +41,32 @@ Fluid grids use columns that scale and resize content. A fluid grid’s layout c The column widths apply at all breakpoints (i.e. `xs` and up). -{{"demo": "pages/components/grid/CenteredGrid.js"}} +{{"demo": "pages/components/grid/CenteredGrid.js", "bg": true}} ### Grid with breakpoints Some columns have multiple widths defined, causing the layout to change at the defined breakpoint. -{{"demo": "pages/components/grid/FullWidthGrid.js"}} +{{"demo": "pages/components/grid/FullWidthGrid.js", "bg": true}} ## Interactive Below is an interactive demo that lets you explore the visual results of the different settings: -{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true}} +{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}} ## Auto-layout The Auto-layout makes the *items* equitably share the available space. That also means you can set the width of one *item* and the others will automatically resize around it. -{{"demo": "pages/components/grid/AutoGrid.js"}} +{{"demo": "pages/components/grid/AutoGrid.js", "bg": true}} ## Complex Grid The following demo doesn't follow the Material Design specification, but illustrates how the grid can be used to build complex layouts. -{{"demo": "pages/components/grid/ComplexGrid.js"}} +{{"demo": "pages/components/grid/ComplexGrid.js", "bg": true}} ## Nested Grid @@ -76,7 +76,7 @@ The `container` and `item` properties are two independent booleans. They can be https://www.w3.org/TR/css-flexbox-1/#box-model -{{"demo": "pages/components/grid/NestedGrid.js"}} +{{"demo": "pages/components/grid/NestedGrid.js", "bg": true}} ## Limitations @@ -115,7 +115,7 @@ In practice, you can set the `zeroMinWidth` property: ``` -{{"demo": "pages/components/grid/AutoGridNoWrap.js"}} +{{"demo": "pages/components/grid/AutoGridNoWrap.js", "bg": true}} ### direction: column | column-reverse @@ -130,4 +130,4 @@ If used within `column` or `column-reverse` containers, these properties may hav Material-UI doesn't provide any CSS Grid functionality itself, but as seen below you can easily use CSS Grid to layout your pages. -{{"demo": "pages/components/grid/CSSGrid.js"}} +{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden.md b/docs/src/pages/components/hidden/hidden.md index a64cc6ba090c9b..dd13253bf62cc0 100644 --- a/docs/src/pages/components/hidden/hidden.md +++ b/docs/src/pages/components/hidden/hidden.md @@ -43,13 +43,13 @@ If you are using server-side rendering, you can set `implementation="css"` if yo Using any breakpoint `up` property, the given *children* will be hidden *at or above* the breakpoint. -{{"demo": "pages/components/hidden/BreakpointUp.js"}} +{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} ## Breakpoint down Using any breakpoint `down` property, the given *children* will be hidden *at or below* the breakpoint. -{{"demo": "pages/components/hidden/BreakpointDown.js"}} +{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} ## Breakpoint only @@ -60,10 +60,10 @@ The `only` property can be used in two ways: - list a single breakpoint - list an array of breakpoints -{{"demo": "pages/components/hidden/BreakpointOnly.js"}} +{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} ## Integration with Grid It is quite common to alter `Grid` at different responsive breakpoints, and in many cases, you want to hide some of those elements. -{{"demo": "pages/components/hidden/GridIntegration.js"}} +{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/links/Links.js b/docs/src/pages/components/links/Links.js index 84f816e8fd2545..897794184c489c 100644 --- a/docs/src/pages/components/links/Links.js +++ b/docs/src/pages/components/links/Links.js @@ -5,8 +5,10 @@ import Link from '@material-ui/core/Link'; import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles(theme => ({ - link: { - margin: theme.spacing(1), + root: { + '& > * + *': { + marginLeft: theme.spacing(2), + }, }, })); @@ -15,14 +17,14 @@ export default function Links() { const preventDefault = event => event.preventDefault(); return ( - - + + Link - + {'color="inherit"'} - + {'variant="body2"'} diff --git a/docs/src/pages/components/links/Links.tsx b/docs/src/pages/components/links/Links.tsx index 8220bac854cc9e..07975cbd32015a 100644 --- a/docs/src/pages/components/links/Links.tsx +++ b/docs/src/pages/components/links/Links.tsx @@ -6,8 +6,10 @@ import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles((theme: Theme) => createStyles({ - link: { - margin: theme.spacing(1), + root: { + '& > * + *': { + marginLeft: theme.spacing(2), + }, }, }), ); @@ -17,14 +19,14 @@ export default function Links() { const preventDefault = (event: React.SyntheticEvent) => event.preventDefault(); return ( - - + + Link - + {'color="inherit"'} - + {'variant="body2"'} diff --git a/docs/src/pages/components/lists/lists.md b/docs/src/pages/components/lists/lists.md index dcb17ecdc4b5b8..0f2f5e8bb17fed 100644 --- a/docs/src/pages/components/lists/lists.md +++ b/docs/src/pages/components/lists/lists.md @@ -11,7 +11,7 @@ components: Collapse, Divider, List, ListItem, ListItemAvatar, ListItemIcon, Lis ## Simple List -{{"demo": "pages/components/lists/SimpleList.js"}} +{{"demo": "pages/components/lists/SimpleList.js", "bg": true}} The last item of the previous demo shows how you can render a link: @@ -31,27 +31,27 @@ You can find a [demo with React Router following this section](/guides/compositi ## Nested List -{{"demo": "pages/components/lists/NestedList.js"}} +{{"demo": "pages/components/lists/NestedList.js", "bg": true}} ## Folder List -{{"demo": "pages/components/lists/FolderList.js"}} +{{"demo": "pages/components/lists/FolderList.js", "bg": true}} ## Interactive Below is an interactive demo that lets you explore the visual results of the different settings: -{{"demo": "pages/components/lists/InteractiveList.js"}} +{{"demo": "pages/components/lists/InteractiveList.js", "bg": true}} ## Selected ListItem -{{"demo": "pages/components/lists/SelectedListItem.js"}} +{{"demo": "pages/components/lists/SelectedListItem.js", "bg": true}} ## Align list items You should change the list item alignment when displaying 3 lines or more, set the `alignItems="flex-start"` property. -{{"demo": "pages/components/lists/AlignItemsList.js"}} +{{"demo": "pages/components/lists/AlignItemsList.js", "bg": true}} ## List Controls @@ -61,17 +61,17 @@ A checkbox can either be a primary action or a secondary action. The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target. -{{"demo": "pages/components/lists/CheckboxList.js"}} +{{"demo": "pages/components/lists/CheckboxList.js", "bg": true}} The checkbox is the secondary action for the list item and a separate target. -{{"demo": "pages/components/lists/CheckboxListSecondary.js"}} +{{"demo": "pages/components/lists/CheckboxListSecondary.js", "bg": true}} ### Switch The switch is the secondary action and a separate target. -{{"demo": "pages/components/lists/SwitchListSecondary.js"}} +{{"demo": "pages/components/lists/SwitchListSecondary.js", "bg": true}} ## Pinned Subheader List @@ -80,11 +80,11 @@ Upon scrolling, subheaders remain pinned to the top of the screen until pushed o This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported. -{{"demo": "pages/components/lists/PinnedSubheaderList.js"}} +{{"demo": "pages/components/lists/PinnedSubheaderList.js", "bg": true}} ## Inset List -{{"demo": "pages/components/lists/InsetList.js"}} +{{"demo": "pages/components/lists/InsetList.js", "bg": true}} ## Virtualized List @@ -92,7 +92,7 @@ In the following example, we demonstrate how to use [react-window](https://githu It renders 200 rows and can easily handle more. Virtualization helps with performance issues. -{{"demo": "pages/components/lists/VirtualizedList.js"}} +{{"demo": "pages/components/lists/VirtualizedList.js", "bg": true}} The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. If this library doesn't cover your use case, you should consider using [react-virtualized](https://github.com/bvaughn/react-virtualized), then alternatives like [react-virtuoso](https://github.com/petyosi/react-virtuoso). diff --git a/docs/src/pages/components/material-icons/material-icons.md b/docs/src/pages/components/material-icons/material-icons.md index 54e973fbf60b2b..c00b7f3ea5e51b 100644 --- a/docs/src/pages/components/material-icons/material-icons.md +++ b/docs/src/pages/components/material-icons/material-icons.md @@ -11,6 +11,6 @@ The following npm package, [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons), includes the 1,000+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to [`SvgIcon`](/api/svg-icon/) components. -{{"demo": "pages/components/material-icons/SearchIcons.js", "hideHeader": true}} +{{"demo": "pages/components/material-icons/SearchIcons.js", "hideHeader": true, "bg": true}} ℹ️ The search supports synonyms. Try searching for "hamburger", or "logout". diff --git a/docs/src/pages/components/menus/MenuPopupState.js b/docs/src/pages/components/menus/MenuPopupState.js index af8be74e5135d3..6b131e78505b3b 100644 --- a/docs/src/pages/components/menus/MenuPopupState.js +++ b/docs/src/pages/components/menus/MenuPopupState.js @@ -9,7 +9,7 @@ export default function MenuPopupState() { {popupState => ( - diff --git a/docs/src/pages/components/menus/menus.md b/docs/src/pages/components/menus/menus.md index e11d239894a2db..f444823de2b438 100644 --- a/docs/src/pages/components/menus/menus.md +++ b/docs/src/pages/components/menus/menus.md @@ -36,7 +36,7 @@ For answering those needs, we expose a `MenuList` component that you can compose The primary responsibility of the `MenuList` component is to handle the focus. -{{"demo": "pages/components/menus/MenuListComposition.js"}} +{{"demo": "pages/components/menus/MenuListComposition.js", "bg": true}} ## Customized menus @@ -59,7 +59,7 @@ If the height of a menu prevents all menu items from being displayed, the menu c There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: -{{"demo": "pages/components/menus/TypographyMenu.js"}} +{{"demo": "pages/components/menus/TypographyMenu.js", "bg": true}} ## Change transition diff --git a/docs/src/pages/components/paper/paper.md b/docs/src/pages/components/paper/paper.md index 6b9afc606554b2..2a7f189101707e 100644 --- a/docs/src/pages/components/paper/paper.md +++ b/docs/src/pages/components/paper/paper.md @@ -9,4 +9,4 @@ components: Paper The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets. -{{"demo": "pages/components/paper/PaperSheet.js"}} +{{"demo": "pages/components/paper/PaperSheet.js", "bg": true}} diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js index 9017ebfeae3f46..006f9abb7c2db9 100644 --- a/docs/src/pages/components/popover/PopoverPopupState.js +++ b/docs/src/pages/components/popover/PopoverPopupState.js @@ -1,24 +1,16 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import Popover from '@material-ui/core/Popover'; import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'; -const useStyles = makeStyles(theme => ({ - typography: { - margin: theme.spacing(2), - }, -})); - export default function PopoverPopupState() { - const classes = useStyles(); - return ( {popupState => (
- - The content of the Popover. + + The content of the Popover. +
)} diff --git a/docs/src/pages/components/popover/SimplePopover.js b/docs/src/pages/components/popover/SimplePopover.js index f7041be44f7d6e..785549e89fc80f 100644 --- a/docs/src/pages/components/popover/SimplePopover.js +++ b/docs/src/pages/components/popover/SimplePopover.js @@ -27,7 +27,7 @@ export default function SimplePopover() { return (
- - {popupState => (
- diff --git a/docs/src/pages/components/popper/popper.md b/docs/src/pages/components/popper/popper.md index b1234a8d244181..02c7def149952b 100644 --- a/docs/src/pages/components/popper/popper.md +++ b/docs/src/pages/components/popper/popper.md @@ -44,11 +44,11 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react- ## Positioned Popper -{{"demo": "pages/components/popper/PositionedPopper.js"}} +{{"demo": "pages/components/popper/PositionedPopper.js", "bg": true}} ## Scroll playground -{{"demo": "pages/components/popper/ScrollPlayground.js", "hideHeader": true}} +{{"demo": "pages/components/popper/ScrollPlayground.js", "hideHeader": true, "bg": true}} ## Faked reference object diff --git a/docs/src/pages/components/rating/RatingSize.js b/docs/src/pages/components/rating/RatingSize.js index b39488739c579b..5dd06a3e5878d8 100644 --- a/docs/src/pages/components/rating/RatingSize.js +++ b/docs/src/pages/components/rating/RatingSize.js @@ -1,18 +1,13 @@ import React from 'react'; +import Box from '@material-ui/core/Box'; import Rating from '@material-ui/lab/Rating'; export default function RatingSize() { return ( -
-
- -
-
- -
-
- -
-
+ + + + + ); } diff --git a/docs/src/pages/components/rating/RatingSize.tsx b/docs/src/pages/components/rating/RatingSize.tsx index b39488739c579b..5dd06a3e5878d8 100644 --- a/docs/src/pages/components/rating/RatingSize.tsx +++ b/docs/src/pages/components/rating/RatingSize.tsx @@ -1,18 +1,13 @@ import React from 'react'; +import Box from '@material-ui/core/Box'; import Rating from '@material-ui/lab/Rating'; export default function RatingSize() { return ( -
-
- -
-
- -
-
- -
-
+ + + + + ); } diff --git a/docs/src/pages/components/skeleton/YouTube.js b/docs/src/pages/components/skeleton/YouTube.js index 038384a05ab04b..d688b7d0c1a591 100644 --- a/docs/src/pages/components/skeleton/YouTube.js +++ b/docs/src/pages/components/skeleton/YouTube.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; @@ -76,13 +75,9 @@ Media.propTypes = { export default function YouTube() { return ( - - - - - - - + + + ); } diff --git a/docs/src/pages/components/skeleton/YouTube.tsx b/docs/src/pages/components/skeleton/YouTube.tsx index 18bd604d66fc3f..babedbb6ca50ae 100644 --- a/docs/src/pages/components/skeleton/YouTube.tsx +++ b/docs/src/pages/components/skeleton/YouTube.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; @@ -74,13 +73,9 @@ function Media(props: MediaProps) { export default function YouTube() { return ( - - - - - - - + + + ); } diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md index 837d124e8c3ae2..57762dc2f066b5 100644 --- a/docs/src/pages/components/skeleton/skeleton.md +++ b/docs/src/pages/components/skeleton/skeleton.md @@ -26,4 +26,4 @@ For instance: ## Facebook example -{{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false}} +{{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index f1753db5b55506..2b5ebc29748b04 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles, makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Slider from '@material-ui/core/Slider'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; @@ -9,7 +8,6 @@ import Tooltip from '@material-ui/core/Tooltip'; const useStyles = makeStyles(theme => ({ root: { width: 300 + theme.spacing(3) * 2, - padding: theme.spacing(3), }, margin: { height: theme.spacing(3), @@ -199,7 +197,7 @@ export default function CustomizedSlider() { const classes = useStyles(); return ( - +
iOS
@@ -219,6 +217,6 @@ export default function CustomizedSlider() { getAriaLabel={index => (index === 0 ? 'Minimum price' : 'Maximum price')} defaultValue={[20, 40]} /> - +
); } diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index e141773f7db38b..887a4459cbc7ef 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; import Slider from '@material-ui/core/Slider'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; @@ -10,7 +9,6 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ root: { width: 300 + theme.spacing(3) * 2, - padding: theme.spacing(3), }, margin: { height: theme.spacing(3), @@ -201,7 +199,7 @@ export default function CustomizedSlider() { const classes = useStyles(); return ( - +
iOS
@@ -221,6 +219,6 @@ export default function CustomizedSlider() { getAriaLabel={index => (index === 0 ? 'Minimum price' : 'Maximum price')} defaultValue={[20, 40]} /> - +
); } diff --git a/docs/src/pages/components/steppers/steppers.md b/docs/src/pages/components/steppers/steppers.md index 12c456782caad3..e80a3ca6cfcf64 100644 --- a/docs/src/pages/components/steppers/steppers.md +++ b/docs/src/pages/components/steppers/steppers.md @@ -23,20 +23,20 @@ The `Stepper` can be controlled by passing the current step index (zero-based) a This example also shows the use of an optional step by placing the `optional` property on the second `Step` component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set `completed={false}` to signify that even though the active step index has gone beyond the optional step, it's not actually complete. -{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}} +{{"demo": "pages/components/steppers/HorizontalLinearStepper.js", "bg": true}} ### Linear - Alternative Label Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component. -{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}} +{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js", "bg": true}} ### Customized Stepper Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/steppers/CustomizedSteppers.js"}} +{{"demo": "pages/components/steppers/CustomizedSteppers.js", "bg": true}} ### Non-linear @@ -48,21 +48,21 @@ The use of the `StepButton` here demonstrates clickable step labels, as well as flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed). -{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}} +{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js", "bg": true}} ### Non Linear - Alternative Label Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component. -{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}} +{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js", "bg": true}} ### Non Linear - Error Step -{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}} +{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js", "bg": true}} ## Vertical Stepper -{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}} +{{"demo": "pages/components/steppers/VerticalLinearStepper.js", "bg": true}} ## Mobile Stepper @@ -73,23 +73,23 @@ This component implements a compact stepper suitable for a mobile device. See [m This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference. -{{"demo": "pages/components/steppers/TextMobileStepper.js"}} +{{"demo": "pages/components/steppers/TextMobileStepper.js", "bg": true}} ### Text with Carousel effect This demo is very similar to the previous, the difference is the usage of [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to make the transition of steps. -{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}} +{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js", "bg": true}} ### Dots Use dots when the number of steps isn’t large. -{{"demo": "pages/components/steppers/DotsMobileStepper.js"}} +{{"demo": "pages/components/steppers/DotsMobileStepper.js", "bg": true}} ### Progress Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps). -{{"demo": "pages/components/steppers/ProgressMobileStepper.js"}} +{{"demo": "pages/components/steppers/ProgressMobileStepper.js", "bg": true}} diff --git a/docs/src/pages/components/tables/tables.md b/docs/src/pages/components/tables/tables.md index 04fa089f091b09..10ce3b97e5e117 100644 --- a/docs/src/pages/components/tables/tables.md +++ b/docs/src/pages/components/tables/tables.md @@ -29,13 +29,13 @@ For accessibility, the first column is set to be a `` element, with a `scope A simple example with no frills. -{{"demo": "pages/components/tables/SimpleTable.js"}} +{{"demo": "pages/components/tables/SimpleTable.js", "bg": true}} ## Dense Table A simple example of a dense table with no frills. -{{"demo": "pages/components/tables/DenseTable.js"}} +{{"demo": "pages/components/tables/DenseTable.js", "bg": true}} ## Sorting & Selecting @@ -43,14 +43,14 @@ This example demonstrates the use of `Checkbox` and clickable rows for selection The Table has been given a fixed width to demonstrate horizontal scrolling. In order to prevent the pagination controls from scrolling, the TablePagination component is used outside of the Table. (The ['Custom Table Pagination Action' example](#custom-table-pagination-action) below shows the pagination within the TableFooter.) -{{"demo": "pages/components/tables/EnhancedTable.js"}} +{{"demo": "pages/components/tables/EnhancedTable.js", "bg": true}} ## Customized tables Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/tables/CustomizedTables.js"}} +{{"demo": "pages/components/tables/CustomizedTables.js", "bg": true}} ### Custom pagination options @@ -73,20 +73,20 @@ You should either provide an array of: The `Action` property of the `TablePagination` component allows the implementation of custom actions. -{{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}} +{{"demo": "pages/components/tables/CustomPaginationActionsTable.js", "bg": true}} ## Fixed header An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support). -{{"demo": "pages/components/tables/StickyHeadTable.js"}} +{{"demo": "pages/components/tables/StickyHeadTable.js", "bg": true}} ## Spanning Table A simple example with spanning rows & columns. -{{"demo": "pages/components/tables/SpanningTable.js"}} +{{"demo": "pages/components/tables/SpanningTable.js", "bg": true}} ## Virtualized Table @@ -94,7 +94,7 @@ In the following example, we demonstrate how to use [react-virtualized](https:// It renders 200 rows and can easily handle more. Virtualization helps with performance issues. -{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}} +{{"demo": "pages/components/tables/ReactVirtualizedTable.js", "bg": true}} ## Complementary projects @@ -108,7 +108,7 @@ For more advanced use cases you might be able to take advantage of: [material-table](https://github.com/mbrn/material-table) is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out. -{{"demo": "pages/components/tables/MaterialTableDemo.js"}} +{{"demo": "pages/components/tables/MaterialTableDemo.js", "bg": true}} ### Other @@ -124,4 +124,4 @@ They support many different use cases (editable, filtering, grouping, sorting, s A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it. -{{"demo": "pages/components/tables/AcccessibleTable.js"}} +{{"demo": "pages/components/tables/AcccessibleTable.js", "bg": true}} diff --git a/docs/src/pages/components/tabs/tabs.md b/docs/src/pages/components/tabs/tabs.md index 1c5934e646130c..75e910a5623b03 100644 --- a/docs/src/pages/components/tabs/tabs.md +++ b/docs/src/pages/components/tabs/tabs.md @@ -13,19 +13,19 @@ components: Tabs, Tab A simple example with no frills. -{{"demo": "pages/components/tabs/SimpleTabs.js"}} +{{"demo": "pages/components/tabs/SimpleTabs.js", "bg": true}} ### Wrapped Labels Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow and the text will not be visible. -{{"demo": "pages/components/tabs/TabsWrappedLabel.js"}} +{{"demo": "pages/components/tabs/TabsWrappedLabel.js", "bg": true}} ### Disabled Tab A Tab can be disabled by setting `disabled` property. -{{"demo": "pages/components/tabs/DisabledTabs.js"}} +{{"demo": "pages/components/tabs/DisabledTabs.js", "bg": true}} ## Fixed Tabs @@ -36,13 +36,13 @@ Fixed tabs should be used with a limited number of tabs and when consistent plac The `variant="fullWidth"` property should be used for smaller views. This demo also uses [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to animate the Tab transition, and allowing tabs to be swiped on touch devices. -{{"demo": "pages/components/tabs/FullWidthTabs.js"}} +{{"demo": "pages/components/tabs/FullWidthTabs.js", "bg": true}} ### Centered The `centered` property should be used for larger views. -{{"demo": "pages/components/tabs/CenteredTabs.js"}} +{{"demo": "pages/components/tabs/CenteredTabs.js", "bg": true}} ## Scrollable Tabs @@ -50,43 +50,43 @@ The `centered` property should be used for larger views. Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width) -{{"demo": "pages/components/tabs/ScrollableTabsButtonAuto.js"}} +{{"demo": "pages/components/tabs/ScrollableTabsButtonAuto.js", "bg": true}} ### Forced Scroll Buttons Left and right scroll buttons will be presented regardless of the viewport width. -{{"demo": "pages/components/tabs/ScrollableTabsButtonForce.js"}} +{{"demo": "pages/components/tabs/ScrollableTabsButtonForce.js", "bg": true}} ### Prevent Scroll Buttons Left and right scroll buttons will never be presented. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.) -{{"demo": "pages/components/tabs/ScrollableTabsButtonPrevent.js"}} +{{"demo": "pages/components/tabs/ScrollableTabsButtonPrevent.js", "bg": true}} ## Customized tabs Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/tabs/CustomizedTabs.js"}} +{{"demo": "pages/components/tabs/CustomizedTabs.js", "bg": true}} 👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/tabs). ## Vertical tabs -{{"demo": "pages/components/tabs/VerticalTabs.js"}} +{{"demo": "pages/components/tabs/VerticalTabs.js", "bg": true}} ## Nav Tabs By default tabs use a `button` element, but you can provide your own custom tag or component. Here's an example of implementing tabbed navigation: -{{"demo": "pages/components/tabs/NavTabs.js"}} +{{"demo": "pages/components/tabs/NavTabs.js", "bg": true}} ## Icon Tabs Tab labels may be either all icons or all text. -{{"demo": "pages/components/tabs/IconTabs.js"}} +{{"demo": "pages/components/tabs/IconTabs.js", "bg": true}} -{{"demo": "pages/components/tabs/IconLabelTabs.js"}} +{{"demo": "pages/components/tabs/IconLabelTabs.js", "bg": true}} diff --git a/docs/src/pages/components/text-fields/BasicTextFields.js b/docs/src/pages/components/text-fields/BasicTextFields.js index 0b6df37e7c71bb..bb3722610f9a8a 100644 --- a/docs/src/pages/components/text-fields/BasicTextFields.js +++ b/docs/src/pages/components/text-fields/BasicTextFields.js @@ -3,14 +3,11 @@ import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; const useStyles = makeStyles(theme => ({ - container: { - display: 'flex', - flexWrap: 'wrap', - }, - textField: { - marginLeft: theme.spacing(1), - marginRight: theme.spacing(1), - width: 200, + root: { + '& > *': { + margin: theme.spacing(1), + width: 200, + }, }, })); @@ -18,33 +15,10 @@ export default function BasicTextFields() { const classes = useStyles(); return ( -
-
- -
-
- -
-
- -
+ + + + ); } diff --git a/docs/src/pages/components/text-fields/BasicTextFields.tsx b/docs/src/pages/components/text-fields/BasicTextFields.tsx index 5d43c97a906729..46da8959cb3889 100644 --- a/docs/src/pages/components/text-fields/BasicTextFields.tsx +++ b/docs/src/pages/components/text-fields/BasicTextFields.tsx @@ -4,14 +4,11 @@ import TextField from '@material-ui/core/TextField'; const useStyles = makeStyles((theme: Theme) => createStyles({ - container: { - display: 'flex', - flexWrap: 'wrap', - }, - textField: { - marginLeft: theme.spacing(1), - marginRight: theme.spacing(1), - width: 200, + root: { + '& > *': { + margin: theme.spacing(1), + width: 200, + }, }, }), ); @@ -20,33 +17,10 @@ export default function BasicTextFields() { const classes = useStyles(); return ( -
-
- -
-
- -
-
- -
+ + + + ); } diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md index 07464957eac2b3..7a04b3c1b2676d 100644 --- a/docs/src/pages/components/text-fields/text-fields.md +++ b/docs/src/pages/components/text-fields/text-fields.md @@ -110,7 +110,7 @@ Here are some examples of customizing the component. You can learn more about th Customization does not stop at CSS, you can use composition to build custom components and give your app a unique feel. Below is an example using the [`InputBase`](/api/input-base/) component, inspired by Google Maps. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/CustomizedInputBase.js", "bg": true}} ## Limitations diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md index 11ea8fee70d4ef..701cea4924144f 100644 --- a/docs/src/pages/components/toggle-button/toggle-button.md +++ b/docs/src/pages/components/toggle-button/toggle-button.md @@ -30,7 +30,7 @@ Fancy larger or smaller buttons? Use the `size` property. Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/toggle-button/CustomizedDividers.js"}} +{{"demo": "pages/components/toggle-button/CustomizedDividers.js", "bg": true}} ## Accessibility diff --git a/docs/src/pages/components/tooltips/ControlledTooltips.js b/docs/src/pages/components/tooltips/ControlledTooltips.js index 49b1070add076c..91bf09464e3bbf 100644 --- a/docs/src/pages/components/tooltips/ControlledTooltips.js +++ b/docs/src/pages/components/tooltips/ControlledTooltips.js @@ -5,16 +5,16 @@ import Tooltip from '@material-ui/core/Tooltip'; export default function ControlledTooltips() { const [open, setOpen] = React.useState(false); - const handleTooltipClose = () => { + const handleClose = () => { setOpen(false); }; - const handleTooltipOpen = () => { + const handleOpen = () => { setOpen(true); }; return ( - + ); diff --git a/docs/src/pages/components/tooltips/ControlledTooltips.tsx b/docs/src/pages/components/tooltips/ControlledTooltips.tsx index 49b1070add076c..91bf09464e3bbf 100644 --- a/docs/src/pages/components/tooltips/ControlledTooltips.tsx +++ b/docs/src/pages/components/tooltips/ControlledTooltips.tsx @@ -5,16 +5,16 @@ import Tooltip from '@material-ui/core/Tooltip'; export default function ControlledTooltips() { const [open, setOpen] = React.useState(false); - const handleTooltipClose = () => { + const handleClose = () => { setOpen(false); }; - const handleTooltipOpen = () => { + const handleOpen = () => { setOpen(true); }; return ( - + ); diff --git a/docs/src/pages/components/transfer-list/transfer-list.md b/docs/src/pages/components/transfer-list/transfer-list.md index 32bb43c3c8569c..fec48dbf371f95 100644 --- a/docs/src/pages/components/transfer-list/transfer-list.md +++ b/docs/src/pages/components/transfer-list/transfer-list.md @@ -11,10 +11,10 @@ components: List, ListItem, Checkbox, Switch For completeness, this example includes buttons for "move all", but not every transfer list needs these. -{{"demo": "pages/components/transfer-list/TransferList.js"}} +{{"demo": "pages/components/transfer-list/TransferList.js", "bg": true}} ## Enhanced Transfer List This example exchanges the "move all" buttons for a "select all / select none" checkbox, and adds a counter. -{{"demo": "pages/components/transfer-list/SelectAllTransferList.js"}} +{{"demo": "pages/components/transfer-list/SelectAllTransferList.js", "bg": true}} diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md index 82caa75c465465..2b92c70203ad60 100644 --- a/docs/src/pages/components/tree-view/tree-view.md +++ b/docs/src/pages/components/tree-view/tree-view.md @@ -17,15 +17,15 @@ Tree views can be used to represent a file system navigator displaying folders a {{"demo": "pages/components/tree-view/CustomizedTreeView.js"}} -### Controlled +### Gmail clone -The tree view also offers a controlled API. +{{"demo": "pages/components/tree-view/GmailTreeView.js"}} -{{"demo": "pages/components/tree-view/ControlledTreeView.js"}} +## Controlled -### Gmail clone +The tree view also offers a controlled API. -{{"demo": "pages/components/tree-view/GmailTreeView.js"}} +{{"demo": "pages/components/tree-view/ControlledTreeView.js"}} ## Accessibility diff --git a/docs/src/pages/customization/color/color-fr.md b/docs/src/pages/customization/color/color-fr.md index 84cbd2250b5fc7..ade02516886ebf 100644 --- a/docs/src/pages/customization/color/color-fr.md +++ b/docs/src/pages/customization/color/color-fr.md @@ -47,7 +47,7 @@ const color = HUE[SHADE]; To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Alternatively, you can enter hex values in the Primary and Secondary text fields. -{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}} +{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true, "bg": true}} The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): @@ -104,4 +104,4 @@ const theme = createMuiTheme({ - [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool. - [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview. -- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. \ No newline at end of file +- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. diff --git a/docs/src/pages/discover-more/languages/languages.md b/docs/src/pages/discover-more/languages/languages.md index 258b38fc43567d..d4c0f7a2f968c7 100644 --- a/docs/src/pages/discover-more/languages/languages.md +++ b/docs/src/pages/discover-more/languages/languages.md @@ -2,5 +2,5 @@

The Material-UI documentation is available in the following languages.

-{{"demo": "pages/discover-more/languages/Languages.js", "hideHeader": true}} +{{"demo": "pages/discover-more/languages/Languages.js", "hideHeader": true, "bg": true}} diff --git a/docs/src/pages/discover-more/showcase/showcase.md b/docs/src/pages/discover-more/showcase/showcase.md index 3a692e7ca5dc2e..cbe412093f64b5 100644 --- a/docs/src/pages/discover-more/showcase/showcase.md +++ b/docs/src/pages/discover-more/showcase/showcase.md @@ -8,4 +8,4 @@ Want to add your app? Found an app that no longer works or no longer uses Materi - High traffic - Open source -{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true}} +{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true, "bg": true}} diff --git a/docs/src/pages/discover-more/team/team.md b/docs/src/pages/discover-more/team/team.md index e70413aa141a39..abf517134b73bc 100644 --- a/docs/src/pages/discover-more/team/team.md +++ b/docs/src/pages/discover-more/team/team.md @@ -4,7 +4,7 @@ Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community. -{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}} +{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true, "bg": true}} Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request. Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop. diff --git a/docs/src/pages/getting-started/templates/templates.md b/docs/src/pages/getting-started/templates/templates.md index fdaf383cb79ae2..a7c7b8fded6cde 100644 --- a/docs/src/pages/getting-started/templates/templates.md +++ b/docs/src/pages/getting-started/templates/templates.md @@ -14,7 +14,7 @@ for reuse in other pages. For multi-part examples, a table in the README at the linked source code location describes the purpose of each file. -{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}} +{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true, "bg": true}} If while using these examples you make changes or enhancements that could improve the developer experience, or you would like to contribute an additional example, diff --git a/docs/src/pages/getting-started/usage/usage.md b/docs/src/pages/getting-started/usage/usage.md index 03d5acdc83154c..850a85c430f35a 100644 --- a/docs/src/pages/getting-started/usage/usage.md +++ b/docs/src/pages/getting-started/usage/usage.md @@ -31,7 +31,7 @@ ReactDOM.render(, document.querySelector('#app')); Yes, this really is all you need to get started, as you can see in this live and interactive demo: -{{"demo": "pages/getting-started/usage/Usage.js", "hideHeader": true}} +{{"demo": "pages/getting-started/usage/Usage.js", "hideHeader": true, "bg": true}} ## Globals diff --git a/docs/src/pages/styles/basics/NestedStylesHook.js b/docs/src/pages/styles/basics/NestedStylesHook.js index b2dbd87905ad01..b0b4e36be208b7 100644 --- a/docs/src/pages/styles/basics/NestedStylesHook.js +++ b/docs/src/pages/styles/basics/NestedStylesHook.js @@ -1,6 +1,5 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; const useStyles = makeStyles({ root: { @@ -19,12 +18,12 @@ export default function NestedStylesHook() { const classes = useStyles(); return ( - +
This is red since it is inside the paper.

This is green since it is inside the paragraph{' '} and this is blue since it is inside the span

- +
); } diff --git a/docs/src/pages/styles/basics/NestedStylesHook.tsx b/docs/src/pages/styles/basics/NestedStylesHook.tsx index b2dbd87905ad01..b0b4e36be208b7 100644 --- a/docs/src/pages/styles/basics/NestedStylesHook.tsx +++ b/docs/src/pages/styles/basics/NestedStylesHook.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; const useStyles = makeStyles({ root: { @@ -19,12 +18,12 @@ export default function NestedStylesHook() { const classes = useStyles(); return ( - +
This is red since it is inside the paper.

This is green since it is inside the paragraph{' '} and this is blue since it is inside the span

- +
); } diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index 845012908819f0..6204e3db63fa9a 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -336,7 +336,7 @@ It can help building a mental model for this "style function" concept. In practice, a Box component can save you a lot of time. In this example, we demonstrate how to reproduce a Banner component. -{{"demo": "pages/system/basics/RealWorld.js"}} +{{"demo": "pages/system/basics/RealWorld.js", "bg": true}} ## Prior art diff --git a/docs/src/pages/system/borders/borders.md b/docs/src/pages/system/borders/borders.md index 27f3e2a133a23c..f1439efb026e4e 100644 --- a/docs/src/pages/system/borders/borders.md +++ b/docs/src/pages/system/borders/borders.md @@ -8,7 +8,7 @@ Use border utilities to add or remove an element’s borders. Choose from all bo ### Additive -{{"demo": "pages/system/borders/BorderAdditive.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/borders/BorderAdditive.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -20,7 +20,7 @@ Use border utilities to add or remove an element’s borders. Choose from all bo ### Subtractive -{{"demo": "pages/system/borders/BorderSubtractive.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/borders/BorderSubtractive.js", "defaultCodeOpen": false, "bg": true}} ```jsx … diff --git a/docs/src/pages/system/display/display.md b/docs/src/pages/system/display/display.md index d2e9d20c8efd61..def9a6f7ae3033 100644 --- a/docs/src/pages/system/display/display.md +++ b/docs/src/pages/system/display/display.md @@ -6,7 +6,7 @@ ### Inline -{{"demo": "pages/system/display/Inline.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/display/Inline.js", "defaultCodeOpen": false, "bg": true}} ```jsx inline @@ -15,7 +15,7 @@ ### Block -{{"demo": "pages/system/display/Block.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/display/Block.js", "defaultCodeOpen": false, "bg": true}} ```jsx block diff --git a/docs/src/pages/system/flexbox/flexbox.md b/docs/src/pages/system/flexbox/flexbox.md index 288ca334187c2b..4a89410b56ec75 100644 --- a/docs/src/pages/system/flexbox/flexbox.md +++ b/docs/src/pages/system/flexbox/flexbox.md @@ -8,7 +8,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### display -{{"demo": "pages/system/flexbox/Display.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/Display.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -16,7 +16,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### flex-direction -{{"demo": "pages/system/flexbox/FlexDirection.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/FlexDirection.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -25,7 +25,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### flex-wrap -{{"demo": "pages/system/flexbox/FlexWrap.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/FlexWrap.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -34,7 +34,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### justify-content -{{"demo": "pages/system/flexbox/JustifyContent.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/JustifyContent.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -44,7 +44,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### align-items -{{"demo": "pages/system/flexbox/AlignItems.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/AlignItems.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -54,7 +54,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### align-content -{{"demo": "pages/system/flexbox/AlignContent.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/AlignContent.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -65,7 +65,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### order -{{"demo": "pages/system/flexbox/Order.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/Order.js", "defaultCodeOpen": false, "bg": true}} ```jsx Item 1 @@ -75,7 +75,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### flex-grow -{{"demo": "pages/system/flexbox/FlexGrow.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/FlexGrow.js", "defaultCodeOpen": false, "bg": true}} ```jsx Item 1 @@ -85,7 +85,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### flex-shrink -{{"demo": "pages/system/flexbox/FlexShrink.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/FlexShrink.js", "defaultCodeOpen": false, "bg": true}} ```jsx Item 1 @@ -95,7 +95,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this ### align-self -{{"demo": "pages/system/flexbox/AlignSelf.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/flexbox/AlignSelf.js", "defaultCodeOpen": false, "bg": true}} ```jsx Item 1 diff --git a/docs/src/pages/system/positions/positions.md b/docs/src/pages/system/positions/positions.md index 02c1afe73463c9..d078703e7250a8 100644 --- a/docs/src/pages/system/positions/positions.md +++ b/docs/src/pages/system/positions/positions.md @@ -4,7 +4,7 @@ ## z-index -{{"demo": "pages/system/positions/ZIndex.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/positions/ZIndex.js", "defaultCodeOpen": false, "bg": true}} ```jsx diff --git a/docs/src/pages/system/shadows/shadows.md b/docs/src/pages/system/shadows/shadows.md index df15399fb3d09b..4e7709bc70ee45 100644 --- a/docs/src/pages/system/shadows/shadows.md +++ b/docs/src/pages/system/shadows/shadows.md @@ -4,7 +4,7 @@ ## Example -{{"demo": "pages/system/shadows/Demo.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/shadows/Demo.js", "defaultCodeOpen": false, "bg": true}} ```jsx … diff --git a/docs/src/pages/system/sizing/Height.js b/docs/src/pages/system/sizing/Height.js index e0e3346186be56..97bde16cd5593f 100644 --- a/docs/src/pages/system/sizing/Height.js +++ b/docs/src/pages/system/sizing/Height.js @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; export default function Height() { return ( - + Height 25% diff --git a/docs/src/pages/system/sizing/Height.tsx b/docs/src/pages/system/sizing/Height.tsx index e0e3346186be56..97bde16cd5593f 100644 --- a/docs/src/pages/system/sizing/Height.tsx +++ b/docs/src/pages/system/sizing/Height.tsx @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; export default function Height() { return ( - + Height 25% diff --git a/docs/src/pages/system/sizing/Values.js b/docs/src/pages/system/sizing/Values.js index b7ecc5beb4b329..cfbd1a93dd7bc5 100644 --- a/docs/src/pages/system/sizing/Values.js +++ b/docs/src/pages/system/sizing/Values.js @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; export default function Values() { return ( - + Width 1/4 diff --git a/docs/src/pages/system/sizing/Values.tsx b/docs/src/pages/system/sizing/Values.tsx index b7ecc5beb4b329..cfbd1a93dd7bc5 100644 --- a/docs/src/pages/system/sizing/Values.tsx +++ b/docs/src/pages/system/sizing/Values.tsx @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; export default function Values() { return ( - + Width 1/4 diff --git a/docs/src/pages/system/sizing/Width.js b/docs/src/pages/system/sizing/Width.js index 053017dc81e7bd..43473971dd923d 100644 --- a/docs/src/pages/system/sizing/Width.js +++ b/docs/src/pages/system/sizing/Width.js @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; export default function Width() { return ( - + Width 25% diff --git a/docs/src/pages/system/sizing/Width.tsx b/docs/src/pages/system/sizing/Width.tsx index 053017dc81e7bd..43473971dd923d 100644 --- a/docs/src/pages/system/sizing/Width.tsx +++ b/docs/src/pages/system/sizing/Width.tsx @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; export default function Width() { return ( - + Width 25% diff --git a/docs/src/pages/system/spacing/spacing.md b/docs/src/pages/system/spacing/spacing.md index 36d783a661bab9..50dea57dd2fd8d 100644 --- a/docs/src/pages/system/spacing/spacing.md +++ b/docs/src/pages/system/spacing/spacing.md @@ -70,7 +70,7 @@ const theme = { ## Example -{{"demo": "pages/system/spacing/Demo.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/spacing/Demo.js", "defaultCodeOpen": false, "bg": true}} ```jsx … @@ -80,7 +80,7 @@ const theme = { ## Horizontal centering -{{"demo": "pages/system/spacing/HorizontalCentering.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/spacing/HorizontalCentering.js", "defaultCodeOpen": false, "bg": true}} ```jsx … diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 2ac77ed0857c76..5e95a7edd9a2c7 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -42,7 +42,7 @@ export const styles = theme => ({ duration: theme.transitions.duration.shortest, }), '&$checked': { - transform: 'translateX(50%)', + transform: 'translateX(20px)', }, '&$disabled': { color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800], @@ -109,6 +109,9 @@ export const styles = theme => ({ }, '& $switchBase': { padding: 4, + '&$checked': { + transform: 'translateX(16px)', + }, }, }, /* Pseudo-class applied to the internal `SwitchBase` component's `checked` class. */