[TextField]: add a compact property that reduce height

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

@@ -0,0 +1,120 @@
+// @flow
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import TextField from 'material-ui/TextField';
+
+const styleSheet = createStyleSheet('TextFields', theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  input: {
+    margin: theme.spacing.unit,
+    width: 200,
+  },
+}));
+
+class TextFields extends Component {
+  state = {
+    name: 'Cat in the Hat',
+  };
+
+  render() {
+    const classes = this.props.classes;
+
+    return (
+      <div className={classes.container}>
+        <TextField
+          id="name"
+          label="Name"
+          className={classes.input}
+          compact
+          value={this.state.name}
+          onChange={event => this.setState({ name: event.target.value })}
+        />
+        <TextField
+          id="uncontrolled"
+          label="Uncontrolled"
+          defaultValue="foo"
+          className={classes.input}
+          compact
+        />
+        <TextField
+          required
+          id="required"
+          label="Required"
+          defaultValue="Hello World"
+          className={classes.input}
+          compact
+        />
+        <TextField
+          error
+          id="error"
+          label="Error"
+          defaultValue="Hello World"
+          className={classes.input}
+          compact
+        />
+        <TextField
+          id="password"
+          label="Password"
+          className={classes.input}
+          compact
+          type="password"
+        />
+        <TextField
+          id="multiline-flexible"
+          label="Multiline"
+          multiline
+          rowsMax="4"
+          defaultValue="Default Value"
+          className={classes.input}
+          compact
+        />
+        <TextField
+          id="multiline-static"
+          label="Multiline"
+          multiline
+          rows="4"
+          defaultValue="Default Value"
+          className={classes.input}
+          compact
+        />
+        <TextField
+          id="date"
+          label="From date"
+          type="date"
+          defaultValue="2017-05-24"
+          className={classes.input}
+          compact
+        />
+        <TextField
+          id="helperText"
+          label="Helper text"
+          type="text"
+          defaultValue="Default Value"
+          className={classes.input}
+          compact
+          helperText="Some important text"
+        />
+        <TextField
+          id="placeholder"
+          label="Label"
+          className={classes.input}
+          compact
+          type="text"
+          InputProps={{ placeholder: 'Placeholder' }}
+          helperText="Helper text"
+        />
+      </div>
+    );
+  }
+}
+
+TextFields.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(TextFields);

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

@@ -17,6 +17,10 @@ The `<TextField>` wrapper component is a complete form control including a label
 
 {{demo='pages/component-demos/text-fields/TextFields.js'}}
 
+If needed, the `<TextField>` can be made smaller with `compact`.
+
+{{demo='pages/component-demos/text-fields/TextFieldsCompact.js'}}
+
 This component is composed of smaller components that you can also leverage yourself to significantly customize your input.
 
 {{demo='pages/component-demos/text-fields/ComposedTextField.js'}}

src/Input/Input.js

@@ -28,6 +28,11 @@ export const styleSheet = createStyleSheet('MuiInput', theme => ({
       marginTop: theme.spacing.unit * 4,
     },
   },
+  formControlCompact: {
+    'label + &': {
+      marginTop: theme.spacing.unit * 2,
+    },
+  },
   inkbar: {
     '&:after': {
       backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'],
@@ -250,6 +255,7 @@ class Input extends Component {
       autoFocus,
       classes,
       className: classNameProp,
+      compact,
       component,
       defaultValue,
       disabled: disabledProp,
@@ -296,6 +302,7 @@ class Input extends Component {
         [classes.error]: error,
         [classes.focused]: this.state.focused,
         [classes.formControl]: muiFormControl,
+        [classes.formControlCompact]: muiFormControl && compact,
         [classes.inkbar]: !disableUnderline,
         [classes.multilineWrapper]: multiline,
         [classes.underline]: !disableUnderline,
@@ -383,6 +390,10 @@ Input.propTypes = {
    * The CSS class name of the wrapper element.
    */
   className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  compact: PropTypes.bool,
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.

src/Input/InputLabel.js

@@ -17,10 +17,16 @@ export const styleSheet = createStyleSheet('MuiInputLabel', theme => ({
     top: 0,
     transform: `translate(0, ${theme.spacing.unit * 5}px) scale(1)`,
   },
+  formControlCompact: {
+    transform: `translate(0, ${theme.spacing.unit * 3}px) scale(1)`,
+  },
   shrink: {
     transform: `translate(0, ${theme.spacing.unit * 2 + 1.5}px) scale(0.75)`,
     transformOrigin: 'top left',
   },
+  shrinkCompact: {
+    transform: 'translate(0, 1.5px) scale(0.75)',
+  },
   animated: {
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter,
@@ -39,6 +45,7 @@ function InputLabel(props, context) {
     children,
     classes,
     className: classNameProp,
+    compact,
     shrink: shrinkProp,
     ...other
   } = props;
@@ -54,8 +61,10 @@ function InputLabel(props, context) {
     classes.root,
     {
       [classes.formControl]: muiFormControl,
+      [classes.formControlCompact]: muiFormControl && compact,
       [classes.animated]: !disableAnimation,
       [classes.shrink]: shrink,
+      [classes.shrinkCompact]: shrink && compact,
       [classes.disabled]: disabled,
     },
     classNameProp,
@@ -81,6 +90,10 @@ InputLabel.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  compact: PropTypes.bool,
   /**
    * If `true`, the transition animation is disabled.
    */

src/TextField/TextField.js

@@ -10,6 +10,7 @@ function TextField(props) {
   const {
     autoFocus,
     className,
+    compact,
     defaultValue,
     disabled,
     error,
@@ -48,12 +49,13 @@ function TextField(props) {
   return (
     <FormControl ref={rootRef} className={className} error={error} required={required} {...other}>
       {label &&
-        <InputLabel className={labelClassName} {...InputLabelProps}>
+        <InputLabel className={labelClassName} compact={compact} {...InputLabelProps}>
           {label}
         </InputLabel>}
       <Input
         autoFocus={autoFocus}
         className={InputClassName}
+        compact={compact}
         defaultValue={defaultValue}
         disabled={disabled}
         multiline={multiline}
@@ -84,6 +86,10 @@ TextField.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * If `true`, the height will be smaller.
+   */
+  compact: PropTypes.bool,
   /**
    * The default value of the `Input` element.
    */