[theme] Deprecate theme.mixins.gutters (#22245)

mui · Jan 25, 2021 · 63acba0 · 63acba0
1 parent 4ad23a5
commit 63acba0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 36 deletions.
diff --git a/packages/material-ui/src/styles/createMixins.js b/packages/material-ui/src/styles/createMixins.js
@@ -1,22 +1,20 @@
 export default function createMixins(breakpoints, spacing, mixins) {
   return {
     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'),
-      //       );
+      console.warn(
+        [
+          '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),

diff --git a/packages/material-ui/src/styles/createMixins.test.js b/packages/material-ui/src/styles/createMixins.test.js
@@ -1,26 +1,30 @@
 import { expect } from 'chai';
+import { consoleWarnMock } from 'test/utils/consoleErrorMock';
 import createMixins from './createMixins';
 import createMuiTheme from './createMuiTheme';
 
 describe('createMixins', () => {
   it('should be able to override the breakpoint', () => {
     const theme = createMuiTheme();
-    const mixins = createMixins(theme.breakpoints, theme.spacing, {});
+    const mixins = createMixins(theme.breakpoints, theme.spacing, { test: { display: 'block' } });
 
-    const mixin = mixins.gutters({
-      display: 'flex',
-      [theme.breakpoints.up('sm')]: {
-        paddingLeft: 1,
-      },
+    expect(mixins.test).to.deep.equal({ display: 'block' });
+  });
+
+  describe('v5 deprecations', () => {
+    beforeEach(() => {
+      consoleWarnMock.spy();
     });
-    expect(mixin).to.deep.equal({
-      '@media (min-width:600px)': {
-        paddingLeft: 1,
-        paddingRight: 24,
-      },
-      display: 'flex',
-      paddingLeft: 16,
-      paddingRight: 16,
+
+    afterEach(() => {
+      consoleWarnMock.reset();
+    });
+
+    it('issues a warning for theme.mixins.gutters', () => {
+      const theme = createMuiTheme();
+      theme.mixins.gutters();
+      expect(consoleWarnMock.callCount()).to.equal(1);
+      expect(consoleWarnMock.messages()[0]).to.include('theme.mixins.gutters() is deprecated.');
     });
   });
 });
diff --git a/packages/material-ui/src/styles/createMuiTheme.test.js b/packages/material-ui/src/styles/createMuiTheme.test.js
@@ -23,12 +23,6 @@ describe('createMuiTheme', () => {
     expect(muiTheme.transitions.duration.shorter).to.not.equal(undefined);
   });
 
-  it('should use the defined spacing for the gutters mixin', () => {
-    const spacing = 100;
-    const muiTheme = createMuiTheme({ spacing });
-    expect(muiTheme.mixins.gutters().paddingLeft).to.equal(spacing * 2);
-  });
-
   describe('shadows', () => {
     it('should provide the default array', () => {
       const muiTheme = createMuiTheme();