From f5ffbecccf3a8aa00a8721a21432b1cdee73010e Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 28 Apr 2021 11:10:43 -0300
Subject: [PATCH] [theme] Add warning for theme.breakpoints.width deprecation
 (#25993)

---
 .../material-ui/src/styles/createBreakpoints.d.ts  |  4 ++++
 .../material-ui/src/styles/createBreakpoints.js    | 14 ++++++++++++++
 .../src/styles/createBreakpoints.test.js           |  4 ++++
 3 files changed, 22 insertions(+)

diff --git a/packages/material-ui/src/styles/createBreakpoints.d.ts b/packages/material-ui/src/styles/createBreakpoints.d.ts
index 5dc50e9d278a3f..88cd1b8251a6bf 100644
--- 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
index b961863c7f2c96..2089c118c01fe2 100644
--- 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
index 7665e99e745e7f..62996441657221 100644
--- 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();
     });
   });
 });