[TextField|AutoComplete] icon as part of input

mui · Apr 19, 2016 · bd5f103 · bd5f103
1 parent 74f09dd
commit bd5f103
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 27 deletions.
diff --git a/docs/src/app/components/pages/components/AutoComplete/ExampleSimple.js b/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}
         />

diff --git a/docs/src/app/components/pages/components/TextField/ExampleCustomize.js b/docs/src/app/components/pages/components/TextField/ExampleCustomize.js
@@ -30,15 +30,11 @@ const TextFieldExampleCustomize = () => (
     <TextField
       hintText="Custom Underline Focus Color"
       underlineFocusStyle={styles.underlineStyle}
-    />
+    /><br />
     <TextField
       leftIcon={<ActionGrade color={orange500} />}
       hintText="Left icon"
     />
-    <TextField
-      rightIcon={<ActionGrade color={orange500} />}
-      hintText="Right icon"
-    />
   </div>
 );
 

diff --git a/src/AutoComplete/AutoComplete.js b/src/AutoComplete/AutoComplete.js
@@ -102,6 +102,8 @@ class AutoComplete extends React.Component {
      */
     listStyle: React.PropTypes.object,
 
+    leftIcon: React.PropTypes.element,
+
     /**
      * The max number of search results to be shown.
      * By default it shows all the items which matches filter.
@@ -395,6 +397,7 @@ class AutoComplete extends React.Component {
       menuStyle,
       menuProps,
       listStyle,
+      leftIcon,
       targetOrigin,
       disableFocusRipple,
       triggerUpdateOnFocus, // eslint-disable-line no-unused-vars
@@ -492,6 +495,7 @@ class AutoComplete extends React.Component {
       <div style={prepareStyles(Object.assign(styles.root, style))} >
         <TextField
           {...other}
+          leftIcon={leftIcon}
           ref="searchTextField"
           autoComplete="off"
           value={searchText}

diff --git a/src/TextField/TextField.js b/src/TextField/TextField.js
@@ -33,6 +33,11 @@ const getStyles = (props, context, state) => {
     },
     icon: {
       verticalAlign: 'middle',
+      position: 'absolute',
+      top: 10,
+    },
+    hintStyleMargin: {
+      marginLeft: 24,
     },
     root: {
       fontSize: 16,
@@ -44,6 +49,7 @@ const getStyles = (props, context, state) => {
     },
     error: {
       position: 'relative',
+      marginLeft: 24,
       bottom: 2,
       fontSize: 12,
       lineHeight: '12px',
@@ -52,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',
@@ -230,12 +238,6 @@ class TextField extends React.Component {
      */
     onKeyDown: React.PropTypes.func,
 
-    /**
-     * This is the `SvgIcon` or `FontIcon` to be displayed on the right side.
-     */
-    rightIcon: React.PropTypes.element,
-
-
     /**
      * Number of rows to display when multiLine option is set to true.
      */
@@ -448,7 +450,6 @@ class TextField extends React.Component {
       underlineFocusStyle,
       underlineShow,
       underlineStyle,
-      rightIcon,
       rows,
       rowsMax,
       textareaStyle,
@@ -473,16 +474,6 @@ class TextField extends React.Component {
         });
     }
 
-    let rightIconElement;
-    if (rightIcon) {
-      rightIconElement = React.cloneElement(this.props.rightIcon,
-        {
-          ...this.props.rightIcon,
-          key: 'rightIcon',
-          style: Object.assign({}, styles.icon, this.props.rightIcon.style),
-        });
-    }
-
     const floatingLabelTextElement = floatingLabelText && (
       <TextFieldLabel
         muiTheme={this.context.muiTheme}
@@ -505,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;
@@ -537,16 +530,15 @@ class TextField extends React.Component {
     }
 
     return (
-      <div style={styles.wrapper}>
-      {leftIconElement}
         <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
@@ -567,8 +559,6 @@ class TextField extends React.Component {
           }
           {errorTextElement}
         </div>
-      {rightIconElement}
-      </div>
     );
   }
 }