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(