- {drawer}
+
+ {slidingDrawer}
);
}
+ // type === temporary
return (
- {drawer}
+ {slidingDrawer}
);
}
diff --git a/src/Drawer/Drawer.spec.js b/src/Drawer/Drawer.spec.js
index 1e79984b7391fc..03dc6a0eefafe3 100644
--- a/src/Drawer/Drawer.spec.js
+++ b/src/Drawer/Drawer.spec.js
@@ -14,155 +14,208 @@ describe('
', () => {
before(() => {
shallow = createShallow({ dive: true });
- classes = getClasses(
);
+ classes = getClasses(
+
+
+ ,
+ );
});
- it('should render a Modal', () => {
- const wrapper = shallow(
);
- assert.strictEqual(wrapper.name(), 'withStyles(Modal)');
- });
+ describe('prop: type=temporary', () => {
+ it('should render a Modal', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.name(), 'withStyles(Modal)');
+ });
- it('should render Slide > Paper inside the Modal', () => {
- const wrapper = shallow(
);
+ it('should render Slide > Paper inside the Modal', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
- const slide = wrapper.childAt(0);
- assert.strictEqual(
- slide.length === 1 && slide.is(Slide),
- true,
- 'immediate wrapper child should be Slide',
- );
+ const slide = wrapper.childAt(0);
+ assert.strictEqual(
+ slide.length === 1 && slide.is(Slide),
+ true,
+ 'immediate wrapper child should be Slide',
+ );
- const paper = slide.childAt(0);
- assert.strictEqual(paper.length === 1 && paper.name(), 'withStyles(Paper)');
+ const paper = slide.childAt(0);
+ assert.strictEqual(paper.length === 1 && paper.name(), 'withStyles(Paper)');
- assert.strictEqual(paper.hasClass(classes.paper), true, 'should have the paper class');
- });
+ assert.strictEqual(paper.hasClass(classes.paper), true, 'should have the paper class');
+ });
+
+ describe('enterTransitionDuration property', () => {
+ const enterDuration = 854;
+ const leaveDuration = 2967;
+
+ it('should be passed to Slide', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.find(Slide).prop('enterTransitionDuration'), enterDuration);
+ });
- describe('enterTransitionDuration property', () => {
- const enterDuration = 854;
- const leaveDuration = 2967;
+ it("should be passed to to Modal's backdropTransitionDuration when open=true", () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.find(Modal).prop('backdropTransitionDuration'), enterDuration);
+ });
+ });
+
+ describe('leaveTransitionDuration property', () => {
+ const enterDuration = 6577;
+ const leaveDuration = 1889;
+
+ it('should be passed to Slide', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.find(Slide).props().leaveTransitionDuration, leaveDuration);
+ });
- it('should be passed to Slide', () => {
- const wrapper = shallow(
);
- assert.strictEqual(wrapper.find(Slide).prop('enterTransitionDuration'), enterDuration);
+ it("should be passed to to Modal's backdropTransitionDuration when open=false", () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.find(Modal).props().backdropTransitionDuration, leaveDuration);
+ });
});
- it("should be passed to to Modal's backdropTransitionDuration when open=true", () => {
+ it("should override Modal's backdropTransitionDuration from property when specified", () => {
+ const testDuration = 335;
const wrapper = shallow(
-
,
+
+
+ ,
);
- assert.strictEqual(wrapper.find(Modal).prop('backdropTransitionDuration'), enterDuration);
+ assert.strictEqual(wrapper.find(Modal).props().backdropTransitionDuration, testDuration);
});
- });
- describe('leaveTransitionDuration property', () => {
- const enterDuration = 6577;
- const leaveDuration = 1889;
-
- it('should be passed to Slide', () => {
- const wrapper = shallow(
);
- assert.strictEqual(wrapper.find(Slide).props().leaveTransitionDuration, leaveDuration);
+ it('should set the Paper className', () => {
+ const wrapper = shallow(
+
+ Hello
+ ,
+ );
+ const paper = wrapper.find(Paper);
+ assert.strictEqual(paper.hasClass(classes.paper), true, 'should have the paper class');
+ assert.strictEqual(paper.hasClass('woofDrawer'), true, 'should have the woofDrawer class');
});
- it("should be passed to to Modal's backdropTransitionDuration when open=false", () => {
+ it('should be closed by default', () => {
const wrapper = shallow(
-
,
+
+ Hello
+ ,
);
- assert.strictEqual(wrapper.find(Modal).props().backdropTransitionDuration, leaveDuration);
+
+ const modal = wrapper;
+ const slide = modal.find(Slide);
+
+ assert.strictEqual(modal.prop('show'), false, 'should not show the modal');
+ assert.strictEqual(slide.prop('in'), false, 'should not transition in');
});
- });
- it("should override Modal's backdropTransitionDuration from property when specified", () => {
- const testDuration = 335;
- const wrapper = shallow(
);
- assert.strictEqual(wrapper.find(Modal).props().backdropTransitionDuration, testDuration);
- });
+ describe('opening and closing', () => {
+ let wrapper;
- it('should set the Paper className', () => {
- const wrapper = shallow(
-
- Hello
- ,
- );
- const paper = wrapper.find(Paper);
- assert.strictEqual(paper.hasClass(classes.paper), true, 'should have the paper class');
- assert.strictEqual(paper.hasClass('woofDrawer'), true, 'should have the woofDrawer class');
- });
+ before(() => {
+ wrapper = shallow(
+
+ Hello
+ ,
+ );
+ });
- it('should be closed by default', () => {
- const wrapper = shallow(
-
- Hello
- ,
- );
+ it('should start closed', () => {
+ assert.strictEqual(wrapper.props().show, false, 'should not show the modal');
+ assert.strictEqual(wrapper.find(Slide).prop('in'), false, 'should not transition in');
+ });
- const modal = wrapper;
- const slide = modal.find(Slide);
+ it('should open', () => {
+ wrapper.setProps({ open: true });
+ assert.strictEqual(wrapper.props().show, true, 'should show the modal');
+ assert.strictEqual(wrapper.find(Slide).prop('in'), true, 'should transition in');
+ });
- assert.strictEqual(modal.prop('show'), false, 'should not show the modal');
- assert.strictEqual(slide.prop('in'), false, 'should not transition in');
+ it('should close', () => {
+ wrapper.setProps({ open: false });
+ assert.strictEqual(wrapper.props().show, false, 'should not show the modal');
+ assert.strictEqual(wrapper.find(Slide).prop('in'), false, 'should not transition in');
+ });
+ });
});
- describe('opening and closing', () => {
+ describe('prop: type=persistent', () => {
let wrapper;
before(() => {
wrapper = shallow(
-
+
Hello
,
);
});
- it('should start closed', () => {
- assert.strictEqual(wrapper.props().show, false, 'should not show the modal');
- assert.strictEqual(wrapper.find(Slide).prop('in'), false, 'should not transition in');
+ it('should render a div instead of a Modal when persistent', () => {
+ assert.strictEqual(wrapper.name(), 'div');
+ assert.strictEqual(wrapper.hasClass(classes.docked), true, 'should have the docked class');
});
- it('should open', () => {
- wrapper.setProps({ open: true });
- assert.strictEqual(wrapper.props().show, true, 'should show the modal');
- assert.strictEqual(wrapper.find(Slide).prop('in'), true, 'should transition in');
- });
+ it('should render Slide > Paper inside the div', () => {
+ const slide = wrapper.childAt(0);
+ assert.strictEqual(slide.length, 1);
+ assert.strictEqual(slide.name(), 'withTheme(Slide)');
- it('should close', () => {
- wrapper.setProps({ open: false });
- assert.strictEqual(wrapper.props().show, false, 'should not show the modal');
- assert.strictEqual(wrapper.find(Slide).prop('in'), false, 'should not transition in');
+ const paper = slide.childAt(0);
+ assert.strictEqual(paper.length === 1 && paper.name(), 'withStyles(Paper)');
});
});
- describe('docked', () => {
+ describe('prop: type=permanent', () => {
let wrapper;
before(() => {
wrapper = shallow(
-
+
Hello
,
);
});
- it('should render a div instead of a Modal when docked', () => {
+ it('should render a div instead of a Modal when permanent', () => {
assert.strictEqual(wrapper.name(), 'div');
assert.strictEqual(wrapper.hasClass(classes.docked), true, 'should have the docked class');
});
- it('should render Slide > Paper inside the div', () => {
- const slide = wrapper.childAt(0);
- assert.strictEqual(
- slide.length === 1 && slide.is(Slide),
- true,
- 'immediate wrapper child should be Slide',
- );
+ it('should render div > Paper inside the div', () => {
+ const slide = wrapper;
+ assert.strictEqual(slide.length, 1);
+ assert.strictEqual(slide.name(), 'div');
const paper = slide.childAt(0);
assert.strictEqual(paper.length === 1 && paper.name(), 'withStyles(Paper)');
@@ -173,7 +226,11 @@ describe('', () => {
let wrapper;
before(() => {
- wrapper = shallow();
+ wrapper = shallow(
+
+
+ ,
+ );
});
it('should return the opposing slide direction', () => {
@@ -203,7 +260,11 @@ describe('', () => {
let wrapper;
before(() => {
- wrapper = shallow();
+ wrapper = shallow(
+
+
+ ,
+ );
wrapper.instance().props.theme.dir = 'rtl';
});
diff --git a/src/Grid/Grid.js b/src/Grid/Grid.js
index 9abbfcee3b0286..33f105f0cfc730 100644
--- a/src/Grid/Grid.js
+++ b/src/Grid/Grid.js
@@ -1,16 +1,14 @@
// @flow
-/**
- * A grid component using the following libs as inspiration.
- *
- * For the implementation:
- * - http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
- * - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css
- * - https://github.com/roylee0704/react-flexbox-grid
- * - https://material.angularjs.org/latest/layout/introduction
- *
- * Follow this flexbox Guide to better understand the underlying model:
- * - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- */
+// A grid component using the following libs as inspiration.
+//
+// For the implementation:
+// - http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
+// - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css
+// - https://github.com/roylee0704/react-flexbox-grid
+// - https://material.angularjs.org/latest/layout/introduction
+//
+// Follow this flexbox Guide to better understand the underlying model:
+// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
import React from 'react';
import type { ComponentType, Node } from 'react';
diff --git a/src/Hidden/Hidden.js b/src/Hidden/Hidden.js
index 485a246fc875c9..0cddbd106fd799 100644
--- a/src/Hidden/Hidden.js
+++ b/src/Hidden/Hidden.js
@@ -3,6 +3,7 @@
import React from 'react';
import type { Node } from 'react';
import HiddenJs from './HiddenJs';
+import HiddenCss from './HiddenCss';
import type { Breakpoint } from '../styles/breakpoints';
export type Props = {
@@ -75,7 +76,7 @@ function Hidden(props: Props) {
return ;
}
- throw new Error(' is not yet implemented');
+ return ;
}
Hidden.defaultProps = {
diff --git a/src/Hidden/Hidden.spec.js b/src/Hidden/Hidden.spec.js
index 8de52e33726398..d9019f922d96d1 100644
--- a/src/Hidden/Hidden.spec.js
+++ b/src/Hidden/Hidden.spec.js
@@ -5,6 +5,7 @@ import { assert } from 'chai';
import { createShallow } from '../test-utils';
import Hidden from './Hidden';
import HiddenJs from './HiddenJs';
+import HiddenCss from './HiddenCss';
describe('', () => {
let shallow;
@@ -23,14 +24,13 @@ describe('', () => {
assert.strictEqual(wrapper.find(HiddenJs).length, 1);
});
- it('should use change the implementation', () => {
- assert.throws(() => {
- shallow(
-
- {'Hello'}
- ,
- );
- }, 'is not yet implemented');
+ it('should change the implementation', () => {
+ const wrapper = shallow(
+
+ {'Hello'}
+ ,
+ );
+ assert.strictEqual(wrapper.find(HiddenCss).length, 1);
});
});
});
diff --git a/src/Hidden/HiddenCss.js b/src/Hidden/HiddenCss.js
new file mode 100644
index 00000000000000..6717d354073d14
--- /dev/null
+++ b/src/Hidden/HiddenCss.js
@@ -0,0 +1,101 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import warning from 'warning';
+import classNames from 'classnames';
+import { keys as breakpoints } from '../styles/breakpoints';
+import { capitalizeFirstLetter } from '../utils/helpers';
+import withStyles from '../styles/withStyles';
+import type { HiddenProps } from './types';
+
+type DefaultProps = {
+ classes: Object,
+};
+
+export type Props = HiddenProps & {
+ /**
+ * Useful to extend the style applied to components.
+ */
+ classes?: Object,
+};
+
+function generateStyles(theme) {
+ const hidden = {
+ display: 'none',
+ };
+
+ return theme.breakpoints.keys.reduce((styles, key) => {
+ styles[`only${capitalizeFirstLetter(key)}`] = {
+ [theme.breakpoints.only(key)]: hidden,
+ };
+ styles[`${key}Up`] = {
+ [theme.breakpoints.up(key)]: hidden,
+ };
+ styles[`${key}Down`] = {
+ [theme.breakpoints.down(key)]: hidden,
+ };
+
+ return styles;
+ }, {});
+}
+
+const styles = (theme: Object) => generateStyles(theme);
+
+type AllProps = DefaultProps & Props;
+
+/**
+ * @ignore - internal component.
+ */
+function HiddenCss(props: AllProps) {
+ const {
+ children,
+ classes,
+ only,
+ xsUp,
+ smUp,
+ mdUp,
+ lgUp,
+ xlUp,
+ xsDown,
+ smDown,
+ mdDown,
+ lgDown,
+ xlDown,
+ ...other
+ } = props;
+
+ warning(
+ Object.keys(other).length === 0 ||
+ (Object.keys(other).length === 1 && other.hasOwnProperty('ref')),
+ `Material-UI: unsupported properties received ${JSON.stringify(other)} by \`\`.`,
+ );
+
+ const className = [];
+
+ for (let i = 0; i < breakpoints.length; i += 1) {
+ const breakpoint = breakpoints[i];
+ const breakpointUp = props[`${breakpoint}Up`];
+ const breakpointDown = props[`${breakpoint}Down`];
+
+ if (breakpointUp) {
+ className.push(classes[`${breakpoint}Up`]);
+ }
+ if (breakpointDown) {
+ className.push(classes[`${breakpoint}Down`]);
+ }
+ }
+
+ if (only) {
+ className.push(classes[`only${capitalizeFirstLetter(only)}`]);
+ }
+
+ if (!React.isValidElement(children)) {
+ return null;
+ }
+
+ return React.cloneElement(children, {
+ className: classNames(children.props.className, className.join(' ')),
+ });
+}
+
+export default withStyles(styles, { name: 'MuiHiddenCss' })(HiddenCss);
diff --git a/src/Hidden/HiddenCss.spec.js b/src/Hidden/HiddenCss.spec.js
new file mode 100644
index 00000000000000..b0aaf3322ff6f5
--- /dev/null
+++ b/src/Hidden/HiddenCss.spec.js
@@ -0,0 +1,55 @@
+// @flow
+
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, getClasses } from '../test-utils';
+import HiddenCss from './HiddenCss';
+
+describe('', () => {
+ let shallow;
+ let classes;
+
+ before(() => {
+ shallow = createShallow();
+ classes = getClasses(
+
+
+ ,
+ );
+ });
+
+ describe('the generated class names', () => {
+ it('should be ok with only', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.props().className, `foo ${classes.onlySm}`);
+ });
+
+ it('should be ok with mdDown', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.props().className, `foo ${classes.mdDown}`);
+ });
+
+ it('should be ok with mdUp', () => {
+ const wrapper = shallow(
+
+
+ ,
+ );
+ assert.strictEqual(wrapper.props().className, `foo ${classes.mdUp}`);
+ });
+ });
+
+ describe('prop: children', () => {
+ it('should work when empty', () => {
+ shallow();
+ });
+ });
+});
diff --git a/src/Hidden/HiddenJs.js b/src/Hidden/HiddenJs.js
index 1a43ba283045a4..db2871f77e542e 100644
--- a/src/Hidden/HiddenJs.js
+++ b/src/Hidden/HiddenJs.js
@@ -34,6 +34,11 @@ function HiddenJs(props: Props) {
...other
} = props;
+ warning(
+ Object.keys(other).length === 0,
+ `Material-UI: unsupported properties received ${JSON.stringify(other)} by \`\`.`,
+ );
+
let visible = true;
// `only` check is faster to get out sooner if used.
@@ -72,11 +77,6 @@ function HiddenJs(props: Props) {
return null;
}
- warning(
- Object.keys(other).length === 0,
- `Material-UI: unsupported properties received ${JSON.stringify(other)}`,
- );
-
return children;
}
diff --git a/src/Hidden/HiddenJs.spec.js b/src/Hidden/HiddenJs.spec.js
index 22d91825919981..de2fd9dc789b6b 100644
--- a/src/Hidden/HiddenJs.spec.js
+++ b/src/Hidden/HiddenJs.spec.js
@@ -42,19 +42,11 @@ describe('', () => {
const props = { width, [prop]: breakpoint };
// children
- let wrapper = shallow(
-
- foo
- ,
- );
+ let wrapper = shallow(foo);
assert.isNull(wrapper.type(), 'should render null');
// element
- wrapper = shallow(
- foo} {...props}>
- foo
- ,
- );
+ wrapper = shallow(foo);
assert.isNull(wrapper.type(), 'should render null');
});
});
diff --git a/src/Hidden/types.js b/src/Hidden/types.js
index 8c5410ecc083a1..77eccf1c9152bd 100644
--- a/src/Hidden/types.js
+++ b/src/Hidden/types.js
@@ -1,12 +1,13 @@
// @flow
+import type { Element } from 'react';
import type { Breakpoint } from '../styles/breakpoints';
export type HiddenProps = {
/**
* The content of the component.
*/
- children?: React$Element,
+ children?: Element<*>,
/**
* @ignore
*/
diff --git a/src/internal/Modal.js b/src/internal/Modal.js
index 435d5b1b389f5d..5a22643e1fe7ff 100644
--- a/src/internal/Modal.js
+++ b/src/internal/Modal.js
@@ -77,7 +77,7 @@ export type Props = {
className?: string,
/**
* Always keep the children in the DOM.
- * That property can be useful in SEO situation or
+ * This property can be useful in SEO situation or
* when you want to maximize the responsiveness of the Modal.
*/
keepMounted?: boolean,
diff --git a/test/regressions/index.js b/test/regressions/index.js
index a796f8c6dcc461..a5cdb4574d9b75 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -27,7 +27,6 @@ const blacklistSuite = [
// Needs interaction
'docs-demos-dialogs',
- 'docs-demos-drawers',
'docs-demos-menus',
// Useless