From 41920170e5d631ec3d1ac686b7bdf0e31befc3e6 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 17 Apr 2019 11:41:33 +0200 Subject: [PATCH] [docs] Improve the customization demos (#15368) * [docs] Improve the customization demos * remove typescript usage of any * Cast to a specific type instead of any * fix argos --- .../src/pages/demos/badges/CustomizedBadge.js | 12 +- .../pages/demos/badges/CustomizedBadge.tsx | 30 ++- .../breadcrumbs/CustomizedBreadcrumbs.js | 43 ++-- .../breadcrumbs/CustomizedBreadcrumbs.tsx | 68 +++--- .../pages/demos/buttons/CustomizedButtons.js | 48 ++-- .../pages/demos/buttons/CustomizedButtons.tsx | 112 ++++----- .../pages/demos/dialogs/CustomizedDialog.tsx | 4 +- .../CustomizedExpansionPanel.js | 120 ++++------ .../CustomizedExpansionPanel.tsx | 120 ++++------ .../demos/progress/CustomizedProgress.js | 116 +++++----- .../demos/progress/CustomizedProgress.tsx | 161 ++++++------- .../pages/demos/selects/CustomizedSelects.js | 15 +- .../pages/demos/selects/CustomizedSelects.tsx | 15 +- .../src/pages/demos/tables/CustomizedTable.js | 64 +++--- .../pages/demos/tables/CustomizedTable.tsx | 67 +++--- docs/src/pages/demos/tabs/CustomizedTabs.js | 56 ++--- docs/src/pages/demos/tabs/CustomizedTabs.tsx | 122 +++++----- .../demos/tooltips/CustomizedTooltips.js | 193 +++++++++------- .../demos/tooltips/CustomizedTooltips.tsx | 217 ++++++++++-------- .../src/Breadcrumbs/BreadcrumbCollapsed.js | 2 +- .../src/Breadcrumbs/BreadcrumbSeparator.js | 2 +- .../src/ExpansionPanel/ExpansionPanel.js | 25 +- packages/material-ui/src/Hidden/HiddenCss.js | 2 +- .../src/OutlinedInput/NotchedOutline.js | 2 +- .../src/SwipeableDrawer/SwipeArea.js | 2 +- packages/material-ui/src/Tabs/TabIndicator.js | 2 +- .../material-ui/src/Tabs/TabScrollButton.js | 2 +- .../material-ui/src/internal/SwitchBase.js | 2 +- 28 files changed, 789 insertions(+), 835 deletions(-) diff --git a/docs/src/pages/demos/badges/CustomizedBadge.js b/docs/src/pages/demos/badges/CustomizedBadge.js index 48e9f0e848affa..942d572acf6f64 100644 --- a/docs/src/pages/demos/badges/CustomizedBadge.js +++ b/docs/src/pages/demos/badges/CustomizedBadge.js @@ -1,10 +1,10 @@ import React from 'react'; import IconButton from '@material-ui/core/IconButton'; import Badge from '@material-ui/core/Badge'; -import { makeStyles } from '@material-ui/core/styles'; +import { withStyles } from '@material-ui/core/styles'; import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; -const useStyles = makeStyles(theme => ({ +const StyledBadge = withStyles(theme => ({ badge: { top: '50%', right: -3, @@ -13,16 +13,14 @@ const useStyles = makeStyles(theme => ({ theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900] }`, }, -})); +}))(Badge); function CustomizedBadge() { - const classes = useStyles(); - return ( - + - + ); } diff --git a/docs/src/pages/demos/badges/CustomizedBadge.tsx b/docs/src/pages/demos/badges/CustomizedBadge.tsx index 7afe1b1d2782de..b5bb60f74f80da 100644 --- a/docs/src/pages/demos/badges/CustomizedBadge.tsx +++ b/docs/src/pages/demos/badges/CustomizedBadge.tsx @@ -1,30 +1,26 @@ import React from 'react'; import IconButton from '@material-ui/core/IconButton'; import Badge from '@material-ui/core/Badge'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { withStyles, Theme } from '@material-ui/core/styles'; import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - badge: { - top: '50%', - right: -3, - // The border color match the background color. - border: `2px solid ${ - theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900] - }`, - }, - }), -); +const StyledBadge = withStyles((theme: Theme) => ({ + badge: { + top: '50%', + right: -3, + // The border color match the background color. + border: `2px solid ${ + theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900] + }`, + }, +}))(Badge); function CustomizedBadge() { - const classes = useStyles(); - return ( - + - + ); } diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js index 8ee0a586039f9f..1967deae8e490a 100644 --- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js +++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; import { emphasize } from '@material-ui/core/styles/colorManipulator'; import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; @@ -9,11 +8,8 @@ import Avatar from '@material-ui/core/Avatar'; import HomeIcon from '@material-ui/icons/Home'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -const styles = theme => ({ +const StyledBreadcrumb = withStyles(theme => ({ root: { - padding: theme.spacing(1), - }, - chip: { backgroundColor: theme.palette.grey[100], height: 24, color: theme.palette.grey[800], @@ -26,30 +22,25 @@ const styles = theme => ({ backgroundColor: emphasize(theme.palette.grey[300], 0.12), }, }, - avatar: { - background: 'none', - marginRight: -theme.spacing(1.5), - }, -}); +}))(Chip); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591 function handleClick(event) { event.preventDefault(); alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert } -function CustomBreadcrumb(props) { - const { classes, ...rest } = props; - return ; -} - -CustomBreadcrumb.propTypes = { - classes: PropTypes.object.isRequired, -}; - -const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb); +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(1), + }, + avatar: { + background: 'none', + marginRight: -theme.spacing(1.5), + }, +})); -function CustomizedBreadcrumbs(props) { - const { classes } = props; +function CustomizedBreadcrumbs() { + const classes = useStyles(); return ( @@ -77,8 +68,4 @@ function CustomizedBreadcrumbs(props) { ); } -CustomizedBreadcrumbs.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(CustomizedBreadcrumbs); +export default CustomizedBreadcrumbs; diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx index ce74a1ad96d137..c06d9b4fa9b7a9 100644 --- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx +++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles'; import { emphasize } from '@material-ui/core/styles/colorManipulator'; import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; @@ -9,52 +8,41 @@ import Avatar from '@material-ui/core/Avatar'; import HomeIcon from '@material-ui/icons/Home'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -interface CustomBreadcrumbProps extends WithStyles {} +const StyledBreadcrumb = withStyles((theme: Theme) => ({ + root: { + backgroundColor: theme.palette.grey[100], + height: 24, + color: theme.palette.grey[800], + fontWeight: theme.typography.fontWeightRegular, + '&:hover, &:focus': { + backgroundColor: theme.palette.grey[300], + }, + '&:active': { + boxShadow: theme.shadows[1], + backgroundColor: emphasize(theme.palette.grey[300], 0.12), + }, + }, +}))(Chip) as typeof Chip; // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591 -interface CustomizedBreadcrumbsProps extends WithStyles {} +function handleClick(event: React.MouseEvent) { + event.preventDefault(); + alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert +} -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: { padding: theme.spacing(1), }, - chip: { - backgroundColor: theme.palette.grey[100], - height: 24, - color: theme.palette.grey[800], - fontWeight: theme.typography.fontWeightRegular, - '&:hover, &:focus': { - backgroundColor: theme.palette.grey[300], - }, - '&:active': { - boxShadow: theme.shadows[1], - backgroundColor: emphasize(theme.palette.grey[300], 0.12), - }, - }, avatar: { background: 'none', marginRight: -theme.spacing(1.5), }, - }); + }), +); -function handleClick(event: React.MouseEvent) { - event.preventDefault(); - alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert -} - -function CustomBreadcrumb(props: CustomBreadcrumbProps) { - const { classes, ...rest } = props; - return ; -} - -CustomBreadcrumb.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb); - -function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) { - const { classes } = props; +function CustomizedBreadcrumbs() { + const classes = useStyles(); return ( @@ -82,8 +70,4 @@ function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) { ); } -CustomizedBreadcrumbs.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(CustomizedBreadcrumbs); +export default CustomizedBreadcrumbs; diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js index d3501258fc5b47..4e75592ea01412 100644 --- a/docs/src/pages/demos/buttons/CustomizedButtons.js +++ b/docs/src/pages/demos/buttons/CustomizedButtons.js @@ -1,23 +1,12 @@ import React from 'react'; -import clsx from 'clsx'; -import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme, withStyles, makeStyles } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const useStyles = makeStyles(theme => ({ - margin: { - margin: theme.spacing(1), - }, - cssRoot: { - color: theme.palette.getContrastText(purple[500]), - backgroundColor: purple[500], - '&:hover': { - backgroundColor: purple[700], - }, - }, - bootstrapRoot: { +const BootstrapButton = withStyles({ + root: { boxShadow: 'none', textTransform: 'none', fontSize: 16, @@ -51,6 +40,22 @@ const useStyles = makeStyles(theme => ({ boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', }, }, +})(Button); + +const ColorButton = withStyles(theme => ({ + root: { + color: theme.palette.getContrastText(purple[500]), + backgroundColor: purple[500], + '&:hover': { + backgroundColor: purple[700], + }, + }, +}))(Button); + +const useStyles = makeStyles(theme => ({ + margin: { + margin: theme.spacing(1), + }, })); const theme = createMuiTheme({ @@ -64,22 +69,17 @@ function CustomizedButtons() { return (
- + - +
); } diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.tsx b/docs/src/pages/demos/buttons/CustomizedButtons.tsx index 0cd4aa9c120f14..e614ade196698e 100644 --- a/docs/src/pages/demos/buttons/CustomizedButtons.tsx +++ b/docs/src/pages/demos/buttons/CustomizedButtons.tsx @@ -1,57 +1,68 @@ import React from 'react'; -import clsx from 'clsx'; -import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { + createMuiTheme, + createStyles, + withStyles, + makeStyles, + Theme, +} from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; +const BootstrapButton = withStyles({ + root: { + boxShadow: 'none', + textTransform: 'none', + fontSize: 16, + padding: '6px 12px', + border: '1px solid', + lineHeight: 1.5, + backgroundColor: '#007bff', + borderColor: '#007bff', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + backgroundColor: '#0069d9', + borderColor: '#0062cc', + }, + '&:active': { + boxShadow: 'none', + backgroundColor: '#0062cc', + borderColor: '#005cbf', + }, + '&:focus': { + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', + }, + }, +})(Button); + +const ColorButton = withStyles((theme: Theme) => ({ + root: { + color: theme.palette.getContrastText(purple[500]), + backgroundColor: purple[500], + '&:hover': { + backgroundColor: purple[700], + }, + }, +}))(Button); + const useStyles = makeStyles((theme: Theme) => createStyles({ margin: { margin: theme.spacing(1), }, - cssRoot: { - color: theme.palette.getContrastText(purple[500]), - backgroundColor: purple[500], - '&:hover': { - backgroundColor: purple[700], - }, - }, - bootstrapRoot: { - boxShadow: 'none', - textTransform: 'none', - fontSize: 16, - padding: '6px 12px', - border: '1px solid', - lineHeight: 1.5, - backgroundColor: '#007bff', - borderColor: '#007bff', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:hover': { - backgroundColor: '#0069d9', - borderColor: '#0062cc', - }, - '&:active': { - boxShadow: 'none', - backgroundColor: '#0062cc', - borderColor: '#005cbf', - }, - '&:focus': { - boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', - }, - }, }), ); @@ -66,22 +77,17 @@ function CustomizedButtons() { return (
- + - +
); } diff --git a/docs/src/pages/demos/dialogs/CustomizedDialog.tsx b/docs/src/pages/demos/dialogs/CustomizedDialog.tsx index d50f5ffc9f1a06..e3cdad3b061004 100644 --- a/docs/src/pages/demos/dialogs/CustomizedDialog.tsx +++ b/docs/src/pages/demos/dialogs/CustomizedDialog.tsx @@ -43,13 +43,13 @@ const DialogTitle = withStyles(styles)((props: DialogTitleProps) => { ); }); -const DialogContent = withStyles(theme => ({ +const DialogContent = withStyles((theme: Theme) => ({ root: { padding: theme.spacing(2), }, }))(MuiDialogContent); -const DialogActions = withStyles(theme => ({ +const DialogActions = withStyles((theme: Theme) => ({ root: { margin: 0, padding: theme.spacing(1), diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js index 3ec84239dd63e9..750b3f955f1e00 100644 --- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js +++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js @@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography'; const ExpansionPanel = withStyles({ root: { - border: '1px solid rgba(0,0,0,.125)', + border: '1px solid rgba(0, 0, 0, .125)', boxShadow: 'none', '&:not(:last-child)': { borderBottom: 0, @@ -15,16 +15,17 @@ const ExpansionPanel = withStyles({ '&:before': { display: 'none', }, + '&$expanded': { + margin: 'auto', + }, }, - expanded: { - margin: 'auto', - }, + expanded: {}, })(MuiExpansionPanel); const ExpansionPanelSummary = withStyles({ root: { - backgroundColor: 'rgba(0,0,0,.03)', - borderBottom: '1px solid rgba(0,0,0,.125)', + backgroundColor: 'rgba(0, 0, 0, .03)', + borderBottom: '1px solid rgba(0, 0, 0, .125)', marginBottom: -1, minHeight: 56, '&$expanded': { @@ -45,72 +46,53 @@ const ExpansionPanelDetails = withStyles(theme => ({ }, }))(MuiExpansionPanelDetails); -class CustomizedExpansionPanel extends React.Component { - state = { - expanded: 'panel1', - }; +function CustomizedExpansionPanel() { + const [expanded, setExpanded] = React.useState('panel1'); - handleChange = panel => (event, expanded) => { - this.setState({ - expanded: expanded ? panel : false, - }); + const handleChange = panel => (event, newExpanded) => { + setExpanded(newExpanded ? panel : false); }; - render() { - const { expanded } = this.state; - return ( -
- - - Collapsible Group Item #1 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #2 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #3 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - -
- ); - } + return ( +
+ + + Collapsible Group Item #1 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #2 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #3 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + +
+ ); } export default CustomizedExpansionPanel; diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx index b3d7d5ec285182..e8f59085b417d8 100644 --- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx +++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx @@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography'; const ExpansionPanel = withStyles({ root: { - border: '1px solid rgba(0,0,0,.125)', + border: '1px solid rgba(0, 0, 0, .125)', boxShadow: 'none', '&:not(:last-child)': { borderBottom: 0, @@ -15,16 +15,17 @@ const ExpansionPanel = withStyles({ '&:before': { display: 'none', }, + '&$expanded': { + margin: 'auto', + }, }, - expanded: { - margin: 'auto', - }, + expanded: {}, })(MuiExpansionPanel); const ExpansionPanelSummary = withStyles({ root: { - backgroundColor: 'rgba(0,0,0,.03)', - borderBottom: '1px solid rgba(0,0,0,.125)', + backgroundColor: 'rgba(0, 0, 0, .03)', + borderBottom: '1px solid rgba(0, 0, 0, .125)', marginBottom: -1, minHeight: 56, '&$expanded': { @@ -49,72 +50,53 @@ interface CustomizedExpansionPanelStates { expanded: string | boolean; } -class CustomizedExpansionPanel extends React.Component<{}, CustomizedExpansionPanelStates> { - state = { - expanded: 'panel1', - }; +function CustomizedExpansionPanel() { + const [expanded, setExpanded] = React.useState('panel1'); - handleChange = (panel: string) => (event: React.ChangeEvent<{}>, expanded: boolean) => { - this.setState({ - expanded: expanded ? panel : false, - }); + const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, newExpanded: boolean) => { + setExpanded(newExpanded ? panel : false); }; - render() { - const { expanded } = this.state; - return ( -
- - - Collapsible Group Item #1 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #2 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #3 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - -
- ); - } + return ( +
+ + + Collapsible Group Item #1 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #2 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #3 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + +
+ ); } export default CustomizedExpansionPanel; diff --git a/docs/src/pages/demos/progress/CustomizedProgress.js b/docs/src/pages/demos/progress/CustomizedProgress.js index 1dc8a6295d7608..2ebd486ca080dd 100644 --- a/docs/src/pages/demos/progress/CustomizedProgress.js +++ b/docs/src/pages/demos/progress/CustomizedProgress.js @@ -1,43 +1,44 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; import { lighten } from '@material-ui/core/styles/colorManipulator'; import CircularProgress from '@material-ui/core/CircularProgress'; -import Paper from '@material-ui/core/Paper'; import LinearProgress from '@material-ui/core/LinearProgress'; -const styles = theme => ({ +const ColorCircularProgress = withStyles({ root: { - flexGrow: 1, - }, - progress: { - margin: theme.spacing(2), color: '#00695c', }, - linearColorPrimary: { +})(CircularProgress); + +const ColorLinearProgress = withStyles({ + colorPrimary: { backgroundColor: '#b2dfdb', }, - linearBarColorPrimary: { + barColorPrimary: { backgroundColor: '#00695c', }, - linearProgressDeterminate: { - margin: `${theme.spacing(1)}px auto 0`, +})(LinearProgress); + +const BorderLinearProgress = withStyles({ + root: { height: 10, backgroundColor: lighten('#ff6c5c', 0.5), }, - linearProgressDeterminateBar: { + bar: { borderRadius: 20, backgroundColor: '#ff6c5c', }, - // Reproduce the Facebook spinners. - facebook: { - margin: theme.spacing(2), +})(LinearProgress); + +// Inspired by the Facebook spinners. +const useStylesFacebook = makeStyles({ + root: { position: 'relative', }, - facebook1: { + top: { color: '#eef3fd', }, - facebook2: { + bottom: { color: '#6798e5', animationDuration: '550ms', position: 'absolute', @@ -45,49 +46,56 @@ const styles = theme => ({ }, }); -function CustomizedProgress(props) { - const { classes } = props; +function FacebookProgress(props) { + const classes = useStylesFacebook(); return ( - - - + - + + ); +} + +const useStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, + }, + margin: { + margin: theme.spacing(1), + }, +})); + +function CustomizedProgress() { + const classes = useStyles(); + + return ( +
+ + + -
- - -
- + +
); } -CustomizedProgress.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(CustomizedProgress); +export default CustomizedProgress; diff --git a/docs/src/pages/demos/progress/CustomizedProgress.tsx b/docs/src/pages/demos/progress/CustomizedProgress.tsx index b60ef8afd0eda6..f8d2f9ef6ce3d9 100644 --- a/docs/src/pages/demos/progress/CustomizedProgress.tsx +++ b/docs/src/pages/demos/progress/CustomizedProgress.tsx @@ -1,96 +1,103 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles, createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; import { lighten } from '@material-ui/core/styles/colorManipulator'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import Paper from '@material-ui/core/Paper'; +import CircularProgress, { CircularProgressProps } from '@material-ui/core/CircularProgress'; import LinearProgress from '@material-ui/core/LinearProgress'; -const styles = (theme: Theme) => +const ColorCircularProgress = withStyles({ + root: { + color: '#00695c', + }, +})(CircularProgress); + +const ColorLinearProgress = withStyles({ + colorPrimary: { + backgroundColor: '#b2dfdb', + }, + barColorPrimary: { + backgroundColor: '#00695c', + }, +})(LinearProgress); + +const BorderLinearProgress = withStyles({ + root: { + height: 10, + backgroundColor: lighten('#ff6c5c', 0.5), + }, + bar: { + borderRadius: 20, + backgroundColor: '#ff6c5c', + }, +})(LinearProgress); + +// Inspired by the Facebook spinners. +const useStylesFacebook = makeStyles({ + root: { + position: 'relative', + }, + top: { + color: '#eef3fd', + }, + bottom: { + color: '#6798e5', + animationDuration: '550ms', + position: 'absolute', + left: 0, + }, +}); + +function FacebookProgress(props: CircularProgressProps) { + const classes = useStylesFacebook(); + + return ( +
+ + +
+ ); +} + +const useStyles = makeStyles((theme: Theme) => createStyles({ root: { flexGrow: 1, }, - progress: { - margin: theme.spacing(2), - color: '#00695c', - }, - linearColorPrimary: { - backgroundColor: '#b2dfdb', - }, - linearBarColorPrimary: { - backgroundColor: '#00695c', - }, - linearProgressDeterminate: { - margin: `${theme.spacing(1)}px auto 0`, - height: 10, - backgroundColor: lighten('#ff6c5c', 0.5), - }, - linearProgressDeterminateBar: { - borderRadius: 20, - backgroundColor: '#ff6c5c', - }, - // Reproduce the Facebook spinners. - facebook: { - margin: theme.spacing(2), - position: 'relative', + margin: { + margin: theme.spacing(1), }, - facebook1: { - color: '#eef3fd', - }, - facebook2: { - color: '#6798e5', - animationDuration: '550ms', - position: 'absolute', - left: 0, - }, - }); - -export type Props = WithStyles; + }), +); -function CustomizedProgress(props: Props) { - const { classes } = props; +function CustomizedProgress() { + const classes = useStyles(); return ( - - - - + + + -
- - -
- + + ); } -CustomizedProgress.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(CustomizedProgress); +export default CustomizedProgress; diff --git a/docs/src/pages/demos/selects/CustomizedSelects.js b/docs/src/pages/demos/selects/CustomizedSelects.js index dafda903e494d2..b3db9a9e4c73b7 100644 --- a/docs/src/pages/demos/selects/CustomizedSelects.js +++ b/docs/src/pages/demos/selects/CustomizedSelects.js @@ -51,9 +51,6 @@ const useStyles = makeStyles(theme => ({ margin: { margin: theme.spacing(1), }, - bootstrapFormLabel: { - fontSize: 18, - }, })); function CustomizedSelects() { @@ -65,15 +62,11 @@ function CustomizedSelects() { return (
- - Age - + Age - - Age - + Age - - Age - + Age ({ +const StyledTableCell = withStyles(theme => ({ head: { backgroundColor: theme.palette.common.black, color: theme.palette.common.white, @@ -18,21 +17,13 @@ const CustomTableCell = withStyles(theme => ({ }, }))(TableCell); -const styles = theme => ({ +const StyledTableRow = withStyles(theme => ({ root: { - width: '100%', - marginTop: theme.spacing(3), - overflowX: 'auto', - }, - table: { - minWidth: 700, - }, - row: { '&:nth-of-type(odd)': { backgroundColor: theme.palette.background.default, }, }, -}); +}))(TableRow); function createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, protein }; @@ -46,32 +37,43 @@ const rows = [ createData('Gingerbread', 356, 16.0, 49, 3.9), ]; -function CustomizedTable(props) { - const { classes } = props; +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +})); + +function CustomizedTable() { + const classes = useStyles(); return ( - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) {rows.map(row => ( - - + + {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + ))}
@@ -79,8 +81,4 @@ function CustomizedTable(props) { ); } -CustomizedTable.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(CustomizedTable); +export default CustomizedTable; diff --git a/docs/src/pages/demos/tables/CustomizedTable.tsx b/docs/src/pages/demos/tables/CustomizedTable.tsx index 1d2772a9fb9e5e..fade60e3cd0b7f 100644 --- a/docs/src/pages/demos/tables/CustomizedTable.tsx +++ b/docs/src/pages/demos/tables/CustomizedTable.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles'; +import { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; @@ -8,7 +7,7 @@ import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; -const CustomTableCell = withStyles((theme: Theme) => +const StyledTableCell = withStyles((theme: Theme) => createStyles({ head: { backgroundColor: theme.palette.common.black, @@ -20,22 +19,15 @@ const CustomTableCell = withStyles((theme: Theme) => }), )(TableCell); -const styles = (theme: Theme) => +const StyledTableRow = withStyles((theme: Theme) => createStyles({ root: { - width: '100%', - marginTop: theme.spacing(3), - overflowX: 'auto', - }, - table: { - minWidth: 700, - }, - row: { '&:nth-of-type(odd)': { backgroundColor: theme.palette.background.default, }, }, - }); + }), +)(TableRow); function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { return { name, calories, fat, carbs, protein }; @@ -49,34 +41,45 @@ const rows = [ createData('Gingerbread', 356, 16.0, 49, 3.9), ]; -export interface CustomizedTableProps extends WithStyles {} +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, + }), +); -function CustomizedTable(props: CustomizedTableProps) { - const { classes } = props; +function CustomizedTable() { + const classes = useStyles(); return ( - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) {rows.map(row => ( - - + + {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + ))}
@@ -84,8 +87,4 @@ function CustomizedTable(props: CustomizedTableProps) { ); } -CustomizedTable.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(CustomizedTable); +export default CustomizedTable; diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.js b/docs/src/pages/demos/tabs/CustomizedTabs.js index e02c76f68f6cdc..000d4527de6caa 100644 --- a/docs/src/pages/demos/tabs/CustomizedTabs.js +++ b/docs/src/pages/demos/tabs/CustomizedTabs.js @@ -27,18 +27,17 @@ const StyledTab = withStyles(theme => ({ }, }))(props => ); -const useStyles = makeStyles(theme => ({ +const AntTabs = withStyles({ root: { - flexGrow: 1, - backgroundColor: theme.palette.background.paper, - }, - tabsRoot: { borderBottom: '1px solid #e8e8e8', }, - tabsIndicator: { + indicator: { backgroundColor: '#1890ff', }, - tabRoot: { +})(Tabs); + +const AntTab = withStyles(theme => ({ + root: { textTransform: 'none', minWidth: 72, fontWeight: theme.typography.fontWeightRegular, @@ -59,7 +58,7 @@ const useStyles = makeStyles(theme => ({ color: '#40a9ff', opacity: 1, }, - '&$tabSelected': { + '&$selected': { color: '#1890ff', fontWeight: theme.typography.fontWeightMedium, }, @@ -67,10 +66,19 @@ const useStyles = makeStyles(theme => ({ color: '#40a9ff', }, }, - tabSelected: {}, + selected: {}, +}))(props => ); + +const useStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, + }, typography: { padding: theme.spacing(3), }, + demo1: { + backgroundColor: theme.palette.background.paper, + }, demo2: { backgroundColor: '#2e1534', }, @@ -86,28 +94,14 @@ function CustomizedTabs() { return (
- - - - - - Ant Design UI powered by Material-UI +
+ + + + + + +
diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.tsx b/docs/src/pages/demos/tabs/CustomizedTabs.tsx index 06a75876478e27..54a64925d05204 100644 --- a/docs/src/pages/demos/tabs/CustomizedTabs.tsx +++ b/docs/src/pages/demos/tabs/CustomizedTabs.tsx @@ -38,54 +38,66 @@ const StyledTab = withStyles((theme: Theme) => }), )((props: StyledTabProps) => ); -const useStyles = makeStyles((theme: Theme) => ({ +const AntTabs = withStyles({ root: { - flexGrow: 1, - backgroundColor: theme.palette.background.paper, - }, - tabsRoot: { borderBottom: '1px solid #e8e8e8', }, - tabsIndicator: { + indicator: { backgroundColor: '#1890ff', }, - tabRoot: { - textTransform: 'none', - minWidth: 72, - fontWeight: theme.typography.fontWeightRegular, - marginRight: theme.spacing(4), - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:hover': { - color: '#40a9ff', - opacity: 1, +})(Tabs); + +const AntTab = withStyles((theme: Theme) => + createStyles({ + root: { + textTransform: 'none', + minWidth: 72, + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(4), + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + '&$selected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + color: '#40a9ff', + }, + }, + selected: {}, + }), +)((props: StyledTabProps) => ); + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1, }, - '&$tabSelected': { - color: '#1890ff', - fontWeight: theme.typography.fontWeightMedium, + typography: { + padding: theme.spacing(3), }, - '&:focus': { - color: '#40a9ff', + demo1: { + backgroundColor: theme.palette.background.paper, }, - }, - tabSelected: {}, - typography: { - padding: theme.spacing(3), - }, - demo2: { - backgroundColor: '#2e1534', - }, -})); + demo2: { + backgroundColor: '#2e1534', + }, + }), +); function CustomizedTabs() { const classes = useStyles(); @@ -97,28 +109,14 @@ function CustomizedTabs() { return (
- - - - - - Ant Design UI powered by Material-UI +
+ + + + + + +
diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.js index 60b3700208b194..610bed2870fc6d 100644 --- a/docs/src/pages/demos/tooltips/CustomizedTooltips.js +++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.js @@ -1,5 +1,6 @@ +/* eslint-disable react/prop-types */ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; @@ -51,17 +52,62 @@ function arrowGenerator(color) { }; } -const useStyles = makeStyles(theme => ({ - button: { - margin: theme.spacing(1), - }, - lightTooltip: { +const LightTooltip = withStyles(theme => ({ + tooltip: { backgroundColor: theme.palette.common.white, color: 'rgba(0, 0, 0, 0.87)', boxShadow: theme.shadows[1], fontSize: 11, }, - arrowPopper: arrowGenerator(theme.palette.grey[700]), +}))(Tooltip); + +const useStylesArrow = makeStyles(theme => ({ + arrow: { + position: 'absolute', + fontSize: 6, + width: '3em', + height: '3em', + '&::before': { + content: '""', + margin: 'auto', + display: 'block', + width: 0, + height: 0, + borderStyle: 'solid', + }, + }, + popper: arrowGenerator(theme.palette.grey[700]), +})); + +function ArrowTooltip(props) { + const { arrow, ...classes } = useStylesArrow(); + const [arrowRef, setArrowRef] = React.useState(null); + + return ( + + {props.title} + + + } + /> + ); +} + +const useStylesBootstrap = makeStyles(theme => ({ arrow: { position: 'absolute', fontSize: 6, @@ -76,24 +122,54 @@ const useStyles = makeStyles(theme => ({ borderStyle: 'solid', }, }, - bootstrapPopper: arrowGenerator(theme.palette.common.black), - bootstrapTooltip: { + popper: arrowGenerator(theme.palette.common.black), + tooltip: { backgroundColor: theme.palette.common.black, }, - bootstrapPlacementLeft: { + tooltipPlacementLeft: { margin: '0 8px', }, - bootstrapPlacementRight: { + tooltipPlacementRight: { margin: '0 8px', }, - bootstrapPlacementTop: { + tooltipPlacementTop: { margin: '8px 0', }, - bootstrapPlacementBottom: { + tooltipPlacementBottom: { margin: '8px 0', }, - htmlPopper: arrowGenerator('#dadde9'), - htmlTooltip: { +})); + +function BootstrapTooltip(props) { + const { arrow, ...classes } = useStylesBootstrap(); + const [arrowRef, setArrowRef] = React.useState(null); + + return ( + + {props.title} + + + } + /> + ); +} + +const HtmlTooltip = withStyles(theme => ({ + tooltip: { backgroundColor: '#f5f5f9', color: 'rgba(0, 0, 0, 0.87)', maxWidth: 220, @@ -103,92 +179,31 @@ const useStyles = makeStyles(theme => ({ fontWeight: theme.typography.fontWeightMedium, }, }, -})); +}))(Tooltip); function CustomizedTooltips() { - const classes = useStyles(); - const [arrowRef, setArrowRef] = React.useState(null); - return (
- - - - - Add - - - } - classes={{ popper: classes.arrowPopper }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, - }, - }, - }} - > - - - - Add - - - } - classes={{ - tooltip: classes.bootstrapTooltip, - popper: classes.bootstrapPopper, - tooltipPlacementLeft: classes.bootstrapPlacementLeft, - tooltipPlacementRight: classes.bootstrapPlacementRight, - tooltipPlacementTop: classes.bootstrapPlacementTop, - tooltipPlacementBottom: classes.bootstrapPlacementBottom, - }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, - }, - }, - }} - > - - - + + + + + + + + + Tooltip with HTML {"And here's"} {'some'} {'amazing content'}.{' '} {"It's very engaging. Right?"} - } > - - + +
); } diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx b/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx index 6c3262042d963e..b0c87c886a6876 100644 --- a/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx +++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx @@ -1,7 +1,8 @@ +/* eslint-disable react/prop-types */ import React from 'react'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { withStyles, Theme, makeStyles, createStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -import Tooltip from '@material-ui/core/Tooltip'; +import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; function arrowGenerator(color: string) { @@ -51,18 +52,65 @@ function arrowGenerator(color: string) { }; } -const useStyles = makeStyles((theme: Theme) => +const LightTooltip = withStyles((theme: Theme) => ({ + tooltip: { + backgroundColor: theme.palette.common.white, + color: 'rgba(0, 0, 0, 0.87)', + boxShadow: theme.shadows[1], + fontSize: 11, + }, +}))(Tooltip); + +const useStylesArrow = makeStyles((theme: Theme) => createStyles({ - button: { - margin: theme.spacing(1), - }, - lightTooltip: { - backgroundColor: theme.palette.common.white, - color: 'rgba(0, 0, 0, 0.87)', - boxShadow: theme.shadows[1], - fontSize: 11, + arrow: { + position: 'absolute', + fontSize: 6, + width: '3em', + height: '3em', + '&::before': { + content: '""', + margin: 'auto', + display: 'block', + width: 0, + height: 0, + borderStyle: 'solid', + }, }, - arrowPopper: arrowGenerator(theme.palette.grey[700]), + popper: arrowGenerator(theme.palette.grey[700]), + }), +); + +function ArrowTooltip(props: TooltipProps) { + const { arrow, ...classes } = useStylesArrow(); + const [arrowRef, setArrowRef] = React.useState(null); + + return ( + + {props.title} + + + } + /> + ); +} + +const useStylesBootstrap = makeStyles((theme: Theme) => + createStyles({ arrow: { position: 'absolute', fontSize: 6, @@ -77,120 +125,89 @@ const useStyles = makeStyles((theme: Theme) => borderStyle: 'solid', }, }, - bootstrapPopper: arrowGenerator(theme.palette.common.black), - bootstrapTooltip: { + popper: arrowGenerator(theme.palette.common.black), + tooltip: { backgroundColor: theme.palette.common.black, }, - bootstrapPlacementLeft: { + tooltipPlacementLeft: { margin: '0 8px', }, - bootstrapPlacementRight: { + tooltipPlacementRight: { margin: '0 8px', }, - bootstrapPlacementTop: { + tooltipPlacementTop: { margin: '8px 0', }, - bootstrapPlacementBottom: { + tooltipPlacementBottom: { margin: '8px 0', }, - htmlPopper: arrowGenerator('#dadde9'), - htmlTooltip: { - backgroundColor: '#f5f5f9', - color: 'rgba(0, 0, 0, 0.87)', - maxWidth: 220, - fontSize: theme.typography.pxToRem(12), - border: '1px solid #dadde9', - '& b': { - fontWeight: theme.typography.fontWeightMedium, - }, - }, }), ); -function CustomizedTooltips() { - const classes = useStyles(); +function BootstrapTooltip(props: TooltipProps) { + const { arrow, ...classes } = useStylesBootstrap(); const [arrowRef, setArrowRef] = React.useState(null); return ( -
- - - - - Add - - - } - classes={{ popper: classes.arrowPopper }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, - }, - }, - }} - > - - - - Add - - - } - classes={{ - tooltip: classes.bootstrapTooltip, - popper: classes.bootstrapPopper, - tooltipPlacementLeft: classes.bootstrapPlacementLeft, - tooltipPlacementRight: classes.bootstrapPlacementRight, - tooltipPlacementTop: classes.bootstrapPlacementTop, - tooltipPlacementBottom: classes.bootstrapPlacementBottom, - }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, + - - - + {props.title} + + + } + /> + ); +} + +const HtmlTooltip = withStyles((theme: Theme) => ({ + tooltip: { + backgroundColor: '#f5f5f9', + color: 'rgba(0, 0, 0, 0.87)', + maxWidth: 220, + fontSize: theme.typography.pxToRem(12), + border: '1px solid #dadde9', + '& b': { + fontWeight: theme.typography.fontWeightMedium, + }, + }, +}))(Tooltip); + +function CustomizedTooltips() { + return ( +
+ + + + + + + + + + Tooltip with HTML {"And here's"} {'some'} {'amazing content'}.{' '} {"It's very engaging. Right?"} - } > - - + +
); } diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js index dfe05f2e10af03..75a5984c198fac 100644 --- a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js +++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js @@ -46,4 +46,4 @@ BreadcrumbCollapsed.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles, { name: 'MuiPrivateBreadcrumbCollapsed' })(BreadcrumbCollapsed); +export default withStyles(styles, { name: 'PrivateBreadcrumbCollapsed' })(BreadcrumbCollapsed); diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js index 3d8fd090817f4a..a87d4d6924498d 100644 --- a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js +++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js @@ -27,4 +27,4 @@ BreadcrumbSeparator.propTypes = { className: PropTypes.string, }; -export default withStyles(styles, { name: 'MuiPrivateBreadcrumbSeparator' })(BreadcrumbSeparator); +export default withStyles(styles, { name: 'PrivateBreadcrumbSeparator' })(BreadcrumbSeparator); diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js index 0add2e7e3da364..2589ac46a5bbfc 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js @@ -34,6 +34,18 @@ export const styles = theme => { display: 'none', }, }, + '&$expanded': { + margin: '16px 0', + '&:first-child': { + marginTop: 0, + }, + '&:last-child': { + marginBottom: 0, + }, + '&:before': { + opacity: 0, + }, + }, '&$expanded + &': { '&:before': { display: 'none', @@ -58,18 +70,7 @@ export const styles = theme => { }, }, /* Styles applied to the root element if `expanded={true}`. */ - expanded: { - margin: '16px 0', - '&:first-child': { - marginTop: 0, - }, - '&:last-child': { - marginBottom: 0, - }, - '&:before': { - opacity: 0, - }, - }, + expanded: {}, /* Styles applied to the root element if `disabled={true}`. */ disabled: { backgroundColor: theme.palette.action.disabledBackground, diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js index e2ded222517865..a42a838051e5f3 100644 --- a/packages/material-ui/src/Hidden/HiddenCss.js +++ b/packages/material-ui/src/Hidden/HiddenCss.js @@ -152,4 +152,4 @@ HiddenCss.propTypes = { xsUp: PropTypes.bool, }; -export default withStyles(styles, { name: 'MuiPrivateHiddenCss' })(HiddenCss); +export default withStyles(styles, { name: 'PrivateHiddenCss' })(HiddenCss); diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js index 7b0139905c5bf9..52183011d9e845 100644 --- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js +++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js @@ -118,6 +118,6 @@ NotchedOutline.propTypes = { theme: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiPrivateNotchedOutline', withTheme: true })( +export default withStyles(styles, { name: 'PrivateNotchedOutline', withTheme: true })( NotchedOutline, ); diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js index 75635c6155b1b0..5baa0e74c6eb41 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js @@ -70,4 +70,4 @@ SwipeArea.propTypes = { width: PropTypes.number.isRequired, }; -export default withStyles(styles, { name: 'MuiPrivateSwipeArea' })(SwipeArea); +export default withStyles(styles, { name: 'PrivateSwipeArea' })(SwipeArea); diff --git a/packages/material-ui/src/Tabs/TabIndicator.js b/packages/material-ui/src/Tabs/TabIndicator.js index f8b0e260b60755..9d92a56e3316d2 100644 --- a/packages/material-ui/src/Tabs/TabIndicator.js +++ b/packages/material-ui/src/Tabs/TabIndicator.js @@ -55,4 +55,4 @@ TabIndicator.propTypes = { color: PropTypes.oneOf(['primary', 'secondary']), }; -export default withStyles(styles, { name: 'MuiPrivateTabIndicator' })(TabIndicator); +export default withStyles(styles, { name: 'PrivateTabIndicator' })(TabIndicator); diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js index d033b478d8d222..1e489439a3996f 100644 --- a/packages/material-ui/src/Tabs/TabScrollButton.js +++ b/packages/material-ui/src/Tabs/TabScrollButton.js @@ -62,4 +62,4 @@ TabScrollButton.defaultProps = { visible: true, }; -export default withStyles(styles, { name: 'MuiPrivateTabScrollButton' })(TabScrollButton); +export default withStyles(styles, { name: 'PrivateTabScrollButton' })(TabScrollButton); diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index a23f327ec1568e..2e9c5092e91713 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -236,6 +236,6 @@ SwitchBase.propTypes = { value: PropTypes.any, }; -export default withStyles(styles, { name: 'MuiPrivateSwitchBase' })( +export default withStyles(styles, { name: 'PrivateSwitchBase' })( withFormControlContext(SwitchBase), );