diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleUnstackable.js b/docs/app/Examples/views/Item/Variations/ItemExampleUnstackable.js new file mode 100644 index 0000000000..1dab228b3e --- /dev/null +++ b/docs/app/Examples/views/Item/Variations/ItemExampleUnstackable.js @@ -0,0 +1,18 @@ +import React from 'react' +import { Item } from 'semantic-ui-react' + +const ItemExampleImages = () => ( + + + + + + + + + + + +) + +export default ItemExampleImages diff --git a/docs/app/Examples/views/Item/Variations/index.js b/docs/app/Examples/views/Item/Variations/index.js index 00cb7bb0b1..597e158861 100644 --- a/docs/app/Examples/views/Item/Variations/index.js +++ b/docs/app/Examples/views/Item/Variations/index.js @@ -18,6 +18,12 @@ const Variations = () => ( /> + + ; diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js index 7aa2eabcd1..ec0a1ef8a4 100644 --- a/src/views/Item/ItemGroup.js +++ b/src/views/Item/ItemGroup.js @@ -24,12 +24,14 @@ function ItemGroup(props) { items, link, relaxed, + unstackable, } = props const classes = cx( 'ui', useKeyOnly(divided, 'divided'), useKeyOnly(link, 'link'), + useKeyOnly(unstackable, 'unstackable'), useKeyOrValueAndKey(relaxed, 'relaxed'), 'items', className, @@ -81,6 +83,9 @@ ItemGroup.propTypes = { PropTypes.bool, PropTypes.oneOf(['very']), ]), + + /** Prevent items from stacking on mobile. */ + unstackable: PropTypes.bool, } export default ItemGroup diff --git a/test/specs/views/Item/ItemGroup-test.js b/test/specs/views/Item/ItemGroup-test.js index 021b329848..2264b7af6e 100644 --- a/test/specs/views/Item/ItemGroup-test.js +++ b/test/specs/views/Item/ItemGroup-test.js @@ -11,6 +11,7 @@ describe('ItemGroup', () => { common.propKeyOnlyToClassName(ItemGroup, 'divided') common.propKeyOnlyToClassName(ItemGroup, 'link') + common.propKeyOnlyToClassName(ItemGroup, 'unstackable') common.propKeyOrValueAndKeyToClassName(ItemGroup, 'relaxed', ['very'])