From b02bd89e2d6d693603314c54771507475f61a5e8 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Fri, 28 Oct 2016 22:16:12 -0400
Subject: [PATCH 1/5] style(Form): update docs to the latest standards

---
 ...ormFieldExample.js => FormExampleField.js} |  4 ++--
 .../collections/Form/Content/index.js         |  2 +-
 ...neExample.js => FormExampleInlineField.js} |  4 ++--
 .../collections/Form/FieldVariations/index.js |  2 +-
 ...le.js => FormExampleEvenlyDividedGroup.js} |  8 ++++++--
 .../collections/Form/GroupVariations/index.js |  9 +++++++--
 ...lExample.js => FormExampleFieldControl.js} |  4 ++--
 ...mple.js => FormExampleFieldControlHTML.js} |  4 ++--
 ...e.js => FormExampleSubComponentControl.js} |  4 ++--
 .../collections/Form/Shorthand/index.js       | 12 +++++------
 ...ormErrorExample.js => FormExampleError.js} |  4 ++--
 ...Example.js => FormExampleFieldDisabled.js} |  4 ++--
 ...rorExample.js => FormExampleFieldError.js} |  4 ++--
 .../Form/States/FormExampleFieldReadOnly.js   | 13 ++++++++++++
 ...oadingExample.js => FormExampleLoading.js} |  4 ++--
 ...uccessExample.js => FormExampleSuccess.js} |  4 ++--
 ...arningExample.js => FormExampleWarning.js} |  4 ++--
 .../Form/States/FormFieldReadOnlyExample.js   | 13 ------------
 .../Examples/collections/Form/States/index.js | 20 +++++++++----------
 ...{FormFormExample.js => FormExampleForm.js} |  4 ++--
 ...ubmitExample.js => FormExampleOnSubmit.js} |  4 ++--
 .../Examples/collections/Form/Types/index.js  |  6 +++---
 ...{FormSizeExample.js => FormExampleSize.js} |  4 ++--
 .../collections/Form/Variations/index.js      |  2 +-
 24 files changed, 76 insertions(+), 67 deletions(-)
 rename docs/app/Examples/collections/Form/Content/{FormFieldExample.js => FormExampleField.js} (72%)
 rename docs/app/Examples/collections/Form/FieldVariations/{FormFieldInlineExample.js => FormExampleInlineField.js} (73%)
 rename docs/app/Examples/collections/Form/GroupVariations/{FormGroupEvenlyDividedExample.js => FormExampleEvenlyDividedGroup.js} (64%)
 rename docs/app/Examples/collections/Form/Shorthand/{FormFieldControlExample.js => FormExampleFieldControl.js} (94%)
 rename docs/app/Examples/collections/Form/Shorthand/{FormFieldControlHTMLExample.js => FormExampleFieldControlHTML.js} (92%)
 rename docs/app/Examples/collections/Form/Shorthand/{FormSubComponentControlExample.js => FormExampleSubComponentControl.js} (92%)
 rename docs/app/Examples/collections/Form/States/{FormErrorExample.js => FormExampleError.js} (84%)
 rename docs/app/Examples/collections/Form/States/{FormFieldDisabledExample.js => FormExampleFieldDisabled.js} (78%)
 rename docs/app/Examples/collections/Form/States/{FormFieldErrorExample.js => FormExampleFieldError.js} (87%)
 create mode 100644 docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js
 rename docs/app/Examples/collections/Form/States/{FormLoadingExample.js => FormExampleLoading.js} (74%)
 rename docs/app/Examples/collections/Form/States/{FormSuccessExample.js => FormExampleSuccess.js} (82%)
 rename docs/app/Examples/collections/Form/States/{FormWarningExample.js => FormExampleWarning.js} (85%)
 delete mode 100644 docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js
 rename docs/app/Examples/collections/Form/Types/{FormFormExample.js => FormExampleForm.js} (88%)
 rename docs/app/Examples/collections/Form/Types/{FormOnSubmitExample.js => FormExampleOnSubmit.js} (97%)
 rename docs/app/Examples/collections/Form/Variations/{FormSizeExample.js => FormExampleSize.js} (89%)

diff --git a/docs/app/Examples/collections/Form/Content/FormFieldExample.js b/docs/app/Examples/collections/Form/Content/FormExampleField.js
similarity index 72%
rename from docs/app/Examples/collections/Form/Content/FormFieldExample.js
rename to docs/app/Examples/collections/Form/Content/FormExampleField.js
index 2dad58a2b0..77b1697b71 100644
--- a/docs/app/Examples/collections/Form/Content/FormFieldExample.js
+++ b/docs/app/Examples/collections/Form/Content/FormExampleField.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form } from 'semantic-ui-react'
 
-const FormFieldExample = () => (
+const FormExampleField = () => (
   <Form>
     <Form.Field>
       <label>User Input</label>
@@ -10,4 +10,4 @@ const FormFieldExample = () => (
   </Form>
 )
 
-export default FormFieldExample
+export default FormExampleField
diff --git a/docs/app/Examples/collections/Form/Content/index.js b/docs/app/Examples/collections/Form/Content/index.js
index 0313ae066f..93d3d529c8 100644
--- a/docs/app/Examples/collections/Form/Content/index.js
+++ b/docs/app/Examples/collections/Form/Content/index.js
@@ -7,7 +7,7 @@ const FormTypesExamples = () => (
     <ComponentExample
       title='Field'
       description='A field is a form element containing a label and an input.'
-      examplePath='collections/Form/Content/FormFieldExample'
+      examplePath='collections/Form/Content/FormExampleField'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js b/docs/app/Examples/collections/Form/FieldVariations/FormExampleInlineField.js
similarity index 73%
rename from docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
rename to docs/app/Examples/collections/Form/FieldVariations/FormExampleInlineField.js
index 9ca6a852f4..06ca6fc476 100644
--- a/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
+++ b/docs/app/Examples/collections/Form/FieldVariations/FormExampleInlineField.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form, Input } from 'semantic-ui-react'
 
-const FormFieldInlineExample = () => (
+const FormExampleInlineField = () => (
   <Form>
     <Form.Field inline>
       <label>First name</label>
@@ -10,4 +10,4 @@ const FormFieldInlineExample = () => (
   </Form>
 )
 
-export default FormFieldInlineExample
+export default FormExampleInlineField
diff --git a/docs/app/Examples/collections/Form/FieldVariations/index.js b/docs/app/Examples/collections/Form/FieldVariations/index.js
index ea694593d0..33108356d7 100644
--- a/docs/app/Examples/collections/Form/FieldVariations/index.js
+++ b/docs/app/Examples/collections/Form/FieldVariations/index.js
@@ -7,7 +7,7 @@ const FormFieldVariationsExamples = () => (
     <ComponentExample
       title='Inline'
       description='A field can have its label next to instead of above it.'
-      examplePath='collections/Form/FieldVariations/FormFieldInlineExample'
+      examplePath='collections/Form/FieldVariations/FormExampleInlineField'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js b/docs/app/Examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
similarity index 64%
rename from docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
rename to docs/app/Examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
index 88d470d9ca..5dbb9a5d0d 100644
--- a/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
+++ b/docs/app/Examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
@@ -1,13 +1,17 @@
 import React from 'react'
 import { Form, Input } from 'semantic-ui-react'
 
-const FormGroupEvenlyDividedExample = () => (
+const FormExampleEvenlyDividedGroup = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Field>
         <label>First name</label>
         <Input placeholder='First name' />
       </Form.Field>
+      <Form.Field>
+        <label>Middle name</label>
+        <Input placeholder='Middle name' />
+      </Form.Field>
       <Form.Field>
         <label>Last name</label>
         <Input placeholder='Last name' />
@@ -16,4 +20,4 @@ const FormGroupEvenlyDividedExample = () => (
   </Form>
 )
 
-export default FormGroupEvenlyDividedExample
+export default FormExampleEvenlyDividedGroup
diff --git a/docs/app/Examples/collections/Form/GroupVariations/index.js b/docs/app/Examples/collections/Form/GroupVariations/index.js
index 8fe51035cb..58ea86c962 100644
--- a/docs/app/Examples/collections/Form/GroupVariations/index.js
+++ b/docs/app/Examples/collections/Form/GroupVariations/index.js
@@ -6,8 +6,13 @@ const FormGroupVariationsExamples = () => (
   <ExampleSection title='Group Variations'>
     <ComponentExample
       title='Evenly Divided'
-      description='Groups can have their Field widths divided evenly.'
-      examplePath='collections/Form/GroupVariations/FormGroupEvenlyDividedExample'
+      description='Fields can have their widths divided evenly.'
+      examplePath='collections/Form/GroupVariations/FormExampleEvenlyDividedGroup'
+    />
+    <ComponentExample
+      title='Inline'
+      description='Multiple fields may be inline in a row.'
+      examplePath='collections/Form/GroupVariations/FormExampleInlineGroupedFields'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/Shorthand/FormFieldControlExample.js b/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControl.js
similarity index 94%
rename from docs/app/Examples/collections/Form/Shorthand/FormFieldControlExample.js
rename to docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControl.js
index 29f0cdcabb..2460492fb6 100644
--- a/docs/app/Examples/collections/Form/Shorthand/FormFieldControlExample.js
+++ b/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControl.js
@@ -6,7 +6,7 @@ const options = [
   { text: 'Female', value: 'female' },
 ]
 
-class FormFieldControlExample extends Component {
+class FormExampleFieldControl extends Component {
   state = {}
 
   handleChange = (e, { value }) => this.setState({ value })
@@ -34,4 +34,4 @@ class FormFieldControlExample extends Component {
   }
 }
 
-export default FormFieldControlExample
+export default FormExampleFieldControl
diff --git a/docs/app/Examples/collections/Form/Shorthand/FormFieldControlHTMLExample.js b/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
similarity index 92%
rename from docs/app/Examples/collections/Form/Shorthand/FormFieldControlHTMLExample.js
rename to docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
index 06fe4c4a24..96b5a7609f 100644
--- a/docs/app/Examples/collections/Form/Shorthand/FormFieldControlHTMLExample.js
+++ b/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form } from 'semantic-ui-react'
 
-const FormFieldHTMLControlExample = () => (
+const FormExampleFieldControlHTML = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Field label='An HTML <input>' control='input' />
@@ -27,4 +27,4 @@ const FormFieldHTMLControlExample = () => (
   </Form>
 )
 
-export default FormFieldHTMLControlExample
+export default FormExampleFieldControlHTML
diff --git a/docs/app/Examples/collections/Form/Shorthand/FormSubComponentControlExample.js b/docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js
similarity index 92%
rename from docs/app/Examples/collections/Form/Shorthand/FormSubComponentControlExample.js
rename to docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js
index 3fbe983bd2..5480889fa4 100644
--- a/docs/app/Examples/collections/Form/Shorthand/FormSubComponentControlExample.js
+++ b/docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js
@@ -6,7 +6,7 @@ const options = [
   { text: 'Female', value: 'female' },
 ]
 
-class FormSubComponentControlExample extends Component {
+class FormExampleSubComponentControl extends Component {
   state = {}
 
   handleChange = (e, { value }) => this.setState({ value })
@@ -34,4 +34,4 @@ class FormSubComponentControlExample extends Component {
   }
 }
 
-export default FormSubComponentControlExample
+export default FormExampleSubComponentControl
diff --git a/docs/app/Examples/collections/Form/Shorthand/index.js b/docs/app/Examples/collections/Form/Shorthand/index.js
index 618aad3e35..5176c0c2dc 100644
--- a/docs/app/Examples/collections/Form/Shorthand/index.js
+++ b/docs/app/Examples/collections/Form/Shorthand/index.js
@@ -45,27 +45,27 @@ const FormTypesExamples = () => (
     <ComponentExample
       title='Form Sub Components'
       description={[
-        'Render a Field containing a label and form control.',
+        'Render a field containing a label and form control.',
         'All form control components are available.',
       ].join(' ')}
-      examplePath='collections/Form/Shorthand/FormSubComponentControlExample'
+      examplePath='collections/Form/Shorthand/FormExampleSubComponentControl'
     >
       <Compare { ...subComponentComparison } />
     </ComponentExample>
     <ComponentExample
       title='Field with Custom Control'
       description={[
-        'Render a Field containing a label and custom form control.',
+        'Render a field containing a label and custom form control.',
         'Use any component form any library, or your own.',
       ].join(' ')}
-      examplePath='collections/Form/Shorthand/FormFieldControlExample'
+      examplePath='collections/Form/Shorthand/FormExampleFieldControl'
     >
       <Compare { ...componentPropComparison } />
     </ComponentExample>
     <ComponentExample
       title='Field with HTML Control'
-      description='The Field control prop also works with HTML tags'
-      examplePath='collections/Form/Shorthand/FormFieldControlHTMLExample'
+      description='The field control prop also works with HTML tags.'
+      examplePath='collections/Form/Shorthand/FormExampleFieldControlHTML'
     >
       <Compare { ...htmlComparison } />
     </ComponentExample>
diff --git a/docs/app/Examples/collections/Form/States/FormErrorExample.js b/docs/app/Examples/collections/Form/States/FormExampleError.js
similarity index 84%
rename from docs/app/Examples/collections/Form/States/FormErrorExample.js
rename to docs/app/Examples/collections/Form/States/FormExampleError.js
index 51e24aaae2..78f126b3ef 100644
--- a/docs/app/Examples/collections/Form/States/FormErrorExample.js
+++ b/docs/app/Examples/collections/Form/States/FormExampleError.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Form, Input, Message } from 'semantic-ui-react'
 
-const FormErrorExample = () => (
+const FormExampleError = () => (
   <Form error>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Message
@@ -13,4 +13,4 @@ const FormErrorExample = () => (
   </Form>
 )
 
-export default FormErrorExample
+export default FormExampleError
diff --git a/docs/app/Examples/collections/Form/States/FormFieldDisabledExample.js b/docs/app/Examples/collections/Form/States/FormExampleFieldDisabled.js
similarity index 78%
rename from docs/app/Examples/collections/Form/States/FormFieldDisabledExample.js
rename to docs/app/Examples/collections/Form/States/FormExampleFieldDisabled.js
index 9b8958f322..098f944821 100644
--- a/docs/app/Examples/collections/Form/States/FormFieldDisabledExample.js
+++ b/docs/app/Examples/collections/Form/States/FormExampleFieldDisabled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form, Input } from 'semantic-ui-react'
 
-const FormFieldDisabledExample = () => (
+const FormExampleFieldDisabled = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Input label='First name' placeholder='Disabled' disabled />
@@ -10,4 +10,4 @@ const FormFieldDisabledExample = () => (
   </Form>
 )
 
-export default FormFieldDisabledExample
+export default FormExampleFieldDisabled
diff --git a/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js b/docs/app/Examples/collections/Form/States/FormExampleFieldError.js
similarity index 87%
rename from docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
rename to docs/app/Examples/collections/Form/States/FormExampleFieldError.js
index 1377c0472e..a3b4c1f135 100644
--- a/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
+++ b/docs/app/Examples/collections/Form/States/FormExampleFieldError.js
@@ -6,7 +6,7 @@ const options = [
   { text: 'Female', value: 'female' },
 ]
 
-const FormFieldErrorExample = () => (
+const FormExampleFieldError = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Input label='First name' placeholder='First name' error />
@@ -17,4 +17,4 @@ const FormFieldErrorExample = () => (
   </Form>
 )
 
-export default FormFieldErrorExample
+export default FormExampleFieldError
diff --git a/docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js b/docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js
new file mode 100644
index 0000000000..4076497715
--- /dev/null
+++ b/docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Form, Input } from 'semantic-ui-react'
+
+const FormExampleFieldReadOnly = () => (
+  <Form>
+    <Form.Group widths='equal'>
+      <Form.Input label='First name' placeholder='Read only' readOnly />
+      <Form.Input label='Last name' placeholder='Read only' readOnly />
+    </Form.Group>
+  </Form>
+)
+
+export default FormExampleFieldReadOnly
diff --git a/docs/app/Examples/collections/Form/States/FormLoadingExample.js b/docs/app/Examples/collections/Form/States/FormExampleLoading.js
similarity index 74%
rename from docs/app/Examples/collections/Form/States/FormLoadingExample.js
rename to docs/app/Examples/collections/Form/States/FormExampleLoading.js
index 1e9fcd8c9e..cd234a9df2 100644
--- a/docs/app/Examples/collections/Form/States/FormLoadingExample.js
+++ b/docs/app/Examples/collections/Form/States/FormExampleLoading.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Button, Form, Input } from 'semantic-ui-react'
 
-const FormLoadingExample = () => (
+const FormExampleLoading = () => (
   <Form loading>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Button>Submit</Button>
   </Form>
 )
 
-export default FormLoadingExample
+export default FormExampleLoading
diff --git a/docs/app/Examples/collections/Form/States/FormSuccessExample.js b/docs/app/Examples/collections/Form/States/FormExampleSuccess.js
similarity index 82%
rename from docs/app/Examples/collections/Form/States/FormSuccessExample.js
rename to docs/app/Examples/collections/Form/States/FormExampleSuccess.js
index da75a52ef8..84e3912974 100644
--- a/docs/app/Examples/collections/Form/States/FormSuccessExample.js
+++ b/docs/app/Examples/collections/Form/States/FormExampleSuccess.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Form, Input, Message } from 'semantic-ui-react'
 
-const FormSuccessExample = () => (
+const FormExampleSuccess = () => (
   <Form success>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Message
@@ -13,4 +13,4 @@ const FormSuccessExample = () => (
   </Form>
 )
 
-export default FormSuccessExample
+export default FormExampleSuccess
diff --git a/docs/app/Examples/collections/Form/States/FormWarningExample.js b/docs/app/Examples/collections/Form/States/FormExampleWarning.js
similarity index 85%
rename from docs/app/Examples/collections/Form/States/FormWarningExample.js
rename to docs/app/Examples/collections/Form/States/FormExampleWarning.js
index 432d1b3c9e..541746fcd9 100644
--- a/docs/app/Examples/collections/Form/States/FormWarningExample.js
+++ b/docs/app/Examples/collections/Form/States/FormExampleWarning.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Form, Input, Message } from 'semantic-ui-react'
 
-const FormErrorExample = () => (
+const FormExampleWarning = () => (
   <Form warning>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Message
@@ -15,4 +15,4 @@ const FormErrorExample = () => (
   </Form>
 )
 
-export default FormErrorExample
+export default FormExampleWarning
diff --git a/docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js b/docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js
deleted file mode 100644
index d17e0b6eff..0000000000
--- a/docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Form, Input } from 'semantic-ui-react'
-
-const FormFieldDisabledExample = () => (
-  <Form>
-    <Form.Group widths='equal'>
-      <Form.Input label='First name' placeholder='Disabled' readOnly />
-      <Form.Input label='Last name' placeholder='Disabled' readOnly />
-    </Form.Group>
-  </Form>
-)
-
-export default FormFieldDisabledExample
diff --git a/docs/app/Examples/collections/Form/States/index.js b/docs/app/Examples/collections/Form/States/index.js
index de95abad33..4827b81470 100644
--- a/docs/app/Examples/collections/Form/States/index.js
+++ b/docs/app/Examples/collections/Form/States/index.js
@@ -7,37 +7,37 @@ const FormStatesExamples = () => (
     <ComponentExample
       title='Loading'
       description='If a form is in loading state, it will automatically show a loading indicator.'
-      examplePath='collections/Form/States/FormLoadingExample'
+      examplePath='collections/Form/States/FormExampleLoading'
     />
     <ComponentExample
       title='Success'
       description='If a form is in an success state, it will automatically show any success message blocks.'
-      examplePath='collections/Form/States/FormSuccessExample'
+      examplePath='collections/Form/States/FormExampleSuccess'
     />
     <ComponentExample
       title='Error'
       description='If a form is in an error state, it will automatically show any error message blocks.'
-      examplePath='collections/Form/States/FormErrorExample'
+      examplePath='collections/Form/States/FormExampleError'
     />
     <ComponentExample
       title='Warning'
       description='If a form is in warning state, it will automatically show any warning message block.'
-      examplePath='collections/Form/States/FormWarningExample'
+      examplePath='collections/Form/States/FormExampleWarning'
     />
     <ComponentExample
       title='Field Error'
-      description='Individual fields may display an error state'
-      examplePath='collections/Form/States/FormFieldErrorExample'
+      description='Individual fields may display an error state.'
+      examplePath='collections/Form/States/FormExampleFieldError'
     />
     <ComponentExample
       title='Disabled Field'
-      description='Individual fields may be disabled'
-      examplePath='collections/Form/States/FormFieldDisabledExample'
+      description='Individual fields may be disabled.'
+      examplePath='collections/Form/States/FormExampleFieldDisabled'
     />
     <ComponentExample
       title='Read-Only Field'
-      description='Individual fields may be read only'
-      examplePath='collections/Form/States/FormFieldReadOnlyExample'
+      description='Individual fields may be read only.'
+      examplePath='collections/Form/States/FormExampleFieldReadOnly'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/Types/FormFormExample.js b/docs/app/Examples/collections/Form/Types/FormExampleForm.js
similarity index 88%
rename from docs/app/Examples/collections/Form/Types/FormFormExample.js
rename to docs/app/Examples/collections/Form/Types/FormExampleForm.js
index 1351e4589e..3951c95e50 100644
--- a/docs/app/Examples/collections/Form/Types/FormFormExample.js
+++ b/docs/app/Examples/collections/Form/Types/FormExampleForm.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Checkbox, Form } from 'semantic-ui-react'
 
-const FormFormExample = () => (
+const FormExampleForm = () => (
   <Form>
     <Form.Field>
       <label>First Name</label>
@@ -18,4 +18,4 @@ const FormFormExample = () => (
   </Form>
 )
 
-export default FormFormExample
+export default FormExampleForm
diff --git a/docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js b/docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js
similarity index 97%
rename from docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js
rename to docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js
index f7bc273703..610e8815bf 100644
--- a/docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js
+++ b/docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js
@@ -20,7 +20,7 @@ const products = [
   { text: 'Socks', value: 'socks' },
 ]
 
-class FormOnSubmitExample extends Component {
+class FormExampleOnSubmit extends Component {
   state = { serializedForm: {} }
 
   handleChange = (e, { value }) => this.setState({ value })
@@ -69,4 +69,4 @@ class FormOnSubmitExample extends Component {
   }
 }
 
-export default FormOnSubmitExample
+export default FormExampleOnSubmit
diff --git a/docs/app/Examples/collections/Form/Types/index.js b/docs/app/Examples/collections/Form/Types/index.js
index 91849f61ad..c11f43dc81 100644
--- a/docs/app/Examples/collections/Form/Types/index.js
+++ b/docs/app/Examples/collections/Form/Types/index.js
@@ -9,7 +9,7 @@ const FormTypesExamples = () => (
     <ComponentExample
       title='Form'
       description='A form.'
-      examplePath='collections/Form/Types/FormFormExample'
+      examplePath='collections/Form/Types/FormExampleForm'
     >
       <Message info icon>
         <Icon name='pointing right' />
@@ -21,8 +21,8 @@ const FormTypesExamples = () => (
     </ComponentExample>
     <ComponentExample
       title='onSubmit'
-      description='A form calls back with the serialized data on submit'
-      examplePath='collections/Form/Types/FormOnSubmitExample'
+      description='A form calls back with the serialized data on submit.'
+      examplePath='collections/Form/Types/FormExampleOnSubmit'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/Variations/FormSizeExample.js b/docs/app/Examples/collections/Form/Variations/FormExampleSize.js
similarity index 89%
rename from docs/app/Examples/collections/Form/Variations/FormSizeExample.js
rename to docs/app/Examples/collections/Form/Variations/FormExampleSize.js
index b5cf23c688..d4fd43db36 100644
--- a/docs/app/Examples/collections/Form/Variations/FormSizeExample.js
+++ b/docs/app/Examples/collections/Form/Variations/FormExampleSize.js
@@ -3,7 +3,7 @@ import { Button, Divider, Form } from 'semantic-ui-react'
 
 const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
 
-const FormSizeExample = () => (
+const FormExampleSize = () => (
   <div>
     {sizes.map(size => (
       <Form size={size} key={size}>
@@ -17,4 +17,4 @@ const FormSizeExample = () => (
     ))}
   </div>
 )
-export default FormSizeExample
+export default FormExampleSize
diff --git a/docs/app/Examples/collections/Form/Variations/index.js b/docs/app/Examples/collections/Form/Variations/index.js
index a0e8ea7bfe..7f66999f86 100644
--- a/docs/app/Examples/collections/Form/Variations/index.js
+++ b/docs/app/Examples/collections/Form/Variations/index.js
@@ -7,7 +7,7 @@ const FormFormVariationsExamples = () => (
     <ComponentExample
       title='Size'
       description='A form can vary in size'
-      examplePath='collections/Form/Variations/FormSizeExample'
+      examplePath='collections/Form/Variations/FormExampleSize'
     />
   </ExampleSection>
 )

From 474370f30c7d977a5902ced4a43d288bc792b823 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Fri, 28 Oct 2016 22:16:47 -0400
Subject: [PATCH 2/5] style(Form): Add one example

---
 .../FormExampleInlineGroupedFields.js         | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js

diff --git a/docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js b/docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js
new file mode 100644
index 0000000000..133d01bb7b
--- /dev/null
+++ b/docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Form, Input } from 'semantic-ui-react'
+
+const FormExampleInlineGroupedFields = () => (
+  <Form>
+    <Form.Group inline>
+      <Form.Field>
+        <label>Phone Number</label>
+        <Input placeholder='(xxx)' />
+      </Form.Field>
+      <Form.Field>
+        <Input placeholder='xxx' />
+      </Form.Field>
+      <Form.Field>
+        <Input placeholder='xxxx' />
+      </Form.Field>
+    </Form.Group>
+  </Form>
+)
+
+export default FormExampleInlineGroupedFields

From dc2c4d0e701603e77d61656e43b6e40781c9fbda Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Sat, 29 Oct 2016 23:20:49 -0400
Subject: [PATCH 3/5] style(Table):  update docs to the latest standards

---
 .../{TableActive.js => TableExampleActive.js} |  4 +-
 ...bleDisabled.js => TableExampleDisabled.js} |  4 +-
 .../{TableError.js => TableExampleError.js}   |  4 +-
 ...ive.js => TableExamplePositiveNegative.js} |  4 +-
 ...TableWarning.js => TableExampleWarning.js} |  4 +-
 ...and.js => TableExampleWarningShorthand.js} |  4 +-
 .../collections/Table/States/index.js         | 24 ++---
 ...TableApprove.js => TableExampleApprove.js} |  4 +-
 ...ollapsing.js => TableExampleCollapsing.js} |  4 +-
 ...efinition.js => TableExampleDefinition.js} |  4 +-
 .../{TablePadded.js => TableExamplePadded.js} |  4 +-
 ...agination.js => TableExamplePagination.js} |  4 +-
 ...TableStriped.js => TableExampleStriped.js} |  4 +-
 ...tructured.js => TableExampleStructured.js} |  4 +-
 .../Examples/collections/Table/Types/index.js | 20 ++--
 .../{TableBasic.js => TableExampleBasic.js}   |  4 +-
 .../{TableCelled.js => TableExampleCelled.js} |  4 +-
 ...ollapsing.js => TableExampleCollapsing.js} |  4 +-
 ...gCell.js => TableExampleCollapsingCell.js} |  4 +-
 .../{TableColors.js => TableExampleColors.js} |  4 +-
 ...umnCount.js => TableExampleColumnCount.js} |  4 +-
 ...umnWidth.js => TableExampleColumnWidth.js} |  4 +-
 ...TableCompact.js => TableExampleCompact.js} |  4 +-
 .../{TableFixed.js => TableExampleFixed.js}   |  4 +-
 ...eFixedLine.js => TableExampleFixedLine.js} |  4 +-
 ...eFullWidth.js => TableExampleFullWidth.js} |  4 +-
 ...bleInverted.js => TableExampleInverted.js} |  4 +-
 ...olors.js => TableExampleInvertedColors.js} |  4 +-
 .../{TableLarge.js => TableExampleLarge.js}   |  4 +-
 .../{TablePadded.js => TableExamplePadded.js} |  4 +-
 ...electable.js => TableExampleSelectable.js} |  4 +-
 ...d.js => TableExampleSelectableInverted.js} |  4 +-
 ...ingleLine.js => TableExampleSingleLine.js} |  4 +-
 .../{TableSmall.js => TableExampleSmall.js}   |  4 +-
 ...eStackable.js => TableExampleStackable.js} |  4 +-
 ...TableStriped.js => TableExampleStriped.js} |  4 +-
 ...eTextAlign.js => TableExampleTextAlign.js} |  4 +-
 ...tackable.js => TableExampleUnstackable.js} |  4 +-
 ...lAlign.js => TableExampleVerticalAlign.js} |  4 +-
 ...eVeryBasic.js => TableExampleVeryBasic.js} |  4 +-
 ...yCompact.js => TableExampleVeryCompact.js} |  4 +-
 ...eryPadded.js => TableExampleVeryPadded.js} |  4 +-
 .../collections/Table/Variations/index.js     | 96 +++++++++----------
 docs/app/Examples/collections/Table/index.js  | 22 ++---
 44 files changed, 160 insertions(+), 162 deletions(-)
 rename docs/app/Examples/collections/Table/States/{TableActive.js => TableExampleActive.js} (94%)
 rename docs/app/Examples/collections/Table/States/{TableDisabled.js => TableExampleDisabled.js} (93%)
 rename docs/app/Examples/collections/Table/States/{TableError.js => TableExampleError.js} (94%)
 rename docs/app/Examples/collections/Table/States/{TablePositiveNegative.js => TableExamplePositiveNegative.js} (93%)
 rename docs/app/Examples/collections/Table/States/{TableWarning.js => TableExampleWarning.js} (94%)
 rename docs/app/Examples/collections/Table/States/{TableWarningShorthand.js => TableExampleWarningShorthand.js} (90%)
 rename docs/app/Examples/collections/Table/Types/{TableApprove.js => TableExampleApprove.js} (96%)
 rename docs/app/Examples/collections/Table/Types/{TableCollapsing.js => TableExampleCollapsing.js} (96%)
 rename docs/app/Examples/collections/Table/Types/{TableDefinition.js => TableExampleDefinition.js} (91%)
 rename docs/app/Examples/collections/Table/Types/{TablePadded.js => TableExamplePadded.js} (96%)
 rename docs/app/Examples/collections/Table/Types/{TablePagination.js => TableExamplePagination.js} (95%)
 rename docs/app/Examples/collections/Table/Types/{TableStriped.js => TableExampleStriped.js} (95%)
 rename docs/app/Examples/collections/Table/Types/{TableStructured.js => TableExampleStructured.js} (96%)
 rename docs/app/Examples/collections/Table/Variations/{TableBasic.js => TableExampleBasic.js} (93%)
 rename docs/app/Examples/collections/Table/Variations/{TableCelled.js => TableExampleCelled.js} (94%)
 rename docs/app/Examples/collections/Table/Variations/{TableCollapsing.js => TableExampleCollapsing.js} (93%)
 rename docs/app/Examples/collections/Table/Variations/{TableCollapsingCell.js => TableExampleCollapsingCell.js} (91%)
 rename docs/app/Examples/collections/Table/Variations/{TableColors.js => TableExampleColors.js} (93%)
 rename docs/app/Examples/collections/Table/Variations/{TableColumnCount.js => TableExampleColumnCount.js} (95%)
 rename docs/app/Examples/collections/Table/Variations/{TableColumnWidth.js => TableExampleColumnWidth.js} (92%)
 rename docs/app/Examples/collections/Table/Variations/{TableCompact.js => TableExampleCompact.js} (96%)
 rename docs/app/Examples/collections/Table/Variations/{TableFixed.js => TableExampleFixed.js} (95%)
 rename docs/app/Examples/collections/Table/Variations/{TableFixedLine.js => TableExampleFixedLine.js} (94%)
 rename docs/app/Examples/collections/Table/Variations/{TableFullWidth.js => TableExampleFullWidth.js} (96%)
 rename docs/app/Examples/collections/Table/Variations/{TableInverted.js => TableExampleInverted.js} (93%)
 rename docs/app/Examples/collections/Table/Variations/{TableInvertedColors.js => TableExampleInvertedColors.js} (91%)
 rename docs/app/Examples/collections/Table/Variations/{TableLarge.js => TableExampleLarge.js} (94%)
 rename docs/app/Examples/collections/Table/Variations/{TablePadded.js => TableExamplePadded.js} (92%)
 rename docs/app/Examples/collections/Table/Variations/{TableSelectable.js => TableExampleSelectable.js} (94%)
 rename docs/app/Examples/collections/Table/Variations/{TableSelectableInverted.js => TableExampleSelectableInverted.js} (91%)
 rename docs/app/Examples/collections/Table/Variations/{TableSingleLine.js => TableExampleSingleLine.js} (93%)
 rename docs/app/Examples/collections/Table/Variations/{TableSmall.js => TableExampleSmall.js} (94%)
 rename docs/app/Examples/collections/Table/Variations/{TableStackable.js => TableExampleStackable.js} (92%)
 rename docs/app/Examples/collections/Table/Variations/{TableStriped.js => TableExampleStriped.js} (97%)
 rename docs/app/Examples/collections/Table/Variations/{TableTextAlign.js => TableExampleTextAlign.js} (93%)
 rename docs/app/Examples/collections/Table/Variations/{TableUnstackable.js => TableExampleUnstackable.js} (92%)
 rename docs/app/Examples/collections/Table/Variations/{TableVerticalAlign.js => TableExampleVerticalAlign.js} (91%)
 rename docs/app/Examples/collections/Table/Variations/{TableVeryBasic.js => TableExampleVeryBasic.js} (92%)
 rename docs/app/Examples/collections/Table/Variations/{TableVeryCompact.js => TableExampleVeryCompact.js} (95%)
 rename docs/app/Examples/collections/Table/Variations/{TableVeryPadded.js => TableExampleVeryPadded.js} (92%)

diff --git a/docs/app/Examples/collections/Table/States/TableActive.js b/docs/app/Examples/collections/Table/States/TableExampleActive.js
similarity index 94%
rename from docs/app/Examples/collections/Table/States/TableActive.js
rename to docs/app/Examples/collections/Table/States/TableExampleActive.js
index fee74d51dd..12bcbbf581 100644
--- a/docs/app/Examples/collections/Table/States/TableActive.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleActive.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableActive = () => {
+const TableExampleActive = () => {
   return (
     <Table celled>
       <Table.Header>
@@ -38,4 +38,4 @@ const TableActive = () => {
   )
 }
 
-export default TableActive
+export default TableExampleActive
diff --git a/docs/app/Examples/collections/Table/States/TableDisabled.js b/docs/app/Examples/collections/Table/States/TableExampleDisabled.js
similarity index 93%
rename from docs/app/Examples/collections/Table/States/TableDisabled.js
rename to docs/app/Examples/collections/Table/States/TableExampleDisabled.js
index 267dd42160..c282d3b100 100644
--- a/docs/app/Examples/collections/Table/States/TableDisabled.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleDisabled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableDisabled = () => {
+const TableExampleDisabled = () => {
   return (
     <Table celled>
       <Table.Header>
@@ -38,4 +38,4 @@ const TableDisabled = () => {
   )
 }
 
-export default TableDisabled
+export default TableExampleDisabled
diff --git a/docs/app/Examples/collections/Table/States/TableError.js b/docs/app/Examples/collections/Table/States/TableExampleError.js
similarity index 94%
rename from docs/app/Examples/collections/Table/States/TableError.js
rename to docs/app/Examples/collections/Table/States/TableExampleError.js
index e3910284da..b19b256ee8 100644
--- a/docs/app/Examples/collections/Table/States/TableError.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleError.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableError = () => {
+const TableExampleError = () => {
   return (
     <Table celled>
       <Table.Header>
@@ -41,4 +41,4 @@ const TableError = () => {
   )
 }
 
-export default TableError
+export default TableExampleError
diff --git a/docs/app/Examples/collections/Table/States/TablePositiveNegative.js b/docs/app/Examples/collections/Table/States/TableExamplePositiveNegative.js
similarity index 93%
rename from docs/app/Examples/collections/Table/States/TablePositiveNegative.js
rename to docs/app/Examples/collections/Table/States/TableExamplePositiveNegative.js
index a00e12961e..f2a9095539 100644
--- a/docs/app/Examples/collections/Table/States/TablePositiveNegative.js
+++ b/docs/app/Examples/collections/Table/States/TableExamplePositiveNegative.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TablePositiveNegative = () => {
+const TableExamplePositiveNegative = () => {
   return (
     <Table celled>
       <Table.Header>
@@ -44,4 +44,4 @@ const TablePositiveNegative = () => {
   )
 }
 
-export default TablePositiveNegative
+export default TableExamplePositiveNegative
diff --git a/docs/app/Examples/collections/Table/States/TableWarning.js b/docs/app/Examples/collections/Table/States/TableExampleWarning.js
similarity index 94%
rename from docs/app/Examples/collections/Table/States/TableWarning.js
rename to docs/app/Examples/collections/Table/States/TableExampleWarning.js
index 7ec8c8ff53..49650cb15d 100644
--- a/docs/app/Examples/collections/Table/States/TableWarning.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleWarning.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableWarning = () => {
+const TableExampleWarning = () => {
   return (
     <Table celled>
       <Table.Header>
@@ -44,4 +44,4 @@ const TableWarning = () => {
   )
 }
 
-export default TableWarning
+export default TableExampleWarning
diff --git a/docs/app/Examples/collections/Table/States/TableWarningShorthand.js b/docs/app/Examples/collections/Table/States/TableExampleWarningShorthand.js
similarity index 90%
rename from docs/app/Examples/collections/Table/States/TableWarningShorthand.js
rename to docs/app/Examples/collections/Table/States/TableExampleWarningShorthand.js
index 55f488bcb4..97591add9f 100644
--- a/docs/app/Examples/collections/Table/States/TableWarningShorthand.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleWarningShorthand.js
@@ -27,10 +27,10 @@ const tableData = [
   { name: 'Jill', status: undefined, notes: undefined },
 ]
 
-const TableWarningShorthand = () => {
+const TableExampleWarningShorthand = () => {
   return (
     <Table celled headerRow={headerRow} renderBodyRow={renderBodyRow} tableData={tableData} />
   )
 }
 
-export default TableWarningShorthand
+export default TableExampleWarningShorthand
diff --git a/docs/app/Examples/collections/Table/States/index.js b/docs/app/Examples/collections/Table/States/index.js
index 2e33b1e288..d3c88013e6 100644
--- a/docs/app/Examples/collections/Table/States/index.js
+++ b/docs/app/Examples/collections/Table/States/index.js
@@ -8,33 +8,33 @@ const States = () => {
     <ExampleSection title='States'>
       <ComponentExample
         title='Positive / Negative'
-        description='A cell or row may let a user know whether a value is good or bad'
-        examplePath='collections/Table/States/TablePositiveNegative'
+        description='A cell or row may let a user know whether a value is good or bad.'
+        examplePath='collections/Table/States/TableExamplePositiveNegative'
       />
       <ComponentExample
         title='Error'
-        description='A cell or row may call attention to an error or a negative value'
-        examplePath='collections/Table/States/TableError'
+        description='A cell or row may call attention to an error or a negative value.'
+        examplePath='collections/Table/States/TableExampleError'
       />
       <ComponentExample
         title='Warning'
-        description='A cell or row may warn a user'
-        examplePath='collections/Table/States/TableWarning'
+        description='A cell or row may warn a user.'
+        examplePath='collections/Table/States/TableExampleWarning'
       />
       <ComponentExample
         title='Warning Shorthand'
-        description='Same as warning example but configured via shorthand'
-        examplePath='collections/Table/States/TableWarningShorthand'
+        description='Same as warning example but configured via shorthand.'
+        examplePath='collections/Table/States/TableExampleWarningShorthand'
       />
       <ComponentExample
         title='Active'
-        description='A cell or row can be active or selected by a user'
-        examplePath='collections/Table/States/TableActive'
+        description='A cell or row can be active or selected by a user.'
+        examplePath='collections/Table/States/TableExampleActive'
       />
       <ComponentExample
         title='Disabled'
-        description='A cell can be disabled'
-        examplePath='collections/Table/States/TableDisabled'
+        description='A cell can be disabled.'
+        examplePath='collections/Table/States/TableExampleDisabled'
       />
     </ExampleSection>
   )
diff --git a/docs/app/Examples/collections/Table/Types/TableApprove.js b/docs/app/Examples/collections/Table/Types/TableExampleApprove.js
similarity index 96%
rename from docs/app/Examples/collections/Table/Types/TableApprove.js
rename to docs/app/Examples/collections/Table/Types/TableExampleApprove.js
index ea31955534..3beb4a4c77 100644
--- a/docs/app/Examples/collections/Table/Types/TableApprove.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleApprove.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
 
-const TableApprove = () => {
+const TableExampleApprove = () => {
   return (
     <Table compact celled definition>
       <Table.Header>
@@ -60,4 +60,4 @@ const TableApprove = () => {
   )
 }
 
-export default TableApprove
+export default TableExampleApprove
diff --git a/docs/app/Examples/collections/Table/Types/TableCollapsing.js b/docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js
similarity index 96%
rename from docs/app/Examples/collections/Table/Types/TableCollapsing.js
rename to docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js
index 98d5ed958b..c2ca12dab3 100644
--- a/docs/app/Examples/collections/Table/Types/TableCollapsing.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Image, Table } from 'semantic-ui-react'
 
-const TableCollapsing = () => {
+const TableExampleCollapsing = () => {
   return (
     <Table basic='very' celled collapsing>
       <Table.Header>
@@ -73,4 +73,4 @@ const TableCollapsing = () => {
   )
 }
 
-export default TableCollapsing
+export default TableExampleCollapsing
diff --git a/docs/app/Examples/collections/Table/Types/TableDefinition.js b/docs/app/Examples/collections/Table/Types/TableExampleDefinition.js
similarity index 91%
rename from docs/app/Examples/collections/Table/Types/TableDefinition.js
rename to docs/app/Examples/collections/Table/Types/TableExampleDefinition.js
index 43cc369860..81eae3b25f 100644
--- a/docs/app/Examples/collections/Table/Types/TableDefinition.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleDefinition.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableDefinition = () => {
+const TableExampleDefinition = () => {
   return (
     <Table definition>
       <Table.Header>
@@ -28,4 +28,4 @@ const TableDefinition = () => {
   )
 }
 
-export default TableDefinition
+export default TableExampleDefinition
diff --git a/docs/app/Examples/collections/Table/Types/TablePadded.js b/docs/app/Examples/collections/Table/Types/TableExamplePadded.js
similarity index 96%
rename from docs/app/Examples/collections/Table/Types/TablePadded.js
rename to docs/app/Examples/collections/Table/Types/TableExamplePadded.js
index 9bcae66622..e160a0d3e5 100644
--- a/docs/app/Examples/collections/Table/Types/TablePadded.js
+++ b/docs/app/Examples/collections/Table/Types/TableExamplePadded.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Table, Rating } from 'semantic-ui-react'
 
-const TablePadded = () => {
+const TableExamplePadded = () => {
   return (
     <Table celled padded>
       <Table.Header>
@@ -54,4 +54,4 @@ const TablePadded = () => {
   )
 }
 
-export default TablePadded
+export default TableExamplePadded
diff --git a/docs/app/Examples/collections/Table/Types/TablePagination.js b/docs/app/Examples/collections/Table/Types/TableExamplePagination.js
similarity index 95%
rename from docs/app/Examples/collections/Table/Types/TablePagination.js
rename to docs/app/Examples/collections/Table/Types/TableExamplePagination.js
index 3007acaee2..2ce85c0f2d 100644
--- a/docs/app/Examples/collections/Table/Types/TablePagination.js
+++ b/docs/app/Examples/collections/Table/Types/TableExamplePagination.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Label, Menu, Table } from 'semantic-ui-react'
 
-const TablePagination = () => {
+const TableExamplePagination = () => {
   return (
     <Table celled>
       <Table.Header>
@@ -54,4 +54,4 @@ const TablePagination = () => {
   )
 }
 
-export default TablePagination
+export default TableExamplePagination
diff --git a/docs/app/Examples/collections/Table/Types/TableStriped.js b/docs/app/Examples/collections/Table/Types/TableExampleStriped.js
similarity index 95%
rename from docs/app/Examples/collections/Table/Types/TableStriped.js
rename to docs/app/Examples/collections/Table/Types/TableExampleStriped.js
index af89ec957d..ba84b4df35 100644
--- a/docs/app/Examples/collections/Table/Types/TableStriped.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleStriped.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableStriped = () => {
+const TableExampleStriped = () => {
   return (
     <Table celled striped>
       <Table.Header>
@@ -51,4 +51,4 @@ const TableStriped = () => {
   )
 }
 
-export default TableStriped
+export default TableExampleStriped
diff --git a/docs/app/Examples/collections/Table/Types/TableStructured.js b/docs/app/Examples/collections/Table/Types/TableExampleStructured.js
similarity index 96%
rename from docs/app/Examples/collections/Table/Types/TableStructured.js
rename to docs/app/Examples/collections/Table/Types/TableExampleStructured.js
index d78aedc223..d40e63fc21 100644
--- a/docs/app/Examples/collections/Table/Types/TableStructured.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleStructured.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableStructured = () => {
+const TableExampleStructured = () => {
   return (
     <Table celled structured>
       <Table.Header>
@@ -62,4 +62,4 @@ const TableStructured = () => {
   )
 }
 
-export default TableStructured
+export default TableExampleStructured
diff --git a/docs/app/Examples/collections/Table/Types/index.js b/docs/app/Examples/collections/Table/Types/index.js
index de5595e929..129e894395 100644
--- a/docs/app/Examples/collections/Table/Types/index.js
+++ b/docs/app/Examples/collections/Table/Types/index.js
@@ -8,24 +8,24 @@ const Types = () => {
     <ExampleSection title='Types'>
       <ComponentExample
         title='Types'
-        description='A standard table'
-        examplePath='collections/Table/Types/TablePagination'
+        description='A standard table.'
+        examplePath='collections/Table/Types/TableExamplePagination'
       />
-      <ComponentExample examplePath='collections/Table/Types/TablePadded' />
-      <ComponentExample examplePath='collections/Table/Types/TableCollapsing' />
-      <ComponentExample examplePath='collections/Table/Types/TableStriped' />
+      <ComponentExample examplePath='collections/Table/Types/TableExamplePadded' />
+      <ComponentExample examplePath='collections/Table/Types/TableExampleCollapsing' />
+      <ComponentExample examplePath='collections/Table/Types/TableExampleStriped' />
 
       <ComponentExample
         title='Definition'
-        description='A table may be formatted to emphasize a first column that defines a rows content'
-        examplePath='collections/Table/Types/TableDefinition'
+        description='A table may be formatted to emphasize a first column that defines a row content.'
+        examplePath='collections/Table/Types/TableExampleDefinition'
       />
-      <ComponentExample examplePath='collections/Table/Types/TableApprove' />
+      <ComponentExample examplePath='collections/Table/Types/TableExampleApprove' />
 
       <ComponentExample
         title='Structured'
-        description='A table can be formatted to display complex structured data'
-        examplePath='collections/Table/Types/TableStructured'
+        description='A table can be formatted to display complex structured data.'
+        examplePath='collections/Table/Types/TableExampleStructured'
       />
     </ExampleSection>
   )
diff --git a/docs/app/Examples/collections/Table/Variations/TableBasic.js b/docs/app/Examples/collections/Table/Variations/TableExampleBasic.js
similarity index 93%
rename from docs/app/Examples/collections/Table/Variations/TableBasic.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleBasic.js
index 01f9f61683..4a32ef7e64 100644
--- a/docs/app/Examples/collections/Table/Variations/TableBasic.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleBasic.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableBasic = () => {
+const TableExampleBasic = () => {
   return (
     <Table basic>
       <Table.Header>
@@ -33,4 +33,4 @@ const TableBasic = () => {
   )
 }
 
-export default TableBasic
+export default TableExampleBasic
diff --git a/docs/app/Examples/collections/Table/Variations/TableCelled.js b/docs/app/Examples/collections/Table/Variations/TableExampleCelled.js
similarity index 94%
rename from docs/app/Examples/collections/Table/Variations/TableCelled.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleCelled.js
index bfc2a5e86c..830e12e6ed 100644
--- a/docs/app/Examples/collections/Table/Variations/TableCelled.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCelled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableCelled = () => {
+const TableExampleCelled = () => {
   return (
     <Table celled>
       <Table.Header>
@@ -41,4 +41,4 @@ const TableCelled = () => {
   )
 }
 
-export default TableCelled
+export default TableExampleCelled
diff --git a/docs/app/Examples/collections/Table/Variations/TableCollapsing.js b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsing.js
similarity index 93%
rename from docs/app/Examples/collections/Table/Variations/TableCollapsing.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleCollapsing.js
index 65a0ac1407..eceaa2a313 100644
--- a/docs/app/Examples/collections/Table/Variations/TableCollapsing.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsing.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableCollapsing = () => {
+const TableExampleCollapsing = () => {
   return (
     <Table collapsing>
       <Table.Header>
@@ -41,4 +41,4 @@ const TableCollapsing = () => {
   )
 }
 
-export default TableCollapsing
+export default TableExampleCollapsing
diff --git a/docs/app/Examples/collections/Table/Variations/TableCollapsingCell.js b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsingCell.js
similarity index 91%
rename from docs/app/Examples/collections/Table/Variations/TableCollapsingCell.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleCollapsingCell.js
index 7a73808330..b676c07e06 100644
--- a/docs/app/Examples/collections/Table/Variations/TableCollapsingCell.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsingCell.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableCollapsingCell = () => {
+const TableExampleCollapsingCell = () => {
   return (
     <Table>
       <Table.Body>
@@ -34,4 +34,4 @@ const TableCollapsingCell = () => {
   )
 }
 
-export default TableCollapsingCell
+export default TableExampleCollapsingCell
diff --git a/docs/app/Examples/collections/Table/Variations/TableColors.js b/docs/app/Examples/collections/Table/Variations/TableExampleColors.js
similarity index 93%
rename from docs/app/Examples/collections/Table/Variations/TableColors.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleColors.js
index d7e718cc29..76a12b840e 100644
--- a/docs/app/Examples/collections/Table/Variations/TableColors.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleColors.js
@@ -5,7 +5,7 @@ const colors = [
   'red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black',
 ]
 
-const TableColors = () => (
+const TableExampleColors = () => (
   <div>
     {colors.map(color => (
       <Table color={color} key={color}>
@@ -33,4 +33,4 @@ const TableColors = () => (
     ))}
   </div>
 )
-export default TableColors
+export default TableExampleColors
diff --git a/docs/app/Examples/collections/Table/Variations/TableColumnCount.js b/docs/app/Examples/collections/Table/Variations/TableExampleColumnCount.js
similarity index 95%
rename from docs/app/Examples/collections/Table/Variations/TableColumnCount.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleColumnCount.js
index 288b7a7d67..20cbc75891 100644
--- a/docs/app/Examples/collections/Table/Variations/TableColumnCount.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleColumnCount.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableColumnCount = () => {
+const TableExampleColumnCount = () => {
   return (
     <Table columns={5}>
       <Table.Header>
@@ -51,4 +51,4 @@ const TableColumnCount = () => {
   )
 }
 
-export default TableColumnCount
+export default TableExampleColumnCount
diff --git a/docs/app/Examples/collections/Table/Variations/TableColumnWidth.js b/docs/app/Examples/collections/Table/Variations/TableExampleColumnWidth.js
similarity index 92%
rename from docs/app/Examples/collections/Table/Variations/TableColumnWidth.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleColumnWidth.js
index 6eec54f147..979c0602eb 100644
--- a/docs/app/Examples/collections/Table/Variations/TableColumnWidth.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleColumnWidth.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableColumnWidth = () => {
+const TableExampleColumnWidth = () => {
   return (
     <Table>
       <Table.Header>
@@ -36,4 +36,4 @@ const TableColumnWidth = () => {
   )
 }
 
-export default TableColumnWidth
+export default TableExampleColumnWidth
diff --git a/docs/app/Examples/collections/Table/Variations/TableCompact.js b/docs/app/Examples/collections/Table/Variations/TableExampleCompact.js
similarity index 96%
rename from docs/app/Examples/collections/Table/Variations/TableCompact.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleCompact.js
index 91dfd7d05f..7f83734fb2 100644
--- a/docs/app/Examples/collections/Table/Variations/TableCompact.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCompact.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableCompact = () => {
+const TableExampleCompact = () => {
   return (
     <Table compact>
       <Table.Header>
@@ -58,4 +58,4 @@ const TableCompact = () => {
   )
 }
 
-export default TableCompact
+export default TableExampleCompact
diff --git a/docs/app/Examples/collections/Table/Variations/TableFixed.js b/docs/app/Examples/collections/Table/Variations/TableExampleFixed.js
similarity index 95%
rename from docs/app/Examples/collections/Table/Variations/TableFixed.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleFixed.js
index f8ed47570e..f739fdb954 100644
--- a/docs/app/Examples/collections/Table/Variations/TableFixed.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleFixed.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableFixed = () => {
+const TableExampleFixed = () => {
   return (
     <Table fixed>
       <Table.Header>
@@ -39,4 +39,4 @@ const TableFixed = () => {
   )
 }
 
-export default TableFixed
+export default TableExampleFixed
diff --git a/docs/app/Examples/collections/Table/Variations/TableFixedLine.js b/docs/app/Examples/collections/Table/Variations/TableExampleFixedLine.js
similarity index 94%
rename from docs/app/Examples/collections/Table/Variations/TableFixedLine.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleFixedLine.js
index f457d77438..c499f8988c 100644
--- a/docs/app/Examples/collections/Table/Variations/TableFixedLine.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleFixedLine.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableFixedLine = () => {
+const TableExampleFixedLine = () => {
   return (
     <Table celled fixed singleLine>
       <Table.Header>
@@ -43,4 +43,4 @@ const TableFixedLine = () => {
   )
 }
 
-export default TableFixedLine
+export default TableExampleFixedLine
diff --git a/docs/app/Examples/collections/Table/Variations/TableFullWidth.js b/docs/app/Examples/collections/Table/Variations/TableExampleFullWidth.js
similarity index 96%
rename from docs/app/Examples/collections/Table/Variations/TableFullWidth.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleFullWidth.js
index 82ae1d19b9..03d024263a 100644
--- a/docs/app/Examples/collections/Table/Variations/TableFullWidth.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleFullWidth.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
 
-const TableFullWidth = () => {
+const TableExampleFullWidth = () => {
   return (
     <Table celled compact definition>
       <Table.Header fullWidth>
@@ -60,4 +60,4 @@ const TableFullWidth = () => {
   )
 }
 
-export default TableFullWidth
+export default TableExampleFullWidth
diff --git a/docs/app/Examples/collections/Table/Variations/TableInverted.js b/docs/app/Examples/collections/Table/Variations/TableExampleInverted.js
similarity index 93%
rename from docs/app/Examples/collections/Table/Variations/TableInverted.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleInverted.js
index 97cdfb2f90..9637099cbd 100644
--- a/docs/app/Examples/collections/Table/Variations/TableInverted.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleInverted.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableInverted = () => {
+const TableExampleInverted = () => {
   return (
     <Table inverted>
       <Table.Header>
@@ -41,4 +41,4 @@ const TableInverted = () => {
   )
 }
 
-export default TableInverted
+export default TableExampleInverted
diff --git a/docs/app/Examples/collections/Table/Variations/TableInvertedColors.js b/docs/app/Examples/collections/Table/Variations/TableExampleInvertedColors.js
similarity index 91%
rename from docs/app/Examples/collections/Table/Variations/TableInvertedColors.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleInvertedColors.js
index cf7954af50..c0a7611227 100644
--- a/docs/app/Examples/collections/Table/Variations/TableInvertedColors.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleInvertedColors.js
@@ -5,7 +5,7 @@ const colors = [
   'red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black',
 ]
 
-const TableInvertedColors = () => (
+const TableExampleInvertedColors = () => (
   <div>
     {colors.map(color => (
       <Table color={color} key={color} inverted>
@@ -34,4 +34,4 @@ const TableInvertedColors = () => (
   </div>
 )
 
-export default TableInvertedColors
+export default TableExampleInvertedColors
diff --git a/docs/app/Examples/collections/Table/Variations/TableLarge.js b/docs/app/Examples/collections/Table/Variations/TableExampleLarge.js
similarity index 94%
rename from docs/app/Examples/collections/Table/Variations/TableLarge.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleLarge.js
index 5ff2c49fcc..b6782f514d 100644
--- a/docs/app/Examples/collections/Table/Variations/TableLarge.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleLarge.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableLarge = () => {
+const TableExampleLarge = () => {
   return (
     <Table size='large'>
       <Table.Header>
@@ -41,4 +41,4 @@ const TableLarge = () => {
   )
 }
 
-export default TableLarge
+export default TableExampleLarge
diff --git a/docs/app/Examples/collections/Table/Variations/TablePadded.js b/docs/app/Examples/collections/Table/Variations/TableExamplePadded.js
similarity index 92%
rename from docs/app/Examples/collections/Table/Variations/TablePadded.js
rename to docs/app/Examples/collections/Table/Variations/TableExamplePadded.js
index 92352097b3..0d32051a2a 100644
--- a/docs/app/Examples/collections/Table/Variations/TablePadded.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExamplePadded.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TablePadded = () => {
+const TableExamplePadded = () => {
   return (
     <Table padded>
       <Table.Header>
@@ -30,4 +30,4 @@ const TablePadded = () => {
   )
 }
 
-export default TablePadded
+export default TableExamplePadded
diff --git a/docs/app/Examples/collections/Table/Variations/TableSelectable.js b/docs/app/Examples/collections/Table/Variations/TableExampleSelectable.js
similarity index 94%
rename from docs/app/Examples/collections/Table/Variations/TableSelectable.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleSelectable.js
index ceff864a37..6ecfde58cd 100644
--- a/docs/app/Examples/collections/Table/Variations/TableSelectable.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSelectable.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableSelectable = () => {
+const TableExampleSelectable = () => {
   return (
     <Table celled selectable>
       <Table.Header>
@@ -48,4 +48,4 @@ const TableSelectable = () => {
   )
 }
 
-export default TableSelectable
+export default TableExampleSelectable
diff --git a/docs/app/Examples/collections/Table/Variations/TableSelectableInverted.js b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableInverted.js
similarity index 91%
rename from docs/app/Examples/collections/Table/Variations/TableSelectableInverted.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleSelectableInverted.js
index aa25acb84f..f1768d7e93 100644
--- a/docs/app/Examples/collections/Table/Variations/TableSelectableInverted.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableInverted.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableSelectableInverted = () => {
+const TableExampleSelectableInverted = () => {
   return (
     <Table celled inverted selectable>
       <Table.Header>
@@ -33,4 +33,4 @@ const TableSelectableInverted = () => {
   )
 }
 
-export default TableSelectableInverted
+export default TableExampleSelectableInverted
diff --git a/docs/app/Examples/collections/Table/Variations/TableSingleLine.js b/docs/app/Examples/collections/Table/Variations/TableExampleSingleLine.js
similarity index 93%
rename from docs/app/Examples/collections/Table/Variations/TableSingleLine.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleSingleLine.js
index 2127bcbc92..d1c2d306cc 100644
--- a/docs/app/Examples/collections/Table/Variations/TableSingleLine.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSingleLine.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableSingleLine = () => {
+const TableExampleSingleLine = () => {
   return (
     <Table singleLine>
       <Table.Header>
@@ -37,4 +37,4 @@ const TableSingleLine = () => {
   )
 }
 
-export default TableSingleLine
+export default TableExampleSingleLine
diff --git a/docs/app/Examples/collections/Table/Variations/TableSmall.js b/docs/app/Examples/collections/Table/Variations/TableExampleSmall.js
similarity index 94%
rename from docs/app/Examples/collections/Table/Variations/TableSmall.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleSmall.js
index 48720f1b4e..56d507e433 100644
--- a/docs/app/Examples/collections/Table/Variations/TableSmall.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSmall.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableSmall = () => {
+const TableExampleSmall = () => {
   return (
     <Table size='small'>
       <Table.Header>
@@ -41,4 +41,4 @@ const TableSmall = () => {
   )
 }
 
-export default TableSmall
+export default TableExampleSmall
diff --git a/docs/app/Examples/collections/Table/Variations/TableStackable.js b/docs/app/Examples/collections/Table/Variations/TableExampleStackable.js
similarity index 92%
rename from docs/app/Examples/collections/Table/Variations/TableStackable.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleStackable.js
index 8bdfc055c0..24ec6dc323 100644
--- a/docs/app/Examples/collections/Table/Variations/TableStackable.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleStackable.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableStackable = () => {
+const TableExampleStackable = () => {
   return (
     <Table stackable>
       <Table.Header>
@@ -33,4 +33,4 @@ const TableStackable = () => {
   )
 }
 
-export default TableStackable
+export default TableExampleStackable
diff --git a/docs/app/Examples/collections/Table/Variations/TableStriped.js b/docs/app/Examples/collections/Table/Variations/TableExampleStriped.js
similarity index 97%
rename from docs/app/Examples/collections/Table/Variations/TableStriped.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleStriped.js
index a00903b611..2752ce0d80 100644
--- a/docs/app/Examples/collections/Table/Variations/TableStriped.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleStriped.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableStriped = () => {
+const TableExampleStriped = () => {
   return (
     <Table striped>
       <Table.Header>
@@ -67,4 +67,4 @@ const TableStriped = () => {
   )
 }
 
-export default TableStriped
+export default TableExampleStriped
diff --git a/docs/app/Examples/collections/Table/Variations/TableTextAlign.js b/docs/app/Examples/collections/Table/Variations/TableExampleTextAlign.js
similarity index 93%
rename from docs/app/Examples/collections/Table/Variations/TableTextAlign.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleTextAlign.js
index 895ec28bf8..6a8fce25a3 100644
--- a/docs/app/Examples/collections/Table/Variations/TableTextAlign.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleTextAlign.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableTextAlign = () => {
+const TableExampleTextAlign = () => {
   return (
     <Table striped>
       <Table.Header>
@@ -33,4 +33,4 @@ const TableTextAlign = () => {
   )
 }
 
-export default TableTextAlign
+export default TableExampleTextAlign
diff --git a/docs/app/Examples/collections/Table/Variations/TableUnstackable.js b/docs/app/Examples/collections/Table/Variations/TableExampleUnstackable.js
similarity index 92%
rename from docs/app/Examples/collections/Table/Variations/TableUnstackable.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleUnstackable.js
index 122ba986c4..04e76d74e4 100644
--- a/docs/app/Examples/collections/Table/Variations/TableUnstackable.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleUnstackable.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableUnstackable = () => {
+const TableExampleUnstackable = () => {
   return (
     <Table unstackable>
       <Table.Header>
@@ -33,4 +33,4 @@ const TableUnstackable = () => {
   )
 }
 
-export default TableUnstackable
+export default TableExampleUnstackable
diff --git a/docs/app/Examples/collections/Table/Variations/TableVerticalAlign.js b/docs/app/Examples/collections/Table/Variations/TableExampleVerticalAlign.js
similarity index 91%
rename from docs/app/Examples/collections/Table/Variations/TableVerticalAlign.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleVerticalAlign.js
index 59b10b4224..a665ee59f5 100644
--- a/docs/app/Examples/collections/Table/Variations/TableVerticalAlign.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVerticalAlign.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableVerticalAlign = () => {
+const TableExampleVerticalAlign = () => {
   return (
     <Table striped>
       <Table.Header>
@@ -36,4 +36,4 @@ const TableVerticalAlign = () => {
   )
 }
 
-export default TableVerticalAlign
+export default TableExampleVerticalAlign
diff --git a/docs/app/Examples/collections/Table/Variations/TableVeryBasic.js b/docs/app/Examples/collections/Table/Variations/TableExampleVeryBasic.js
similarity index 92%
rename from docs/app/Examples/collections/Table/Variations/TableVeryBasic.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleVeryBasic.js
index e685ce920e..5fe7c9eec9 100644
--- a/docs/app/Examples/collections/Table/Variations/TableVeryBasic.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVeryBasic.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableVeryBasic = () => {
+const TableExampleVeryBasic = () => {
   return (
     <Table basic='very'>
       <Table.Header>
@@ -33,4 +33,4 @@ const TableVeryBasic = () => {
   )
 }
 
-export default TableVeryBasic
+export default TableExampleVeryBasic
diff --git a/docs/app/Examples/collections/Table/Variations/TableVeryCompact.js b/docs/app/Examples/collections/Table/Variations/TableExampleVeryCompact.js
similarity index 95%
rename from docs/app/Examples/collections/Table/Variations/TableVeryCompact.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleVeryCompact.js
index 72babbdeb0..bb302ec82e 100644
--- a/docs/app/Examples/collections/Table/Variations/TableVeryCompact.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVeryCompact.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableVeryCompact = () => {
+const TableExampleVeryCompact = () => {
   return (
     <Table compact='very'>
       <Table.Header>
@@ -58,4 +58,4 @@ const TableVeryCompact = () => {
   )
 }
 
-export default TableVeryCompact
+export default TableExampleVeryCompact
diff --git a/docs/app/Examples/collections/Table/Variations/TableVeryPadded.js b/docs/app/Examples/collections/Table/Variations/TableExampleVeryPadded.js
similarity index 92%
rename from docs/app/Examples/collections/Table/Variations/TableVeryPadded.js
rename to docs/app/Examples/collections/Table/Variations/TableExampleVeryPadded.js
index bd423a3b04..3da85db7ba 100644
--- a/docs/app/Examples/collections/Table/Variations/TableVeryPadded.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVeryPadded.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableVeryPadded = () => {
+const TableExampleVeryPadded = () => {
   return (
     <Table padded='very'>
       <Table.Header>
@@ -30,4 +30,4 @@ const TableVeryPadded = () => {
   )
 }
 
-export default TableVeryPadded
+export default TableExampleVeryPadded
diff --git a/docs/app/Examples/collections/Table/Variations/index.js b/docs/app/Examples/collections/Table/Variations/index.js
index 74a0646e71..67d71778f0 100644
--- a/docs/app/Examples/collections/Table/Variations/index.js
+++ b/docs/app/Examples/collections/Table/Variations/index.js
@@ -8,13 +8,13 @@ const Variations = () => {
     <ExampleSection title='Variations'>
       <ComponentExample
         title='Single Line'
-        description='A table can specify that its cell contents should remain on a single line, and not wrap'
-        examplePath='collections/Table/Variations/TableSingleLine'
+        description='A table can specify that its cell contents should remain on a single line, and not wrap.'
+        examplePath='collections/Table/Variations/TableExampleSingleLine'
       />
 
       <ComponentExample
         title='Attached'
-        description='A table can be attached to other content on a page'
+        description='A table can be attached to other content on a page.'
         examplePath='collections/Table/Variations/TableExampleAttached'
       />
 
@@ -23,128 +23,128 @@ const Variations = () => {
         description={
         [
           'A table can use fixed a special faster form of table rendering that does not resize table cells based on',
-          'content',
+          'content.',
         ].join(' ')
         }
-        examplePath='collections/Table/Variations/TableFixed'
+        examplePath='collections/Table/Variations/TableExampleFixed'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableFixedLine'>
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleFixedLine'>
         <Message info>
           Fixed "single line" tables will automatically ensure content that does not fit in a single line will receive
-          "..." ellipsis
+          "..." ellipsis.
         </Message>
       </ComponentExample>
 
       <ComponentExample
         title='Stacking'
-        description='A table can specify how it stacks table content responsively'
-        examplePath='collections/Table/Variations/TableUnstackable'
+        description='A table can specify how it stacks table content responsively.'
+        examplePath='collections/Table/Variations/TableExampleUnstackable'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableStackable' />
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleStackable' />
 
       <ComponentExample
         title='Selectable Row'
-        description='A table can have its rows appear selectable'
-        examplePath='collections/Table/Variations/TableSelectable'
+        description='A table can have its rows appear selectable.'
+        examplePath='collections/Table/Variations/TableExampleSelectable'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableSelectableInverted' />
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleSelectableInverted' />
 
       <ComponentExample
         title='Vertical Alignment'
-        description='A table header, row or cell can adjust its vertical alignment'
-        examplePath='collections/Table/Variations/TableVerticalAlign'
+        description='A table header, row or cell can adjust its vertical alignment.'
+        examplePath='collections/Table/Variations/TableExampleVerticalAlign'
       />
 
       <ComponentExample
         title='Text Alignment'
-        description='A table header, row, or cell can adjust its text alignment'
-        examplePath='collections/Table/Variations/TableTextAlign'
+        description='A table header, row, or cell can adjust its text alignment.'
+        examplePath='collections/Table/Variations/TableExampleTextAlign'
       />
 
       <ComponentExample
         title='Striped'
-        description='A table can stripe alternate rows of content with a darker color to increase contrast'
-        examplePath='collections/Table/Variations/TableStriped'
+        description='A table can stripe alternate rows of content with a darker color to increase contrast.'
+        examplePath='collections/Table/Variations/TableExampleStriped'
       />
 
       <ComponentExample
         title='Celled'
-        description='A table may be divided each row into separate cells'
-        examplePath='collections/Table/Variations/TableCelled'
+        description='A table may be divided each row into separate cells.'
+        examplePath='collections/Table/Variations/TableExampleCelled'
       />
 
       <ComponentExample
         title='Basic'
-        description='A table can reduce its complexity to increase readability'
-        examplePath='collections/Table/Variations/TableBasic'
+        description='A table can reduce its complexity to increase readability.'
+        examplePath='collections/Table/Variations/TableExampleBasic'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableVeryBasic' />
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryBasic' />
 
       <ComponentExample
         title='Collapsing Cell'
-        description='A cell can be collapsing so that it only uses as much space as required'
-        examplePath='collections/Table/Variations/TableCollapsingCell'
+        description='A cell can be collapsing so that it only uses as much space as required.'
+        examplePath='collections/Table/Variations/TableExampleCollapsingCell'
       />
 
       <ComponentExample
         title='Column Count'
-        description='A table can specify its column count to divide its content evenly'
-        examplePath='collections/Table/Variations/TableColumnCount'
+        description='A table can specify its column count to divide its content evenly.'
+        examplePath='collections/Table/Variations/TableExampleColumnCount'
       />
 
       <ComponentExample
         title='Column Width'
-        description='A table can specify the width of individual columns independently'
-        examplePath='collections/Table/Variations/TableColumnWidth'
+        description='A table can specify the width of individual columns independently.'
+        examplePath='collections/Table/Variations/TableExampleColumnWidth'
       />
 
       <ComponentExample
         title='Collapsing'
-        description='A table can be collapsing, taking up only as much space as its rows'
-        examplePath='collections/Table/Variations/TableCollapsing'
+        description='A table can be collapsing, taking up only as much space as its rows.'
+        examplePath='collections/Table/Variations/TableExampleCollapsing'
       />
 
       <ComponentExample
         title='Colored'
-        description='A table can be given a color to distinguish it from other table'
-        examplePath='collections/Table/Variations/TableColors'
+        description='A table can be given a color to distinguish it from other table.'
+        examplePath='collections/Table/Variations/TableExampleColors'
       />
 
       <ComponentExample
         title='Inverted'
-        description="A table's colors can be inverted"
-        examplePath='collections/Table/Variations/TableInverted'
+        description="A table's colors can be inverted."
+        examplePath='collections/Table/Variations/TableExampleInverted'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableInvertedColors' />
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleInvertedColors' />
 
       <ComponentExample
         title='Full-Width Header / Footer'
         description={
-          'A definition table can have a full width header or footer, filling in the gap left by the first column'
+          'A definition table can have a full width header or footer, filling in the gap left by the first column.'
         }
-        examplePath='collections/Table/Variations/TableFullWidth'
+        examplePath='collections/Table/Variations/TableExampleFullWidth'
       />
 
       <ComponentExample
         title='Padded'
-        description='A table may sometimes need to be more padded for legibility'
-        examplePath='collections/Table/Variations/TablePadded'
+        description='A table may sometimes need to be more padded for legibility.'
+        examplePath='collections/Table/Variations/TableExamplePadded'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableVeryPadded' />
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryPadded' />
 
       <ComponentExample
         title='Compact'
-        description='A table may sometimes need to be more compact to make more rows visible at a time'
-        examplePath='collections/Table/Variations/TableCompact'
+        description='A table may sometimes need to be more compact to make more rows visible at a time.'
+        examplePath='collections/Table/Variations/TableExampleCompact'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableVeryCompact' />
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryCompact' />
 
       <ComponentExample
         title='Size'
-        description='A table can also be small or large'
-        examplePath='collections/Table/Variations/TableSmall'
+        description='A table can also be small or large.'
+        examplePath='collections/Table/Variations/TableExampleSmall'
       />
-      <ComponentExample examplePath='collections/Table/Variations/TableLarge' />
+      <ComponentExample examplePath='collections/Table/Variations/TableExampleLarge' />
     </ExampleSection>
   )
 }
diff --git a/docs/app/Examples/collections/Table/index.js b/docs/app/Examples/collections/Table/index.js
index 32c632d8dd..989d243d75 100644
--- a/docs/app/Examples/collections/Table/index.js
+++ b/docs/app/Examples/collections/Table/index.js
@@ -1,17 +1,15 @@
-import React, { Component } from 'react'
+import React from 'react'
 
 import States from './States'
 import Types from './Types'
 import Variations from './Variations'
 
-export default class TableExamples extends Component {
-  render() {
-    return (
-      <div>
-        <Types />
-        <States />
-        <Variations />
-      </div>
-    )
-  }
-}
+const TableExamples = () => (
+  <div>
+    <Types />
+    <States />
+    <Variations />
+  </div>
+)
+
+export default TableExamples

From bc63a4620bcac7b25e92d43d75cf88df920da0d9 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Sat, 29 Oct 2016 23:25:20 -0400
Subject: [PATCH 4/5] Revert "style(Form): Add one example"

This reverts commit 474370f30c7d977a5902ced4a43d288bc792b823.
---
 .../FormExampleInlineGroupedFields.js         | 21 -------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js

diff --git a/docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js b/docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js
deleted file mode 100644
index 133d01bb7b..0000000000
--- a/docs/app/Examples/collections/Form/GroupVariations/FormExampleInlineGroupedFields.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { Form, Input } from 'semantic-ui-react'
-
-const FormExampleInlineGroupedFields = () => (
-  <Form>
-    <Form.Group inline>
-      <Form.Field>
-        <label>Phone Number</label>
-        <Input placeholder='(xxx)' />
-      </Form.Field>
-      <Form.Field>
-        <Input placeholder='xxx' />
-      </Form.Field>
-      <Form.Field>
-        <Input placeholder='xxxx' />
-      </Form.Field>
-    </Form.Group>
-  </Form>
-)
-
-export default FormExampleInlineGroupedFields

From 2b45aafded8bb0c554590b023e26c61e43a400db Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Sat, 29 Oct 2016 23:25:51 -0400
Subject: [PATCH 5/5] Revert "style(Form): update docs to the latest standards"

This reverts commit b02bd89e2d6d693603314c54771507475f61a5e8.
---
 ...ormExampleField.js => FormFieldExample.js} |  4 ++--
 .../collections/Form/Content/index.js         |  2 +-
 ...lineField.js => FormFieldInlineExample.js} |  4 ++--
 .../collections/Form/FieldVariations/index.js |  2 +-
 ...up.js => FormGroupEvenlyDividedExample.js} |  8 ++------
 .../collections/Form/GroupVariations/index.js |  9 ++-------
 ...dControl.js => FormFieldControlExample.js} |  4 ++--
 ...HTML.js => FormFieldControlHTMLExample.js} |  4 ++--
 ...l.js => FormSubComponentControlExample.js} |  4 ++--
 .../collections/Form/Shorthand/index.js       | 12 +++++------
 ...ormExampleError.js => FormErrorExample.js} |  4 ++--
 .../Form/States/FormExampleFieldReadOnly.js   | 13 ------------
 ...isabled.js => FormFieldDisabledExample.js} |  4 ++--
 ...FieldError.js => FormFieldErrorExample.js} |  4 ++--
 .../Form/States/FormFieldReadOnlyExample.js   | 13 ++++++++++++
 ...xampleLoading.js => FormLoadingExample.js} |  4 ++--
 ...xampleSuccess.js => FormSuccessExample.js} |  4 ++--
 ...xampleWarning.js => FormWarningExample.js} |  4 ++--
 .../Examples/collections/Form/States/index.js | 20 +++++++++----------
 ...{FormExampleForm.js => FormFormExample.js} |  4 ++--
 ...mpleOnSubmit.js => FormOnSubmitExample.js} |  4 ++--
 .../Examples/collections/Form/Types/index.js  |  6 +++---
 ...{FormExampleSize.js => FormSizeExample.js} |  4 ++--
 .../collections/Form/Variations/index.js      |  2 +-
 24 files changed, 67 insertions(+), 76 deletions(-)
 rename docs/app/Examples/collections/Form/Content/{FormExampleField.js => FormFieldExample.js} (72%)
 rename docs/app/Examples/collections/Form/FieldVariations/{FormExampleInlineField.js => FormFieldInlineExample.js} (73%)
 rename docs/app/Examples/collections/Form/GroupVariations/{FormExampleEvenlyDividedGroup.js => FormGroupEvenlyDividedExample.js} (64%)
 rename docs/app/Examples/collections/Form/Shorthand/{FormExampleFieldControl.js => FormFieldControlExample.js} (94%)
 rename docs/app/Examples/collections/Form/Shorthand/{FormExampleFieldControlHTML.js => FormFieldControlHTMLExample.js} (92%)
 rename docs/app/Examples/collections/Form/Shorthand/{FormExampleSubComponentControl.js => FormSubComponentControlExample.js} (92%)
 rename docs/app/Examples/collections/Form/States/{FormExampleError.js => FormErrorExample.js} (84%)
 delete mode 100644 docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js
 rename docs/app/Examples/collections/Form/States/{FormExampleFieldDisabled.js => FormFieldDisabledExample.js} (78%)
 rename docs/app/Examples/collections/Form/States/{FormExampleFieldError.js => FormFieldErrorExample.js} (87%)
 create mode 100644 docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js
 rename docs/app/Examples/collections/Form/States/{FormExampleLoading.js => FormLoadingExample.js} (74%)
 rename docs/app/Examples/collections/Form/States/{FormExampleSuccess.js => FormSuccessExample.js} (82%)
 rename docs/app/Examples/collections/Form/States/{FormExampleWarning.js => FormWarningExample.js} (85%)
 rename docs/app/Examples/collections/Form/Types/{FormExampleForm.js => FormFormExample.js} (88%)
 rename docs/app/Examples/collections/Form/Types/{FormExampleOnSubmit.js => FormOnSubmitExample.js} (97%)
 rename docs/app/Examples/collections/Form/Variations/{FormExampleSize.js => FormSizeExample.js} (89%)

diff --git a/docs/app/Examples/collections/Form/Content/FormExampleField.js b/docs/app/Examples/collections/Form/Content/FormFieldExample.js
similarity index 72%
rename from docs/app/Examples/collections/Form/Content/FormExampleField.js
rename to docs/app/Examples/collections/Form/Content/FormFieldExample.js
index 77b1697b71..2dad58a2b0 100644
--- a/docs/app/Examples/collections/Form/Content/FormExampleField.js
+++ b/docs/app/Examples/collections/Form/Content/FormFieldExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form } from 'semantic-ui-react'
 
-const FormExampleField = () => (
+const FormFieldExample = () => (
   <Form>
     <Form.Field>
       <label>User Input</label>
@@ -10,4 +10,4 @@ const FormExampleField = () => (
   </Form>
 )
 
-export default FormExampleField
+export default FormFieldExample
diff --git a/docs/app/Examples/collections/Form/Content/index.js b/docs/app/Examples/collections/Form/Content/index.js
index 93d3d529c8..0313ae066f 100644
--- a/docs/app/Examples/collections/Form/Content/index.js
+++ b/docs/app/Examples/collections/Form/Content/index.js
@@ -7,7 +7,7 @@ const FormTypesExamples = () => (
     <ComponentExample
       title='Field'
       description='A field is a form element containing a label and an input.'
-      examplePath='collections/Form/Content/FormExampleField'
+      examplePath='collections/Form/Content/FormFieldExample'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/FieldVariations/FormExampleInlineField.js b/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
similarity index 73%
rename from docs/app/Examples/collections/Form/FieldVariations/FormExampleInlineField.js
rename to docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
index 06ca6fc476..9ca6a852f4 100644
--- a/docs/app/Examples/collections/Form/FieldVariations/FormExampleInlineField.js
+++ b/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form, Input } from 'semantic-ui-react'
 
-const FormExampleInlineField = () => (
+const FormFieldInlineExample = () => (
   <Form>
     <Form.Field inline>
       <label>First name</label>
@@ -10,4 +10,4 @@ const FormExampleInlineField = () => (
   </Form>
 )
 
-export default FormExampleInlineField
+export default FormFieldInlineExample
diff --git a/docs/app/Examples/collections/Form/FieldVariations/index.js b/docs/app/Examples/collections/Form/FieldVariations/index.js
index 33108356d7..ea694593d0 100644
--- a/docs/app/Examples/collections/Form/FieldVariations/index.js
+++ b/docs/app/Examples/collections/Form/FieldVariations/index.js
@@ -7,7 +7,7 @@ const FormFieldVariationsExamples = () => (
     <ComponentExample
       title='Inline'
       description='A field can have its label next to instead of above it.'
-      examplePath='collections/Form/FieldVariations/FormExampleInlineField'
+      examplePath='collections/Form/FieldVariations/FormFieldInlineExample'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js b/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
similarity index 64%
rename from docs/app/Examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
rename to docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
index 5dbb9a5d0d..88d470d9ca 100644
--- a/docs/app/Examples/collections/Form/GroupVariations/FormExampleEvenlyDividedGroup.js
+++ b/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
@@ -1,17 +1,13 @@
 import React from 'react'
 import { Form, Input } from 'semantic-ui-react'
 
-const FormExampleEvenlyDividedGroup = () => (
+const FormGroupEvenlyDividedExample = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Field>
         <label>First name</label>
         <Input placeholder='First name' />
       </Form.Field>
-      <Form.Field>
-        <label>Middle name</label>
-        <Input placeholder='Middle name' />
-      </Form.Field>
       <Form.Field>
         <label>Last name</label>
         <Input placeholder='Last name' />
@@ -20,4 +16,4 @@ const FormExampleEvenlyDividedGroup = () => (
   </Form>
 )
 
-export default FormExampleEvenlyDividedGroup
+export default FormGroupEvenlyDividedExample
diff --git a/docs/app/Examples/collections/Form/GroupVariations/index.js b/docs/app/Examples/collections/Form/GroupVariations/index.js
index 58ea86c962..8fe51035cb 100644
--- a/docs/app/Examples/collections/Form/GroupVariations/index.js
+++ b/docs/app/Examples/collections/Form/GroupVariations/index.js
@@ -6,13 +6,8 @@ const FormGroupVariationsExamples = () => (
   <ExampleSection title='Group Variations'>
     <ComponentExample
       title='Evenly Divided'
-      description='Fields can have their widths divided evenly.'
-      examplePath='collections/Form/GroupVariations/FormExampleEvenlyDividedGroup'
-    />
-    <ComponentExample
-      title='Inline'
-      description='Multiple fields may be inline in a row.'
-      examplePath='collections/Form/GroupVariations/FormExampleInlineGroupedFields'
+      description='Groups can have their Field widths divided evenly.'
+      examplePath='collections/Form/GroupVariations/FormGroupEvenlyDividedExample'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControl.js b/docs/app/Examples/collections/Form/Shorthand/FormFieldControlExample.js
similarity index 94%
rename from docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControl.js
rename to docs/app/Examples/collections/Form/Shorthand/FormFieldControlExample.js
index 2460492fb6..29f0cdcabb 100644
--- a/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControl.js
+++ b/docs/app/Examples/collections/Form/Shorthand/FormFieldControlExample.js
@@ -6,7 +6,7 @@ const options = [
   { text: 'Female', value: 'female' },
 ]
 
-class FormExampleFieldControl extends Component {
+class FormFieldControlExample extends Component {
   state = {}
 
   handleChange = (e, { value }) => this.setState({ value })
@@ -34,4 +34,4 @@ class FormExampleFieldControl extends Component {
   }
 }
 
-export default FormExampleFieldControl
+export default FormFieldControlExample
diff --git a/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js b/docs/app/Examples/collections/Form/Shorthand/FormFieldControlHTMLExample.js
similarity index 92%
rename from docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
rename to docs/app/Examples/collections/Form/Shorthand/FormFieldControlHTMLExample.js
index 96b5a7609f..06fe4c4a24 100644
--- a/docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControlHTML.js
+++ b/docs/app/Examples/collections/Form/Shorthand/FormFieldControlHTMLExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form } from 'semantic-ui-react'
 
-const FormExampleFieldControlHTML = () => (
+const FormFieldHTMLControlExample = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Field label='An HTML <input>' control='input' />
@@ -27,4 +27,4 @@ const FormExampleFieldControlHTML = () => (
   </Form>
 )
 
-export default FormExampleFieldControlHTML
+export default FormFieldHTMLControlExample
diff --git a/docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js b/docs/app/Examples/collections/Form/Shorthand/FormSubComponentControlExample.js
similarity index 92%
rename from docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js
rename to docs/app/Examples/collections/Form/Shorthand/FormSubComponentControlExample.js
index 5480889fa4..3fbe983bd2 100644
--- a/docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js
+++ b/docs/app/Examples/collections/Form/Shorthand/FormSubComponentControlExample.js
@@ -6,7 +6,7 @@ const options = [
   { text: 'Female', value: 'female' },
 ]
 
-class FormExampleSubComponentControl extends Component {
+class FormSubComponentControlExample extends Component {
   state = {}
 
   handleChange = (e, { value }) => this.setState({ value })
@@ -34,4 +34,4 @@ class FormExampleSubComponentControl extends Component {
   }
 }
 
-export default FormExampleSubComponentControl
+export default FormSubComponentControlExample
diff --git a/docs/app/Examples/collections/Form/Shorthand/index.js b/docs/app/Examples/collections/Form/Shorthand/index.js
index 5176c0c2dc..618aad3e35 100644
--- a/docs/app/Examples/collections/Form/Shorthand/index.js
+++ b/docs/app/Examples/collections/Form/Shorthand/index.js
@@ -45,27 +45,27 @@ const FormTypesExamples = () => (
     <ComponentExample
       title='Form Sub Components'
       description={[
-        'Render a field containing a label and form control.',
+        'Render a Field containing a label and form control.',
         'All form control components are available.',
       ].join(' ')}
-      examplePath='collections/Form/Shorthand/FormExampleSubComponentControl'
+      examplePath='collections/Form/Shorthand/FormSubComponentControlExample'
     >
       <Compare { ...subComponentComparison } />
     </ComponentExample>
     <ComponentExample
       title='Field with Custom Control'
       description={[
-        'Render a field containing a label and custom form control.',
+        'Render a Field containing a label and custom form control.',
         'Use any component form any library, or your own.',
       ].join(' ')}
-      examplePath='collections/Form/Shorthand/FormExampleFieldControl'
+      examplePath='collections/Form/Shorthand/FormFieldControlExample'
     >
       <Compare { ...componentPropComparison } />
     </ComponentExample>
     <ComponentExample
       title='Field with HTML Control'
-      description='The field control prop also works with HTML tags.'
-      examplePath='collections/Form/Shorthand/FormExampleFieldControlHTML'
+      description='The Field control prop also works with HTML tags'
+      examplePath='collections/Form/Shorthand/FormFieldControlHTMLExample'
     >
       <Compare { ...htmlComparison } />
     </ComponentExample>
diff --git a/docs/app/Examples/collections/Form/States/FormExampleError.js b/docs/app/Examples/collections/Form/States/FormErrorExample.js
similarity index 84%
rename from docs/app/Examples/collections/Form/States/FormExampleError.js
rename to docs/app/Examples/collections/Form/States/FormErrorExample.js
index 78f126b3ef..51e24aaae2 100644
--- a/docs/app/Examples/collections/Form/States/FormExampleError.js
+++ b/docs/app/Examples/collections/Form/States/FormErrorExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Form, Input, Message } from 'semantic-ui-react'
 
-const FormExampleError = () => (
+const FormErrorExample = () => (
   <Form error>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Message
@@ -13,4 +13,4 @@ const FormExampleError = () => (
   </Form>
 )
 
-export default FormExampleError
+export default FormErrorExample
diff --git a/docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js b/docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js
deleted file mode 100644
index 4076497715..0000000000
--- a/docs/app/Examples/collections/Form/States/FormExampleFieldReadOnly.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Form, Input } from 'semantic-ui-react'
-
-const FormExampleFieldReadOnly = () => (
-  <Form>
-    <Form.Group widths='equal'>
-      <Form.Input label='First name' placeholder='Read only' readOnly />
-      <Form.Input label='Last name' placeholder='Read only' readOnly />
-    </Form.Group>
-  </Form>
-)
-
-export default FormExampleFieldReadOnly
diff --git a/docs/app/Examples/collections/Form/States/FormExampleFieldDisabled.js b/docs/app/Examples/collections/Form/States/FormFieldDisabledExample.js
similarity index 78%
rename from docs/app/Examples/collections/Form/States/FormExampleFieldDisabled.js
rename to docs/app/Examples/collections/Form/States/FormFieldDisabledExample.js
index 098f944821..9b8958f322 100644
--- a/docs/app/Examples/collections/Form/States/FormExampleFieldDisabled.js
+++ b/docs/app/Examples/collections/Form/States/FormFieldDisabledExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Form, Input } from 'semantic-ui-react'
 
-const FormExampleFieldDisabled = () => (
+const FormFieldDisabledExample = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Input label='First name' placeholder='Disabled' disabled />
@@ -10,4 +10,4 @@ const FormExampleFieldDisabled = () => (
   </Form>
 )
 
-export default FormExampleFieldDisabled
+export default FormFieldDisabledExample
diff --git a/docs/app/Examples/collections/Form/States/FormExampleFieldError.js b/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
similarity index 87%
rename from docs/app/Examples/collections/Form/States/FormExampleFieldError.js
rename to docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
index a3b4c1f135..1377c0472e 100644
--- a/docs/app/Examples/collections/Form/States/FormExampleFieldError.js
+++ b/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
@@ -6,7 +6,7 @@ const options = [
   { text: 'Female', value: 'female' },
 ]
 
-const FormExampleFieldError = () => (
+const FormFieldErrorExample = () => (
   <Form>
     <Form.Group widths='equal'>
       <Form.Input label='First name' placeholder='First name' error />
@@ -17,4 +17,4 @@ const FormExampleFieldError = () => (
   </Form>
 )
 
-export default FormExampleFieldError
+export default FormFieldErrorExample
diff --git a/docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js b/docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js
new file mode 100644
index 0000000000..d17e0b6eff
--- /dev/null
+++ b/docs/app/Examples/collections/Form/States/FormFieldReadOnlyExample.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Form, Input } from 'semantic-ui-react'
+
+const FormFieldDisabledExample = () => (
+  <Form>
+    <Form.Group widths='equal'>
+      <Form.Input label='First name' placeholder='Disabled' readOnly />
+      <Form.Input label='Last name' placeholder='Disabled' readOnly />
+    </Form.Group>
+  </Form>
+)
+
+export default FormFieldDisabledExample
diff --git a/docs/app/Examples/collections/Form/States/FormExampleLoading.js b/docs/app/Examples/collections/Form/States/FormLoadingExample.js
similarity index 74%
rename from docs/app/Examples/collections/Form/States/FormExampleLoading.js
rename to docs/app/Examples/collections/Form/States/FormLoadingExample.js
index cd234a9df2..1e9fcd8c9e 100644
--- a/docs/app/Examples/collections/Form/States/FormExampleLoading.js
+++ b/docs/app/Examples/collections/Form/States/FormLoadingExample.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Button, Form, Input } from 'semantic-ui-react'
 
-const FormExampleLoading = () => (
+const FormLoadingExample = () => (
   <Form loading>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Button>Submit</Button>
   </Form>
 )
 
-export default FormExampleLoading
+export default FormLoadingExample
diff --git a/docs/app/Examples/collections/Form/States/FormExampleSuccess.js b/docs/app/Examples/collections/Form/States/FormSuccessExample.js
similarity index 82%
rename from docs/app/Examples/collections/Form/States/FormExampleSuccess.js
rename to docs/app/Examples/collections/Form/States/FormSuccessExample.js
index 84e3912974..da75a52ef8 100644
--- a/docs/app/Examples/collections/Form/States/FormExampleSuccess.js
+++ b/docs/app/Examples/collections/Form/States/FormSuccessExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Form, Input, Message } from 'semantic-ui-react'
 
-const FormExampleSuccess = () => (
+const FormSuccessExample = () => (
   <Form success>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Message
@@ -13,4 +13,4 @@ const FormExampleSuccess = () => (
   </Form>
 )
 
-export default FormExampleSuccess
+export default FormSuccessExample
diff --git a/docs/app/Examples/collections/Form/States/FormExampleWarning.js b/docs/app/Examples/collections/Form/States/FormWarningExample.js
similarity index 85%
rename from docs/app/Examples/collections/Form/States/FormExampleWarning.js
rename to docs/app/Examples/collections/Form/States/FormWarningExample.js
index 541746fcd9..432d1b3c9e 100644
--- a/docs/app/Examples/collections/Form/States/FormExampleWarning.js
+++ b/docs/app/Examples/collections/Form/States/FormWarningExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Form, Input, Message } from 'semantic-ui-react'
 
-const FormExampleWarning = () => (
+const FormErrorExample = () => (
   <Form warning>
     <Form.Input label='Email' placeholder='joe@schmoe.com' />
     <Message
@@ -15,4 +15,4 @@ const FormExampleWarning = () => (
   </Form>
 )
 
-export default FormExampleWarning
+export default FormErrorExample
diff --git a/docs/app/Examples/collections/Form/States/index.js b/docs/app/Examples/collections/Form/States/index.js
index 4827b81470..de95abad33 100644
--- a/docs/app/Examples/collections/Form/States/index.js
+++ b/docs/app/Examples/collections/Form/States/index.js
@@ -7,37 +7,37 @@ const FormStatesExamples = () => (
     <ComponentExample
       title='Loading'
       description='If a form is in loading state, it will automatically show a loading indicator.'
-      examplePath='collections/Form/States/FormExampleLoading'
+      examplePath='collections/Form/States/FormLoadingExample'
     />
     <ComponentExample
       title='Success'
       description='If a form is in an success state, it will automatically show any success message blocks.'
-      examplePath='collections/Form/States/FormExampleSuccess'
+      examplePath='collections/Form/States/FormSuccessExample'
     />
     <ComponentExample
       title='Error'
       description='If a form is in an error state, it will automatically show any error message blocks.'
-      examplePath='collections/Form/States/FormExampleError'
+      examplePath='collections/Form/States/FormErrorExample'
     />
     <ComponentExample
       title='Warning'
       description='If a form is in warning state, it will automatically show any warning message block.'
-      examplePath='collections/Form/States/FormExampleWarning'
+      examplePath='collections/Form/States/FormWarningExample'
     />
     <ComponentExample
       title='Field Error'
-      description='Individual fields may display an error state.'
-      examplePath='collections/Form/States/FormExampleFieldError'
+      description='Individual fields may display an error state'
+      examplePath='collections/Form/States/FormFieldErrorExample'
     />
     <ComponentExample
       title='Disabled Field'
-      description='Individual fields may be disabled.'
-      examplePath='collections/Form/States/FormExampleFieldDisabled'
+      description='Individual fields may be disabled'
+      examplePath='collections/Form/States/FormFieldDisabledExample'
     />
     <ComponentExample
       title='Read-Only Field'
-      description='Individual fields may be read only.'
-      examplePath='collections/Form/States/FormExampleFieldReadOnly'
+      description='Individual fields may be read only'
+      examplePath='collections/Form/States/FormFieldReadOnlyExample'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/Types/FormExampleForm.js b/docs/app/Examples/collections/Form/Types/FormFormExample.js
similarity index 88%
rename from docs/app/Examples/collections/Form/Types/FormExampleForm.js
rename to docs/app/Examples/collections/Form/Types/FormFormExample.js
index 3951c95e50..1351e4589e 100644
--- a/docs/app/Examples/collections/Form/Types/FormExampleForm.js
+++ b/docs/app/Examples/collections/Form/Types/FormFormExample.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Checkbox, Form } from 'semantic-ui-react'
 
-const FormExampleForm = () => (
+const FormFormExample = () => (
   <Form>
     <Form.Field>
       <label>First Name</label>
@@ -18,4 +18,4 @@ const FormExampleForm = () => (
   </Form>
 )
 
-export default FormExampleForm
+export default FormFormExample
diff --git a/docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js b/docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js
similarity index 97%
rename from docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js
rename to docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js
index 610e8815bf..f7bc273703 100644
--- a/docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js
+++ b/docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js
@@ -20,7 +20,7 @@ const products = [
   { text: 'Socks', value: 'socks' },
 ]
 
-class FormExampleOnSubmit extends Component {
+class FormOnSubmitExample extends Component {
   state = { serializedForm: {} }
 
   handleChange = (e, { value }) => this.setState({ value })
@@ -69,4 +69,4 @@ class FormExampleOnSubmit extends Component {
   }
 }
 
-export default FormExampleOnSubmit
+export default FormOnSubmitExample
diff --git a/docs/app/Examples/collections/Form/Types/index.js b/docs/app/Examples/collections/Form/Types/index.js
index c11f43dc81..91849f61ad 100644
--- a/docs/app/Examples/collections/Form/Types/index.js
+++ b/docs/app/Examples/collections/Form/Types/index.js
@@ -9,7 +9,7 @@ const FormTypesExamples = () => (
     <ComponentExample
       title='Form'
       description='A form.'
-      examplePath='collections/Form/Types/FormExampleForm'
+      examplePath='collections/Form/Types/FormFormExample'
     >
       <Message info icon>
         <Icon name='pointing right' />
@@ -21,8 +21,8 @@ const FormTypesExamples = () => (
     </ComponentExample>
     <ComponentExample
       title='onSubmit'
-      description='A form calls back with the serialized data on submit.'
-      examplePath='collections/Form/Types/FormExampleOnSubmit'
+      description='A form calls back with the serialized data on submit'
+      examplePath='collections/Form/Types/FormOnSubmitExample'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/collections/Form/Variations/FormExampleSize.js b/docs/app/Examples/collections/Form/Variations/FormSizeExample.js
similarity index 89%
rename from docs/app/Examples/collections/Form/Variations/FormExampleSize.js
rename to docs/app/Examples/collections/Form/Variations/FormSizeExample.js
index d4fd43db36..b5cf23c688 100644
--- a/docs/app/Examples/collections/Form/Variations/FormExampleSize.js
+++ b/docs/app/Examples/collections/Form/Variations/FormSizeExample.js
@@ -3,7 +3,7 @@ import { Button, Divider, Form } from 'semantic-ui-react'
 
 const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
 
-const FormExampleSize = () => (
+const FormSizeExample = () => (
   <div>
     {sizes.map(size => (
       <Form size={size} key={size}>
@@ -17,4 +17,4 @@ const FormExampleSize = () => (
     ))}
   </div>
 )
-export default FormExampleSize
+export default FormSizeExample
diff --git a/docs/app/Examples/collections/Form/Variations/index.js b/docs/app/Examples/collections/Form/Variations/index.js
index 7f66999f86..a0e8ea7bfe 100644
--- a/docs/app/Examples/collections/Form/Variations/index.js
+++ b/docs/app/Examples/collections/Form/Variations/index.js
@@ -7,7 +7,7 @@ const FormFormVariationsExamples = () => (
     <ComponentExample
       title='Size'
       description='A form can vary in size'
-      examplePath='collections/Form/Variations/FormExampleSize'
+      examplePath='collections/Form/Variations/FormSizeExample'
     />
   </ExampleSection>
 )