From fc5850d267008e8e8ebd6940b0c782868c06b53f Mon Sep 17 00:00:00 2001 From: merceyz Date: Sun, 2 Jun 2019 21:27:32 +0200 Subject: [PATCH 1/7] [docs] Migrate components/typography/TypographyTheme --- .../components/typography/TypographyTheme.js | 19 ++++++++---------- .../components/typography/TypographyTheme.tsx | 20 +++++++++++++++++++ 2 files changed, 28 insertions(+), 11 deletions(-) create mode 100644 docs/src/pages/components/typography/TypographyTheme.tsx diff --git a/docs/src/pages/components/typography/TypographyTheme.js b/docs/src/pages/components/typography/TypographyTheme.js index b19cd831d29501..aa4540cf6219e1 100644 --- a/docs/src/pages/components/typography/TypographyTheme.js +++ b/docs/src/pages/components/typography/TypographyTheme.js @@ -1,21 +1,18 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { ...theme.typography.button, backgroundColor: theme.palette.background.paper, padding: theme.spacing(1), }, -}); +})); -function TypographyTheme(props) { - return
{"This div's text looks like that of a button."}
; -} +function TypographyTheme() { + const classes = useStyles(); -TypographyTheme.propTypes = { - classes: PropTypes.object.isRequired, -}; + return
{"This div's text looks like that of a button."}
; +} -export default withStyles(styles)(TypographyTheme); +export default TypographyTheme; diff --git a/docs/src/pages/components/typography/TypographyTheme.tsx b/docs/src/pages/components/typography/TypographyTheme.tsx new file mode 100644 index 00000000000000..271fc2ab42e883 --- /dev/null +++ b/docs/src/pages/components/typography/TypographyTheme.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + ...theme.typography.button, + backgroundColor: theme.palette.background.paper, + padding: theme.spacing(1), + }, + }), +); + +function TypographyTheme() { + const classes = useStyles(); + + return
{"This div's text looks like that of a button."}
; +} + +export default TypographyTheme; From f34383da45e4c3ac6e6b590a7ccce147f36b4cbd Mon Sep 17 00:00:00 2001 From: merceyz Date: Sun, 2 Jun 2019 21:28:04 +0200 Subject: [PATCH 2/7] [docs] Migrate components/transitions --- .../components/transitions/SimpleCollapse.js | 77 ++++++++----------- .../components/transitions/SimpleCollapse.tsx | 65 ++++++++++++++++ .../components/transitions/SimpleFade.js | 63 +++++++-------- .../components/transitions/SimpleFade.tsx | 58 ++++++++++++++ .../components/transitions/SimpleGrow.js | 73 ++++++++---------- .../components/transitions/SimpleGrow.tsx | 72 +++++++++++++++++ .../components/transitions/SimpleSlide.js | 63 +++++++-------- .../components/transitions/SimpleSlide.tsx | 60 +++++++++++++++ .../components/transitions/SimpleZoom.js | 77 ++++++++----------- .../components/transitions/SimpleZoom.tsx | 65 ++++++++++++++++ 10 files changed, 471 insertions(+), 202 deletions(-) create mode 100644 docs/src/pages/components/transitions/SimpleCollapse.tsx create mode 100644 docs/src/pages/components/transitions/SimpleFade.tsx create mode 100644 docs/src/pages/components/transitions/SimpleGrow.tsx create mode 100644 docs/src/pages/components/transitions/SimpleSlide.tsx create mode 100644 docs/src/pages/components/transitions/SimpleZoom.tsx diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js index 0aa197aa6fabb4..f88064d8a72da6 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.js +++ b/docs/src/pages/components/transitions/SimpleCollapse.js @@ -1,12 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Switch from '@material-ui/core/Switch'; import Paper from '@material-ui/core/Paper'; import Collapse from '@material-ui/core/Collapse'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: 180, }, @@ -25,50 +24,40 @@ const styles = theme => ({ stroke: theme.palette.divider, strokeWidth: 1, }, -}); +})); -class SimpleCollapse extends React.Component { - state = { - checked: false, - }; +function SimpleCollapse() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); - handleChange = () => { - this.setState(state => ({ checked: !state.checked })); - }; - - render() { - const { classes } = this.props; - const { checked } = this.state; + function handleChange() { + setChecked(prev => !prev); + } - return ( -
- } - label="Show" - /> -
- - - - - - - - - - - - - - -
+ return ( +
+ } + label="Show" + /> +
+ + + + + + + + + + + + + +
- ); - } +
+ ); } -SimpleCollapse.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(SimpleCollapse); +export default SimpleCollapse; diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx new file mode 100644 index 00000000000000..c87613c0a59d34 --- /dev/null +++ b/docs/src/pages/components/transitions/SimpleCollapse.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Switch from '@material-ui/core/Switch'; +import Paper from '@material-ui/core/Paper'; +import Collapse from '@material-ui/core/Collapse'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + height: 180, + }, + container: { + display: 'flex', + }, + paper: { + margin: theme.spacing(1), + }, + svg: { + width: 100, + height: 100, + }, + polygon: { + fill: theme.palette.common.white, + stroke: theme.palette.divider, + strokeWidth: 1, + }, + }), +); + +function SimpleCollapse() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); + + function handleChange() { + setChecked(prev => !prev); + } + + return ( +
+ } + label="Show" + /> +
+ + + + + + + + + + + + + + +
+
+ ); +} + +export default SimpleCollapse; diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js index e7ed6784ecee95..5c4be365b38d54 100644 --- a/docs/src/pages/components/transitions/SimpleFade.js +++ b/docs/src/pages/components/transitions/SimpleFade.js @@ -1,12 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Switch from '@material-ui/core/Switch'; import Paper from '@material-ui/core/Paper'; import Fade from '@material-ui/core/Fade'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: 180, }, @@ -25,43 +24,33 @@ const styles = theme => ({ stroke: theme.palette.divider, strokeWidth: 1, }, -}); +})); -class SimpleFade extends React.Component { - state = { - checked: false, - }; +function SimpleFade() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); - handleChange = () => { - this.setState(state => ({ checked: !state.checked })); - }; - - render() { - const { classes } = this.props; - const { checked } = this.state; + function handleChange() { + setChecked(prev => !prev); + } - return ( -
- } - label="Show" - /> -
- - - - - - - -
+ return ( +
+ } + label="Show" + /> +
+ + + + + + +
- ); - } +
+ ); } -SimpleFade.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(SimpleFade); +export default SimpleFade; diff --git a/docs/src/pages/components/transitions/SimpleFade.tsx b/docs/src/pages/components/transitions/SimpleFade.tsx new file mode 100644 index 00000000000000..10b82183c01bd6 --- /dev/null +++ b/docs/src/pages/components/transitions/SimpleFade.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Switch from '@material-ui/core/Switch'; +import Paper from '@material-ui/core/Paper'; +import Fade from '@material-ui/core/Fade'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + height: 180, + }, + container: { + display: 'flex', + }, + paper: { + margin: theme.spacing(1), + }, + svg: { + width: 100, + height: 100, + }, + polygon: { + fill: theme.palette.common.white, + stroke: theme.palette.divider, + strokeWidth: 1, + }, + }), +); + +function SimpleFade() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); + + function handleChange() { + setChecked(prev => !prev); + } + + return ( +
+ } + label="Show" + /> +
+ + + + + + + +
+
+ ); +} + +export default SimpleFade; diff --git a/docs/src/pages/components/transitions/SimpleGrow.js b/docs/src/pages/components/transitions/SimpleGrow.js index 27549a09e1c49c..d24a40b1748075 100644 --- a/docs/src/pages/components/transitions/SimpleGrow.js +++ b/docs/src/pages/components/transitions/SimpleGrow.js @@ -1,12 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Switch from '@material-ui/core/Switch'; import Paper from '@material-ui/core/Paper'; import Grow from '@material-ui/core/Grow'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: 180, }, @@ -25,53 +24,47 @@ const styles = theme => ({ stroke: theme.palette.divider, strokeWidth: 1, }, -}); +})); -class SimpleGrow extends React.Component { - state = { - checked: false, - }; +function SimpleGrow() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); - handleChange = () => { - this.setState(state => ({ checked: !state.checked })); - }; - - render() { - const { classes } = this.props; - const { checked } = this.state; + function handleChange() { + setChecked(prev => !prev); + } - const polygon = ( + function Polygon() { + return ( ); + } - return ( -
- } - label="Show" - /> -
- {polygon} - {/* Conditionally applies the timeout property to change the entry speed. */} - - {polygon} - -
+ return ( +
+ } + label="Show" + /> +
+ + + + {/* Conditionally applies the timeout property to change the entry speed. */} + + +
- ); - } +
+ ); } -SimpleGrow.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(SimpleGrow); +export default SimpleGrow; diff --git a/docs/src/pages/components/transitions/SimpleGrow.tsx b/docs/src/pages/components/transitions/SimpleGrow.tsx new file mode 100644 index 00000000000000..6156d5e2a206a1 --- /dev/null +++ b/docs/src/pages/components/transitions/SimpleGrow.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Switch from '@material-ui/core/Switch'; +import Paper from '@material-ui/core/Paper'; +import Grow from '@material-ui/core/Grow'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + height: 180, + }, + container: { + display: 'flex', + }, + paper: { + margin: theme.spacing(1), + }, + svg: { + width: 100, + height: 100, + }, + polygon: { + fill: theme.palette.common.white, + stroke: theme.palette.divider, + strokeWidth: 1, + }, + }), +); + +function SimpleGrow() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); + + function handleChange() { + setChecked(prev => !prev); + } + + function Polygon() { + return ( + + + + + + ); + } + + return ( +
+ } + label="Show" + /> +
+ + + + {/* Conditionally applies the timeout property to change the entry speed. */} + + + +
+
+ ); +} + +export default SimpleGrow; diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js index 78edd7c640e463..562fceb0bdd124 100644 --- a/docs/src/pages/components/transitions/SimpleSlide.js +++ b/docs/src/pages/components/transitions/SimpleSlide.js @@ -1,12 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; import Switch from '@material-ui/core/Switch'; import Paper from '@material-ui/core/Paper'; import Slide from '@material-ui/core/Slide'; import FormControlLabel from '@material-ui/core/FormControlLabel'; +import { makeStyles } from '@material-ui/core/styles'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: 180, }, @@ -27,43 +26,33 @@ const styles = theme => ({ stroke: theme.palette.divider, strokeWidth: 1, }, -}); +})); -class SimpleSlide extends React.Component { - state = { - checked: false, - }; +function SimpleSlide() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); - handleChange = () => { - this.setState(state => ({ checked: !state.checked })); - }; - - render() { - const { classes } = this.props; - const { checked } = this.state; + function handleChange() { + setChecked(prev => !prev); + } - return ( -
-
- } - label="Show" - /> - - - - - - - -
+ return ( +
+
+ } + label="Show" + /> + + + + + + +
- ); - } +
+ ); } -SimpleSlide.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(SimpleSlide); +export default SimpleSlide; diff --git a/docs/src/pages/components/transitions/SimpleSlide.tsx b/docs/src/pages/components/transitions/SimpleSlide.tsx new file mode 100644 index 00000000000000..8c68922afa06b5 --- /dev/null +++ b/docs/src/pages/components/transitions/SimpleSlide.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import Switch from '@material-ui/core/Switch'; +import Paper from '@material-ui/core/Paper'; +import Slide from '@material-ui/core/Slide'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + height: 180, + }, + wrapper: { + width: 100 + theme.spacing(2), + }, + paper: { + zIndex: 1, + position: 'relative', + margin: theme.spacing(1), + }, + svg: { + width: 100, + height: 100, + }, + polygon: { + fill: theme.palette.common.white, + stroke: theme.palette.divider, + strokeWidth: 1, + }, + }), +); + +function SimpleSlide() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); + + function handleChange() { + setChecked(prev => !prev); + } + + return ( +
+
+ } + label="Show" + /> + + + + + + + +
+
+ ); +} + +export default SimpleSlide; diff --git a/docs/src/pages/components/transitions/SimpleZoom.js b/docs/src/pages/components/transitions/SimpleZoom.js index 1490c73e0d2cdf..4b63bba19a92c8 100644 --- a/docs/src/pages/components/transitions/SimpleZoom.js +++ b/docs/src/pages/components/transitions/SimpleZoom.js @@ -1,12 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; import Switch from '@material-ui/core/Switch'; import Paper from '@material-ui/core/Paper'; import Zoom from '@material-ui/core/Zoom'; import FormControlLabel from '@material-ui/core/FormControlLabel'; +import { makeStyles } from '@material-ui/core/styles'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: 180, }, @@ -25,50 +24,40 @@ const styles = theme => ({ stroke: theme.palette.divider, strokeWidth: 1, }, -}); +})); -class SimpleZoom extends React.Component { - state = { - checked: false, - }; +function SimpleZoom() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); - handleChange = () => { - this.setState(state => ({ checked: !state.checked })); - }; - - render() { - const { classes } = this.props; - const { checked } = this.state; + function handleChange() { + setChecked(prev => !prev); + } - return ( -
- } - label="Show" - /> -
- - - - - - - - - - - - - - -
+ return ( +
+ } + label="Show" + /> +
+ + + + + + + + + + + + + +
- ); - } +
+ ); } -SimpleZoom.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(SimpleZoom); +export default SimpleZoom; diff --git a/docs/src/pages/components/transitions/SimpleZoom.tsx b/docs/src/pages/components/transitions/SimpleZoom.tsx new file mode 100644 index 00000000000000..3faf5f1c1539b2 --- /dev/null +++ b/docs/src/pages/components/transitions/SimpleZoom.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import Switch from '@material-ui/core/Switch'; +import Paper from '@material-ui/core/Paper'; +import Zoom from '@material-ui/core/Zoom'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + height: 180, + }, + container: { + display: 'flex', + }, + paper: { + margin: theme.spacing(1), + }, + svg: { + width: 100, + height: 100, + }, + polygon: { + fill: theme.palette.common.white, + stroke: theme.palette.divider, + strokeWidth: 1, + }, + }), +); + +function SimpleZoom() { + const classes = useStyles(); + const [checked, setChecked] = React.useState(false); + + function handleChange() { + setChecked(prev => !prev); + } + + return ( +
+ } + label="Show" + /> +
+ + + + + + + + + + + + + + +
+
+ ); +} + +export default SimpleZoom; From f720009ae0186df00baae179b20371e38a818183 Mon Sep 17 00:00:00 2001 From: merceyz Date: Sun, 2 Jun 2019 21:53:39 +0200 Subject: [PATCH 3/7] [docs] Migrate components/links --- docs/src/pages/components/links/ButtonLink.js | 4 ++- .../src/pages/components/links/ButtonLink.tsx | 20 +++++++++++ docs/src/pages/components/links/Links.js | 17 ++++----- docs/src/pages/components/links/Links.tsx | 36 +++++++++++++++++++ 4 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 docs/src/pages/components/links/ButtonLink.tsx create mode 100644 docs/src/pages/components/links/Links.tsx diff --git a/docs/src/pages/components/links/ButtonLink.js b/docs/src/pages/components/links/ButtonLink.js index 29b57d98104d55..006e53003e2571 100644 --- a/docs/src/pages/components/links/ButtonLink.js +++ b/docs/src/pages/components/links/ButtonLink.js @@ -3,7 +3,7 @@ import React from 'react'; import Link from '@material-ui/core/Link'; -export default function ButtonLink() { +function ButtonLink() { return ( ); } + +export default ButtonLink; diff --git a/docs/src/pages/components/links/ButtonLink.tsx b/docs/src/pages/components/links/ButtonLink.tsx new file mode 100644 index 00000000000000..006e53003e2571 --- /dev/null +++ b/docs/src/pages/components/links/ButtonLink.tsx @@ -0,0 +1,20 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ + +import React from 'react'; +import Link from '@material-ui/core/Link'; + +function ButtonLink() { + return ( + { + alert("I'm a button."); + }} + > + Button Link + + ); +} + +export default ButtonLink; diff --git a/docs/src/pages/components/links/Links.js b/docs/src/pages/components/links/Links.js index cb515a21b4aab2..da3f2a45083b10 100644 --- a/docs/src/pages/components/links/Links.js +++ b/docs/src/pages/components/links/Links.js @@ -1,21 +1,20 @@ /* eslint-disable no-script-url */ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Link from '@material-ui/core/Link'; import Typography from '@material-ui/core/Typography'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ link: { margin: theme.spacing(1), }, -}); +})); // This resolves to nothing and doesn't affect browser history const dudUrl = 'javascript:;'; -function Links(props) { - const { classes } = props; +function Links() { + const classes = useStyles(); return ( @@ -32,8 +31,4 @@ function Links(props) { ); } -Links.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(Links); +export default Links; diff --git a/docs/src/pages/components/links/Links.tsx b/docs/src/pages/components/links/Links.tsx new file mode 100644 index 00000000000000..9c8a44ac3d4ce2 --- /dev/null +++ b/docs/src/pages/components/links/Links.tsx @@ -0,0 +1,36 @@ +/* eslint-disable no-script-url */ +import React from 'react'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + link: { + margin: theme.spacing(1), + }, + }), +); + +// This resolves to nothing and doesn't affect browser history +const dudUrl = 'javascript:;'; + +function Links() { + const classes = useStyles(); + + return ( + + + Link + + + {'color="inherit"'} + + + {'variant="body2"'} + + + ); +} + +export default Links; From db4c0e1afc67a4a8c9d122ec067ffd5eb3da6473 Mon Sep 17 00:00:00 2001 From: merceyz Date: Sun, 2 Jun 2019 22:06:33 +0200 Subject: [PATCH 4/7] Migrate some demos in customization/components --- .../components/ClassesNesting.js | 17 +++---- .../components/ClassesNesting.tsx | 37 ++++++++++++++++ .../components/ClassesShorthand.tsx | 24 ++++++++++ .../customization/components/ClassesState.js | 18 +++----- .../customization/components/ClassesState.tsx | 44 +++++++++++++++++++ 5 files changed, 118 insertions(+), 22 deletions(-) create mode 100644 docs/src/pages/customization/components/ClassesNesting.tsx create mode 100644 docs/src/pages/customization/components/ClassesShorthand.tsx create mode 100644 docs/src/pages/customization/components/ClassesState.tsx diff --git a/docs/src/pages/customization/components/ClassesNesting.js b/docs/src/pages/customization/components/ClassesNesting.js index a8b9bbe416f825..567e8daac06718 100644 --- a/docs/src/pages/customization/components/ClassesNesting.js +++ b/docs/src/pages/customization/components/ClassesNesting.js @@ -1,9 +1,8 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const styles = { +const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', borderRadius: 3, @@ -16,10 +15,10 @@ const styles = { label: { textTransform: 'capitalize', }, -}; +}); -function ClassesNesting(props) { - const { classes } = props; +function ClassesNesting() { + const classes = useStyles(); return ( + ); +} + +export default ClassesNesting; diff --git a/docs/src/pages/customization/components/ClassesShorthand.tsx b/docs/src/pages/customization/components/ClassesShorthand.tsx new file mode 100644 index 00000000000000..12a2451db0ef52 --- /dev/null +++ b/docs/src/pages/customization/components/ClassesShorthand.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; + +// The `withStyles()` higher-order component is injecting a `classes` +// property that is used by the `Button` component. +const StyledButton = withStyles({ + root: { + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', + borderRadius: 3, + border: 0, + color: 'white', + height: 48, + padding: '0 30px', + boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', + }, + label: { + textTransform: 'capitalize', + }, +})(Button); + +export default function ClassesShorthand() { + return Classes Shorthand; +} diff --git a/docs/src/pages/customization/components/ClassesState.js b/docs/src/pages/customization/components/ClassesState.js index df7f1681cfeff0..8b59c5d2e3509f 100644 --- a/docs/src/pages/customization/components/ClassesState.js +++ b/docs/src/pages/customization/components/ClassesState.js @@ -1,9 +1,8 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const styles = { +const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', borderRadius: 3, @@ -22,10 +21,11 @@ const styles = { }, }, disabled: {}, -}; +}); + +function ClassesState() { + const classes = useStyles(); -function ClassesState(props) { - const { classes } = props; return ( + ); +} + +export default ClassesState; From 67d82ca135ac9ba21d8db357bbe42a866dfe3298 Mon Sep 17 00:00:00 2001 From: merceyz Date: Sun, 2 Jun 2019 23:46:51 +0200 Subject: [PATCH 5/7] use immediate export --- docs/src/pages/components/links/ButtonLink.js | 4 +--- docs/src/pages/components/links/ButtonLink.tsx | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/components/links/ButtonLink.js b/docs/src/pages/components/links/ButtonLink.js index 006e53003e2571..29b57d98104d55 100644 --- a/docs/src/pages/components/links/ButtonLink.js +++ b/docs/src/pages/components/links/ButtonLink.js @@ -3,7 +3,7 @@ import React from 'react'; import Link from '@material-ui/core/Link'; -function ButtonLink() { +export default function ButtonLink() { return ( ); } - -export default ButtonLink; diff --git a/docs/src/pages/components/links/ButtonLink.tsx b/docs/src/pages/components/links/ButtonLink.tsx index 006e53003e2571..29b57d98104d55 100644 --- a/docs/src/pages/components/links/ButtonLink.tsx +++ b/docs/src/pages/components/links/ButtonLink.tsx @@ -3,7 +3,7 @@ import React from 'react'; import Link from '@material-ui/core/Link'; -function ButtonLink() { +export default function ButtonLink() { return ( ); } - -export default ButtonLink; From b05336973bd6c37bf8ac196234b8cd0f3b609050 Mon Sep 17 00:00:00 2001 From: merceyz Date: Sun, 2 Jun 2019 23:49:41 +0200 Subject: [PATCH 6/7] Move Polygon out of function --- .../components/transitions/SimpleGrow.js | 22 ++++++++++--------- .../components/transitions/SimpleGrow.tsx | 22 ++++++++++--------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/docs/src/pages/components/transitions/SimpleGrow.js b/docs/src/pages/components/transitions/SimpleGrow.js index d24a40b1748075..d83b775403d8e3 100644 --- a/docs/src/pages/components/transitions/SimpleGrow.js +++ b/docs/src/pages/components/transitions/SimpleGrow.js @@ -26,6 +26,18 @@ const useStyles = makeStyles(theme => ({ }, })); +function Polygon() { + const classes = useStyles(); + + return ( + + + + + + ); +} + function SimpleGrow() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -34,16 +46,6 @@ function SimpleGrow() { setChecked(prev => !prev); } - function Polygon() { - return ( - - - - - - ); - } - return (
}), ); +function Polygon() { + const classes = useStyles(); + + return ( + + + + + + ); +} + function SimpleGrow() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -36,16 +48,6 @@ function SimpleGrow() { setChecked(prev => !prev); } - function Polygon() { - return ( - - - - - - ); - } - return (
Date: Mon, 3 Jun 2019 13:44:23 +0200 Subject: [PATCH 7/7] use immediate exports --- docs/src/pages/components/app-bar/BottomAppBar.js | 4 +--- docs/src/pages/components/app-bar/BottomAppBar.tsx | 4 +--- docs/src/pages/components/links/Links.js | 4 +--- docs/src/pages/components/links/Links.tsx | 4 +--- docs/src/pages/components/transitions/SimpleCollapse.js | 4 +--- docs/src/pages/components/transitions/SimpleCollapse.tsx | 4 +--- docs/src/pages/components/transitions/SimpleFade.js | 4 +--- docs/src/pages/components/transitions/SimpleFade.tsx | 4 +--- docs/src/pages/components/transitions/SimpleSlide.js | 4 +--- docs/src/pages/components/transitions/SimpleSlide.tsx | 4 +--- docs/src/pages/components/typography/TypographyTheme.js | 4 +--- docs/src/pages/components/typography/TypographyTheme.tsx | 4 +--- docs/src/pages/customization/components/ClassesNesting.js | 4 +--- docs/src/pages/customization/components/ClassesNesting.tsx | 4 +--- docs/src/pages/customization/components/ClassesState.js | 4 +--- docs/src/pages/customization/components/ClassesState.tsx | 4 +--- 16 files changed, 16 insertions(+), 48 deletions(-) diff --git a/docs/src/pages/components/app-bar/BottomAppBar.js b/docs/src/pages/components/app-bar/BottomAppBar.js index 7373d7b1fae8ab..1c9e7cbd74656c 100644 --- a/docs/src/pages/components/app-bar/BottomAppBar.js +++ b/docs/src/pages/components/app-bar/BottomAppBar.js @@ -97,7 +97,7 @@ const useStyles = makeStyles(theme => ({ }, })); -function BottomAppBar() { +export default function BottomAppBar() { const classes = useStyles(); return ( @@ -142,5 +142,3 @@ function BottomAppBar() { ); } - -export default BottomAppBar; diff --git a/docs/src/pages/components/app-bar/BottomAppBar.tsx b/docs/src/pages/components/app-bar/BottomAppBar.tsx index ee415097f64fba..0111887e42aaf6 100644 --- a/docs/src/pages/components/app-bar/BottomAppBar.tsx +++ b/docs/src/pages/components/app-bar/BottomAppBar.tsx @@ -99,7 +99,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -function BottomAppBar() { +export default function BottomAppBar() { const classes = useStyles(); return ( @@ -144,5 +144,3 @@ function BottomAppBar() { ); } - -export default BottomAppBar; diff --git a/docs/src/pages/components/links/Links.js b/docs/src/pages/components/links/Links.js index da3f2a45083b10..8a4a1d4a93b193 100644 --- a/docs/src/pages/components/links/Links.js +++ b/docs/src/pages/components/links/Links.js @@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({ // This resolves to nothing and doesn't affect browser history const dudUrl = 'javascript:;'; -function Links() { +export default function Links() { const classes = useStyles(); return ( @@ -30,5 +30,3 @@ function Links() { ); } - -export default Links; diff --git a/docs/src/pages/components/links/Links.tsx b/docs/src/pages/components/links/Links.tsx index 9c8a44ac3d4ce2..720e97b1b95d11 100644 --- a/docs/src/pages/components/links/Links.tsx +++ b/docs/src/pages/components/links/Links.tsx @@ -15,7 +15,7 @@ const useStyles = makeStyles((theme: Theme) => // This resolves to nothing and doesn't affect browser history const dudUrl = 'javascript:;'; -function Links() { +export default function Links() { const classes = useStyles(); return ( @@ -32,5 +32,3 @@ function Links() { ); } - -export default Links; diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js index f88064d8a72da6..58de3324c5e6f5 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.js +++ b/docs/src/pages/components/transitions/SimpleCollapse.js @@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({ }, })); -function SimpleCollapse() { +export default function SimpleCollapse() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -59,5 +59,3 @@ function SimpleCollapse() {
); } - -export default SimpleCollapse; diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx index c87613c0a59d34..93479c6d037490 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.tsx +++ b/docs/src/pages/components/transitions/SimpleCollapse.tsx @@ -28,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -function SimpleCollapse() { +export default function SimpleCollapse() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -61,5 +61,3 @@ function SimpleCollapse() {
); } - -export default SimpleCollapse; diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js index 5c4be365b38d54..05f843ade21d4f 100644 --- a/docs/src/pages/components/transitions/SimpleFade.js +++ b/docs/src/pages/components/transitions/SimpleFade.js @@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({ }, })); -function SimpleFade() { +export default function SimpleFade() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -52,5 +52,3 @@ function SimpleFade() {
); } - -export default SimpleFade; diff --git a/docs/src/pages/components/transitions/SimpleFade.tsx b/docs/src/pages/components/transitions/SimpleFade.tsx index 10b82183c01bd6..11fcda444b7488 100644 --- a/docs/src/pages/components/transitions/SimpleFade.tsx +++ b/docs/src/pages/components/transitions/SimpleFade.tsx @@ -28,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -function SimpleFade() { +export default function SimpleFade() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -54,5 +54,3 @@ function SimpleFade() {
); } - -export default SimpleFade; diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js index 562fceb0bdd124..fd89c7d9a0ff5e 100644 --- a/docs/src/pages/components/transitions/SimpleSlide.js +++ b/docs/src/pages/components/transitions/SimpleSlide.js @@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({ }, })); -function SimpleSlide() { +export default function SimpleSlide() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -54,5 +54,3 @@ function SimpleSlide() {
); } - -export default SimpleSlide; diff --git a/docs/src/pages/components/transitions/SimpleSlide.tsx b/docs/src/pages/components/transitions/SimpleSlide.tsx index 8c68922afa06b5..5ecc9c518d42c6 100644 --- a/docs/src/pages/components/transitions/SimpleSlide.tsx +++ b/docs/src/pages/components/transitions/SimpleSlide.tsx @@ -30,7 +30,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -function SimpleSlide() { +export default function SimpleSlide() { const classes = useStyles(); const [checked, setChecked] = React.useState(false); @@ -56,5 +56,3 @@ function SimpleSlide() {
); } - -export default SimpleSlide; diff --git a/docs/src/pages/components/typography/TypographyTheme.js b/docs/src/pages/components/typography/TypographyTheme.js index aa4540cf6219e1..9bfb9d827730b0 100644 --- a/docs/src/pages/components/typography/TypographyTheme.js +++ b/docs/src/pages/components/typography/TypographyTheme.js @@ -9,10 +9,8 @@ const useStyles = makeStyles(theme => ({ }, })); -function TypographyTheme() { +export default function TypographyTheme() { const classes = useStyles(); return
{"This div's text looks like that of a button."}
; } - -export default TypographyTheme; diff --git a/docs/src/pages/components/typography/TypographyTheme.tsx b/docs/src/pages/components/typography/TypographyTheme.tsx index 271fc2ab42e883..f9d464c6e6f73c 100644 --- a/docs/src/pages/components/typography/TypographyTheme.tsx +++ b/docs/src/pages/components/typography/TypographyTheme.tsx @@ -11,10 +11,8 @@ const useStyles = makeStyles((theme: Theme) => }), ); -function TypographyTheme() { +export default function TypographyTheme() { const classes = useStyles(); return
{"This div's text looks like that of a button."}
; } - -export default TypographyTheme; diff --git a/docs/src/pages/customization/components/ClassesNesting.js b/docs/src/pages/customization/components/ClassesNesting.js index 567e8daac06718..4bd28301f0992e 100644 --- a/docs/src/pages/customization/components/ClassesNesting.js +++ b/docs/src/pages/customization/components/ClassesNesting.js @@ -17,7 +17,7 @@ const useStyles = makeStyles({ }, }); -function ClassesNesting() { +export default function ClassesNesting() { const classes = useStyles(); return ( @@ -31,5 +31,3 @@ function ClassesNesting() { ); } - -export default ClassesNesting; diff --git a/docs/src/pages/customization/components/ClassesNesting.tsx b/docs/src/pages/customization/components/ClassesNesting.tsx index a9c9b654cfbc88..d35018ec6ab562 100644 --- a/docs/src/pages/customization/components/ClassesNesting.tsx +++ b/docs/src/pages/customization/components/ClassesNesting.tsx @@ -19,7 +19,7 @@ const useStyles = makeStyles( }), ); -function ClassesNesting() { +export default function ClassesNesting() { const classes = useStyles(); return ( @@ -33,5 +33,3 @@ function ClassesNesting() { ); } - -export default ClassesNesting; diff --git a/docs/src/pages/customization/components/ClassesState.js b/docs/src/pages/customization/components/ClassesState.js index 8b59c5d2e3509f..345d178bd20990 100644 --- a/docs/src/pages/customization/components/ClassesState.js +++ b/docs/src/pages/customization/components/ClassesState.js @@ -23,7 +23,7 @@ const useStyles = makeStyles({ disabled: {}, }); -function ClassesState() { +export default function ClassesState() { const classes = useStyles(); return ( @@ -38,5 +38,3 @@ function ClassesState() { ); } - -export default ClassesState; diff --git a/docs/src/pages/customization/components/ClassesState.tsx b/docs/src/pages/customization/components/ClassesState.tsx index 3707bf32acc4c9..84f152a188999b 100644 --- a/docs/src/pages/customization/components/ClassesState.tsx +++ b/docs/src/pages/customization/components/ClassesState.tsx @@ -25,7 +25,7 @@ const useStyles = makeStyles( }), ); -function ClassesState() { +export default function ClassesState() { const classes = useStyles(); return ( @@ -40,5 +40,3 @@ function ClassesState() { ); } - -export default ClassesState;