style(Form): update typings and propTypes usage

src/addons/Radio/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CheckboxProps } from '../../modules/Checkbox';
 
-interface RadioProps extends CheckboxProps {
+export interface RadioProps extends CheckboxProps {
   [key: string]: any;
 
   /** Format to emphasize the current selection state. */

src/addons/Select/index.d.ts

@@ -7,7 +7,7 @@ import {
   DropdownProps
 } from '../../modules/Dropdown';
 
-interface SelectProps extends DropdownProps {
+export interface SelectProps extends DropdownProps {
   selection: true;
 }
 

src/collections/Form/Form.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
 import {
@@ -156,15 +156,6 @@ function formSerializer(formNode) {
   return json
 }
 
-const _meta = {
-  name: 'Form',
-  type: META.TYPES.COLLECTION,
-  props: {
-    widths: ['equal'],
-    size: _.without(SUI.SIZES, 'medium'),
-  },
-}
-
 /**
  * A Form displays a set of related user input fields in a structured way.
  * @see Button
@@ -177,11 +168,6 @@ const _meta = {
  * @see TextArea
  */
 export default class Form extends Component {
-  static defaultProps = {
-    as: 'form',
-    serializer: formSerializer,
-  }
-
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
@@ -192,13 +178,13 @@ export default class Form extends Component {
     /** Additional classes. */
     className: PropTypes.string,
 
-    /** Automatically show any error Message children */
+    /** Automatically show any error Message children. */
     error: PropTypes.bool,
 
-    /** A form can have its color inverted for contrast */
+    /** A form can have its color inverted for contrast. */
     inverted: PropTypes.bool,
 
-    /** Automatically show a loading indicator */
+    /** Automatically show a loading indicator. */
     loading: PropTypes.bool,
 
     /**
@@ -212,23 +198,31 @@ export default class Form extends Component {
     /** A comment can contain a form to reply to a comment. This may have arbitrary content. */
     reply: PropTypes.bool,
 
-    /** Called onSubmit with the form node that returns the serialized form object */
+    /** Called onSubmit with the form node that returns the serialized form object. */
     serializer: PropTypes.func,
 
-    /** A form can vary in size */
-    size: PropTypes.oneOf(_meta.props.size),
+    /** A form can vary in size. */
+    size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 
-    /** Automatically show any success Message children */
+    /** Automatically show any success Message children. */
     success: PropTypes.bool,
 
-    /** Automatically show any warning Message children */
+    /** Automatically show any warning Message children .*/
     warning: PropTypes.bool,
 
-    /** Forms can automatically divide fields to be equal width */
-    widths: PropTypes.oneOf(_meta.props.widths),
+    /** Forms can automatically divide fields to be equal width. */
+    widths: PropTypes.oneOf(['equal']),
   }
 
-  static _meta = _meta
+  static defaultProps = {
+    as: 'form',
+    serializer: formSerializer,
+  }
+
+  static _meta = {
+    name: 'Form',
+    type: META.TYPES.COLLECTION,
+  }
 
   static Field = FormField
   static Button = FormButton

src/collections/Form/FormButton.js

@@ -7,11 +7,10 @@ import {
   META,
 } from '../../lib'
 import Button from '../../elements/Button'
-
 import FormField from './FormField'
 
 /**
- * Sugar for <Form.Field control={Button} />
+ * Sugar for <Form.Field control={Button} />.
  * @see Button
  * @see Form
  */
@@ -33,7 +32,7 @@ FormButton.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A FormField control prop */
+  /** A FormField control prop. */
   control: FormField.propTypes.control,
 }
 

src/collections/Form/FormCheckbox.js

@@ -7,11 +7,10 @@ import {
   META,
 } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
-
 import FormField from './FormField'
 
 /**
- * Sugar for <Form.Field control={Checkbox} />
+ * Sugar for <Form.Field control={Checkbox} />.
  * @see Checkbox
  * @see Form
  */
@@ -33,7 +32,7 @@ FormCheckbox.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A FormField control prop */
+  /** A FormField control prop. */
   control: FormField.propTypes.control,
 }
 

src/collections/Form/FormDropdown.js

@@ -7,11 +7,10 @@ import {
   META,
 } from '../../lib'
 import Dropdown from '../../modules/Dropdown'
-
 import FormField from './FormField'
 
 /**
- * Sugar for <Form.Field control={Dropdown} />
+ * Sugar for <Form.Field control={Dropdown} />.
  * @see Dropdown
  * @see Form
  */
@@ -33,7 +32,7 @@ FormDropdown.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A FormField control prop */
+  /** A FormField control prop. */
   control: FormField.propTypes.control,
 }
 

src/collections/Form/FormField.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { createElement, PropTypes } from 'react'
 
 import {
@@ -16,7 +16,7 @@ import Checkbox from '../../modules/Checkbox'
 import Radio from '../../addons/Radio'
 
 /**
- * A field is a form element containing a label and an input
+ * A field is a form element containing a label and an input.
  * @see Form
  * @see Button
  * @see Checkbox
@@ -103,15 +103,6 @@ FormField._meta = {
   name: 'FormField',
   parent: 'Form',
   type: META.TYPES.COLLECTION,
-  props: {
-    width: SUI.WIDTHS,
-    control: [
-      'button',
-      'input',
-      'select',
-      'textarea',
-    ],
-  },
 }
 
 FormField.propTypes = {
@@ -131,16 +122,16 @@ FormField.propTypes = {
    */
   control: customPropTypes.some([
     PropTypes.func,
-    PropTypes.oneOf(FormField._meta.props.control),
+    PropTypes.oneOf(['button', 'input', 'select', 'textarea']),
   ]),
 
-  /** Individual fields may be disabled */
+  /** Individual fields may be disabled. */
   disabled: PropTypes.bool,
 
-  /** Individual fields may display an error state */
+  /** Individual fields may display an error state. */
   error: PropTypes.bool,
 
-  /** A field can have its label next to instead of above it */
+  /** A field can have its label next to instead of above it. */
   inline: PropTypes.bool,
 
   // Heads Up!
@@ -167,7 +158,7 @@ FormField.propTypes = {
   ]),
 
   /** A field can specify its width in grid columns */
-  width: PropTypes.oneOf(FormField._meta.props.width),
+  width: PropTypes.oneOf(SUI.WIDTHS),
 }
 
 export default FormField

src/collections/Form/FormGroup.js

@@ -1,26 +1,33 @@
-import React, { PropTypes } from 'react'
 import cx from 'classnames'
+import React, { PropTypes } from 'react'
 
 import {
+  customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
   SUI,
-  useWidthProp,
   useKeyOnly,
-  customPropTypes,
+  useWidthProp,
 } from '../../lib'
 
 /**
- * A set of fields can appear grouped together
+ * A set of fields can appear grouped together.
  * @see Form
  */
 function FormGroup(props) {
-  const { children, className, grouped, inline, widths } = props
+  const {
+    children,
+    className,
+    grouped,
+    inline,
+    widths,
+  } = props
+
   const classes = cx(
-    useWidthProp(widths, null, true),
-    useKeyOnly(inline, 'inline'),
     useKeyOnly(grouped, 'grouped'),
+    useKeyOnly(inline, 'inline'),
+    useWidthProp(widths, null, true),
     'fields',
     className,
   )
@@ -34,9 +41,6 @@ FormGroup._meta = {
   name: 'FormGroup',
   parent: 'Form',
   type: META.TYPES.COLLECTION,
-  props: {
-    widths: [...SUI.WIDTHS, 'equal'],
-  },
 }
 
 FormGroup.propTypes = {
@@ -49,24 +53,20 @@ FormGroup.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
-  /** Fields can show related choices */
+  /** Fields can show related choices. */
   grouped: customPropTypes.every([
     customPropTypes.disallow(['inline']),
     PropTypes.bool,
   ]),
 
-  /** Multiple fields may be inline in a row */
+  /** Multiple fields may be inline in a row. */
   inline: customPropTypes.every([
     customPropTypes.disallow(['grouped']),
     PropTypes.bool,
   ]),
 
-  /** Fields Groups can specify their width in grid columns or automatically divide fields to be equal width */
-  widths: PropTypes.oneOf(FormGroup._meta.props.widths),
-}
-
-FormGroup.defaultProps = {
-  as: 'div',
+  /** Fields Groups can specify their width in grid columns or automatically divide fields to be equal width. */
+  widths: PropTypes.oneOf([...SUI.WIDTHS, 'equal']),
 }
 
 export default FormGroup

src/collections/Form/FormInput.js

@@ -7,11 +7,10 @@ import {
   META,
 } from '../../lib'
 import Input from '../../elements/Input'
-
 import FormField from './FormField'
 
 /**
- * Sugar for <Form.Field control={Input} />
+ * Sugar for <Form.Field control={Input} />.
  * @see Form
  * @see Input
  */
@@ -33,7 +32,7 @@ FormInput.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A FormField control prop */
+  /** A FormField control prop. */
   control: FormField.propTypes.control,
 }
 

src/collections/Form/FormRadio.js

@@ -7,11 +7,10 @@ import {
   META,
 } from '../../lib'
 import Radio from '../../addons/Radio'
-
 import FormField from './FormField'
 
 /**
- * Sugar for <Form.Field control={Radio} />
+ * Sugar for <Form.Field control={Radio} />.
  * @see Form
  * @see Radio
  */
@@ -33,7 +32,7 @@ FormRadio.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A FormField control prop */
+  /** A FormField control prop. */
   control: FormField.propTypes.control,
 }
 

src/collections/Form/FormSelect.js

@@ -7,11 +7,10 @@ import {
   META,
 } from '../../lib'
 import Select from '../../addons/Select'
-
 import FormField from './FormField'
 
 /**
- * Sugar for <Form.Field control={Select} />
+ * Sugar for <Form.Field control={Select} />.
  * @see Form
  * @see Select
  */
@@ -33,7 +32,7 @@ FormSelect.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A FormField control prop */
+  /** A FormField control prop. */
   control: FormField.propTypes.control,
 }