style(Button): update docs to the latest standards, add missing prop …

docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js → docs/app/Examples/elements/Button/Content/ButtonExampleConditionals.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonConditionalsExample = () => (
+const ButtonExampleConditionals = () => (
   <Button.Group>
     <Button>Cancel</Button>
     <Button.Or />
     <Button positive>Save</Button>
   </Button.Group>
 )
 
-export default ButtonConditionalsExample
+export default ButtonExampleConditionals

docs/app/Examples/elements/Button/Content/ButtonMultipleConditionalsExample.js → docs/app/Examples/elements/Button/Content/ButtonExampleMultipleConditionals.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonMultipleConditionalsExample = () => (
+const ButtonExampleMultipleConditionals = () => (
   <Button.Group>
     <Button>One</Button>
     <Button.Or />
@@ -11,4 +11,4 @@ const ButtonMultipleConditionalsExample = () => (
   </Button.Group>
 )
 
-export default ButtonMultipleConditionalsExample
+export default ButtonExampleMultipleConditionals

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

@@ -6,11 +6,11 @@ const ButtonContentExamples = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Conditionals'
-      description='Button groups can contain conditionals'
-      examplePath='elements/Button/Content/ButtonConditionalsExample'
+      description='Button groups can contain conditionals.'
+      examplePath='elements/Button/Content/ButtonExampleConditionals'
     />
     <ComponentExample
-      examplePath='elements/Button/Content/ButtonMultipleConditionalsExample'
+      examplePath='elements/Button/Content/ButtonExampleMultipleConditionals'
     />
   </ExampleSection>
 )

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasic.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Divider } from 'semantic-ui-react'
 
-const ButtonGroupBasicExample = () => (
+const ButtonExampleGroupBasic = () => (
   <div>
     <Button.Group basic>
       <Button>One</Button>
@@ -17,4 +17,4 @@ const ButtonGroupBasicExample = () => (
   </div>
 )
 
-export default ButtonGroupBasicExample
+export default ButtonExampleGroupBasic

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicColoredExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupBasicColored.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupBasicColoredExample = () => (
+const ButtonExampleGroupBasicColored = () => (
   <Button.Group>
     <Button basic color='red'>One</Button>
     <Button basic color='green'>Two</Button>
     <Button basic color='blue'>Three</Button>
   </Button.Group>
 )
 
-export default ButtonGroupBasicColoredExample
+export default ButtonExampleGroupBasicColored

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupColoredExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupColored.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupColoredExample = () => (
+const ButtonExampleGroupColored = () => (
   <Button.Group color='blue'>
     <Button>One</Button>
     <Button>Two</Button>
     <Button>Three</Button>
   </Button.Group>
 )
 
-export default ButtonGroupColoredExample
+export default ButtonExampleGroupColored

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupEqualWidthExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupEqualWidth.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Divider } from 'semantic-ui-react'
 
-const ButtonGroupEqualWidthExample = () => (
+const ButtonExampleGroupEqualWidth = () => (
   <div>
     <Button.Group widths='5'>
       <Button>Overview</Button>
@@ -19,4 +19,4 @@ const ButtonGroupEqualWidthExample = () => (
   </div>
 )
 
-export default ButtonGroupEqualWidthExample
+export default ButtonExampleGroupEqualWidth

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIcon.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Icon } from 'semantic-ui-react'
 
-const ButtonGroupIconExample = () => (
+const ButtonExampleGroupIcon = () => (
   <Button.Group icon>
     <Button>
       <Icon name='play' />
@@ -15,4 +15,4 @@ const ButtonGroupIconExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupIconExample
+export default ButtonExampleGroupIcon

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconShorthandExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconShorthand.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupIconShorthandExample = () => (
+const ButtonExampleGroupIconShorthand = () => (
   <Button.Group>
     <Button icon='play' />
     <Button icon='pause' />
     <Button icon='shuffle' />
   </Button.Group>
 )
 
-export default ButtonGroupIconShorthandExample
+export default ButtonExampleGroupIconShorthand

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconSizeExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupIconSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupIconSizeExample = () => (
+const ButtonExampleGroupIconSize = () => (
   <Button.Group basic size='small'>
     <Button icon='file' />
     <Button icon='save' />
@@ -10,4 +10,4 @@ const ButtonGroupIconSizeExample = () => (
   </Button.Group>
 )
 
-export default ButtonGroupIconSizeExample
+export default ButtonExampleGroupIconSize

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupLabeledIconExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupLabeledIconExample = () => (
+const ButtonExampleGroupLabeledIcon = () => (
   <Button.Group labeled>
     <Button icon='play' content='Play' />
     <Button icon='pause' content='Pause' />
     <Button icon='shuffle' content='Shuffle' />
   </Button.Group>
 )
 
-export default ButtonGroupLabeledIconExample
+export default ButtonExampleGroupLabeledIcon

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupMixedExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupMixed.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupMixedExample = () => (
+const ButtonExampleGroupMixed = () => (
   <Button.Group>
     <Button labelPosition='left' icon='left chevron' content='Back' />
     <Button icon='stop' content='Stop' />
     <Button labelPosition='right' icon='right chevron' content='Forward' />
   </Button.Group>
 )
 
-export default ButtonGroupMixedExample
+export default ButtonExampleGroupMixed

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupOrSizeExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupOrSize.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupOrSizeExample = () => (
+const ButtonExampleGroupOrSize = () => (
   <Button.Group size='large'>
     <Button>One</Button>
     <Button.Or />
     <Button>Three</Button>
   </Button.Group>
 )
 
-export default ButtonGroupOrSizeExample
+export default ButtonExampleGroupOrSize

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupSizeExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupSize.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupSizeExample = () => (
+const ButtonExampleGroupSize = () => (
   <Button.Group size='large'>
     <Button>One</Button>
     <Button>Two</Button>
     <Button>Three</Button>
   </Button.Group>
 )
 
-export default ButtonGroupSizeExample
+export default ButtonExampleGroupSize

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupVerticalExample.js → docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupVertical.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonGroupVerticalExample = () => (
-  <Button.Group attached='top'>
+const ButtonExampleGroupVertical = () => (
+  <Button.Group attached='top' vertical>
     <Button>Feed</Button>
     <Button>Messages</Button>
     <Button>Events</Button>
     <Button>Photos</Button>
   </Button.Group>
 )
 
-export default ButtonGroupVerticalExample
+export default ButtonExampleGroupVertical

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

@@ -6,56 +6,56 @@ const ButtonGroupVariationsExamples = () => (
   <ExampleSection title='Group Variations'>
     <ComponentExample
       title='Vertical Group'
-      description='Groups can be formatted to appear vertically'
-      examplePath='elements/Button/GroupVariations/ButtonGroupVerticalExample'
+      description='Groups can be formatted to appear vertically.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupVertical'
     />
     <ComponentExample
       title='Icon Group'
-      description='Groups can be formatted as icons'
-      examplePath='elements/Button/GroupVariations/ButtonGroupIconExample'
+      description='Groups can be formatted as icons.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupIcon'
     />
     <ComponentExample
-      description='Using shorthand icons formats each individual button as an icon button'
-      examplePath='elements/Button/GroupVariations/ButtonGroupIconShorthandExample'
+      description='Using shorthand icons formats each individual button as an icon button.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupIconShorthand'
     />
     <ComponentExample
       title='Labeled Icon Groups'
-      description='Groups can be formatted as labeled icons'
-      examplePath='elements/Button/GroupVariations/ButtonGroupLabeledIconExample'
+      description='Groups can be formatted as labeled icons.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon'
     />
     <ComponentExample
       title='Mixed Group'
-      description='Groups can be formatted to use multiple button types together'
-      examplePath='elements/Button/GroupVariations/ButtonGroupMixedExample'
+      description='Groups can be formatted to use multiple button types together.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupMixed'
     />
     <ComponentExample
       title='Equal Width'
-      description='Groups can have their widths divided evenly'
-      examplePath='elements/Button/GroupVariations/ButtonGroupEqualWidthExample'
+      description='Groups can have their widths divided evenly.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupEqualWidth'
     />
     <ComponentExample
       title='Colored Group'
-      description='Groups can have a shared color'
-      examplePath='elements/Button/GroupVariations/ButtonGroupColoredExample'
+      description='Groups can have a shared color.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupColored'
     />
     <ComponentExample
       title='Basic Group'
-      description='A button group can be less pronounced'
-      examplePath='elements/Button/GroupVariations/ButtonGroupBasicExample'
+      description='A button group can be less pronounced.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupBasic'
     />
     <ComponentExample
-      examplePath='elements/Button/GroupVariations/ButtonGroupBasicColoredExample'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupBasicColored'
     />
     <ComponentExample
       title='Group Sizes'
-      description='Groups can have a shared size'
-      examplePath='elements/Button/GroupVariations/ButtonGroupSizeExample'
+      description='Groups can have a shared size.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupSize'
     />
     <ComponentExample
-      examplePath='elements/Button/GroupVariations/ButtonGroupIconSizeExample'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupIconSize'
     />
     <ComponentExample
-      examplePath='elements/Button/GroupVariations/ButtonGroupOrSizeExample'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupOrSize'
     />
   </ExampleSection>
 )

docs/app/Examples/elements/Button/Groups/ButtonGroupExample.js → docs/app/Examples/elements/Button/Groups/ButtonExampleGroup.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonButtonsExample = () => (
+const ButtonExampleGroup = () => (
   <Button.Group>
     <Button>One</Button>
     <Button>Two</Button>
     <Button>Three</Button>
   </Button.Group>
 )
 
-export default ButtonButtonsExample
+export default ButtonExampleGroup

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonIconButtonsExample = () => (
+const ButtonExampleGroupIcon = () => (
   <div>
     <Button.Group>
       <Button icon='align left' />
@@ -18,4 +18,4 @@ const ButtonIconButtonsExample = () => (
   </div>
 )
 
-export default ButtonIconButtonsExample
+export default ButtonExampleGroupIcon

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

@@ -6,13 +6,13 @@ const ButtonGroupsExamples = () => (
   <ExampleSection title='Groups'>
     <ComponentExample
       title='Group'
-      description='Buttons can exist together as a group'
-      examplePath='elements/Button/Groups/ButtonGroupExample'
+      description='Buttons can exist together as a group.'
+      examplePath='elements/Button/Groups/ButtonExampleGroup'
     />
     <ComponentExample
       title='Icon Group'
-      description='Button groups can show groups of icons'
-      examplePath='elements/Button/Groups/ButtonGroupIconExample'
+      description='Button groups can show groups of icons.'
+      examplePath='elements/Button/Groups/ButtonExampleGroupIcon'
     />
   </ExampleSection>
 )

docs/app/Examples/elements/Button/States/ButtonActiveExample.js → docs/app/Examples/elements/Button/States/ButtonExampleActive.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonActiveExample = () => (
+const ButtonExampleActive = () => (
   <Button active>Active</Button>
 )
 
-export default ButtonActiveExample
+export default ButtonExampleActive

docs/app/Examples/elements/Button/States/ButtonDisabledExample.js → docs/app/Examples/elements/Button/States/ButtonExampleDisabled.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonDisabledExample = () => (
+const ButtonExampleDisabled = () => (
   <Button disabled>Disabled</Button>
 )
 
-export default ButtonDisabledExample
+export default ButtonExampleDisabled

docs/app/Examples/elements/Button/States/ButtonLoadingExample.js → docs/app/Examples/elements/Button/States/ButtonExampleLoading.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'semantic-ui-react'
 
-const ButtonLoadingExample = () => (
+const ButtonExampleLoading = () => (
   <div>
     <Button loading>Loading</Button>
     <Button basic loading>Loading</Button>
@@ -10,4 +10,4 @@ const ButtonLoadingExample = () => (
   </div>
 )
 
-export default ButtonLoadingExample
+export default ButtonExampleLoading