[TextField] Make it meet guidelines

docs/src/pages/component-api/TextField/TextFieldLabel.md → docs/src/pages/component-api/Form/FormHelperText.md

@@ -1,30 +1,26 @@
-# TextFieldLabel
+FormHelperText
+=========
 
 
 
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableAnimation | bool | false | If `true`, the transition animation is disabled. |
-| error | bool |  | If `true`, the label is displayed in an error state. |
-| focused | bool |  | If `true`, the input of this label is focused. |
-| required | bool |  | If `true`, the label will indicate that the input is required. |
-| shrink | bool | false | If `true`, the label is shrunk. |
+| 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.
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
-- `shrink`
-- `animated`
+- `error`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
 section for more detail.
 
 If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
-you need to use the following style sheet name: `MuiTextFieldLabel`.
+you need to use the following style sheet name: `MuiFormHelperText`.

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

@@ -6,6 +6,7 @@ import { withStyles, createStyleSheet } from 'material-ui/styles';
 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', theme => ({
   container: {
@@ -37,6 +38,20 @@ class ComposedTextField extends Component {
           </InputLabel>
           <Input id="name" value={this.state.name} onChange={this.handleChange} />
         </FormControl>
+        <FormControl className={classes.input}>
+          <InputLabel htmlFor="name">
+            Name
+          </InputLabel>
+          <Input id="name" value={this.state.name} onChange={this.handleChange} />
+          <FormHelperText>Some important helper text</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.input} error>
+          <InputLabel htmlFor="name">
+            Name
+          </InputLabel>
+          <Input id="name" value={this.state.name} onChange={this.handleChange} />
+          <FormHelperText>Some important helper text</FormHelperText>
+        </FormControl>
       </div>
     );
   }

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

@@ -77,6 +77,14 @@ class TextFields extends Component {
           defaultValue="2017-05-24"
           className={classes.input}
         />
+        <TextField
+          id="helperText"
+          label="Helper text"
+          type="text"
+          defaultValue="Default Value"
+          className={classes.input}
+          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 withStyles from '../styles/withStyles';
+import { isDirty } from '../Input/Input';
 
 export const styleSheet = createStyleSheet('MuiFormControl', {
   root: {
@@ -49,6 +50,19 @@ class FormControl extends Component {
     };
   }
 
+  componentWillMount() {
+    Children.forEach(this.props.children, child => {
+      if (
+        child &&
+        child.type &&
+        (child.type.name === 'Input' || (child.type.Naked && child.type.Naked.name === 'Input')) &&
+        isDirty(child.props)
+      ) {
+        this.setState({ dirty: true });
+      }
+    });
+  }
+
   handleFocus = () => {
     if (this.props.onFocus) {
       this.props.onFocus();

src/Form/FormControl.spec.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { spy } from 'sinon';
 import { assert } from 'chai';
 import { createShallow } from '../test-utils';
+import Input from '../Input';
 import FormControl, { styleSheet } from './FormControl';
 
 describe('<FormControl />', () => {
@@ -47,6 +48,18 @@ describe('<FormControl />', () => {
     });
   });
 
+  describe('should be dirty if has input with value set', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = shallow(<FormControl><Input value="bar" /></FormControl>);
+    });
+
+    it('should be dirty initially', () => {
+      assert.strictEqual(wrapper.state().dirty, true);
+    });
+  });
+
   describe('muiFormControl child context', () => {
     let wrapper;
     let muiFormControlContext;

src/Form/FormHelperText.js

@@ -0,0 +1,69 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { createStyleSheet } from 'jss-theme-reactor';
+import withStyles from '../styles/withStyles';
+
+export const styleSheet = createStyleSheet('MuiFormHelperText', theme => ({
+  root: {
+    color: theme.palette.input.helperText,
+    fontSize: 12,
+    lineHeight: 1.4,
+    margin: 0,
+  },
+  error: {
+    color: theme.palette.error.A400,
+  },
+}));
+
+function FormHelperText(props, context) {
+  const { children, classes, className: classNameProp, error: errorProp, ...other } = props;
+  const { muiFormControl } = context;
+
+  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,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * 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,
+};
+
+export default withStyles(styleSheet)(FormHelperText);

src/Form/FormHelperText.spec.js

@@ -0,0 +1,63 @@
+// @flow
+
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import FormHelperText, { styleSheet } from './FormHelperText';
+
+describe('<FormHelperText />', () => {
+  let shallow;
+  let classes;
+
+  before(() => {
+    shallow = createShallow({ dive: true });
+    classes = shallow.context.styleManager.render(styleSheet);
+  });
+
+  it('should render a <p />', () => {
+    const wrapper = shallow(<FormHelperText className="woof" />);
+    assert.strictEqual(wrapper.name(), 'p');
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
+    assert.strictEqual(wrapper.hasClass('woof'), true, 'should have the user class');
+  });
+
+  describe('prop: error', () => {
+    it('should show an error class', () => {
+      const wrapper = shallow(<FormHelperText error />);
+      assert.strictEqual(wrapper.hasClass(classes.error), true);
+    });
+  });
+
+  describe('with muiFormControl context', () => {
+    let wrapper;
+    let muiFormControl;
+
+    function setFormControlContext(muiFormControlContext) {
+      muiFormControl = muiFormControlContext;
+      wrapper.setContext({ ...wrapper.context(), muiFormControl });
+    }
+
+    beforeEach(() => {
+      wrapper = shallow(<FormHelperText>Foo</FormHelperText>);
+    });
+    ['error'].forEach(visualState => {
+      describe(visualState, () => {
+        beforeEach(() => {
+          setFormControlContext({ [visualState]: true });
+        });
+
+        it(`should have the ${visualState} class`, () => {
+          assert.strictEqual(wrapper.hasClass(classes[visualState]), true);
+        });
+
+        it('should be overridden by props', () => {
+          assert.strictEqual(wrapper.hasClass(classes[visualState]), true);
+          wrapper.setProps({ [visualState]: false });
+          assert.strictEqual(wrapper.hasClass(classes[visualState]), false);
+          wrapper.setProps({ [visualState]: true });
+          assert.strictEqual(wrapper.hasClass(classes[visualState]), true);
+        });
+      });
+    });
+  });
+});

src/Form/FormLabel.js

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

src/Form/index.js

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

src/Input/Input.js

@@ -7,7 +7,7 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import withStyles from '../styles/withStyles';
 import Textarea from './Textarea';
 
-function isDirty(obj) {
+export function isDirty(obj) {
   return obj && obj.value && obj.value.length > 0;
 }
 
@@ -19,12 +19,15 @@ export const styleSheet = createStyleSheet('MuiInput', theme => ({
     fontFamily: theme.typography.fontFamily,
   },
   formControl: {
-    marginTop: 10,
-    marginBottom: 10,
+    marginTop: 8,
+    marginBottom: 8,
+    'label + &': {
+      marginTop: 32,
+    },
   },
   inkbar: {
     '&:after': {
-      backgroundColor: theme.palette.primary[500],
+      backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'],
       left: 0,
       bottom: -2,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -45,21 +48,21 @@ export const styleSheet = createStyleSheet('MuiInput', theme => ({
   focused: {},
   error: {
     '&:after': {
-      backgroundColor: theme.palette.error[500],
+      backgroundColor: theme.palette.error.A400,
       transform: 'scaleX(1)', // error is always underlined in red
     },
   },
   input: {
     font: 'inherit',
-    padding: '6px 0',
+    padding: '8px 0',
     border: 0,
     display: 'block',
     boxSizing: 'content-box',
     verticalAlign: 'middle',
     whiteSpace: 'normal',
     background: 'none',
     margin: 0, // Reset for Safari
-    color: theme.palette.text.primary,
+    color: theme.palette.input.inputText,
     width: '100%',
     '&:focus': {
       outline: 0,
@@ -84,9 +87,19 @@ export const styleSheet = createStyleSheet('MuiInput', theme => ({
     color: theme.palette.text.disabled,
   },
   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: 7,
+      transition: theme.transitions.create('border-color', {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.ease,
+      }),
+    },
     '&$disabled': {
       borderBottomStyle: 'dotted',
+      borderImage: `linear-gradient(to right, ${theme.palette.input.bottomLine} 33%, transparent 0%)
+        100 0 / 0 0 1px / 0 0 0 3px repeat`,
     },
   },
 }));