From 34286a2277f1276f52e4720367dfeac5824c4abf Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Mon, 26 Apr 2021 19:28:53 -0300
Subject: [PATCH 1/2] [theme] Add warning for theme.breakpoints.width
 deprecation

---
 .../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..f25536b5fae40f 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 was removed 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();
     });
   });
 });

From dba848e75c9f3e9a654ff2b4b779fb3f271e57c2 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Tue, 27 Apr 2021 11:07:41 -0300
Subject: [PATCH 2/2] Update
 packages/material-ui/src/styles/createBreakpoints.js

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 packages/material-ui/src/styles/createBreakpoints.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
index f25536b5fae40f..2089c118c01fe2 100644
--- a/packages/material-ui/src/styles/createBreakpoints.js
+++ b/packages/material-ui/src/styles/createBreakpoints.js
@@ -69,7 +69,7 @@ export default function createBreakpoints(breakpoints) {
         warnedOnce = true;
         console.warn(
           [
-            "Material-UI: The `theme.breakpoints.width` utility was removed because it's redundant.",
+            "Material-UI: The `theme.breakpoints.width` utility is deprecated because it's redundant.",
             'Use the `theme.breakpoints.values` instead.',
           ].join('\n'),
         );