[theme] Deprecate theme.mixins.gutters

mui · Mar 30, 2019 · 50ef429 · 50ef429
1 parent 2c2075e
commit 50ef429
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 23 deletions.
diff --git a/docs/src/pages/demos/paper/PaperSheet.js b/docs/src/pages/demos/paper/PaperSheet.js
@@ -6,9 +6,7 @@ import Typography from '@material-ui/core/Typography';
 
 const styles = theme => ({
   root: {
-    ...theme.mixins.gutters(),
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
+    padding: theme.spacing(3, 2),
   },
 });
 

diff --git a/docs/src/pages/demos/paper/PaperSheet.tsx b/docs/src/pages/demos/paper/PaperSheet.tsx
@@ -7,9 +7,7 @@ import Typography from '@material-ui/core/Typography';
 const styles = (theme: Theme) =>
   createStyles({
     root: {
-      ...theme.mixins.gutters(),
-      paddingTop: theme.spacing(2),
-      paddingBottom: theme.spacing(2),
+      padding: theme.spacing(3, 2),
     },
   });
 

diff --git a/packages/material-ui-styles/test/styles.spec.tsx b/packages/material-ui-styles/test/styles.spec.tsx
@@ -134,11 +134,11 @@ const DecoratedComponent = withStyles(styles)(
 // Allow nested pseudo selectors
 withStyles(theme =>
   createStyles({
-    guttered: theme.mixins.gutters({
+    guttered: {
       '&:hover': {
         textDecoration: 'none',
       },
-    }),
+    },
     listItem: {
       '&:hover $listItemIcon': {
         visibility: 'inherit',

diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
@@ -30,8 +30,8 @@ export const styles = theme => ({
   /* Styles applied to the title and subtitle container element. */
   titleWrap: {
     flexGrow: 1,
-    marginLeft: theme.mixins.gutters().paddingLeft,
-    marginRight: theme.mixins.gutters().paddingRight,
+    marginLeft: 16,
+    marginRight: 16,
     color: theme.palette.common.white,
     overflow: 'hidden',
   },

diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js
@@ -11,7 +11,14 @@ export const styles = theme => ({
     alignItems: 'center',
   },
   /* Styles applied to the root element if `disableGutters={false}`. */
-  gutters: theme.mixins.gutters(),
+  gutters: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+    },
+  },
   /* Styles applied to the root element if `variant="regular"`. */
   regular: theme.mixins.toolbar,
   /* Styles applied to the root element if `variant="dense"`. */

diff --git a/packages/material-ui/src/styles/createMixins.js b/packages/material-ui/src/styles/createMixins.js
@@ -1,15 +1,36 @@
+// import warning from 'warning';
+
 export default function createMixins(breakpoints, spacing, mixins) {
   return {
-    gutters: (styles = {}) => ({
-      paddingLeft: spacing(2),
-      paddingRight: spacing(2),
-      ...styles,
-      [breakpoints.up('sm')]: {
-        paddingLeft: spacing(3),
-        paddingRight: spacing(3),
-        ...styles[breakpoints.up('sm')],
-      },
-    }),
+    gutters: (styles = {}) => {
+// To deprecate in v4.1
+//       warning(
+//         false,
+//         [
+//           'Material-UI: theme.mixins.gutters() is deprecated.',
+//           'You can use the source of the mixin directly:',
+//           `
+// paddingLeft: theme.spacing(2),
+// paddingRight: theme.spacing(2),
+// [theme.breakpoints.up('sm')]: {
+//   paddingLeft: theme.spacing(3),
+//   paddingRight: theme.spacing(3),
+// },
+// `,
+//         ].join('\n'),
+//       );
+
+      return {
+        paddingLeft: spacing(2),
+        paddingRight: spacing(2),
+        ...styles,
+        [breakpoints.up('sm')]: {
+          paddingLeft: spacing(3),
+          paddingRight: spacing(3),
+          ...styles[breakpoints.up('sm')],
+        },
+      };
+    },
     toolbar: {
       minHeight: 56,
       [`${breakpoints.up('xs')} and (orientation: landscape)`]: {

diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -241,11 +241,11 @@ const DecoratedComponent = withStyles(styles)(
 // Allow nested pseudo selectors
 withStyles(theme =>
   createStyles({
-    guttered: theme.mixins.gutters({
+    guttered: {
       '&:hover': {
         textDecoration: 'none',
       },
-    }),
+    },
     listItem: {
       '&:hover $listItemIcon': {
         visibility: 'inherit',