From feed140603590fbe7ce57ef7910645a496155156 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 9 Dec 2017 13:54:54 +0100 Subject: [PATCH] [Hidden] Fix js/css implementation inconsistency --- pages/api/hidden.md | 10 +++++----- src/Dialog/withMobileDialog.js | 2 +- src/Dialog/withMobileDialog.spec.js | 1 - src/Hidden/Hidden.js | 10 +++++----- src/Hidden/HiddenJs.spec.js | 22 +++++++++++----------- src/Hidden/types.js | 10 +++++----- src/utils/withWidth.js | 28 ++++++++-------------------- 7 files changed, 35 insertions(+), 48 deletions(-) diff --git a/pages/api/hidden.md b/pages/api/hidden.md index 13916c2c1d4a5f..8625e0f1d8dc6b 100644 --- a/pages/api/hidden.md +++ b/pages/api/hidden.md @@ -15,16 +15,16 @@ Responsively hides children based on the selected implementation. | children * | Node | | The content of the component. | | implementation | union: 'js' |
 'css'
| '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.
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.
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: Breakpoint |
 Array<Breakpoint>
| | 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). diff --git a/src/Dialog/withMobileDialog.js b/src/Dialog/withMobileDialog.js index f57ae8c227e055..3b95e3d5397206 100644 --- a/src/Dialog/withMobileDialog.js +++ b/src/Dialog/withMobileDialog.js @@ -27,7 +27,7 @@ const withMobileDialog = ( const { breakpoint } = options; function WithMobileDialog(props: { width: Breakpoint }): Node { - return ; + return ; } if (process.env.NODE_ENV !== 'production') { diff --git a/src/Dialog/withMobileDialog.spec.js b/src/Dialog/withMobileDialog.spec.js index 827a4749f4ec02..e5953457e8ccdc 100644 --- a/src/Dialog/withMobileDialog.spec.js +++ b/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(); - // the fullscreen class on the Paper element assert.strictEqual(wrapper.find(Paper).hasClass(classes.fullScreen), true); }); }); diff --git a/src/Hidden/Hidden.js b/src/Hidden/Hidden.js index fdeeaea41b4078..e19f35e14df687 100644 --- a/src/Hidden/Hidden.js +++ b/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, /** diff --git a/src/Hidden/HiddenJs.spec.js b/src/Hidden/HiddenJs.spec.js index e570285d25537f..bd92eed04f1a07 100644 --- a/src/Hidden/HiddenJs.spec.js +++ b/src/Hidden/HiddenJs.spec.js @@ -31,7 +31,7 @@ describe('', () => { 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('', () => { 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('', () => { }); 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('', () => { }); 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('', () => { }); 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('', () => { }); 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('', () => { }); describe('down', () => { - isHidden(['xl'], 'Down', 'xl'); - isVisible(['xs', 'sm', 'md', 'lg'], 'Down', 'xl'); + isVisible(['xs', 'sm', 'md', 'lg', 'xl'], 'Down', 'xl'); }); describe('only', () => { diff --git a/src/Hidden/types.js b/src/Hidden/types.js index ecfd51dad8970b..2d36cbe8628a73 100644 --- a/src/Hidden/types.js +++ b/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, }; diff --git a/src/utils/withWidth.js b/src/utils/withWidth.js index 02c8f06d6db7e6..b75592af687d17 100644 --- a/src/utils/withWidth.js +++ b/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