From 4f599021f96dd1a74f0609ebef4bd3477bb42bd8 Mon Sep 17 00:00:00 2001
From: levithomason <me@levithomason.com>
Date: Sat, 13 Feb 2016 13:09:00 -0800
Subject: [PATCH 1/2] make Field/Fields subcomponents of Form

---
 docs/app/ComponentGuidelines.md               | 12 +++----
 .../Form/Content/FormFieldExample.js          |  6 ++--
 .../FieldVariations/FormFieldInlineExample.js |  6 ++--
 .../FormVariations/FormSizeLargeExample.js    | 14 ++++----
 .../FormVariations/FormSizeSmallExample.js    | 14 ++++----
 .../FormGroupEvenlyDividedExample.js          | 14 ++++----
 .../Form/States/FormFieldErrorExample.js      |  6 ++--
 .../collections/Form/Types/FormFormExample.js | 14 ++++----
 .../FormSpecifyingValidationRulesExample.js   | 34 +++++++++----------
 ...rmValidatingOnBlurAndOtherEventsExample.js | 30 ++++++++--------
 .../modules/Checkbox/States/Disabled.js       |  8 ++---
 .../modules/Checkbox/Types/RadioGroup.js      | 10 +++---
 src/collections/Form/Form.js                  | 17 ++++++----
 src/index.js                                  |  4 +--
 test/specs/collections/Form/Field-test.js     |  8 ++---
 test/specs/collections/Form/Fields-test.js    | 12 +++----
 16 files changed, 107 insertions(+), 102 deletions(-)

diff --git a/docs/app/ComponentGuidelines.md b/docs/app/ComponentGuidelines.md
index aaa1472014..7050a8bf90 100644
--- a/docs/app/ComponentGuidelines.md
+++ b/docs/app/ComponentGuidelines.md
@@ -118,9 +118,9 @@ export default class Input extends Component {
 export default class Input extends Component {
   render() {
     return (
-      <Field
+      <Form.Field
         <input className='sd-input' />
-      </Field>
+      </Form.Field>
     );
   }
 }
@@ -189,26 +189,26 @@ All magic is noted in the documentation examples.
 **Always**
 
 ```jsx
-<Field className='inherit-this' />
+<Form.Field className='inherit-this' />
 // => <div className='sd-field inherit-this field>...
 ```
 
 **Never**
 
 ```jsx
-<Field className='inherit-this' />
+<Form.Field className='inherit-this' />
 // => <div className='sd-field field>...
 ```
 >className was not inherited
 
 ```jsx
-<Field className='inherit-this' />
+<Form.Field className='inherit-this' />
 // => <div className='inherit-this sd-field field>...
 ```
 >className was inherited before sd-field
 
 ```jsx
-<Field className='inherit-this' />
+<Form.Field className='inherit-this' />
 // => <div className='inherit-this sd-field field>...
 ```
 >className was not inherited before sd-field
diff --git a/docs/app/Examples/collections/Form/Content/FormFieldExample.js b/docs/app/Examples/collections/Form/Content/FormFieldExample.js
index e54dcd9050..af032b1a0b 100644
--- a/docs/app/Examples/collections/Form/Content/FormFieldExample.js
+++ b/docs/app/Examples/collections/Form/Content/FormFieldExample.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
-import { Field, Form, Input } from 'stardust'
+import { Form, Input } from 'stardust'
 
 export default class FormFieldExample extends Component {
   render() {
     return (
       <Form>
-        <Field label='User Input'>
+        <Form.Field label='User Input'>
           <Input placeholder='User Input' />
-        </Field>
+        </Form.Field>
       </Form>
     )
   }
diff --git a/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js b/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
index de51df999b..9a00002966 100644
--- a/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
+++ b/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
-import { Field, Form, Input } from 'stardust'
+import { Form, Input } from 'stardust'
 
 export default class FormFieldInlineExample extends Component {
   render() {
     return (
       <Form>
-        <Field label='First name' className='inline'>
+        <Form.Field label='First name' className='inline'>
           <Input placeholder='First name' />
-        </Field>
+        </Form.Field>
       </Form>
     )
   }
diff --git a/docs/app/Examples/collections/Form/FormVariations/FormSizeLargeExample.js b/docs/app/Examples/collections/Form/FormVariations/FormSizeLargeExample.js
index c90304f976..4355172a44 100644
--- a/docs/app/Examples/collections/Form/FormVariations/FormSizeLargeExample.js
+++ b/docs/app/Examples/collections/Form/FormVariations/FormSizeLargeExample.js
@@ -1,18 +1,18 @@
 import React, { Component } from 'react'
-import { Button, Field, Fields, Form, Input } from 'stardust'
+import { Button, Form, Input } from 'stardust'
 
 export default class FormSizeLargeExample extends Component {
   render() {
     return (
       <Form className='large'>
-        <Fields>
-          <Field label='First name'>
+        <Form.Fields>
+          <Form.Field label='First name'>
             <Input placeholder='First name' />
-          </Field>
-          <Field label='Last name'>
+          </Form.Field>
+          <Form.Field label='Last name'>
             <Input placeholder='Last name' />
-          </Field>
-        </Fields>
+          </Form.Field>
+        </Form.Fields>
         <Button type='submit'>Submit</Button>
       </Form>
     )
diff --git a/docs/app/Examples/collections/Form/FormVariations/FormSizeSmallExample.js b/docs/app/Examples/collections/Form/FormVariations/FormSizeSmallExample.js
index c962d3d98b..f7729aa8a6 100644
--- a/docs/app/Examples/collections/Form/FormVariations/FormSizeSmallExample.js
+++ b/docs/app/Examples/collections/Form/FormVariations/FormSizeSmallExample.js
@@ -1,18 +1,18 @@
 import React, { Component } from 'react'
-import { Button, Field, Fields, Form, Input } from 'stardust'
+import { Button, Form, Input } from 'stardust'
 
 export default class FormSizeSmallExample extends Component {
   render() {
     return (
       <Form className='small'>
-        <Fields>
-          <Field label='First name'>
+        <Form.Fields>
+          <Form.Field label='First name'>
             <Input placeholder='First name' />
-          </Field>
-          <Field label='Last name'>
+          </Form.Field>
+          <Form.Field label='Last name'>
             <Input placeholder='Last name' />
-          </Field>
-        </Fields>
+          </Form.Field>
+        </Form.Fields>
         <Button type='submit'>Submit</Button>
       </Form>
     )
diff --git a/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js b/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
index 71c201581f..c38a1a826a 100644
--- a/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
+++ b/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
@@ -1,18 +1,18 @@
 import React, { Component } from 'react'
-import { Field, Fields, Form, Input } from 'stardust'
+import { Form, Input } from 'stardust'
 
 export default class FormGroupEvenlyDividedExample extends Component {
   render() {
     return (
       <Form>
-        <Fields evenlyDivided>
-          <Field label='First name'>
+        <Form.Fields evenlyDivided>
+          <Form.Field label='First name'>
             <Input placeholder='First name' />
-          </Field>
-          <Field label='Last name'>
+          </Form.Field>
+          <Form.Field label='Last name'>
             <Input placeholder='Last name' />
-          </Field>
-        </Fields>
+          </Form.Field>
+        </Form.Fields>
       </Form>
     )
   }
diff --git a/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js b/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
index 937a0b857e..6f039c4785 100644
--- a/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
+++ b/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
-import { Field, Form, Input } from 'stardust'
+import { Form, Input } from 'stardust'
 
 export default class FormFieldErrorExample extends Component {
   render() {
     return (
       <Form>
-        <Field label='First name' className='error'>
+        <Form.Field label='First name' className='error'>
           <Input placeholder='First name' />
-        </Field>
+        </Form.Field>
       </Form>
     )
   }
diff --git a/docs/app/Examples/collections/Form/Types/FormFormExample.js b/docs/app/Examples/collections/Form/Types/FormFormExample.js
index beccc6fdeb..2bb2aa2f23 100644
--- a/docs/app/Examples/collections/Form/Types/FormFormExample.js
+++ b/docs/app/Examples/collections/Form/Types/FormFormExample.js
@@ -1,19 +1,19 @@
 import React, { Component } from 'react'
-import { Button, Checkbox, Field, Form, Input } from 'stardust'
+import { Button, Checkbox, Form, Input } from 'stardust'
 
 export default class FormFormExample extends Component {
   render() {
     return (
       <Form>
-        <Field label='First Name'>
+        <Form.Field label='First Name'>
           <Input placeholder='First Name' />
-        </Field>
-        <Field label='Last Name'>
+        </Form.Field>
+        <Form.Field label='Last Name'>
           <Input placeholder='Last Name' />
-        </Field>
-        <Field label='First Name'>
+        </Form.Field>
+        <Form.Field label='First Name'>
           <Checkbox label='I agree to the Terms and Conditions' />
-        </Field>
+        </Form.Field>
         <Button type='submit'>Submit</Button>
       </Form>
     )
diff --git a/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js b/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js
index 65f3907a15..3d967fa270 100644
--- a/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js
+++ b/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Checkbox, Dropdown, Field, Fields, Form, Input, Message } from 'stardust'
+import { Button, Checkbox, Dropdown, Form, Input, Message } from 'stardust'
 
 const fields = {
   name: 'empty',
@@ -26,29 +26,29 @@ const skillsOptions = [
 const FormSpecifyingValidationRulesExample = (props) => (
   <Form className='segment' fields={fields}>
     <p>Tell Us About Yourself</p>
-    <Fields evenlyDivided>
-      <Field>
+    <Form.Fields evenlyDivided>
+      <Form.Field>
         <label>Name</label>
         <Input placeholder='First Name' name='name' type='text' />
-      </Field>
-      <Field label='Gender'>
+      </Form.Field>
+      <Form.Field label='Gender'>
         <Dropdown className='selection' name='gender' options={genderOptions} />
-      </Field>
-    </Fields>
-    <Fields evenlyDivided>
-      <Field label='Username'>
+      </Form.Field>
+    </Form.Fields>
+    <Form.Fields evenlyDivided>
+      <Form.Field label='Username'>
         <Input placeholder='Username' name='username' type='text' />
-      </Field>
-      <Field label='Password'>
+      </Form.Field>
+      <Form.Field label='Password'>
         <Input type='password' name='password' />
-      </Field>
-    </Fields>
-    <Field label='Skills'>
+      </Form.Field>
+    </Form.Fields>
+    <Form.Field label='Skills'>
       <Dropdown className='selection multiple' name='skills' options={skillsOptions} />
-    </Field>
-    <Field className='inline'>
+    </Form.Field>
+    <Form.Field className='inline'>
       <Checkbox name='terms' className='hidden' label='I agree to the terms and conditions' />
-    </Field>
+    </Form.Field>
     <Button className='blue submit'>Submit</Button>
     <Message className='error' />
   </Form>
diff --git a/docs/app/Examples/collections/Form/Validation/FormValidatingOnBlurAndOtherEventsExample.js b/docs/app/Examples/collections/Form/Validation/FormValidatingOnBlurAndOtherEventsExample.js
index 95a7c1ef6d..1b9b830c4a 100644
--- a/docs/app/Examples/collections/Form/Validation/FormValidatingOnBlurAndOtherEventsExample.js
+++ b/docs/app/Examples/collections/Form/Validation/FormValidatingOnBlurAndOtherEventsExample.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Checkbox, Field, Fields, Form, Input } from 'stardust'
+import { Button, Checkbox, Form, Input } from 'stardust'
 
 const fields = {
   firstName: 'empty',
@@ -12,27 +12,27 @@ const fields = {
 const FormValidatingOnBlurAndOtherEventsExample = (props) => (
   <Form className='segment' fields={fields} on='blur' inline>
     <p>Let's go ahead and get you signed up.</p>
-    <Fields evenlyDivided>
-      <Field>
+    <Form.Fields evenlyDivided>
+      <Form.Field>
         <label>First Name</label>
         <Input placeholder='First Name' name='firstName' type='text' />
-      </Field>
-      <Field>
+      </Form.Field>
+      <Form.Field>
         <label>Last Name</label>
         <Input placeholder='Last Name' name='lastName' type='text' />
-      </Field>
-    </Fields>
-    <Fields evenlyDivided>
-      <Field label='Username'>
+      </Form.Field>
+    </Form.Fields>
+    <Form.Fields evenlyDivided>
+      <Form.Field label='Username'>
         <Input placeholder='Username' name='username' type='text' />
-      </Field>
-      <Field label='Password'>
+      </Form.Field>
+      <Form.Field label='Password'>
         <Input type='password' name='password' />
-      </Field>
-    </Fields>
-    <Field className='inline'>
+      </Form.Field>
+    </Form.Fields>
+    <Form.Field className='inline'>
       <Checkbox name='terms' className='hidden' label='I agree to the terms and conditions' />
-    </Field>
+    </Form.Field>
     <Button className='blue submit'>Submit</Button>
   </Form>
 )
diff --git a/docs/app/Examples/modules/Checkbox/States/Disabled.js b/docs/app/Examples/modules/Checkbox/States/Disabled.js
index f52e3bd17c..e41d9709e8 100644
--- a/docs/app/Examples/modules/Checkbox/States/Disabled.js
+++ b/docs/app/Examples/modules/Checkbox/States/Disabled.js
@@ -5,12 +5,12 @@ export default class CheckboxDisabledExample extends Component {
   render() {
     return (
       <Form>
-        <Field>
+        <Form.Field>
           <Checkbox className='disabled' label='Disabled' />
-        </Field>
-        <Field>
+        </Form.Field>
+        <Form.Field>
           <Checkbox className='toggle' disabled label='Disabled' />
-        </Field>
+        </Form.Field>
       </Form>
     )
   }
diff --git a/docs/app/Examples/modules/Checkbox/Types/RadioGroup.js b/docs/app/Examples/modules/Checkbox/Types/RadioGroup.js
index 1216d993c7..3af9fe33aa 100644
--- a/docs/app/Examples/modules/Checkbox/Types/RadioGroup.js
+++ b/docs/app/Examples/modules/Checkbox/Types/RadioGroup.js
@@ -1,16 +1,16 @@
 import React, { Component } from 'react'
-import { Form, Field, Checkbox } from 'stardust'
+import { Form, Checkbox } from 'stardust'
 
 export default class CheckboxRadioGroupExample extends Component {
   render() {
     return (
       <Form>
-        <Field>
+        <Form.Field>
           <Checkbox className='radio' label='Choose this' name='radioGroup' />
-        </Field>
-        <Field>
+        </Form.Field>
+        <Form.Field>
           <Checkbox className='radio' label='Or that' name='radioGroup' />
-        </Field>
+        </Form.Field>
       </Form>
     )
   }
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 66092fc93e..6778486f3c 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -5,6 +5,8 @@ import classNames from 'classnames'
 import META from '../../utils/Meta'
 import { getPluginProps, getComponentProps } from '../../utils/propUtils'
 import { deprecateProps } from '../../utils/deprecate'
+import Field from './Field'
+import Fields from './Fields'
 
 const pluginPropTypes = {
   // form settings
@@ -64,6 +66,15 @@ export default class Form extends Component {
     this.element.off()
   }
 
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Form',
+    type: META.type.collection,
+  };
+
+  static Field = Field;
+  static Fields = Fields;
+
   plugin() {
     return this.element.form(...arguments)
   }
@@ -102,12 +113,6 @@ export default class Form extends Component {
     return json
   };
 
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'Form',
-    type: META.type.collection,
-  };
-
   render() {
     const classes = classNames(
       'sd-form',
diff --git a/src/index.js b/src/index.js
index c38cec000f..b8fbcf2fc1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,8 +50,6 @@ const stardust = {
   Textarea,
 
   // Collections
-  Field,
-  Fields,
   Form,
   Grid,
   Menu,
@@ -83,6 +81,8 @@ const stardust = {
 }
 
 deprecateComponents(stardust, [
+  [Field, 'Use "Form.Field" instead.'],
+  [Fields, 'Use "Form.Fields" instead.'],
   [Column, `Use "Grid.Column" instead.`],
   [TableColumn, `Use "Table.Column" instead.`],
   [ListItem, `Use "List.Item" instead.`],
diff --git a/test/specs/collections/Form/Field-test.js b/test/specs/collections/Form/Field-test.js
index 2951540f1d..78a1cfca1f 100644
--- a/test/specs/collections/Form/Field-test.js
+++ b/test/specs/collections/Form/Field-test.js
@@ -1,22 +1,22 @@
 import _ from 'lodash'
 import React from 'react'
-import { Field } from 'stardust'
+import { Form } from 'stardust'
 import numberToWord from '../../../../src/utils/numberToWord'
 
 describe('Field', () => {
   it('has a label', () => {
-    render(<Field label='First Name' />)
+    render(<Form.Field label='First Name' />)
       .findTag('label')
       .textContent.should.equal('First Name')
   })
 
   it('renders children', () => {
-    render(<Field>yo child</Field>).assertText('yo child')
+    render(<Form.Field>yo child</Form.Field>).assertText('yo child')
   })
 
   it('can specify a width', () => {
     _.each(_.range(1, 17), n => {
-      render(<Field width={n} />).findClass(`${numberToWord(n)} wide`)
+      render(<Form.Field width={n} />).findClass(`${numberToWord(n)} wide`)
     })
   })
 })
diff --git a/test/specs/collections/Form/Fields-test.js b/test/specs/collections/Form/Fields-test.js
index 5644e4e350..dce884f21b 100644
--- a/test/specs/collections/Form/Fields-test.js
+++ b/test/specs/collections/Form/Fields-test.js
@@ -1,21 +1,21 @@
 import faker from 'faker'
 import React from 'react'
 
-import { Field, Fields } from 'stardust'
+import { Form } from 'stardust'
 
 describe('Fields', () => {
   it('evenlyDivided adds the word class for the number of child fields', () => {
     render(
-      <Fields evenlyDivided>
-        <Field />
-        <Field />
-      </Fields>
+      <Form.Fields evenlyDivided>
+        <Form.Field />
+        <Form.Field />
+      </Form.Fields>
     )
       .findClass('two fields')
   })
   it('renders children', () => {
     const child = faker.hacker.phrase()
-    render(<Fields>{child}</Fields>)
+    render(<Form.Fields>{child}</Form.Fields>)
       .assertText(child)
   })
 })

From c9974a47928502523876816a05185d37a03801b2 Mon Sep 17 00:00:00 2001
From: levithomason <me@levithomason.com>
Date: Sat, 13 Feb 2016 13:13:48 -0800
Subject: [PATCH 2/2] prefix field components with Form*

---
 src/collections/Form/Form.js                      | 8 ++++----
 src/collections/Form/{Field.js => FormField.js}   | 0
 src/collections/Form/{Fields.js => FormFields.js} | 0
 src/index.js                                      | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename src/collections/Form/{Field.js => FormField.js} (100%)
 rename src/collections/Form/{Fields.js => FormFields.js} (100%)

diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 6778486f3c..9090cd47d4 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -5,8 +5,8 @@ import classNames from 'classnames'
 import META from '../../utils/Meta'
 import { getPluginProps, getComponentProps } from '../../utils/propUtils'
 import { deprecateProps } from '../../utils/deprecate'
-import Field from './Field'
-import Fields from './Fields'
+import FormField from './FormField'
+import FormFields from './FormFields'
 
 const pluginPropTypes = {
   // form settings
@@ -72,8 +72,8 @@ export default class Form extends Component {
     type: META.type.collection,
   };
 
-  static Field = Field;
-  static Fields = Fields;
+  static Field = FormField;
+  static Fields = FormFields;
 
   plugin() {
     return this.element.form(...arguments)
diff --git a/src/collections/Form/Field.js b/src/collections/Form/FormField.js
similarity index 100%
rename from src/collections/Form/Field.js
rename to src/collections/Form/FormField.js
diff --git a/src/collections/Form/Fields.js b/src/collections/Form/FormFields.js
similarity index 100%
rename from src/collections/Form/Fields.js
rename to src/collections/Form/FormFields.js
diff --git a/src/index.js b/src/index.js
index b8fbcf2fc1..a9b41c9cfe 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,8 +6,8 @@ import Textarea from './addons/Textarea/Textarea'
 
 // Collections
 import Column from './collections/Grid/Column'
-import Field from './collections/Form/Field'
-import Fields from './collections/Form/Fields'
+import { default as Field } from './collections/Form/FormField'
+import { default as Fields } from './collections/Form/FormFields'
 import Form from './collections/Form/Form'
 import Grid from './collections/Grid/Grid'
 import Row from './collections/Grid/Row'