feat(Item): add unstackable prop to ItemGroup (#1706)

* feat(Item): add unstackable prop to ItemGroup * docs(Item): add example for unstackable
Semantic-Org · May 27, 2017 · 4044f55 · 4044f55
1 parent 6bf47ab
commit 4044f55
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleUnstackable.js 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 = () => (
+  <Item.Group divided unstackable>
+    <Item>
+      <Item.Image src='/assets/images/wireframe/image.png' />
+    </Item>
+
+    <Item>
+      <Item.Image src='/assets/images/wireframe/image.png' />
+    </Item>
+
+    <Item image='/assets/images/wireframe/image.png' />
+  </Item.Group>
+)
+
+export default ItemExampleImages
diff --git a/docs/app/Examples/views/Item/Variations/index.js b/docs/app/Examples/views/Item/Variations/index.js
@@ -18,6 +18,12 @@ const Variations = () => (
     />
     <ComponentExample examplePath='views/Item/Variations/ItemExampleVeryRelaxed' />
 
+    <ComponentExample
+      title='Unstackable'
+      description='A group of items can prevent items from stacking on mobile.'
+      examplePath='views/Item/Variations/ItemExampleUnstackable'
+    />
+
     <ComponentExample
       title='Link Item'
       description='An item can be formatted so that the entire contents link to another page.'

diff --git a/src/views/Item/ItemGroup.d.ts b/src/views/Item/ItemGroup.d.ts
@@ -23,6 +23,9 @@ export interface ItemGroupProps {
 
   /** A group of items can relax its padding to provide more negative space. */
   relaxed?: boolean | 'very';
+
+  /** Prevent items from stacking on mobile. */
+  unstackable?: boolean;
 }
 
 declare const ItemGroup: React.StatelessComponent<ItemGroupProps>;

diff --git 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
@@ -11,6 +11,7 @@ describe('ItemGroup', () => {
 
   common.propKeyOnlyToClassName(ItemGroup, 'divided')
   common.propKeyOnlyToClassName(ItemGroup, 'link')
+  common.propKeyOnlyToClassName(ItemGroup, 'unstackable')
 
   common.propKeyOrValueAndKeyToClassName(ItemGroup, 'relaxed', ['very'])