[theme] Add theme.mixins.gutters() in adaptV4Theme (mui#22396)

RajuTicvic · Aug 30, 2020 · a8acbad · a8acbad
1 parent 7c29035
commit a8acbad
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 159 deletions.
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -53,6 +53,21 @@ This change affects almost all components where you're using the `component` pro
 
 ### Theme
 
+For a smoother transition, the `adaptV4Theme` helper allows you to iteratively upgrade to the new theme structure.
+
+```diff
+-import { createMuiTheme } from '@material-ui/core/styles';
++import { createMuiTheme, adaptV4Theme } from '@material-ui/core/styles';
+
+-const theme = createMuitheme({
++const theme = createMuitheme(adaptV4Theme({
+  // v4 theme
+-});
++}));
+```
+
+#### Changes
+
 - The "gutters" abstraction hasn't proven to be used frequently enough to be valuable.
 
   ```diff
@@ -109,28 +124,6 @@ const theme = createMuitheme({
 });
 ```
 
-For a smoother transition, the `adaptV4Theme` helper allows you to iteratively upgrade to the new theme structure. Note that it will display a deprecation warning in the console, since it will be removed at the next major release.
-
-```diff
--import { createMuiTheme } from '@material-ui/core/styles';
-+import { createMuiTheme, adaptV4Theme } from '@material-ui/core/styles';
-
--const theme = createMuitheme({
-+const theme = createMuitheme(adaptV4Theme({
-  props: {
-    MuiButton: {
-      disableRipple: true,
-    },
-  },
-  overrides: {
-    MuiButton: {
-      root: { padding: 0 },
-    },
-  },
--});
-+}));
-```
-
 ### Avatar
 
 - Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:

diff --git a/packages/material-ui/src/styles/adaptV4Theme.js b/packages/material-ui/src/styles/adaptV4Theme.js
@@ -1,3 +1,6 @@
+import createBreakpoints from './createBreakpoints';
+import createSpacing from './createSpacing';
+
 export default function adaptV4Theme(inputTheme) {
   if (process.env.NODE_ENV !== 'production') {
     console.warn(
@@ -13,6 +16,7 @@ export default function adaptV4Theme(inputTheme) {
     defaultProps = {},
     styleOverrides = {},
     overrides = {},
+    mixins = {},
     ...other
   } = inputTheme;
   const theme = {
@@ -46,5 +50,25 @@ export default function adaptV4Theme(inputTheme) {
     theme.components[component] = componentValue;
   });
 
+  // theme.mixins.gutters
+  const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
+  const spacing = createSpacing(inputTheme.spacing);
+
+  theme.mixins = {
+    gutters: (styles = {}) => {
+      return {
+        paddingLeft: spacing(2),
+        paddingRight: spacing(2),
+        ...styles,
+        [breakpoints.up('sm')]: {
+          paddingLeft: spacing(3),
+          paddingRight: spacing(3),
+          ...styles[breakpoints.up('sm')],
+        },
+      };
+    },
+    ...mixins,
+  };
+
   return theme;
 }