[TextField] added left/right icon #2932

docs/src/app/components/pages/components/AutoComplete/ExampleSimple.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import AutoComplete from 'material-ui/AutoComplete';
+import Search from 'material-ui/svg-icons/action/search';
+import {orange500} from 'material-ui/styles/colors';
 
 export default class AutoCompleteExampleSimple extends React.Component {
 
@@ -26,6 +28,7 @@ export default class AutoCompleteExampleSimple extends React.Component {
       <div>
         <AutoComplete
           hintText="Type anything"
+          leftIcon={<Search color={orange500} />}
           dataSource={this.state.dataSource}
           onUpdateInput={this.handleUpdateInput}
         />

docs/src/app/components/pages/components/TextField/ExampleCustomize.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import TextField from 'material-ui/TextField';
+import ActionGrade from 'material-ui/svg-icons/action/grade';
 import {orange500} from 'material-ui/styles/colors';
 
 const styles = {
@@ -29,6 +30,10 @@ const TextFieldExampleCustomize = () => (
     <TextField
       hintText="Custom Underline Focus Color"
       underlineFocusStyle={styles.underlineStyle}
+    /><br />
+    <TextField
+      leftIcon={<ActionGrade color={orange500} />}
+      hintText="Left icon"
     />
   </div>
 );

src/AutoComplete/AutoComplete.js

@@ -97,6 +97,11 @@ class AutoComplete extends React.Component {
      */
     hintText: React.PropTypes.string,
 
+    /**
+     * This is the `SvgIcon` or `FontIcon` to be displayed on the left side.
+     */
+    leftIcon: React.PropTypes.element,
+
     /**
      * Override style for list.
      */
@@ -395,6 +400,7 @@ class AutoComplete extends React.Component {
       menuStyle,
       menuProps,
       listStyle,
+      leftIcon,
       targetOrigin,
       disableFocusRipple,
       triggerUpdateOnFocus, // eslint-disable-line no-unused-vars
@@ -492,6 +498,7 @@ class AutoComplete extends React.Component {
       <div style={prepareStyles(Object.assign(styles.root, style))} >
         <TextField
           {...other}
+          leftIcon={leftIcon}
           ref="searchTextField"
           autoComplete="off"
           value={searchText}

src/TextField/TextField.js

@@ -26,19 +26,30 @@ const getStyles = (props, context, state) => {
   } = context.muiTheme;
 
   const styles = {
+    wrapper: {
+      width: props.fullWidth ? '100%' : 256,
+      backgroundColor: backgroundColor,
+      transition: transitions.easeOut('200ms', 'height'),
+    },
+    icon: {
+      verticalAlign: 'middle',
+      position: 'absolute',
+      top: 10,
+    },
+    hintStyleMargin: {
+      marginLeft: 24,
+    },
     root: {
       fontSize: 16,
       lineHeight: '24px',
-      width: props.fullWidth ? '100%' : 256,
       height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48),
       display: 'inline-block',
       position: 'relative',
-      backgroundColor: backgroundColor,
       fontFamily: baseTheme.fontFamily,
-      transition: transitions.easeOut('200ms', 'height'),
     },
     error: {
       position: 'relative',
+      marginLeft: 24,
       bottom: 2,
       fontSize: 12,
       lineHeight: '12px',
@@ -47,9 +58,11 @@ const getStyles = (props, context, state) => {
     },
     floatingLabel: {
       color: hintColor,
+      marginLeft: 24,
       pointerEvents: 'none',
     },
     input: {
+      marginLeft: 24,
       WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
       padding: 0,
       position: 'relative',
@@ -183,6 +196,11 @@ class TextField extends React.Component {
      */
     inputStyle: React.PropTypes.object,
 
+    /**
+     * This is the `SvgIcon` or `FontIcon` to be displayed on the left side.
+     */
+    leftIcon: React.PropTypes.element,
+
     /**
      * If true, a textarea element will be rendered.
      * The textarea also grows and shrinks according to the number of lines.
@@ -421,6 +439,7 @@ class TextField extends React.Component {
       hintStyle,
       id,
       inputStyle,
+      leftIcon,
       multiLine,
       onBlur, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
@@ -445,6 +464,16 @@ class TextField extends React.Component {
       <div style={prepareStyles(styles.error)}>{this.state.errorText}</div>
     );
 
+    let leftIconElement;
+    if (leftIcon) {
+      leftIconElement = React.cloneElement(this.props.leftIcon,
+        {
+          ...this.props.leftIcon,
+          key: 'leftIcon',
+          style: Object.assign({}, styles.icon, this.props.leftIcon.style),
+        });
+    }
+
     const floatingLabelTextElement = floatingLabelText && (
       <TextFieldLabel
         muiTheme={this.context.muiTheme}
@@ -467,6 +496,8 @@ class TextField extends React.Component {
       onKeyDown: this.handleInputKeyDown,
     };
 
+    const hintStyleMerged = Object.assign(styles.hintStyleMargin, hintStyle);
+
     const inputStyleMerged = Object.assign(styles.input, inputStyle);
 
     let inputElement;
@@ -500,13 +531,14 @@ class TextField extends React.Component {
 
     return (
       <div className={className} style={prepareStyles(Object.assign(styles.root, style))}>
+        {leftIconElement}
         {floatingLabelTextElement}
         {hintText ?
           <TextFieldHint
             muiTheme={this.context.muiTheme}
             show={!(this.state.hasValue || (floatingLabelText && !this.state.isFocused)) ||
                   (!this.state.hasValue && floatingLabelText && floatingLabelFixed && !this.state.isFocused)}
-            style={hintStyle}
+            style={hintStyleMerged}
             text={hintText}
           /> :
           null