style(Form): update docs to the latest standards

docs/app/Examples/collections/Form/Content/FormFieldExample.js → 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

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>
 )

docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js → 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

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>
 )

docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js → 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

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>
 )

docs/app/Examples/collections/Form/Shorthand/FormFieldControlExample.js → 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

docs/app/Examples/collections/Form/Shorthand/FormFieldControlHTMLExample.js → 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

docs/app/Examples/collections/Form/Shorthand/FormSubComponentControlExample.js → 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

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>

docs/app/Examples/collections/Form/States/FormErrorExample.js → 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

docs/app/Examples/collections/Form/States/FormFieldDisabledExample.js → 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

docs/app/Examples/collections/Form/States/FormFieldErrorExample.js → 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

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

docs/app/Examples/collections/Form/States/FormLoadingExample.js → 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

docs/app/Examples/collections/Form/States/FormSuccessExample.js → 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

docs/app/Examples/collections/Form/States/FormWarningExample.js → 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

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>
 )

docs/app/Examples/collections/Form/Types/FormFormExample.js → 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

docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js → 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

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>
 )

docs/app/Examples/collections/Form/Variations/FormSizeExample.js → 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