feat(Button): add buttons shorthand to ButtonGroup

docs/app/Examples/elements/Button/Groups/ButtonExampleGroupIcon.js

@@ -1,19 +1,33 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { Button, Icon } from 'semantic-ui-react'
 
 const ButtonExampleGroupIcon = () => (
   <div>
     <Button.Group>
-      <Button icon='align left' />
-      <Button icon='align center' />
-      <Button icon='align right' />
-      <Button icon='align justify' />
+      <Button icon>
+        <Icon name='align left' />
+      </Button>
+      <Button icon>
+        <Icon name='align center' />
+      </Button>
+      <Button icon>
+        <Icon name='align right' />
+      </Button>
+      <Button icon>
+        <Icon name='align justify' />
+      </Button>
     </Button.Group>
     {' '}
     <Button.Group>
-      <Button icon='bold' />
-      <Button icon='underline' />
-      <Button icon='text width' />
+      <Button icon>
+        <Icon name='bold' />
+      </Button>
+      <Button icon>
+        <Icon name='underline' />
+      </Button>
+      <Button icon>
+        <Icon name='text width' />
+      </Button>
     </Button.Group>
   </div>
 )

docs/app/Examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleGroupIconShorthand = () => (
+  <div>
+    <Button.Group buttons={[
+      { key: 'align left', icon: 'align left' },
+      { key: 'align center', icon: 'align center' },
+      { key: 'align right', icon: 'align right' },
+      { key: 'align justify', icon: 'align justify' },
+    ]}
+    />
+    {' '}
+    <Button.Group buttons={[
+      { key: 'bold', icon: 'bold' },
+      { key: 'underline', icon: 'underline' },
+      { key: 'text width', icon: 'text width' },
+    ]}
+    />
+  </div>
+)
+
+export default ButtonExampleGroupIconShorthand

docs/app/Examples/elements/Button/Groups/ButtonExampleGroupShorthand.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleGroupShorthand = () => (
+  <Button.Group buttons={['One', 'Two', 'Three']} />
+)
+
+export default ButtonExampleGroupShorthand

docs/app/Examples/elements/Button/Groups/index.js

@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'
 
 const ButtonGroupsExamples = () => (
   <ExampleSection title='Groups'>
@@ -9,11 +11,14 @@ const ButtonGroupsExamples = () => (
       description='Buttons can exist together as a group.'
       examplePath='elements/Button/Groups/ButtonExampleGroup'
     />
+    <ShorthandExample examplePath='elements/Button/Groups/ButtonExampleGroupShorthand' />
+
     <ComponentExample
       title='Icon Group'
       description='Button groups can show groups of icons.'
       examplePath='elements/Button/Groups/ButtonExampleGroupIcon'
     />
+    <ShorthandExample examplePath='elements/Button/Groups/ButtonExampleGroupIconShorthand' />
   </ExampleSection>
 )
 

docs/app/Examples/elements/Button/Types/ButtonExampleAnimated.js

@@ -9,14 +9,12 @@ const ButtonExampleAnimated = () => (
         <Icon name='right arrow' />
       </Button.Content>
     </Button>
-
     <Button animated='vertical'>
       <Button.Content hidden>Shop</Button.Content>
       <Button.Content visible>
         <Icon name='shop' />
       </Button.Content>
     </Button>
-
     <Button animated='fade'>
       <Button.Content visible>
         Sign-up for a Pro account

docs/app/Examples/elements/Button/Types/ButtonExampleBasicShorthand.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleBasicShorthand = () => (
+  <div>
+    <Button content='Standard' basic />
+    <Button basic color='red' content='Red' />
+    <Button basic color='orange' content='Orange' />
+    <Button basic color='yellow' content='Yellow' />
+    <Button basic color='olive' content='Olive' />
+    <Button basic color='green' content='Green' />
+    <Button basic color='teal' content='Teal' />
+    <Button basic color='blue' content='Blue' />
+    <Button basic color='violet' content='Violet' />
+    <Button basic color='purple' content='Purple' />
+    <Button basic color='pink' content='Pink' />
+    <Button basic color='brown' content='Brown' />
+    <Button basic color='grey' content='Grey' />
+    <Button basic color='black' content='Black' />
+  </div>
+)
+
+export default ButtonExampleBasicShorthand

docs/app/Examples/elements/Button/Types/ButtonExampleButton.js

@@ -2,9 +2,7 @@ import React from 'react'
 import { Button } from 'semantic-ui-react'
 
 const ButtonExampleButton = () => (
-  <Button>
-    Click Here
-  </Button>
+  <Button>Click Here</Button>
 )
 
 export default ButtonExampleButton

docs/app/Examples/elements/Button/Types/ButtonExampleEmphasisShorthand.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleEmphasisShorthand = () => (
+  <div>
+    <Button content='Primary' primary />
+    <Button content='Secondary' secondary />
+  </div>
+)
+
+export default ButtonExampleEmphasisShorthand

docs/app/Examples/elements/Button/Types/ButtonExampleIconProp.js → docs/app/Examples/elements/Button/Types/ButtonExampleIconShorthand.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonExampleIconProp = () => (
+const ButtonExampleIconShorthand = () => (
   <Button icon='world' />
 )
 
-export default ButtonExampleIconProp
+export default ButtonExampleIconShorthand

docs/app/Examples/elements/Button/Types/ButtonExampleLabeled.js

@@ -1,27 +1,28 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { Button, Icon, Label } from 'semantic-ui-react'
 
 const ButtonExampleLabeled = () => (
   <div>
-    <Button
-      content='Like'
-      icon='heart'
-      label={{ as: 'a', basic: true, content: '2,048' }}
-      labelPosition='right'
-    />
-
-    <Button
-      content='Like'
-      icon='heart'
-      label={{ as: 'a', basic: true, pointing: 'right', content: '2,048' }}
-      labelPosition='left'
-    />
-
-    <Button
-      icon='fork'
-      label={{ as: 'a', basic: true, content: '2,048' }}
-      labelPosition='left'
-    />
+    <Button as='div' labelPosition='right'>
+      <Button icon>
+        <Icon name='heart' />
+        Like
+      </Button>
+      <Label as='a' basic pointing='left'>2,048</Label>
+    </Button>
+    <Button as='div' labelPosition='left'>
+      <Label as='a' basic pointing='right'>2,048</Label>
+      <Button icon>
+        <Icon name='heart' />
+        Like
+      </Button>
+    </Button>
+    <Button as='div' labelPosition='left'>
+      <Label as='a' basic>2,048</Label>
+      <Button icon>
+        <Icon name='fork' />
+      </Button>
+    </Button>
   </div>
 )
 

docs/app/Examples/elements/Button/Types/ButtonExampleLabeledBasic.js

@@ -1,22 +1,22 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { Button, Icon, Label } from 'semantic-ui-react'
 
 const ButtonExampleLabeledBasic = () => (
   <div>
-    <Button
-      color='red'
-      content='Like'
-      icon='heart'
-      label={{ basic: true, color: 'red', pointing: 'left', content: '2,048' }}
-    />
-
-    <Button
-      basic
-      color='blue'
-      content='Fork'
-      icon='fork'
-      label={{ as: 'a', basic: true, color: 'blue', pointing: 'left', content: '1,048' }}
-    />
+    <Button as='div' labelPosition='right'>
+      <Button color='red'>
+        <Icon name='heart' />
+        Like
+      </Button>
+      <Label as='a' basic color='red' pointing='left'>2,048</Label>
+    </Button>
+    <Button as='div' labelPosition='right'>
+      <Button basic color='blue'>
+        <Icon name='fork' />
+        Fork
+      </Button>
+      <Label as='a' basic color='blue' pointing='left'>2,048</Label>
+    </Button>
   </div>
 )
 

docs/app/Examples/elements/Button/Types/ButtonExampleLabeledBasicShorthand.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleLabeledBasicShorthand = () => (
+  <div>
+    <Button
+      color='red'
+      content='Like'
+      icon='heart'
+      label={{ basic: true, color: 'red', pointing: 'left', content: '2,048' }}
+    />
+    <Button
+      basic
+      color='blue'
+      content='Fork'
+      icon='fork'
+      label={{ as: 'a', basic: true, color: 'blue', pointing: 'left', content: '2,048' }}
+    />
+  </div>
+)
+
+export default ButtonExampleLabeledBasicShorthand

docs/app/Examples/elements/Button/Types/ButtonExampleLabeledIcon.js

@@ -1,10 +1,16 @@
 import React from 'react'
-import { Button } from 'semantic-ui-react'
+import { Button, Icon } from 'semantic-ui-react'
 
 const ButtonExampleLabeledIcon = () => (
   <div>
-    <Button content='Pause' icon='pause' labelPosition='left' />
-    <Button content='Next' icon='right arrow' labelPosition='right' />
+    <Button icon labelPosition='left'>
+      <Icon name='pause' />
+      Pause
+    </Button>
+    <Button icon labelPosition='right'>
+      Next
+      <Icon name='right arrow' />
+    </Button>
   </div>
 )
 

docs/app/Examples/elements/Button/Types/ButtonExampleLabeledIconShorthand.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleLabeledIconShorthand = () => (
+  <div>
+    <Button content='Pause' icon='pause' labelPosition='left' />
+    <Button content='Next' icon='right arrow' labelPosition='right' />
+  </div>
+)
+
+export default ButtonExampleLabeledIconShorthand

docs/app/Examples/elements/Button/Types/ButtonExampleLabeledShorthand.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleLabeledShorthand = () => (
+  <div>
+    <Button
+      content='Like'
+      icon='heart'
+      label={{ as: 'a', basic: true, content: '2,048' }}
+      labelPosition='right'
+    />
+    <Button
+      content='Like'
+      icon='heart'
+      label={{ as: 'a', basic: true, pointing: 'right', content: '2,048' }}
+      labelPosition='left'
+    />
+    <Button
+      icon='fork'
+      label={{ as: 'a', basic: true, content: '2,048' }}
+      labelPosition='left'
+    />
+  </div>
+)
+
+export default ButtonExampleLabeledShorthand

docs/app/Examples/elements/Button/Types/ButtonExampleContentProp.js → docs/app/Examples/elements/Button/Types/ButtonExampleShorthand.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonExampleContentProp = () => (
+const ButtonExampleShorthand = () => (
   <Button content='Click Here' />
 )
 
-export default ButtonExampleContentProp
+export default ButtonExampleShorthand