Merge pull request #169 from TechnologyAdvice/feature/add-form-subcom…

…ponents Make Field and Fields subcomponents of Form
Semantic-Org · Feb 13, 2016 · 1f3f5eb · 1f3f5eb
2 parents 36fc2ad + c9974a4
commit 1f3f5eb
Show file tree

Hide file tree

Showing 18 changed files with 109 additions and 104 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 FormField from './FormField'
+import FormFields from './FormFields'
 
 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 = FormField;
+  static Fields = FormFields;
+
   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/collections/Form/Field.js → src/collections/Form/FormField.js b/src/collections/Form/Field.js → src/collections/Form/FormField.js
diff --git a/src/collections/Form/Fields.js → src/collections/Form/FormFields.js b/src/collections/Form/Fields.js → src/collections/Form/FormFields.js