Merge branch 'next' into list-specification

mui · Apr 15, 2019 · af3b825 · af3b825
2 parents 4a9254f + 71d4ebe
commit af3b825
Show file tree

Hide file tree

Showing 121 changed files with 1,076 additions and 1,074 deletions.
diff --git a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js
@@ -1,30 +1,29 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     justifyContent: 'center',
     flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(1, 2),
   },
-});
+}));
 
 function handleClick(event) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function CollapsedBreadcrumbs(props) {
-  const { classes } = props;
+function CollapsedBreadcrumbs() {
+  const classes = useStyles();
 
   return (
     <Paper elevation={0} className={classes.paper}>
@@ -47,8 +46,4 @@ function CollapsedBreadcrumbs(props) {
   );
 }
 
-CollapsedBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CollapsedBreadcrumbs);
+export default CollapsedBreadcrumbs;
diff --git a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.tsx
@@ -1,16 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-interface CollapsedBreadcrumbsProps extends WithStyles<typeof styles> {}
-
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       justifyContent: 'center',
@@ -19,15 +16,16 @@ const styles = (theme: Theme) =>
     paper: {
       padding: theme.spacing(1, 2),
     },
-  });
+  }),
+);
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function CollapsedBreadcrumbs(props: CollapsedBreadcrumbsProps) {
-  const { classes } = props;
+function CollapsedBreadcrumbs() {
+  const classes = useStyles();
 
   return (
     <Paper elevation={0} className={classes.paper}>
@@ -50,8 +48,4 @@ function CollapsedBreadcrumbs(props: CollapsedBreadcrumbsProps) {
   );
 }
 
-CollapsedBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(CollapsedBreadcrumbs);
+export default CollapsedBreadcrumbs;
diff --git a/docs/src/pages/demos/breadcrumbs/CustomSeparator.js b/docs/src/pages/demos/breadcrumbs/CustomSeparator.js
@@ -1,29 +1,28 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     justifyContent: 'center',
     flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(1, 2),
   },
-});
+}));
 
 function handleClick(event) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function CustomSeparator(props) {
-  const { classes } = props;
+function CustomSeparator() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -66,8 +65,4 @@ function CustomSeparator(props) {
   );
 }
 
-CustomSeparator.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CustomSeparator);
+export default CustomSeparator;
diff --git a/docs/src/pages/demos/breadcrumbs/CustomSeparator.tsx b/docs/src/pages/demos/breadcrumbs/CustomSeparator.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 
-interface CustomSeparatorProps extends WithStyles<typeof styles> {}
-
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       justifyContent: 'center',
@@ -18,15 +15,16 @@ const styles = (theme: Theme) =>
     paper: {
       padding: theme.spacing(1, 2),
     },
-  });
+  }),
+);
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function CustomSeparator(props: CustomSeparatorProps) {
-  const { classes } = props;
+function CustomSeparator() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -69,8 +67,4 @@ function CustomSeparator(props: CustomSeparatorProps) {
   );
 }
 
-CustomSeparator.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(CustomSeparator);
+export default CustomSeparator;
diff --git a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.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 Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -9,7 +8,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import WhatshotIcon from '@material-ui/icons/Whatshot';
 import GrainIcon from '@material-ui/icons/Grain';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(1, 2),
   },
@@ -21,15 +20,15 @@ const styles = theme => ({
     width: 20,
     height: 20,
   },
-});
+}));
 
 function handleClick(event) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function IconBreadcrumbs(props) {
-  const { classes } = props;
+function IconBreadcrumbs() {
+  const classes = useStyles();
   return (
     <Paper elevation={0} className={classes.root}>
       <Breadcrumbs aria-label="Breadcrumb">
@@ -55,8 +54,4 @@ function IconBreadcrumbs(props) {
   );
 }
 
-IconBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(IconBreadcrumbs);
+export default IconBreadcrumbs;
diff --git a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.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 { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -9,9 +8,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import WhatshotIcon from '@material-ui/icons/Whatshot';
 import GrainIcon from '@material-ui/icons/Grain';
 
-interface IconBreadcrumbsProps extends WithStyles<typeof styles> {}
-
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       padding: theme.spacing(1, 2),
@@ -24,15 +21,16 @@ const styles = (theme: Theme) =>
       width: 20,
       height: 20,
     },
-  });
+  }),
+);
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function IconBreadcrumbs(props: IconBreadcrumbsProps) {
-  const { classes } = props;
+function IconBreadcrumbs() {
+  const classes = useStyles();
   return (
     <Paper elevation={0} className={classes.root}>
       <Breadcrumbs aria-label="Breadcrumb">
@@ -58,8 +56,4 @@ function IconBreadcrumbs(props: IconBreadcrumbsProps) {
   );
 }
 
-IconBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(IconBreadcrumbs);
+export default IconBreadcrumbs;
diff --git a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js
@@ -1,28 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Link from '@material-ui/core/Link';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     justifyContent: 'center',
     flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(1, 2),
   },
-});
+}));
 
 function handleClick(event) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function SimpleBreadcrumbs(props) {
-  const { classes } = props;
+function SimpleBreadcrumbs() {
+  const classes = useStyles();
   return (
     <div className={classes.root}>
       <Paper elevation={0} className={classes.paper}>
@@ -59,8 +58,4 @@ function SimpleBreadcrumbs(props) {
   );
 }
 
-SimpleBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleBreadcrumbs);
+export default SimpleBreadcrumbs;
diff --git a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Link from '@material-ui/core/Link';
 
-interface SimpleBreadcrumbsProps extends WithStyles<typeof styles> {}
-
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       justifyContent: 'center',
@@ -17,15 +14,16 @@ const styles = (theme: Theme) =>
     paper: {
       padding: theme.spacing(1, 2),
     },
-  });
+  }),
+);
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function SimpleBreadcrumbs(props: SimpleBreadcrumbsProps) {
-  const { classes } = props;
+function SimpleBreadcrumbs() {
+  const classes = useStyles();
   return (
     <div className={classes.root}>
       <Paper elevation={0} className={classes.paper}>
@@ -62,8 +60,4 @@ function SimpleBreadcrumbs(props: SimpleBreadcrumbsProps) {
   );
 }
 
-SimpleBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(SimpleBreadcrumbs);
+export default SimpleBreadcrumbs;
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
@@ -423,7 +423,7 @@ class Slider extends React.Component {
   handleRef = ref => {
     setRef(this.props.innerRef, ref);
 
-    // StrictMode ready
+    // #StrictMode ready
     const nextContainer = ReactDOM.findDOMNode(ref);
     const prevContainer = this.container;
 

diff --git a/packages/material-ui-lab/src/Slider/Slider.test.js b/packages/material-ui-lab/src/Slider/Slider.test.js
@@ -20,7 +20,8 @@ describe('<Slider />', () => {
 
   before(() => {
     classes = getClasses(<Slider value={0} />);
-    mount = createMount();
+    // StrictMode violation: uses ButtonBase
+    mount = createMount({ strict: false });
   });
 
   after(() => {