[TextField/FormControl] dense implementation

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

@@ -7,13 +7,13 @@ Provides context such as dirty/focused/error/required for form inputs.
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The contents of the form control. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. |
-| error | bool | false | If `true`, the label should be displayed in an error state. |
-| fullWidth | bool | false | If `true`, the label will take up the full width of its container. |
-| marginForm | bool | false | If `true`, add the margin top and bottom. |
-| required | bool | false | If `true`, the label will indicate that the input is required. |
+| children | Element |  | The contents of the form control. |
+| classes | Object |  | Useful to extend the style applied to components. |
+| disabled | boolean | false | If `true`, the label, input and helper text should be displayed in a disabled state. |
+| error | boolean | false | If `true`, the label should be displayed in an error state. |
+| fullWidth | boolean | false | If `true`, the label will take up the full width of its container. |
+| margin | union:&nbsp;'none'<br>&nbsp;'dense'<br>&nbsp;'normal'<br> | 'none' | If `dense` | `normal`, will adjust vertical spacing of this and contained components. |
+| required | boolean | false | If `true`, the label will indicate that the input is required. |
 
 Any other properties supplied will be spread to the root element.
 
@@ -22,7 +22,8 @@ Any other properties supplied will be spread to the root element.
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
-- `marginForm`
+- `marginNormal`
+- `marginDense`
 - `fullWidth`
 
 Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)

docs/src/pages/component-api/Input/Input.md

@@ -8,16 +8,16 @@
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | className | string |  | The CSS class name of the wrapper element. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. It's an `input` by default. |
+| classes | Object |  | Useful to extend the style applied to components. |
+| component | union:&nbsp;string<br>&nbsp;Function<br> |  | The component used for the root node. Either a string to use a DOM element or a component. It's an `input` by default. |
 | defaultValue | union:&nbsp;string<br>&nbsp;number<br> |  | The default input value, useful when not controlling the component. |
-| disableUnderline | bool | false | If `true`, the input will not have an underline. |
-| error | bool |  | If `true`, the input will indicate an error. |
-| fullWidth | bool | false | If `true`, the input will take up the full width of its container. |
+| disableUnderline | boolean | false | If `true`, the input will not have an underline. |
+| error | boolean |  | If `true`, the input will indicate an error. |
+| fullWidth | boolean | false | If `true`, the input will take up the full width of its container. |
 | id | string |  |  |
-| inputProps | object |  | Properties applied to the `input` element. |
-| inputRef | function |  | Use that property to pass a ref callback to the native input component. |
-| multiline | bool | false | If `true`, a textarea element will be rendered. |
+| inputProps | Object |  | Properties applied to the `input` element. |
+| inputRef | Function |  | Use that property to pass a ref callback to the native input component. |
+| multiline | boolean | false | If `true`, a textarea element will be rendered. |
 | rows | union:&nbsp;string<br>&nbsp;number<br> |  | Number of rows to display when multiline option is set to true. |
 | rowsMax | union:&nbsp;string<br>&nbsp;number<br> |  | Maxium number of rows to display when multiline option is set to true. |
 | type | string | 'text' | Type of the input element. It should be a valid HTML5 input type. |
@@ -34,6 +34,7 @@ This property accepts the following keys:
 - `inkbar`
 - `error`
 - `input`
+- `inputDense`
 - `disabled`
 - `focused`
 - `underline`

docs/src/pages/component-api/TextField/TextField.md

@@ -7,30 +7,30 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| FormHelperTextProps | object |  | Properties applied to the `FormHelperText` element. |
+| FormHelperTextProps | Object |  | Properties applied to the `FormHelperText` element. |
 | InputClassName | string |  | The CSS class name of the `Input` element. |
-| InputLabelProps | object |  | Properties applied to the `InputLabel` element. |
-| InputProps | object |  | Properties applied to the `Input` element. |
-| autoComplete | bool |  |  |
-| autoFocus | bool |  |  |
+| InputLabelProps | Object |  | Properties applied to the `InputLabel` element. |
+| InputProps | Object |  | Properties applied to the `Input` element. |
+| autoComplete | boolean |  |  |
+| autoFocus | boolean |  |  |
 | defaultValue | string |  | The default value of the `Input` element. |
-| disabled | bool |  | If `true`, the input will be disabled. |
-| error | bool |  | If `true`, the label will be displayed in an error state. |
-| fullWidth | bool |  | If `true`, the input will take up the full width of its container. |
-| helperText | node |  | The helper text content. |
+| disabled | boolean |  | If `true`, the input will be disabled. |
+| error | boolean |  | If `true`, the label will be displayed in an error state. |
+| fullWidth | boolean |  | If `true`, the input will take up the full width of its container. |
+| helperText | union:&nbsp;string<br>&nbsp;Element<*><br> |  | The helper text content. |
 | helperTextClassName | string |  | The CSS class name of the helper text element. |
 | id | string |  |  |
 | inputClassName | string |  | The CSS class name of the `input` element. |
-| inputProps | object |  | Properties applied to the `input` element. |
-| inputRef | function |  | Use that property to pass a ref callback to the native input component. |
-| label | node |  | The label content. |
+| inputProps | Object |  | Properties applied to the `input` element. |
+| inputRef | Function |  | Use that property to pass a ref callback to the native input component. |
+| label | union:&nbsp;string<br>&nbsp;Element<*><br> |  | The label content. |
 | labelClassName | string |  | The CSS class name of the label element. |
-| marginForm | bool |  | If `true`, add the margin top and bottom inside the FormControl. |
-| multiline | bool |  | If `true`, a textarea element will be rendered instead of an input. |
+| margin | union:&nbsp;'none'<br>&nbsp;'dense'<br>&nbsp;'normal'<br> |  | If `dense` | `normal`, will adjust vertical spacing of this and contained components. |
+| multiline | boolean |  | If `true`, a textarea element will be rendered instead of an input. |
 | name | string |  | Name attribute of the `Input` element. |
 | placeholder | string |  |  |
-| required | bool | false | If `true`, the label is displayed as required. |
-| rootRef | function |  | Use that property to pass a ref callback to the root component. |
+| required | boolean | false | If `true`, the label is displayed as required. |
+| rootRef | Function |  | Use that property to pass a ref callback to the root component. |
 | rows | union:&nbsp;string<br>&nbsp;number<br> |  | Number of rows to display when multiline option is set to true. |
 | rowsMax | union:&nbsp;string<br>&nbsp;number<br> |  | Maxium number of rows to display when multiline option is set to true. |
 | type | string |  | Type attribute of the `Input` element. It should be a valid HTML5 input type. |

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

@@ -13,7 +13,7 @@ const styleSheet = createStyleSheet('ComposedTextField', theme => ({
     display: 'flex',
     flexWrap: 'wrap',
   },
-  input: {
+  formControl: {
     margin: theme.spacing.unit,
   },
 }));
@@ -32,21 +32,21 @@ class ComposedTextField extends Component {
 
     return (
       <div className={classes.container}>
-        <FormControl className={classes.input}>
+        <FormControl className={classes.formControl}>
           <InputLabel htmlFor="name">Name</InputLabel>
           <Input id="name" value={this.state.name} onChange={this.handleChange} />
         </FormControl>
-        <FormControl className={classes.input}>
+        <FormControl className={classes.formControl}>
           <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} disabled>
+        <FormControl className={classes.formControl} disabled>
           <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>
+        <FormControl className={classes.formControl} error>
           <InputLabel htmlFor="name">Name</InputLabel>
           <Input id="name" value={this.state.name} onChange={this.handleChange} />
           <FormHelperText>Some important helper text</FormHelperText>

docs/src/pages/component-demos/text-fields/TextInputs.js → docs/src/pages/component-demos/text-fields/Inputs.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 import Input from 'material-ui/Input/Input';
 
-const styleSheet = createStyleSheet('TextInputs', theme => ({
+const styleSheet = createStyleSheet('Inputs', theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -15,7 +15,7 @@ const styleSheet = createStyleSheet('TextInputs', theme => ({
   },
 }));
 
-function TextInputs(props) {
+function Inputs(props) {
   const classes = props.classes;
   return (
     <div className={classes.container}>
@@ -27,8 +27,8 @@ function TextInputs(props) {
   );
 }
 
-TextInputs.propTypes = {
+Inputs.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styleSheet)(TextInputs);
+export default withStyles(styleSheet)(Inputs);

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

@@ -0,0 +1,53 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import TextField from 'material-ui/TextField';
+
+const styleSheet = createStyleSheet('TextFieldMargins', theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+    width: 200,
+  },
+}));
+
+const TextFieldMargins = props => {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.container}>
+      <TextField
+        label="None"
+        defaultValue="Default Value"
+        className={classes.textField}
+        helperText="Some important text"
+      />
+      <TextField
+        label="Dense"
+        defaultValue="Default Value"
+        className={classes.textField}
+        helperText="Some important text"
+        margin="dense"
+      />
+      <TextField
+        label="Normal"
+        defaultValue="Default Value"
+        className={classes.textField}
+        helperText="Some important text"
+        margin="normal"
+      />
+    </div>
+  );
+};
+
+TextFieldMargins.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(TextFieldMargins);

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

@@ -10,7 +10,7 @@ const styleSheet = createStyleSheet('TextFields', theme => ({
     display: 'flex',
     flexWrap: 'wrap',
   },
-  input: {
+  textField: {
     marginLeft: theme.spacing.unit,
     marginRight: theme.spacing.unit,
     width: 200,
@@ -30,84 +30,82 @@ class TextFields extends Component {
         <TextField
           id="name"
           label="Name"
-          className={classes.input}
+          className={classes.textField}
           value={this.state.name}
           onChange={event => this.setState({ name: event.target.value })}
-          marginForm
+          margin="normal"
         />
         <TextField
           id="uncontrolled"
           label="Uncontrolled"
           defaultValue="foo"
-          className={classes.input}
-          marginForm
+          className={classes.textField}
+          margin="normal"
         />
         <TextField
           required
           id="required"
           label="Required"
           defaultValue="Hello World"
-          className={classes.input}
-          marginForm
+          className={classes.textField}
+          margin="normal"
         />
         <TextField
           error
           id="error"
           label="Error"
           defaultValue="Hello World"
-          className={classes.input}
-          marginForm
+          className={classes.textField}
+          margin="normal"
         />
         <TextField
           id="password"
           label="Password"
-          className={classes.input}
+          className={classes.textField}
           type="password"
-          marginForm
+          margin="normal"
         />
         <TextField
           id="multiline-flexible"
           label="Multiline"
           multiline
           rowsMax="4"
           defaultValue="Default Value"
-          className={classes.input}
-          marginForm
+          className={classes.textField}
+          margin="normal"
         />
         <TextField
           id="multiline-static"
           label="Multiline"
           multiline
           rows="4"
           defaultValue="Default Value"
-          className={classes.input}
-          marginForm
+          className={classes.textField}
+          margin="normal"
         />
         <TextField
           id="date"
           label="From date"
           type="date"
           defaultValue="2017-05-24"
-          className={classes.input}
-          marginForm
+          className={classes.textField}
+          margin="normal"
         />
         <TextField
           id="helperText"
           label="Helper text"
-          type="text"
           defaultValue="Default Value"
-          className={classes.input}
+          className={classes.textField}
           helperText="Some important text"
-          marginForm
+          margin="normal"
         />
         <TextField
           id="placeholder"
           label="Label"
-          type="text"
           InputProps={{ placeholder: 'Placeholder' }}
           helperText="Full width!!!"
           fullWidth
-          marginForm
+          margin="normal"
         />
       </div>
     );

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

@@ -7,16 +7,23 @@ components: Input, TextField, FormHelperText
 [Text fields](https://material.google.com/components/text-fields.html) allow users to input text and usually appear in forms.
 Users may enter text, numbers, or mixed-format types of input.
 
-## Input
-
-{{demo='pages/component-demos/text-fields/TextInputs.js'}}
-
 ## TextField
-
 The `<TextField>` wrapper component is a complete form control including a label, input and help text.
 
 {{demo='pages/component-demos/text-fields/TextFields.js'}}
 
-This component is composed of smaller components that you can also leverage yourself to significantly customize your input.
+## Components
+`TextField` is composed of smaller components (`FormControl`, `InputLabel`, `Input`, and `FormHelperText`) that you 
+can leverage directly to significantly customize your form inputs.
 
 {{demo='pages/component-demos/text-fields/ComposedTextField.js'}}
+
+## Layout
+`TextField`, `FormControl` allow the specification of `margin` to alter the vertical spacing of inputs. Using
+`none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will as well as alter
+other styles to meet the specification.
+
+{{demo='pages/component-demos/text-fields/TextFieldMargins.js'}}
+
+## Inputs
+{{demo='pages/component-demos/text-fields/Inputs.js'}}