diff --git a/src/Hidden/HiddenCss.js b/src/Hidden/HiddenCss.js index db2e69e5861d23..ad43dcfe0e3cfe 100644 --- a/src/Hidden/HiddenCss.js +++ b/src/Hidden/HiddenCss.js @@ -86,7 +86,10 @@ function HiddenCss(props: Props) { } if (only) { - className.push(classes[`only${capitalizeFirstLetter(only)}`]); + const onlyBreakpoints = Array.isArray(only) ? only : [only]; + onlyBreakpoints.forEach(breakpoint => { + className.push(classes[`only${capitalizeFirstLetter(breakpoint)}`]); + }); } return {children}; diff --git a/src/Hidden/HiddenCss.spec.js b/src/Hidden/HiddenCss.spec.js index 098b44db0f8c6e..10c451482806d2 100644 --- a/src/Hidden/HiddenCss.spec.js +++ b/src/Hidden/HiddenCss.spec.js @@ -27,13 +27,39 @@ describe('', () => {
, ); + assert.strictEqual(wrapper.type(), 'span'); assert.strictEqual(wrapper.hasClass(classes.onlySm), true); + const div = wrapper.childAt(0); assert.strictEqual(div.type(), 'div'); assert.strictEqual(div.props().className, 'foo'); }); + it('should be ok with only as an array', () => { + const wrapper = shallow( + +
+ , + ); + + assert.strictEqual(wrapper.type(), 'span'); + assert.strictEqual(wrapper.props().className[0], classes.onlyXs); + assert.strictEqual(wrapper.props().className[1], classes.onlySm); + }); + + it('should be ok with only as an empty array', () => { + const wrapper = shallow( + +
+ , + ); + + assert.strictEqual(wrapper.type(), 'span'); + assert.strictEqual(Array.isArray(wrapper.props().className), true); + assert.strictEqual(wrapper.props().className.length, 0); + }); + it('should be ok with mdDown', () => { const wrapper = shallow(