From 2ed9db3416c4454678a269b09ddaa4bd59169cae Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Thu, 13 Oct 2016 23:20:19 -0400
Subject: [PATCH 1/3] docs(Input): refactor, add trailing . in description, fix
 imports, fix wrong props on Button and add required prop selection to
 Dropdown

---
 ...putDisabled.js => InputExampleDisabled.js} |  0
 .../{InputError.js => InputExampleError.js}   |  4 +-
 .../{InputFocus.js => InputExampleFocus.js}   |  4 +-
 ...tLoading.js => InputExampleLeftLoading.js} |  4 +-
 ...InputLoading.js => InputExampleLoading.js} |  4 +-
 .../Examples/elements/Input/States/index.js   | 27 +++---
 .../{InputInput.js => InputExampleInput.js}   |  4 +-
 .../Examples/elements/Input/Types/index.js    |  8 +-
 .../Variations/InputActionLabeledButton.js    | 11 ---
 .../{InputAction.js => InputExampleAction.js} |  4 +-
 ...pdown.js => InputExampleActionDropdown.js} |  6 +-
 ...ton.js => InputExampleActionIconButton.js} |  4 +-
 .../InputExampleActionLabeledButton.js        | 11 +++
 ...InputActions.js => InputExampleActions.js} |  4 +-
 .../{InputFluid.js => InputExampleFluid.js}   |  4 +-
 .../{InputIcon.js => InputExampleIcon.js}     |  4 +-
 ...tIconChild.js => InputExampleIconChild.js} |  4 +-
 ...nElement.js => InputExampleIconElement.js} |  4 +-
 ...osition.js => InputExampleIconPosition.js} |  4 +-
 ...tIconProps.js => InputExampleIconProps.js} |  4 +-
 ...putInverted.js => InputExampleInverted.js} |  4 +-
 ...InputLabeled.js => InputExampleLabeled.js} |  4 +-
 .../InputExampleLeftActionLabeledButton.js    | 13 +++
 ...ed.js => InputExampleLeftCornerLabeled.js} |  4 +-
 ...d.js => InputExampleRightCornerLabeled.js} |  4 +-
 ...Labeled.js => InputExampleRightLabeled.js} |  6 +-
 ...ic.js => InputExampleRightLabeledBasic.js} |  4 +-
 ...dTag.js => InputExampleRightLabeledTag.js} |  4 +-
 ...led.js => InputExampleRightLeftLabeled.js} |  4 +-
 .../{InputSize.js => InputExampleSize.js}     |  4 +-
 ...nsparent.js => InputExampleTransparent.js} |  4 +-
 .../InputLeftActionLabeledButton.js           | 13 ---
 .../elements/Input/Variations/index.js        | 84 +++++++++----------
 docs/app/Examples/elements/Input/index.js     |  4 +-
 34 files changed, 136 insertions(+), 139 deletions(-)
 rename docs/app/Examples/elements/Input/States/{InputDisabled.js => InputExampleDisabled.js} (100%)
 rename docs/app/Examples/elements/Input/States/{InputError.js => InputExampleError.js} (62%)
 rename docs/app/Examples/elements/Input/States/{InputFocus.js => InputExampleFocus.js} (62%)
 rename docs/app/Examples/elements/Input/States/{InputLeftLoading.js => InputExampleLeftLoading.js} (65%)
 rename docs/app/Examples/elements/Input/States/{InputLoading.js => InputExampleLoading.js} (64%)
 rename docs/app/Examples/elements/Input/Types/{InputInput.js => InputExampleInput.js} (61%)
 delete mode 100644 docs/app/Examples/elements/Input/Variations/InputActionLabeledButton.js
 rename docs/app/Examples/elements/Input/Variations/{InputAction.js => InputExampleAction.js} (64%)
 rename docs/app/Examples/elements/Input/Variations/{InputActionDropdown.js => InputExampleActionDropdown.js} (64%)
 rename docs/app/Examples/elements/Input/Variations/{InputActionIconButton.js => InputExampleActionIconButton.js} (60%)
 create mode 100644 docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js
 rename docs/app/Examples/elements/Input/Variations/{InputActions.js => InputExampleActions.js} (85%)
 rename docs/app/Examples/elements/Input/Variations/{InputFluid.js => InputExampleFluid.js} (65%)
 rename docs/app/Examples/elements/Input/Variations/{InputIcon.js => InputExampleIcon.js} (65%)
 rename docs/app/Examples/elements/Input/Variations/{InputIconChild.js => InputExampleIconChild.js} (81%)
 rename docs/app/Examples/elements/Input/Variations/{InputIconElement.js => InputExampleIconElement.js} (69%)
 rename docs/app/Examples/elements/Input/Variations/{InputIconPosition.js => InputExampleIconPosition.js} (64%)
 rename docs/app/Examples/elements/Input/Variations/{InputIconProps.js => InputExampleIconProps.js} (69%)
 rename docs/app/Examples/elements/Input/Variations/{InputInverted.js => InputExampleInverted.js} (68%)
 rename docs/app/Examples/elements/Input/Variations/{InputLabeled.js => InputExampleLabeled.js} (63%)
 create mode 100644 docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js
 rename docs/app/Examples/elements/Input/Variations/{InputLeftCornerLabeled.js => InputExampleLeftCornerLabeled.js} (66%)
 rename docs/app/Examples/elements/Input/Variations/{InputRightCornerLabeled.js => InputExampleRightCornerLabeled.js} (66%)
 rename docs/app/Examples/elements/Input/Variations/{InputRightLabeled.js => InputExampleRightLabeled.js} (64%)
 rename docs/app/Examples/elements/Input/Variations/{InputRightLabeledBasic.js => InputExampleRightLabeledBasic.js} (67%)
 rename docs/app/Examples/elements/Input/Variations/{InputRightLabeledTag.js => InputExampleRightLabeledTag.js} (72%)
 rename docs/app/Examples/elements/Input/Variations/{InputRightLeftLabeled.js => InputExampleRightLeftLabeled.js} (73%)
 rename docs/app/Examples/elements/Input/Variations/{InputSize.js => InputExampleSize.js} (90%)
 rename docs/app/Examples/elements/Input/Variations/{InputTransparent.js => InputExampleTransparent.js} (60%)
 delete mode 100644 docs/app/Examples/elements/Input/Variations/InputLeftActionLabeledButton.js

diff --git a/docs/app/Examples/elements/Input/States/InputDisabled.js b/docs/app/Examples/elements/Input/States/InputExampleDisabled.js
similarity index 100%
rename from docs/app/Examples/elements/Input/States/InputDisabled.js
rename to docs/app/Examples/elements/Input/States/InputExampleDisabled.js
diff --git a/docs/app/Examples/elements/Input/States/InputError.js b/docs/app/Examples/elements/Input/States/InputExampleError.js
similarity index 62%
rename from docs/app/Examples/elements/Input/States/InputError.js
rename to docs/app/Examples/elements/Input/States/InputExampleError.js
index f62c33a98b..e10e5eee37 100644
--- a/docs/app/Examples/elements/Input/States/InputError.js
+++ b/docs/app/Examples/elements/Input/States/InputExampleError.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputError = () => (
+const InputExampleError = () => (
   <Input error placeholder='Search...' />
 )
 
-export default InputError
+export default InputExampleError
diff --git a/docs/app/Examples/elements/Input/States/InputFocus.js b/docs/app/Examples/elements/Input/States/InputExampleFocus.js
similarity index 62%
rename from docs/app/Examples/elements/Input/States/InputFocus.js
rename to docs/app/Examples/elements/Input/States/InputExampleFocus.js
index 81fb376ffb..12c42d5f3a 100644
--- a/docs/app/Examples/elements/Input/States/InputFocus.js
+++ b/docs/app/Examples/elements/Input/States/InputExampleFocus.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputFocus = () => (
+const InputExampleFocus = () => (
   <Input focus placeholder='Search...' />
 )
 
-export default InputFocus
+export default InputExampleFocus
diff --git a/docs/app/Examples/elements/Input/States/InputLeftLoading.js b/docs/app/Examples/elements/Input/States/InputExampleLeftLoading.js
similarity index 65%
rename from docs/app/Examples/elements/Input/States/InputLeftLoading.js
rename to docs/app/Examples/elements/Input/States/InputExampleLeftLoading.js
index 271ff97442..a789523275 100644
--- a/docs/app/Examples/elements/Input/States/InputLeftLoading.js
+++ b/docs/app/Examples/elements/Input/States/InputExampleLeftLoading.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLeftLoading = () => (
+const InputExampleLeftLoading = () => (
   <Input loading icon='user' iconPosition='left' placeholder='Search...' />
 )
 
-export default InputLeftLoading
+export default InputExampleLeftLoading
diff --git a/docs/app/Examples/elements/Input/States/InputLoading.js b/docs/app/Examples/elements/Input/States/InputExampleLoading.js
similarity index 64%
rename from docs/app/Examples/elements/Input/States/InputLoading.js
rename to docs/app/Examples/elements/Input/States/InputExampleLoading.js
index ed77def080..f81a2d12bb 100644
--- a/docs/app/Examples/elements/Input/States/InputLoading.js
+++ b/docs/app/Examples/elements/Input/States/InputExampleLoading.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLoading = () => (
+const InputExampleLoading = () => (
   <Input loading icon='user' placeholder='Search...' />
 )
 
-export default InputLoading
+export default InputExampleLoading
diff --git a/docs/app/Examples/elements/Input/States/index.js b/docs/app/Examples/elements/Input/States/index.js
index de58c95f23..deefa61fac 100644
--- a/docs/app/Examples/elements/Input/States/index.js
+++ b/docs/app/Examples/elements/Input/States/index.js
@@ -1,37 +1,36 @@
 import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import { Message } from 'semantic-ui-react'
 
-import { Message } from 'src'
-
-const InputStates = () => (
+const InputStatesExamples = () => (
   <ExampleSection title='States'>
     <ComponentExample
       title='Focus'
-      description='An input field can show a user is currently interacting with it'
-      examplePath='elements/Input/States/InputFocus'
+      description='An input field can show a user is currently interacting with it.'
+      examplePath='elements/Input/States/InputExampleFocus'
     />
     <ComponentExample
       title='Loading'
-      description='An icon input field can show that it is currently loading data'
-      examplePath='elements/Input/States/InputLoading'
+      description='An icon input field can show that it is currently loading data.'
+      examplePath='elements/Input/States/InputExampleLoading'
     >
       <Message>
-        Loading inputs automatically modify the input's icon on loading state to show loading indication
+        Loading inputs automatically modify the input's icon on loading state to show loading indication.
       </Message>
     </ComponentExample>
-    <ComponentExample examplePath='elements/Input/States/InputLeftLoading' />
+    <ComponentExample examplePath='elements/Input/States/InputExampleLeftLoading' />
     <ComponentExample
       title='Disabled'
-      description='An input field can show that it is disabled'
-      examplePath='elements/Input/States/InputDisabled'
+      description='An input field can show that it is disabled.'
+      examplePath='elements/Input/States/InputExampleDisabled'
     />
     <ComponentExample
       title='Error'
-      description='An input field can show that the data contains errors'
-      examplePath='elements/Input/States/InputError'
+      description='An input field can show that the data contains errors.'
+      examplePath='elements/Input/States/InputExampleError'
     />
   </ExampleSection>
 )
 
-export default InputStates
+export default InputStatesExamples
diff --git a/docs/app/Examples/elements/Input/Types/InputInput.js b/docs/app/Examples/elements/Input/Types/InputExampleInput.js
similarity index 61%
rename from docs/app/Examples/elements/Input/Types/InputInput.js
rename to docs/app/Examples/elements/Input/Types/InputExampleInput.js
index 3712936fd7..8a3171cece 100644
--- a/docs/app/Examples/elements/Input/Types/InputInput.js
+++ b/docs/app/Examples/elements/Input/Types/InputExampleInput.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputInput = () => (
+const InputExampleInput = () => (
   <Input placeholder='Search...' />
 )
 
-export default InputInput
+export default InputExampleInput
diff --git a/docs/app/Examples/elements/Input/Types/index.js b/docs/app/Examples/elements/Input/Types/index.js
index 50f9b7eada..d0cf857536 100644
--- a/docs/app/Examples/elements/Input/Types/index.js
+++ b/docs/app/Examples/elements/Input/Types/index.js
@@ -2,14 +2,14 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const InputTypes = () => (
+const InputTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Input'
-      description='A standard input field'
-      examplePath='elements/Input/Types/InputInput'
+      description='A standard input field.'
+      examplePath='elements/Input/Types/InputExampleInput'
     />
   </ExampleSection>
 )
 
-export default InputTypes
+export default InputTypesExamples
diff --git a/docs/app/Examples/elements/Input/Variations/InputActionLabeledButton.js b/docs/app/Examples/elements/Input/Variations/InputActionLabeledButton.js
deleted file mode 100644
index c1c67c4ca5..0000000000
--- a/docs/app/Examples/elements/Input/Variations/InputActionLabeledButton.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Input } from 'semantic-ui-react'
-
-const InputActionLabeledButton = () => (
-  <Input
-    action={{ color: 'teal', labeled: 'right', icon: 'copy', content: 'Copy' }}
-    defaultValue='http://ww.short.url/c0opq'
-  />
-)
-
-export default InputActionLabeledButton
diff --git a/docs/app/Examples/elements/Input/Variations/InputAction.js b/docs/app/Examples/elements/Input/Variations/InputExampleAction.js
similarity index 64%
rename from docs/app/Examples/elements/Input/Variations/InputAction.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleAction.js
index d2df6e7d9d..4010af9737 100644
--- a/docs/app/Examples/elements/Input/Variations/InputAction.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleAction.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputAction = () => (
+const InputExampleAction = () => (
   <Input action='Search' placeholder='Search...' />
 )
 
-export default InputAction
+export default InputExampleAction
diff --git a/docs/app/Examples/elements/Input/Variations/InputActionDropdown.js b/docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js
similarity index 64%
rename from docs/app/Examples/elements/Input/Variations/InputActionDropdown.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js
index 244bbb4c3b..95ec0a4269 100644
--- a/docs/app/Examples/elements/Input/Variations/InputActionDropdown.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js
@@ -7,13 +7,13 @@ const options = [
   { text: 'Entire Site', value: 'site' },
 ]
 
-const InputActionDropdown = () => (
+const InputExampleActionDropdown = () => (
   <Input
-    action={<Dropdown basic floating options={options} defaultValue='page' />}
+    action={<Dropdown selection basic floating options={options} defaultValue='page' />}
     icon='search'
     iconPosition='left'
     placeholder='Search...'
   />
 )
 
-export default InputActionDropdown
+export default InputExampleActionDropdown
diff --git a/docs/app/Examples/elements/Input/Variations/InputActionIconButton.js b/docs/app/Examples/elements/Input/Variations/InputExampleActionIconButton.js
similarity index 60%
rename from docs/app/Examples/elements/Input/Variations/InputActionIconButton.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleActionIconButton.js
index c0778f1e18..0636138b85 100644
--- a/docs/app/Examples/elements/Input/Variations/InputActionIconButton.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleActionIconButton.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputActionIconButton = () => (
+const InputExampleActionIconButton = () => (
   <Input action={{ icon: 'search' }} placeholder='Search...' />
 )
 
-export default InputActionIconButton
+export default InputExampleActionIconButton
diff --git a/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js b/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js
new file mode 100644
index 0000000000..b22650d1ce
--- /dev/null
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Input } from 'semantic-ui-react'
+
+const InputExampleActionLabeledButton = () => (
+  <Input
+    action={{ color: 'teal', label: 'right', icon: 'copy', content: 'Copy' }}
+    defaultValue='http://ww.short.url/c0opq'
+  />
+)
+
+export default InputExampleActionLabeledButton
diff --git a/docs/app/Examples/elements/Input/Variations/InputActions.js b/docs/app/Examples/elements/Input/Variations/InputExampleActions.js
similarity index 85%
rename from docs/app/Examples/elements/Input/Variations/InputActions.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleActions.js
index 9d6c3f477a..441509d7e4 100644
--- a/docs/app/Examples/elements/Input/Variations/InputActions.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleActions.js
@@ -7,7 +7,7 @@ const options = [
   { text: 'Products', value: 'products' },
 ]
 
-const InputActions = () => (
+const InputExampleActions = () => (
   <Input action>
     <input type='text' placeholder='Search...' />
     <Select compact options={options} defaultValue='articles' />
@@ -15,4 +15,4 @@ const InputActions = () => (
   </Input>
 )
 
-export default InputActions
+export default InputExampleActions
diff --git a/docs/app/Examples/elements/Input/Variations/InputFluid.js b/docs/app/Examples/elements/Input/Variations/InputExampleFluid.js
similarity index 65%
rename from docs/app/Examples/elements/Input/Variations/InputFluid.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleFluid.js
index 1d7ccc842a..d67e6c9891 100644
--- a/docs/app/Examples/elements/Input/Variations/InputFluid.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleFluid.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputFluid = () => (
+const InputExampleFluid = () => (
   <Input fluid icon='search' placeholder='Search...' />
 )
 
-export default InputFluid
+export default InputExampleFluid
diff --git a/docs/app/Examples/elements/Input/Variations/InputIcon.js b/docs/app/Examples/elements/Input/Variations/InputExampleIcon.js
similarity index 65%
rename from docs/app/Examples/elements/Input/Variations/InputIcon.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleIcon.js
index 32c3f0e71d..c101025ea7 100644
--- a/docs/app/Examples/elements/Input/Variations/InputIcon.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleIcon.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputIcon = () => (
+const InputExampleIcon = () => (
   <Input icon='search' placeholder='Search...' />
 )
 
-export default InputIcon
+export default InputExampleIcon
diff --git a/docs/app/Examples/elements/Input/Variations/InputIconChild.js b/docs/app/Examples/elements/Input/Variations/InputExampleIconChild.js
similarity index 81%
rename from docs/app/Examples/elements/Input/Variations/InputIconChild.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleIconChild.js
index 2b817d69b9..d056cc25f8 100644
--- a/docs/app/Examples/elements/Input/Variations/InputIconChild.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleIconChild.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Input } from 'semantic-ui-react'
 
-const InputIconChild = () => (
+const InputExampleIconChild = () => (
   <div>
     <Input icon>
       <input placeholder='Search...' />
@@ -16,4 +16,4 @@ const InputIconChild = () => (
   </div>
 )
 
-export default InputIconChild
+export default InputExampleIconChild
diff --git a/docs/app/Examples/elements/Input/Variations/InputIconElement.js b/docs/app/Examples/elements/Input/Variations/InputExampleIconElement.js
similarity index 69%
rename from docs/app/Examples/elements/Input/Variations/InputIconElement.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleIconElement.js
index 48e9498d3b..d68c834e78 100644
--- a/docs/app/Examples/elements/Input/Variations/InputIconElement.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleIconElement.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Icon, Input } from 'semantic-ui-react'
 
-const InputIconElement = () => (
+const InputExampleIconElement = () => (
   <Input
     icon={<Icon name='search' inverted circular link />}
     placeholder='Search...'
   />
 )
 
-export default InputIconElement
+export default InputExampleIconElement
diff --git a/docs/app/Examples/elements/Input/Variations/InputIconPosition.js b/docs/app/Examples/elements/Input/Variations/InputExampleIconPosition.js
similarity index 64%
rename from docs/app/Examples/elements/Input/Variations/InputIconPosition.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleIconPosition.js
index 0621579bf7..860c448564 100644
--- a/docs/app/Examples/elements/Input/Variations/InputIconPosition.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleIconPosition.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputIconPosition = () => (
+const InputExampleIconPosition = () => (
   <Input icon='users' iconPosition='left' placeholder='Search users...' />
 )
 
-export default InputIconPosition
+export default InputExampleIconPosition
diff --git a/docs/app/Examples/elements/Input/Variations/InputIconProps.js b/docs/app/Examples/elements/Input/Variations/InputExampleIconProps.js
similarity index 69%
rename from docs/app/Examples/elements/Input/Variations/InputIconProps.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleIconProps.js
index e68156ba49..8e6101e138 100644
--- a/docs/app/Examples/elements/Input/Variations/InputIconProps.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleIconProps.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputIconProps = () => (
+const InputExampleIconProps = () => (
   <Input
     icon={{ name: 'search', circular: true, link: true }}
     placeholder='Search...'
   />
 )
 
-export default InputIconProps
+export default InputExampleIconProps
diff --git a/docs/app/Examples/elements/Input/Variations/InputInverted.js b/docs/app/Examples/elements/Input/Variations/InputExampleInverted.js
similarity index 68%
rename from docs/app/Examples/elements/Input/Variations/InputInverted.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleInverted.js
index 2772b3347d..c577a226de 100644
--- a/docs/app/Examples/elements/Input/Variations/InputInverted.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleInverted.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Segment, Input } from 'semantic-ui-react'
 
-const InputInverted = () => (
+const InputExampleInverted = () => (
   <Segment inverted>
     <Input inverted placeholder='Search...' />
   </Segment>
 )
 
-export default InputInverted
+export default InputExampleInverted
diff --git a/docs/app/Examples/elements/Input/Variations/InputLabeled.js b/docs/app/Examples/elements/Input/Variations/InputExampleLabeled.js
similarity index 63%
rename from docs/app/Examples/elements/Input/Variations/InputLabeled.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleLabeled.js
index 7c74ea2aa2..6d0ee8f99f 100644
--- a/docs/app/Examples/elements/Input/Variations/InputLabeled.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleLabeled.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLabeled = () => (
+const InputExampleLabeled = () => (
   <Input label='http://' placeholder='mysite.com' />
 )
 
-export default InputLabeled
+export default InputExampleLabeled
diff --git a/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js b/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js
new file mode 100644
index 0000000000..1420baaef8
--- /dev/null
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Input } from 'semantic-ui-react'
+
+const InputExampleLeftActionLabeledButton = () => (
+  <Input
+    action={{ color: 'teal', label: true, icon: 'cart', content: 'Checkout' }}
+    actionPosition='left'
+    placeholder='Search...'
+    defaultValue='52.03'
+  />
+)
+
+export default InputExampleLeftActionLabeledButton
diff --git a/docs/app/Examples/elements/Input/Variations/InputLeftCornerLabeled.js b/docs/app/Examples/elements/Input/Variations/InputExampleLeftCornerLabeled.js
similarity index 66%
rename from docs/app/Examples/elements/Input/Variations/InputLeftCornerLabeled.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleLeftCornerLabeled.js
index 6f62d2e486..949b10d2be 100644
--- a/docs/app/Examples/elements/Input/Variations/InputLeftCornerLabeled.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleLeftCornerLabeled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLeftCornerLabeled = () => (
+const InputExampleLeftCornerLabeled = () => (
   <Input
     label={{ icon: 'asterisk' }}
     labelPosition='left corner'
@@ -9,4 +9,4 @@ const InputLeftCornerLabeled = () => (
   />
 )
 
-export default InputLeftCornerLabeled
+export default InputExampleLeftCornerLabeled
diff --git a/docs/app/Examples/elements/Input/Variations/InputRightCornerLabeled.js b/docs/app/Examples/elements/Input/Variations/InputExampleRightCornerLabeled.js
similarity index 66%
rename from docs/app/Examples/elements/Input/Variations/InputRightCornerLabeled.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleRightCornerLabeled.js
index 31f917d707..f22544c3ff 100644
--- a/docs/app/Examples/elements/Input/Variations/InputRightCornerLabeled.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleRightCornerLabeled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLeftCornerLabeled = () => (
+const InputExampleLeftCornerLabeled = () => (
   <Input
     label={{ icon: 'asterisk' }}
     labelPosition='right corner'
@@ -9,4 +9,4 @@ const InputLeftCornerLabeled = () => (
   />
 )
 
-export default InputLeftCornerLabeled
+export default InputExampleLeftCornerLabeled
diff --git a/docs/app/Examples/elements/Input/Variations/InputRightLabeled.js b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js
similarity index 64%
rename from docs/app/Examples/elements/Input/Variations/InputRightLabeled.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js
index aacd704d0c..d760d4c2ae 100644
--- a/docs/app/Examples/elements/Input/Variations/InputRightLabeled.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js
@@ -7,12 +7,12 @@ const options = [
   { text: '.org', value: '.org' },
 ]
 
-const InputRightLabeled = () => (
+const InputExampleRightLabeled = () => (
   <Input
-    label={<Dropdown defaultValue='.com' options={options} />}
+    label={<Dropdown selection defaultValue='.com' options={options} />}
     labelPosition='right'
     placeholder='Find domain'
   />
 )
 
-export default InputRightLabeled
+export default InputExampleRightLabeled
diff --git a/docs/app/Examples/elements/Input/Variations/InputRightLabeledBasic.js b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledBasic.js
similarity index 67%
rename from docs/app/Examples/elements/Input/Variations/InputRightLabeledBasic.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledBasic.js
index 6fef3829d4..bbac82702d 100644
--- a/docs/app/Examples/elements/Input/Variations/InputRightLabeledBasic.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledBasic.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputRightLabeledBasic = () => (
+const InputExampleRightLabeledBasic = () => (
   <Input
     label={{ basic: true, content: 'kg' }}
     labelPosition='right'
@@ -9,4 +9,4 @@ const InputRightLabeledBasic = () => (
   />
 )
 
-export default InputRightLabeledBasic
+export default InputExampleRightLabeledBasic
diff --git a/docs/app/Examples/elements/Input/Variations/InputRightLabeledTag.js b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledTag.js
similarity index 72%
rename from docs/app/Examples/elements/Input/Variations/InputRightLabeledTag.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledTag.js
index a16aa11c73..4d23937005 100644
--- a/docs/app/Examples/elements/Input/Variations/InputRightLabeledTag.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledTag.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputRightLabeledTag = () => (
+const InputExampleRightLabeledTag = () => (
   <Input
     icon='tags'
     iconPosition='left'
@@ -11,4 +11,4 @@ const InputRightLabeledTag = () => (
   />
 )
 
-export default InputRightLabeledTag
+export default InputExampleRightLabeledTag
diff --git a/docs/app/Examples/elements/Input/Variations/InputRightLeftLabeled.js b/docs/app/Examples/elements/Input/Variations/InputExampleRightLeftLabeled.js
similarity index 73%
rename from docs/app/Examples/elements/Input/Variations/InputRightLeftLabeled.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleRightLeftLabeled.js
index 6dd196911e..85950d29f4 100644
--- a/docs/app/Examples/elements/Input/Variations/InputRightLeftLabeled.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleRightLeftLabeled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Input, Label } from 'semantic-ui-react'
 
-const InputRightLeftLabeled = () => (
+const InputExampleRightLeftLabeled = () => (
   <Input labelPosition='right' placeholder='mysite.com'>
     <Label basic>$</Label>
     <input type='text' placeholder='Amount' />
@@ -9,4 +9,4 @@ const InputRightLeftLabeled = () => (
   </Input>
 )
 
-export default InputRightLeftLabeled
+export default InputExampleRightLeftLabeled
diff --git a/docs/app/Examples/elements/Input/Variations/InputSize.js b/docs/app/Examples/elements/Input/Variations/InputExampleSize.js
similarity index 90%
rename from docs/app/Examples/elements/Input/Variations/InputSize.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleSize.js
index 6c24f3f414..4a0df2f526 100644
--- a/docs/app/Examples/elements/Input/Variations/InputSize.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputSize = () => (
+const InputExampleSize = () => (
   <div>
     <Input size='mini' icon='search' placeholder='Search...' />
     <br />
@@ -22,4 +22,4 @@ const InputSize = () => (
   </div>
 )
 
-export default InputSize
+export default InputExampleSize
diff --git a/docs/app/Examples/elements/Input/Variations/InputTransparent.js b/docs/app/Examples/elements/Input/Variations/InputExampleTransparent.js
similarity index 60%
rename from docs/app/Examples/elements/Input/Variations/InputTransparent.js
rename to docs/app/Examples/elements/Input/Variations/InputExampleTransparent.js
index 0c50175845..d81be3523d 100644
--- a/docs/app/Examples/elements/Input/Variations/InputTransparent.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleTransparent.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputTransparent = () => (
+const InputExampleTransparent = () => (
   <Input transparent placeholder='Search...' />
 )
 
-export default InputTransparent
+export default InputExampleTransparent
diff --git a/docs/app/Examples/elements/Input/Variations/InputLeftActionLabeledButton.js b/docs/app/Examples/elements/Input/Variations/InputLeftActionLabeledButton.js
deleted file mode 100644
index 3eddfdc8f8..0000000000
--- a/docs/app/Examples/elements/Input/Variations/InputLeftActionLabeledButton.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Input } from 'semantic-ui-react'
-
-const InputLeftActionLabeledButton = () => (
-  <Input
-    action={{ color: 'teal', labeled: true, icon: 'cart', content: 'Checkout' }}
-    actionPosition='left'
-    placeholder='Search...'
-    defaultValue='52.03'
-  />
-)
-
-export default InputLeftActionLabeledButton
diff --git a/docs/app/Examples/elements/Input/Variations/index.js b/docs/app/Examples/elements/Input/Variations/index.js
index f4f87c6a09..5e3578c33a 100644
--- a/docs/app/Examples/elements/Input/Variations/index.js
+++ b/docs/app/Examples/elements/Input/Variations/index.js
@@ -1,31 +1,30 @@
 import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import { Message } from 'semantic-ui-react'
 
-import { Message } from 'src'
-
-const InputVariations = () => (
+const InputVariationsExamples = () => (
   <ExampleSection title='Variations'>
     <ComponentExample
       title='Icon'
-      description='An input can be formatted with an icon'
-      examplePath='elements/Input/Variations/InputIcon'
+      description='An input can be formatted with an icon.'
+      examplePath='elements/Input/Variations/InputExampleIcon'
     />
     <ComponentExample
-      description='You can position the icon'
-      examplePath='elements/Input/Variations/InputIconPosition'
+      description='You can position the icon.'
+      examplePath='elements/Input/Variations/InputExampleIconPosition'
     />
     <ComponentExample
-      description='You can pass an Icon props object'
-      examplePath='elements/Input/Variations/InputIconProps'
+      description='You can pass an Icon props object.'
+      examplePath='elements/Input/Variations/InputExampleIconProps'
     />
     <ComponentExample
-      description='You can pass an Icon element'
-      examplePath='elements/Input/Variations/InputIconElement'
+      description='You can pass an Icon element.'
+      examplePath='elements/Input/Variations/InputExampleIconElement'
     />
     <ComponentExample
-      description='You can pass an Icon child'
-      examplePath='elements/Input/Variations/InputIconChild'
+      description='You can pass an Icon child.'
+      examplePath='elements/Input/Variations/InputExampleIconChild'
     >
       <Message warning>
         When using <code>children</code>, you must add your own <code>{'<input />'}</code>.
@@ -33,72 +32,71 @@ const InputVariations = () => (
     </ComponentExample>
     <ComponentExample
       title='Labeled'
-      description='An input can be formatted with a label'
-      examplePath='elements/Input/Variations/InputLabeled'
+      description='An input can be formatted with a label.'
+      examplePath='elements/Input/Variations/InputExampleLabeled'
     />
     <ComponentExample
-      description='You can pass any element'
-      examplePath='elements/Input/Variations/InputRightLabeled'
+      description='You can pass any element.'
+      examplePath='elements/Input/Variations/InputExampleRightLabeled'
     />
     <ComponentExample
-      description='You can pass a Label props object'
-      examplePath='elements/Input/Variations/InputRightLabeledBasic'
+      description='You can pass a Label props object.'
+      examplePath='elements/Input/Variations/InputExampleRightLabeledBasic'
     />
     <ComponentExample
-      description='You can pass a Label child'
-      examplePath='elements/Input/Variations/InputRightLeftLabeled'
+      description='You can pass a Label child.'
+      examplePath='elements/Input/Variations/InputExampleRightLeftLabeled'
     >
       <Message warning>
         Multiple Labels require <code>children</code>.
         When using <code>children</code>, you must add your own <code>{'<input />'}</code>.
       </Message>
     </ComponentExample>
-    <ComponentExample examplePath='elements/Input/Variations/InputRightLabeledTag' />
-    <ComponentExample examplePath='elements/Input/Variations/InputLeftCornerLabeled' />
-    <ComponentExample examplePath='elements/Input/Variations/InputRightCornerLabeled' />
+    <ComponentExample examplePath='elements/Input/Variations/InputExampleRightLabeledTag' />
+    <ComponentExample examplePath='elements/Input/Variations/InputExampleLeftCornerLabeled' />
+    <ComponentExample examplePath='elements/Input/Variations/InputExampleRightCornerLabeled' />
     <ComponentExample
       title='Action'
-      description='An input can be formatted to alert the user to an action they may perform'
-      examplePath='elements/Input/Variations/InputAction'
+      description='An input can be formatted to alert the user to an action they may perform.'
+      examplePath='elements/Input/Variations/InputExampleAction'
     />
     <ComponentExample
-      description='You can pass a Button props object'
-      examplePath='elements/Input/Variations/InputLeftActionLabeledButton'
+      description='You can pass a Button props object.'
+      examplePath='elements/Input/Variations/InputExampleLeftActionLabeledButton'
     />
     <ComponentExample
-      description='You can pass any element'
-      examplePath='elements/Input/Variations/InputActionDropdown'
+      description='You can pass any element.'
+      examplePath='elements/Input/Variations/InputExampleActionDropdown'
     />
-    <ComponentExample examplePath='elements/Input/Variations/InputActions'>
+    <ComponentExample examplePath='elements/Input/Variations/InputExampleActions'>
       <Message warning>
         Multiple Actions require <code>children</code>.
         When using <code>children</code>, you must add your own <code>{'<input />'}</code>.
       </Message>
     </ComponentExample>
-    <ComponentExample examplePath='elements/Input/Variations/InputActionLabeledButton' />
-    <ComponentExample examplePath='elements/Input/Variations/InputActionIconButton' />
+    <ComponentExample examplePath='elements/Input/Variations/InputExampleActionLabeledButton' />
+    <ComponentExample examplePath='elements/Input/Variations/InputExampleActionIconButton' />
     <ComponentExample
       title='Transparent'
-      description='A transparent input has no background'
-      examplePath='elements/Input/Variations/InputTransparent'
+      description='A transparent input has no background.'
+      examplePath='elements/Input/Variations/InputExampleTransparent'
     />
     <ComponentExample
       title='Inverted'
-      description='An input can be formatted to appear on dark backgrounds'
-      examplePath='elements/Input/Variations/InputInverted'
+      description='An input can be formatted to appear on dark backgrounds.'
+      examplePath='elements/Input/Variations/InputExampleInverted'
     />
     <ComponentExample
       title='Fluid'
-      description='An input can take on the size of its container'
-      examplePath='elements/Input/Variations/InputFluid'
+      description='An input can take on the size of its container.'
+      examplePath='elements/Input/Variations/InputExampleFluid'
     />
     <ComponentExample
       title='Size'
-      description='An input can vary in size'
-      examplePath='elements/Input/Variations/InputSize'
+      description='An input can vary in size.'
+      examplePath='elements/Input/Variations/InputExampleSize'
     />
-
   </ExampleSection>
 )
 
-export default InputVariations
+export default InputVariationsExamples
diff --git a/docs/app/Examples/elements/Input/index.js b/docs/app/Examples/elements/Input/index.js
index 2cc35d446a..f1137a85ee 100644
--- a/docs/app/Examples/elements/Input/index.js
+++ b/docs/app/Examples/elements/Input/index.js
@@ -3,7 +3,7 @@ import Types from './Types'
 import States from './States'
 import Variations from './Variations'
 
-const Inputs = () => (
+const InputExamples = () => (
   <div>
     <Types />
     <States />
@@ -11,4 +11,4 @@ const Inputs = () => (
   </div>
 )
 
-export default Inputs
+export default InputExamples

From c588185475986ab4c9de231331e669b2e8669d85 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Fri, 14 Oct 2016 20:36:12 -0400
Subject: [PATCH 2/3] docs(Input): fix the label position

---
 .../elements/Input/Variations/InputExampleActionDropdown.js     | 2 +-
 .../Input/Variations/InputExampleActionLabeledButton.js         | 2 +-
 .../Input/Variations/InputExampleLeftActionLabeledButton.js     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js b/docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js
index 95ec0a4269..aff91079bb 100644
--- a/docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js
@@ -9,7 +9,7 @@ const options = [
 
 const InputExampleActionDropdown = () => (
   <Input
-    action={<Dropdown selection basic floating options={options} defaultValue='page' />}
+    action={<Dropdown basic floating options={options} defaultValue='page' />}
     icon='search'
     iconPosition='left'
     placeholder='Search...'
diff --git a/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js b/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js
index b22650d1ce..40e968fd21 100644
--- a/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleActionLabeledButton.js
@@ -3,7 +3,7 @@ import { Input } from 'semantic-ui-react'
 
 const InputExampleActionLabeledButton = () => (
   <Input
-    action={{ color: 'teal', label: 'right', icon: 'copy', content: 'Copy' }}
+    action={{ color: 'teal', labelPosition: 'right', icon: 'copy', content: 'Copy' }}
     defaultValue='http://ww.short.url/c0opq'
   />
 )
diff --git a/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js b/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js
index 1420baaef8..11adb9cbbc 100644
--- a/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleLeftActionLabeledButton.js
@@ -3,7 +3,7 @@ import { Input } from 'semantic-ui-react'
 
 const InputExampleLeftActionLabeledButton = () => (
   <Input
-    action={{ color: 'teal', label: true, icon: 'cart', content: 'Checkout' }}
+    action={{ color: 'teal', labelPosition: 'left', icon: 'cart', content: 'Checkout' }}
     actionPosition='left'
     placeholder='Search...'
     defaultValue='52.03'

From 43986324d1ade78a4f5487f51b2dee584f869ae2 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Sat, 15 Oct 2016 08:25:41 -0400
Subject: [PATCH 3/3] docs(Input): remove selection prop in Dropdown

---
 .../elements/Input/Variations/InputExampleRightLabeled.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js
index d760d4c2ae..f1d7948f68 100644
--- a/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js
+++ b/docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js
@@ -9,7 +9,7 @@ const options = [
 
 const InputExampleRightLabeled = () => (
   <Input
-    label={<Dropdown selection defaultValue='.com' options={options} />}
+    label={<Dropdown defaultValue='.com' options={options} />}
     labelPosition='right'
     placeholder='Find domain'
   />