[TextField] Make it meet guidelines

docs/src/pages/component-api/Form/FormHelperText.md

@@ -0,0 +1,15 @@
+FormHelperText
+=========
+
+
+
+Props
+-----
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| children | node |  | The content of the component. |
+| className | string |  | The CSS class name of the root element. |
+| error | bool |  | Whether the helper text should be displayed in an error state. |
+
+Any other properties supplied will be spread to the root element.

docs/src/pages/component-demos/text-fields/ComposedTextField.js

@@ -6,14 +6,16 @@ import customPropTypes from 'material-ui/utils/customPropTypes';
 import Input from 'material-ui/Input';
 import InputLabel from 'material-ui/Input/InputLabel';
 import FormControl from 'material-ui/Form/FormControl';
+import FormHelperText from 'material-ui/Form/FormHelperText';
 
 const styleSheet = createStyleSheet('ComposedTextField', () => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
   },
   input: {
-    margin: 10,
+    marginLeft: 10,
+    marginRight: 10,
   },
 }));
 
@@ -41,6 +43,26 @@ export default class ComposedTextField extends Component {
             onChange={(event) => this.setState({ name: event.target.value })}
           />
         </FormControl>
+        <FormControl className={classes.input}>
+          <InputLabel htmlFor="name">
+            Name
+          </InputLabel>
+          <Input
+            id="name"
+            value="Composed TextField"
+          />
+          <FormHelperText>Some important helper text</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.input} error>
+          <InputLabel htmlFor="name">
+            Name
+          </InputLabel>
+          <Input
+            id="name"
+            value="Composed TextField"
+          />
+          <FormHelperText>Some important helper text</FormHelperText>
+        </FormControl>
       </div>
     );
   }

docs/src/pages/component-demos/text-fields/TextFields.js

@@ -56,6 +56,21 @@ export default class TextFields extends Component {
           defaultValue="Hello World"
           className={classes.input}
         />
+        <TextField
+          id="name"
+          label="Name"
+          className={classes.input}
+          value={this.state.name}
+          onChange={(event) => this.setState({ name: event.target.value })}
+          disabled
+        />
+        <TextField
+          id="name"
+          label="Name"
+          className={classes.input}
+          value="Example value"
+          helperText="Some important text"
+        />
       </div>
     );
   }

docs/src/pages/component-demos/text-fields/text-fields.md

@@ -1,5 +1,5 @@
 ---
-components: Input, TextField, TextFieldLabel
+components: Input, TextField, FormHelperText
 ---
 
 # Text Fields

src/Form/FormControl.js

@@ -1,10 +1,11 @@
 // @flow weak
 
-import React, { Component } from 'react';
+import React, { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from '../utils/customPropTypes';
+import { isDirty } from '../Input/Input';
 
 export const styleSheet = createStyleSheet('MuiFormControl', () => {
   return {
@@ -78,6 +79,17 @@ export default class FormControl extends Component {
     };
   }
 
+  componentWillMount() {
+    let dirty = false;
+    Children.forEach(this.props.children, (child) => {
+      if (child && child.type && child.type.name === 'Input' && isDirty(child.props)) {
+        dirty = true;
+      }
+    });
+
+    this.setState({ dirty });
+  }
+
   handleFocus = () => {
     if (!this.state.focused) {
       this.setState({ focused: true });

src/Form/FormHelperText.js

@@ -0,0 +1,70 @@
+// @flow weak
+/* eslint-disable jsx-a11y/label-has-for */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { createStyleSheet } from 'jss-theme-reactor';
+import customPropTypes from '../utils/customPropTypes';
+
+export const styleSheet = createStyleSheet('MuiFormHelperText', (theme) => {
+  return {
+    root: {
+      color: theme.palette.input.helperText,
+      fontSize: 12,
+      lineHeight: 1.4,
+      margin: 0,
+    },
+    error: {
+      color: theme.palette.error.A400,
+    },
+  };
+});
+
+export default function FormHelperText(props, context) {
+  const {
+    children,
+    className: classNameProp,
+    error: errorProp,
+    ...other
+  } = props;
+
+  const { muiFormControl, styleManager } = context;
+  const classes = styleManager.render(styleSheet);
+
+  let error = errorProp;
+
+  if (muiFormControl && typeof error === 'undefined') {
+    error = muiFormControl.error;
+  }
+
+  const className = classNames(classes.root, {
+    [classes.error]: error,
+  }, classNameProp);
+
+  return (
+    <p className={className} {...other}>
+      {children}
+    </p>
+  );
+}
+
+FormHelperText.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * The CSS class name of the root element.
+   */
+  className: PropTypes.string,
+  /**
+   * Whether the helper text should be displayed in an error state.
+   */
+  error: PropTypes.bool,
+};
+
+FormHelperText.contextTypes = {
+  muiFormControl: PropTypes.object,
+  styleManager: customPropTypes.muiRequired,
+};

src/Form/FormLabel.js

@@ -8,17 +8,18 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from '../utils/customPropTypes';
 
 export const styleSheet = createStyleSheet('MuiFormLabel', (theme) => {
-  const focusColor = theme.palette.primary.A200;
+  const { palette } = theme;
+  const focusColor = palette.type === 'light' ? palette.primary.A700 : palette.primary.A200;
   return {
     root: {
-      color: theme.palette.text.secondary,
+      color: palette.input.labelText,
       lineHeight: 1,
     },
     focused: {
       color: focusColor,
     },
     error: {
-      color: theme.palette.error[500],
+      color: palette.error.A400,
     },
   };
 });

src/Form/index.js

@@ -3,3 +3,4 @@
 export FormGroup from './FormGroup';
 export FormLabel from './FormLabel';
 export FormControl from './FormControl';
+export FormHelperText from './FormHelperText';

src/Input/Input.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from '../utils/customPropTypes';
 
-function isDirty(obj) {
+export function isDirty(obj) {
   return obj && obj.value && obj.value.length > 0;
 }
 
@@ -16,15 +16,16 @@ export const styleSheet = createStyleSheet('MuiInput', (theme) => {
     wrapper: {
       // Mimics the default input display property used by browsers for an input.
       display: 'inline-block',
+      marginBottom: 8,
+      marginTop: 8,
       position: 'relative',
     },
     formControl: {
-      marginTop: 10,
-      marginBottom: 10,
+      marginTop: 32,
     },
     inkbar: {
       '&:after': {
-        backgroundColor: palette.primary.A200,
+        backgroundColor: palette.type === 'light' ? palette.primary.A700 : palette.primary.A200,
         left: 0,
         bottom: -1,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -45,7 +46,7 @@ export const styleSheet = createStyleSheet('MuiInput', (theme) => {
     focused: {},
     error: {
       '&:after': {
-        backgroundColor: palette.error[500],
+        backgroundColor: palette.error.A400,
         transform: 'scaleX(1)', // error is always underlined in red
       },
     },
@@ -59,7 +60,7 @@ export const styleSheet = createStyleSheet('MuiInput', (theme) => {
       background: 'none',
       lineHeight: 1,
       appearance: 'textfield', // Improve type search style.
-      color: theme.palette.text.primary,
+      color: theme.palette.input.inputText,
       width: '100%',
       '&:focus': {
         outline: 0,
@@ -69,11 +70,19 @@ export const styleSheet = createStyleSheet('MuiInput', (theme) => {
       },
     },
     disabled: {
-      color: theme.palette.text.disabled,
+      color: theme.palette.input.disabled,
       cursor: 'not-allowed',
     },
     underline: {
-      borderBottom: `1px solid ${theme.palette.text.divider}`,
+      borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
+      '&:hover:not($disabled)': {
+        borderBottom: `2px solid ${theme.palette.text.primary}`,
+        marginBottom: -1,
+        transition: transitions.create('border-color', {
+          duration: transitions.duration.shorter,
+          easing: transitions.easing.ease,
+        }),
+      },
       '&$disabled': {
         borderBottomStyle: 'dotted',
       },

src/Input/InputLabel.js

@@ -12,28 +12,34 @@ export const styleSheet = createStyleSheet('MuiInputLabel', (theme) => {
   return {
     root: {
       transformOrigin: 'top left',
+      fontSmoothing: 'antialiased',
     },
     formControl: {
       position: 'absolute',
       left: 0,
       top: 0,
-      transform: 'translate(0, 18px) scale(1)',
+      transform: 'translate(0, 40px)',
     },
     shrink: {
-      transform: 'translate(0, 0px) scale(0.75)',
+      fontSize: 12,
+      transform: 'translate(0, 18px)',
       transformOrigin: 'top left',
     },
     animated: {
-      transition: transitions.create('transform', {
+      transition: transitions.create(['transform', 'font-size'], {
         duration: transitions.duration.shorter,
         easing: transitions.easing.easeOut,
       }),
     },
+    disabled: {
+      color: theme.palette.input.disabled,
+    },
   };
 });
 
 export default function InputLabel(props, context) {
   const {
+    disabled,
     disableAnimation,
     children,
     className: classNameProp,
@@ -54,6 +60,7 @@ export default function InputLabel(props, context) {
     [classes.formControl]: muiFormControl,
     [classes.animated]: !disableAnimation,
     [classes.shrink]: shrink,
+    [classes.disabled]: disabled,
   }, classNameProp);
 
   return (
@@ -76,6 +83,10 @@ InputLabel.propTypes = {
    * If `true`, the transition animation is disabled.
    */
   disableAnimation: PropTypes.bool,
+  /**
+   * If `true`, apply disabled class.
+   */
+  disabled: PropTypes.bool,
   /**
    * If `true`, the label will be displayed in an error state.
    */
@@ -95,6 +106,7 @@ InputLabel.propTypes = {
 };
 
 InputLabel.defaultProps = {
+  disabled: false,
   disableAnimation: false,
 };