[TextField] Add outlined and filled variants

.size-limit.js

@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '90.1 KB',
+    limit: '92.0 KB',
   },
   {
     name: 'The main bundle of the docs',

docs/src/pages/demos/text-fields/CustomizedInputs.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
+import InputBase from '@material-ui/core/InputBase';
 import InputLabel from '@material-ui/core/InputLabel';
 import TextField from '@material-ui/core/TextField';
 import FormControl from '@material-ui/core/FormControl';
@@ -28,7 +29,6 @@ const styles = theme => ({
     },
   },
   bootstrapRoot: {
-    padding: 0,
     'label + &': {
       marginTop: theme.spacing.unit * 3,
     },
@@ -39,8 +39,8 @@ const styles = theme => ({
     border: '1px solid #ced4da',
     fontSize: 16,
     padding: '10px 12px',
-    width: 'calc(100% - 24px)',
     transition: theme.transitions.create(['border-color', 'box-shadow']),
+    // Use the system font instead of the default Roboto font.
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -76,19 +76,19 @@ function CustomizedInputs(props) {
     <div className={classes.container}>
       <FormControl className={classes.margin}>
         <InputLabel
+          htmlFor="custom-css-input"
           FormLabelClasses={{
             root: classes.cssLabel,
             focused: classes.cssFocused,
           }}
-          htmlFor="custom-css-input"
         >
           Custom CSS
         </InputLabel>
         <Input
+          id="custom-css-input"
           classes={{
             underline: classes.cssUnderline,
           }}
-          id="custom-css-input"
         />
       </FormControl>
       <MuiThemeProvider theme={theme}>
@@ -98,22 +98,20 @@ function CustomizedInputs(props) {
           id="mui-theme-provider-input"
         />
       </MuiThemeProvider>
-      <TextField
-        defaultValue="react-bootstrap"
-        label="Bootstrap"
-        id="bootstrap-input"
-        InputProps={{
-          disableUnderline: true,
-          classes: {
+      <FormControl className={classes.margin}>
+        <InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
+          Bootstrap
+        </InputLabel>
+        <InputBase
+          id="bootstrap-input"
+          defaultValue="react-bootstrap"
+          classes={{
             root: classes.bootstrapRoot,
             input: classes.bootstrapInput,
-          },
-        }}
-        InputLabelProps={{
-          shrink: true,
-          className: classes.bootstrapFormLabel,
-        }}
-      />
+          }}
+        />
+      </FormControl>
+      <InputBase className={classes.margin} defaultValue="Naked input" />
     </div>
   );
 }

docs/src/pages/demos/text-fields/FilledInputAdornments.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import TextField from '@material-ui/core/TextField';
+import MenuItem from '@material-ui/core/MenuItem';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  margin: {
+    margin: theme.spacing.unit,
+  },
+  textField: {
+    flexBasis: 280,
+  },
+});
+
+const ranges = [
+  {
+    value: '0-20',
+    label: '0 to 20',
+  },
+  {
+    value: '21-50',
+    label: '21 to 50',
+  },
+  {
+    value: '51-100',
+    label: '51 to 100',
+  },
+];
+
+class FilledInputAdornments extends React.Component {
+  state = {
+    amount: '',
+    password: '',
+    weight: '',
+    weightRange: '',
+    showPassword: false,
+  };
+
+  handleChange = prop => event => {
+    this.setState({ [prop]: event.target.value });
+  };
+
+  handleClickShowPassword = () => {
+    this.setState(state => ({ showPassword: !state.showPassword }));
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <TextField
+          id="filled-simple-start-adornment"
+          className={classNames(classes.margin, classes.textField)}
+          variant="filled"
+          label="With filled TextField"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment variant="filled" position="start">
+                Kg
+              </InputAdornment>
+            ),
+          }}
+        />
+        <TextField
+          select
+          className={classNames(classes.margin, classes.textField)}
+          variant="filled"
+          label="With Select"
+          value={this.state.weightRange}
+          onChange={this.handleChange('weightRange')}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment variant="filled" position="start">
+                Kg
+              </InputAdornment>
+            ),
+          }}
+        >
+          {ranges.map(option => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          id="filled-adornment-amount"
+          className={classNames(classes.margin, classes.textField)}
+          variant="filled"
+          label="Amount"
+          value={this.state.amount}
+          onChange={this.handleChange('amount')}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment variant="filled" position="start">
+                $
+              </InputAdornment>
+            ),
+          }}
+        />
+        <TextField
+          id="filled-adornment-weight"
+          className={classNames(classes.margin, classes.textField)}
+          variant="filled"
+          label="Weight"
+          value={this.state.weight}
+          onChange={this.handleChange('weight')}
+          helperText="Weight"
+          InputProps={{
+            endAdornment: (
+              <InputAdornment variant="filled" position="end">
+                Kg
+              </InputAdornment>
+            ),
+          }}
+        />
+        <TextField
+          id="filled-adornment-password"
+          className={classNames(classes.margin, classes.textField)}
+          variant="filled"
+          type={this.state.showPassword ? 'text' : 'password'}
+          label="Password"
+          value={this.state.password}
+          onChange={this.handleChange('password')}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment variant="filled" position="end">
+                <IconButton
+                  aria-label="Toggle password visibility"
+                  onClick={this.handleClickShowPassword}
+                >
+                  {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+FilledInputAdornments.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FilledInputAdornments);