From 3c38a667089a81068c359e05e6cb46ab3d710822 Mon Sep 17 00:00:00 2001 From: merceyz Date: Thu, 25 Apr 2019 19:15:06 +0200 Subject: [PATCH 1/5] [docs] Migrate Divider demos to hooks --- .../src/pages/demos/dividers/InsetDividers.js | 18 ++++---- .../pages/demos/dividers/InsetDividers.tsx | 19 ++++----- docs/src/pages/demos/dividers/ListDividers.js | 18 ++++---- .../src/pages/demos/dividers/ListDividers.tsx | 19 ++++----- .../pages/demos/dividers/MiddleDividers.js | 18 ++++---- .../pages/demos/dividers/MiddleDividers.tsx | 19 ++++----- .../pages/demos/dividers/SubheaderDividers.js | 22 ++++------ .../demos/dividers/SubheaderDividers.tsx | 42 +++++++++---------- 8 files changed, 70 insertions(+), 105 deletions(-) diff --git a/docs/src/pages/demos/dividers/InsetDividers.js b/docs/src/pages/demos/dividers/InsetDividers.js index 173791e8592db9..953d7445b92c3a 100644 --- a/docs/src/pages/demos/dividers/InsetDividers.js +++ b/docs/src/pages/demos/dividers/InsetDividers.js @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; @@ -11,16 +10,17 @@ import WorkIcon from '@material-ui/icons/Work'; import BeachAccessIcon from '@material-ui/icons/BeachAccess'; import Divider from '@material-ui/core/Divider'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { width: '100%', maxWidth: 360, backgroundColor: theme.palette.background.paper, }, -}); +})); + +function InsetDividers() { + const classes = useStyles(); -function InsetDividers(props) { - const { classes } = props; return ( @@ -53,8 +53,4 @@ function InsetDividers(props) { ); } -InsetDividers.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(InsetDividers); +export default InsetDividers; diff --git a/docs/src/pages/demos/dividers/InsetDividers.tsx b/docs/src/pages/demos/dividers/InsetDividers.tsx index d59e034d88a2e7..e1cd150782576a 100644 --- a/docs/src/pages/demos/dividers/InsetDividers.tsx +++ b/docs/src/pages/demos/dividers/InsetDividers.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, Theme, WithStyles, WithTheme, createStyles } from '@material-ui/core/styles'; +import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; @@ -11,19 +10,19 @@ import WorkIcon from '@material-ui/icons/Work'; import BeachAccessIcon from '@material-ui/icons/BeachAccess'; import Divider from '@material-ui/core/Divider'; -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: { width: '100%', maxWidth: 360, backgroundColor: theme.palette.background.paper, }, - }); + }), +); -type Props = WithStyles & WithTheme; +function InsetDividers() { + const classes = useStyles(); -function InsetDividers(props: Props) { - const { classes } = props; return ( @@ -56,8 +55,4 @@ function InsetDividers(props: Props) { ); } -InsetDividers.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(InsetDividers); +export default InsetDividers; diff --git a/docs/src/pages/demos/dividers/ListDividers.js b/docs/src/pages/demos/dividers/ListDividers.js index d170437aefcf59..4826a70b034a5a 100644 --- a/docs/src/pages/demos/dividers/ListDividers.js +++ b/docs/src/pages/demos/dividers/ListDividers.js @@ -1,21 +1,21 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import Divider from '@material-ui/core/Divider'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { width: '100%', maxWidth: '360px', backgroundColor: theme.palette.background.paper, }, -}); +})); + +function ListDividers() { + const classes = useStyles(); -function ListDividers(props) { - const { classes } = props; return ( @@ -36,8 +36,4 @@ function ListDividers(props) { ); } -ListDividers.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(ListDividers); +export default ListDividers; diff --git a/docs/src/pages/demos/dividers/ListDividers.tsx b/docs/src/pages/demos/dividers/ListDividers.tsx index a2c971e281dc0e..969e413ff12bee 100644 --- a/docs/src/pages/demos/dividers/ListDividers.tsx +++ b/docs/src/pages/demos/dividers/ListDividers.tsx @@ -1,24 +1,23 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, createStyles, Theme, WithStyles, WithTheme } from '@material-ui/core/styles'; +import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import Divider from '@material-ui/core/Divider'; -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: { width: '100%', maxWidth: '360px', backgroundColor: theme.palette.background.paper, }, - }); + }), +); -type Props = WithStyles & WithTheme; +function ListDividers() { + const classes = useStyles(); -function ListDividers(props: Props) { - const { classes } = props; return ( @@ -39,8 +38,4 @@ function ListDividers(props: Props) { ); } -ListDividers.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(ListDividers); +export default ListDividers; diff --git a/docs/src/pages/demos/dividers/MiddleDividers.js b/docs/src/pages/demos/dividers/MiddleDividers.js index ef00f10a2b0e7c..17fb602a72c9d8 100644 --- a/docs/src/pages/demos/dividers/MiddleDividers.js +++ b/docs/src/pages/demos/dividers/MiddleDividers.js @@ -1,13 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Chip from '@material-ui/core/Chip'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { width: '100%', maxWidth: 360, @@ -25,10 +24,11 @@ const styles = theme => ({ section3: { margin: theme.spacing(3, 1, 1), }, -}); +})); + +function MiddleDividers() { + const classes = useStyles(); -function MiddleDividers(props) { - const { classes } = props; return (
@@ -68,8 +68,4 @@ function MiddleDividers(props) { ); } -MiddleDividers.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(MiddleDividers); +export default MiddleDividers; diff --git a/docs/src/pages/demos/dividers/MiddleDividers.tsx b/docs/src/pages/demos/dividers/MiddleDividers.tsx index 9253391e43799b..c4795f34f40449 100644 --- a/docs/src/pages/demos/dividers/MiddleDividers.tsx +++ b/docs/src/pages/demos/dividers/MiddleDividers.tsx @@ -1,13 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, createStyles, Theme, WithStyles, WithTheme } from '@material-ui/core/styles'; +import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; import Chip from '@material-ui/core/Chip'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: { width: '100%', @@ -26,12 +25,12 @@ const styles = (theme: Theme) => section3: { margin: theme.spacing(3, 1, 1), }, - }); + }), +); -type Props = WithStyles & WithTheme; +function MiddleDividers() { + const classes = useStyles(); -function MiddleDividers(props: Props) { - const { classes } = props; return (
@@ -71,8 +70,4 @@ function MiddleDividers(props: Props) { ); } -MiddleDividers.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(MiddleDividers); +export default MiddleDividers; diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js index 0265a2861a3f9d..792341a8fdf8ba 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.js +++ b/docs/src/pages/demos/dividers/SubheaderDividers.js @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; @@ -10,22 +9,23 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { width: '100%', maxWidth: 360, backgroundColor: theme.palette.background.paper, }, dividerFullWidth: { - margin: `5px 0 0 ${theme.spacing(2)}px`, + margin: theme.spacing(0.625, 0, 0, 2), }, dividerInset: { - margin: `5px 0 0 ${theme.spacing(9)}px`, + margin: theme.spacing(0.625, 0, 0, 9), }, -}); +})); + +function SubheaderDividers() { + const classes = useStyles(); -function SubheaderDividers(props) { - const { classes } = props; return ( @@ -68,8 +68,4 @@ function SubheaderDividers(props) { ); } -SubheaderDividers.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(SubheaderDividers); +export default SubheaderDividers; diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.tsx b/docs/src/pages/demos/dividers/SubheaderDividers.tsx index 212025f13a0d73..55b001648cb06b 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.tsx +++ b/docs/src/pages/demos/dividers/SubheaderDividers.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, WithStyles, WithTheme, Theme } from '@material-ui/core/styles'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; @@ -10,24 +9,25 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -const styles = (theme: Theme) => ({ - root: { - width: '100%', - maxWidth: 360, - backgroundColor: theme.palette.background.paper, - }, - dividerFullWidth: { - margin: `5px 0 0 ${theme.spacing(2)}px`, - }, - dividerInset: { - margin: `5px 0 0 ${theme.spacing(9)}px`, - }, -}); +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + }, + dividerFullWidth: { + margin: theme.spacing(0.625, 0, 0, 2), + }, + dividerInset: { + margin: theme.spacing(0.625, 0, 0, 9), + }, + }), +); -type Props = WithStyles & WithTheme; +function SubheaderDividers() { + const classes = useStyles(); -function SubheaderDividers(props: Props) { - const { classes } = props; return ( @@ -70,8 +70,4 @@ function SubheaderDividers(props: Props) { ); } -SubheaderDividers.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(SubheaderDividers); +export default SubheaderDividers; From 49f051fd1623c818da8ca1ec7b94b3086a7d5efd Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 25 Apr 2019 22:37:30 +0200 Subject: [PATCH 2/5] Update docs/src/pages/demos/dividers/SubheaderDividers.js Co-Authored-By: merceyz --- docs/src/pages/demos/dividers/SubheaderDividers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js index 792341a8fdf8ba..fe9d331be5b0a1 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.js +++ b/docs/src/pages/demos/dividers/SubheaderDividers.js @@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.background.paper, }, dividerFullWidth: { - margin: theme.spacing(0.625, 0, 0, 2), + margin: `5px 0 0 ${theme.spacing(2)}px`, }, dividerInset: { margin: theme.spacing(0.625, 0, 0, 9), From ef4286211081eb168e3c28433fd9f67ea8d3ab32 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 25 Apr 2019 22:40:26 +0200 Subject: [PATCH 3/5] Update docs/src/pages/demos/dividers/SubheaderDividers.tsx Co-Authored-By: merceyz --- docs/src/pages/demos/dividers/SubheaderDividers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.tsx b/docs/src/pages/demos/dividers/SubheaderDividers.tsx index 55b001648cb06b..c97063482b07bf 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.tsx +++ b/docs/src/pages/demos/dividers/SubheaderDividers.tsx @@ -17,7 +17,7 @@ const useStyles = makeStyles((theme: Theme) => backgroundColor: theme.palette.background.paper, }, dividerFullWidth: { - margin: theme.spacing(0.625, 0, 0, 2), + margin: `5px 0 0 ${theme.spacing(2)}px`, }, dividerInset: { margin: theme.spacing(0.625, 0, 0, 9), From ac1dcb7e955f8986e2608e6d74baa4f71ddba90b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 25 Apr 2019 22:55:35 +0200 Subject: [PATCH 4/5] Apply suggestions from code review Co-Authored-By: merceyz --- docs/src/pages/demos/dividers/SubheaderDividers.js | 2 +- docs/src/pages/demos/dividers/SubheaderDividers.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js index fe9d331be5b0a1..51ad13b3ea4722 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.js +++ b/docs/src/pages/demos/dividers/SubheaderDividers.js @@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({ margin: `5px 0 0 ${theme.spacing(2)}px`, }, dividerInset: { - margin: theme.spacing(0.625, 0, 0, 9), + margin: `5px 0 0 ${theme.spacing(2)}px`, }, })); diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.tsx b/docs/src/pages/demos/dividers/SubheaderDividers.tsx index c97063482b07bf..6132e83381cd6a 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.tsx +++ b/docs/src/pages/demos/dividers/SubheaderDividers.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) => margin: `5px 0 0 ${theme.spacing(2)}px`, }, dividerInset: { - margin: theme.spacing(0.625, 0, 0, 9), + margin: `5px 0 0 ${theme.spacing(2)}px`, }, }), ); From f8b95625b4a0386c9806b83776086df73f02df65 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 25 Apr 2019 23:06:53 +0200 Subject: [PATCH 5/5] fix visual regression --- docs/src/pages/demos/dividers/SubheaderDividers.js | 2 +- docs/src/pages/demos/dividers/SubheaderDividers.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js index 51ad13b3ea4722..ad7fad83ddf80a 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.js +++ b/docs/src/pages/demos/dividers/SubheaderDividers.js @@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({ margin: `5px 0 0 ${theme.spacing(2)}px`, }, dividerInset: { - margin: `5px 0 0 ${theme.spacing(2)}px`, + margin: `5px 0 0 ${theme.spacing(9)}px`, }, })); diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.tsx b/docs/src/pages/demos/dividers/SubheaderDividers.tsx index 6132e83381cd6a..7a63dc5769b0e5 100644 --- a/docs/src/pages/demos/dividers/SubheaderDividers.tsx +++ b/docs/src/pages/demos/dividers/SubheaderDividers.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) => margin: `5px 0 0 ${theme.spacing(2)}px`, }, dividerInset: { - margin: `5px 0 0 ${theme.spacing(2)}px`, + margin: `5px 0 0 ${theme.spacing(9)}px`, }, }), );