Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Hidden] Fix js/css implementation inconsistency #9450

Merged
merged 1 commit into from
Dec 9, 2017
Merged

[Hidden] Fix js/css implementation inconsistency #9450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions pages/api/hidden.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
2 changes: 1 addition & 1 deletion src/Dialog/withMobileDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
1 change: 0 additions & 1 deletion src/Dialog/withMobileDialog.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
Expand Down
10 changes: 5 additions & 5 deletions src/Hidden/Hidden.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
/**
Expand Down
22 changes: 11 additions & 11 deletions src/Hidden/HiddenJs.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand All @@ -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 };
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand Down
10 changes: 5 additions & 5 deletions src/Hidden/types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
28 changes: 8 additions & 20 deletions src/utils/withWidth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down