From a752e6b60d3ef4a76035e36bfef9bd4b904ed0c2 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 15 Nov 2019 11:44:25 +0100
Subject: [PATCH 1/3] [HiddenCss] Add test for custom breakpoints

---
 .../material-ui/src/Hidden/HiddenCss.test.js  | 50 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui/src/Hidden/HiddenCss.test.js b/packages/material-ui/src/Hidden/HiddenCss.test.js
index 7336ba72e493a3..57b0c6bf2159bf 100644
--- a/packages/material-ui/src/Hidden/HiddenCss.test.js
+++ b/packages/material-ui/src/Hidden/HiddenCss.test.js
@@ -1,15 +1,22 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils';
 import HiddenCss from './HiddenCss';
+import { createMuiTheme, MuiThemeProvider } from '../styles';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
 
 const Foo = () => <div>bar</div>;
 
 describe('<HiddenCss />', () => {
+  /**
+   * @type {ReturnType<typeof createMount>}
+   */
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount({ strict: true });
     shallow = createShallow({ untilSelector: 'div' });
     classes = getClasses(
       <HiddenCss>
@@ -18,6 +25,10 @@ describe('<HiddenCss />', () => {
     );
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   describe('the generated class names', () => {
     it('should be ok with only', () => {
       const wrapper = shallow(
@@ -82,6 +93,19 @@ describe('<HiddenCss />', () => {
       );
       assert.strictEqual(wrapper.hasClass('custom'), true);
     });
+
+    it('allows custom breakpoints', () => {
+      const theme = createMuiTheme({ breakpoints: { keys: ['xxl'] } });
+      const wrapper = mount(
+        <MuiThemeProvider theme={theme}>
+          <HiddenCss xxlUp className="testid" classes={{ xxlUp: 'xxlUp' }}>
+            <div />
+          </HiddenCss>
+        </MuiThemeProvider>,
+      );
+
+      assert.strictEqual(wrapper.find('div.testid').hasClass('xxlUp'), true);
+    });
   });
 
   describe('prop: children', () => {
@@ -119,4 +143,28 @@ describe('<HiddenCss />', () => {
       assert.strictEqual(wrapper.childAt(2).text(), 'foo');
     });
   });
+
+  describe('warnings', () => {
+    beforeEach(() => {
+      consoleErrorMock.spy();
+    });
+
+    afterEach(() => {
+      consoleErrorMock.reset();
+    });
+
+    it('warns about excess props (potentially undeclared breakpoints)', () => {
+      mount(
+        <HiddenCss xxlUp>
+          <div />
+        </HiddenCss>,
+      );
+
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.include(
+        consoleErrorMock.args()[0][0],
+        'Material-UI: Unsupported props received by `<Hidden implementation="css" />`: xxlUp.',
+      );
+    });
+  });
 });

From c86fe9a776614667871213e33ab7b388b1ea1c1e Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 15 Nov 2019 11:44:43 +0100
Subject: [PATCH 2/3] [HiddenCss] Fix warning when using custom breakpoints

---
 packages/material-ui/src/Hidden/HiddenCss.js | 34 +++++++-------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js
index ca5ab322938ca6..fb91510d6028b5 100644
--- a/packages/material-ui/src/Hidden/HiddenCss.js
+++ b/packages/material-ui/src/Hidden/HiddenCss.js
@@ -28,34 +28,22 @@ const styles = theme => {
  * @ignore - internal component.
  */
 function HiddenCss(props) {
-  const {
-    children,
-    classes,
-    className,
-    lgDown,
-    lgUp,
-    mdDown,
-    mdUp,
-    only,
-    smDown,
-    smUp,
-    xlDown,
-    xlUp,
-    xsDown,
-    xsUp,
-    ...other
-  } = props;
+  const { children, classes, className, only, ...other } = props;
   const theme = useTheme();
 
   if (process.env.NODE_ENV !== 'production') {
-    if (
-      Object.keys(other).length !== 0 &&
-      !(Object.keys(other).length === 1 && other.hasOwnProperty('ref'))
-    ) {
+    const unknownProps = Object.keys(other).filter(propName => {
+      const isUndeclaredBreakpoint = !theme.breakpoints.keys.some(breakpoint => {
+        return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName;
+      });
+      return isUndeclaredBreakpoint;
+    });
+
+    if (unknownProps.length > 0) {
       console.error(
-        `Material-UI: unsupported props received ${Object.keys(other).join(
+        `Material-UI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(
           ', ',
-        )} by \`<Hidden />\`.`,
+        )}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`,
       );
     }
   }

From c5775462bcee1ff1193dd9643c22001d58c56724 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 15 Nov 2019 12:00:53 +0100
Subject: [PATCH 3/3] lower case first after warning prefix

Co-Authored-By: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 packages/material-ui/src/Hidden/HiddenCss.js      | 2 +-
 packages/material-ui/src/Hidden/HiddenCss.test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js
index fb91510d6028b5..289464b68fd539 100644
--- a/packages/material-ui/src/Hidden/HiddenCss.js
+++ b/packages/material-ui/src/Hidden/HiddenCss.js
@@ -41,7 +41,7 @@ function HiddenCss(props) {
 
     if (unknownProps.length > 0) {
       console.error(
-        `Material-UI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(
+        `Material-UI: unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(
           ', ',
         )}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`,
       );
diff --git a/packages/material-ui/src/Hidden/HiddenCss.test.js b/packages/material-ui/src/Hidden/HiddenCss.test.js
index 57b0c6bf2159bf..e9f7f9ae717d7a 100644
--- a/packages/material-ui/src/Hidden/HiddenCss.test.js
+++ b/packages/material-ui/src/Hidden/HiddenCss.test.js
@@ -163,7 +163,7 @@ describe('<HiddenCss />', () => {
       assert.strictEqual(consoleErrorMock.callCount(), 1);
       assert.include(
         consoleErrorMock.args()[0][0],
-        'Material-UI: Unsupported props received by `<Hidden implementation="css" />`: xxlUp.',
+        'Material-UI: unsupported props received by `<Hidden implementation="css" />`: xxlUp.',
       );
     });
   });