[Hidden] Fix js/css implementation inconsistency (#9450)

pages/api/hidden.md

@@ -15,16 +15,16 @@ Responsively hides children based on the selected implementation.
 | <span style="color: #31a148">children *</span> | Node |  | The content of the component. |
 | implementation | union:&nbsp;'js'&nbsp;&#124;<br>&nbsp;'css'<br> | 'js' | Specify which implementation to use.  'js' is the default, 'css' works better for server side rendering. |
 | initialWidth | number |  | You can use this property when choosing the `js` implementation with server side rendering.<br>As `window.innerWidth` is unavailable on the server, we default to rendering an empty componenent during the first mount. In some situation you might want to use an heristic to approximate the screen width of the client browser screen width.<br>For instance, you could be using the user-agent or the client-hints. http://caniuse.com/#search=client%20hint |
-| lgDown | boolean | false | If true, screens this size and down will be hidden. |
+| lgDown | boolean | false | If true, screens before this size and down will be hidden. |
 | lgUp | boolean | false | If true, screens this size and up will be hidden. |
-| mdDown | boolean | false | If true, screens this size and down will be hidden. |
+| mdDown | boolean | false | If true, screens before this size and down will be hidden. |
 | mdUp | boolean | false | If true, screens this size and up will be hidden. |
 | only | union:&nbsp;Breakpoint&nbsp;&#124;<br>&nbsp;Array&lt;Breakpoint><br> |  | Hide the given breakpoint(s). |
-| smDown | boolean | false | If true, screens this size and down will be hidden. |
+| smDown | boolean | false | If true, screens before this size and down will be hidden. |
 | smUp | boolean | false | If true, screens this size and up will be hidden. |
-| xlDown | boolean | false | If true, screens this size and down will be hidden. |
+| xlDown | boolean | false | If true, screens before this size and down will be hidden. |
 | xlUp | boolean | false | If true, screens this size and up will be hidden. |
-| xsDown | boolean | false | If true, screens this size and down will be hidden. |
+| xsDown | boolean | false | If true, screens before this size and down will be hidden. |
 | xsUp | boolean | false | If true, screens this size and up will be hidden. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).

src/Dialog/withMobileDialog.js

@@ -27,7 +27,7 @@ const withMobileDialog = (
   const { breakpoint } = options;
 
   function WithMobileDialog(props: { width: Breakpoint }): Node {
-    return <Component fullScreen={isWidthDown(breakpoint, props.width)} {...props} />;
+    return <Component fullScreen={isWidthDown(breakpoint, props.width, true)} {...props} />;
   }
 
   if (process.env.NODE_ENV !== 'production') {

src/Dialog/withMobileDialog.spec.js

@@ -22,7 +22,6 @@ describe('withMobileDialog', () => {
       it(`is for width: ${width} <= ${breakpoint}`, () => {
         const ResponsiveDialog = withMobileDialog({ breakpoint })(Dialog);
         const wrapper = shallow(<ResponsiveDialog width={width} />);
-        // the fullscreen class on the Paper element
         assert.strictEqual(wrapper.find(Paper).hasClass(classes.fullScreen), true);
       });
     });

src/Hidden/Hidden.js

@@ -40,23 +40,23 @@ export type Props = {
    */
   xlUp?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   xsDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   smDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   mdDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   lgDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   xlDown?: boolean,
   /**

src/Hidden/HiddenJs.spec.js

@@ -31,7 +31,7 @@ describe('<HiddenJs />', () => {
       const prop = resolvePropName(upDownOnly, breakpoint);
       const descriptions = {
         Up: `${prop} is hidden for width: ${width} >= ${breakpoint}`,
-        Down: `${prop} is hidden for width: ${width} <= ${breakpoint}`,
+        Down: `${prop} is hidden for width: ${width} < ${breakpoint}`,
         only: `${prop} is hidden for width: ${width} === ${breakpoint}`,
       };
       const props = { width, [prop]: breakpoint };
@@ -56,7 +56,7 @@ describe('<HiddenJs />', () => {
       const prop = resolvePropName(upDownOnly, breakpoint);
       const descriptions = {
         Up: `${prop} is visible for width: ${width} < ${breakpoint}`,
-        Down: `${prop} is visible for width: ${width} > ${breakpoint}`,
+        Down: `${prop} is visible for width: ${width} >= ${breakpoint}`,
         only: `${prop} is visible for width: ${width} !== ${breakpoint}`,
       };
       const props = { width, [prop]: breakpoint };
@@ -81,7 +81,8 @@ describe('<HiddenJs />', () => {
     });
 
     describe('down', () => {
-      isHidden(['xs', 'sm', 'md', 'lg', 'xl'], 'Down', 'xs');
+      isHidden(['sm', 'md', 'lg', 'xl'], 'Down', 'xs');
+      isVisible(['xs'], 'Down', 'xs');
     });
 
     describe('only', () => {
@@ -97,8 +98,8 @@ describe('<HiddenJs />', () => {
     });
 
     describe('down', () => {
-      isHidden(['sm', 'md', 'lg', 'xl'], 'Down', 'sm');
-      isVisible(['xs'], 'Down', 'sm');
+      isHidden(['md', 'lg', 'xl'], 'Down', 'sm');
+      isVisible(['xs', 'sm'], 'Down', 'sm');
     });
 
     describe('only', () => {
@@ -114,8 +115,8 @@ describe('<HiddenJs />', () => {
     });
 
     describe('down', () => {
-      isHidden(['md', 'lg', 'xl'], 'Down', 'md');
-      isVisible(['xs', 'sm'], 'Down', 'md');
+      isHidden(['lg', 'xl'], 'Down', 'md');
+      isVisible(['xs', 'sm', 'md'], 'Down', 'md');
     });
 
     describe('only', () => {
@@ -131,8 +132,8 @@ describe('<HiddenJs />', () => {
     });
 
     describe('down', () => {
-      isHidden(['lg', 'xl'], 'Down', 'lg');
-      isVisible(['xs', 'sm', 'md'], 'Down', 'lg');
+      isHidden(['xl'], 'Down', 'lg');
+      isVisible(['xs', 'sm', 'md', 'lg'], 'Down', 'lg');
     });
 
     describe('only', () => {
@@ -147,8 +148,7 @@ describe('<HiddenJs />', () => {
     });
 
     describe('down', () => {
-      isHidden(['xl'], 'Down', 'xl');
-      isVisible(['xs', 'sm', 'md', 'lg'], 'Down', 'xl');
+      isVisible(['xs', 'sm', 'md', 'lg', 'xl'], 'Down', 'xl');
     });
 
     describe('only', () => {

src/Hidden/types.js

@@ -34,23 +34,23 @@ export type HiddenProps = {
    */
   xlUp?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   xsDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   smDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   mdDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   lgDown?: boolean,
   /**
-   * If true, screens this size and down will be hidden.
+   * If true, screens before this size and down will be hidden.
    */
   xlDown?: boolean,
 };

src/utils/withWidth.js

@@ -10,32 +10,20 @@ import withTheme from '../styles/withTheme';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
 import type { Breakpoint } from '../styles/createBreakpoints';
 
-/**
- * By default, returns true if screen width is the same or greater than the given breakpoint.
- *
- * @param screenWidth
- * @param breakpoint
- * @param inclusive - defaults to true
- */
-export const isWidthUp = (breakpoint, screenWidth, inclusive = true) => {
+// By default, returns true if screen width is the same or greater than the given breakpoint.
+export const isWidthUp = (breakpoint, width, inclusive = true) => {
   if (inclusive) {
-    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(screenWidth);
+    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
   }
-  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(screenWidth);
+  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
 };
 
-/**
- * By default, returns true if screen width is the same or less than the given breakpoint.
- *
- * @param screenWidth
- * @param breakpoint
- * @param inclusive - defaults to true
- */
-export const isWidthDown = (breakpoint, screenWidth, inclusive = true) => {
+// By default, returns true if screen width is the same or less than the given breakpoint.
+export const isWidthDown = (breakpoint, width, inclusive = false) => {
   if (inclusive) {
-    return breakpointKeys.indexOf(screenWidth) <= breakpointKeys.indexOf(breakpoint);
+    return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
   }
-  return breakpointKeys.indexOf(screenWidth) < breakpointKeys.indexOf(breakpoint);
+  return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
 };
 
 // optional props introduced by this HOC