Add property to override underline styles of a focussed textfield

I feel like this is valuable as it is consistent with `underlineStyle`. Suggested by: mui#1419
yockelle · Aug 15, 2015 · 0f9cdd1 · 0f9cdd1
1 parent c0dcd82
commit 0f9cdd1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
@@ -107,6 +107,12 @@ let TextFieldsPage = React.createClass({
             header: 'optional',
             desc: 'Override the inline-styles of the TextField\'s underline element.'
           },
+          {
+            name: 'underlineFocusStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the TextField\'s underline element when focussed.'
+          },
           {
             name: 'type',
             type: 'string',
@@ -213,6 +219,10 @@ let TextFieldsPage = React.createClass({
               value={this.state.propValue}
               underlineStyle={{borderColor:Colors.green500}}
               onChange={this._handleInputChange} /><br/>
+            <TextField
+              style={styles.textfield}
+              hintText="Custom Underline Focus Color"
+              underlineFocusStyle={{borderColor: Colors.amber900}} /><br />
             <TextField
               style={styles.textfield}
               hintText="Hint Text"

diff --git a/docs/src/app/components/raw-code/text-fields-code.txt b/docs/src/app/components/raw-code/text-fields-code.txt
@@ -9,6 +9,9 @@
   value={this.state.propValue}
   underlineStyle={{borderColor:Colors.green500}}
   onChange={this._handleInputChange} />
+<TextField
+  hintText="Custom Underline Focus Color"
+  underlineFocusStyle={{borderColor: Colors.amber900}} />
 <TextField
   hintText="Hint Text"
   valueLink={this.linkState('valueLinkValue')} />

diff --git a/src/text-field.jsx b/src/text-field.jsx
@@ -41,6 +41,7 @@ let TextField = React.createClass({
     rows: React.PropTypes.number,
     type: React.PropTypes.string,
     underlineStyle: React.PropTypes.object,
+    underlineFocusStyle: React.PropTypes.object,
   },
 
   getDefaultProps() {
@@ -157,6 +158,12 @@ let TextField = React.createClass({
         bottom: 8,
         borderBottom: 'dotted 2px ' + theme.disabledTextColor,
       },
+      underlineFocus: {
+        borderBottom: 'solid 2px',
+        borderColor: theme.focusColor,
+        transform: 'scaleX(0)',
+        transition: Transitions.easeOut(),
+      },
     };
 
     styles.error = this.mergeAndPrefix(styles.error, props.errorStyle);
@@ -178,12 +185,7 @@ let TextField = React.createClass({
       font: 'inherit',
     });
 
-    styles.focusUnderline= this.mergeStyles(styles.underline, {
-      borderBottom: 'solid 2px',
-      borderColor: theme.focusColor,
-      transform: 'scaleX(0)',
-      transition: Transitions.easeOut(),
-    });
+    styles.focusUnderline = this.mergeStyles(styles.underline, styles.underlineFocus, props.underlineFocusStyle);
 
     if (this.state.isFocused) {
       styles.floatingLabel.color = theme.focusColor;