[theme] Add warning for theme.breakpoints.width deprecation (#25993)

mui · Apr 28, 2021 · f5ffbec · f5ffbec
1 parent f731e9d
commit f5ffbec
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/packages/material-ui/src/styles/createBreakpoints.d.ts b/packages/material-ui/src/styles/createBreakpoints.d.ts
@@ -14,6 +14,10 @@ export interface Breakpoints {
   down: (key: Breakpoint | number) => string;
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
   only: (key: Breakpoint) => string;
+  /**
+   * @deprecated
+   * Use the `values` prop instead
+   */
   width: (key: Breakpoint) => number;
 }
 

diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
@@ -61,7 +61,21 @@ export default function createBreakpoints(breakpoints) {
     return between(key, key);
   }
 
+  let warnedOnce = false;
+
   function width(key) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.warn(
+          [
+            "Material-UI: The `theme.breakpoints.width` utility is deprecated because it's redundant.",
+            'Use the `theme.breakpoints.values` instead.',
+          ].join('\n'),
+        );
+      }
+    }
+
     return values[key];
   }
 

diff --git a/packages/material-ui/src/styles/createBreakpoints.test.js b/packages/material-ui/src/styles/createBreakpoints.test.js
@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import { stub } from 'sinon';
 import createBreakpoints from './createBreakpoints';
 
 describe('createBreakpoints', () => {
@@ -62,7 +63,10 @@ describe('createBreakpoints', () => {
 
   describe('width', () => {
     it('should work', () => {
+      // Ignore deprecation warning.
+      stub(console, 'warn');
       expect(breakpoints.width('md')).to.equal(960);
+      console.warn.restore();
     });
   });
 });