Merge pull request #1493 from agenthunt/textfieldUnderline

[TextField] Added props to override underlineStyle when disabled
mui · Sep 7, 2015 · 4e81c7c · 4e81c7c
2 parents b2faa18 + 54ddc67
commit 4e81c7c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
@@ -115,6 +115,12 @@ let TextFieldsPage = React.createClass({
             header: 'optional',
             desc: 'Override the inline-styles of the TextField\'s underline element when focussed.'
           },
+          {
+            name: 'underlineDisabledStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the TextField\'s underline element when disabled.'
+          },
           {
             name: 'type',
             type: 'string',
@@ -224,6 +230,11 @@ let TextFieldsPage = React.createClass({
                 style={styles.textfield}
                 hintText="Custom Underline Focus Color"
                 underlineFocusStyle={{borderColor: Colors.amber900}} /><br />
+              <TextField
+                style={styles.textfield}
+                disabled={true}
+                hintText="Custom Underline Disabled Style"
+                underlineDisabledStyle={{borderColor:Colors.purple500, borderBottom: 'solid 1px'}} /><br />
               <TextField
                 style={styles.textfield}
                 hintText="Hint Text"

diff --git a/src/text-field.jsx b/src/text-field.jsx
@@ -45,6 +45,7 @@ let TextField = React.createClass({
     type: React.PropTypes.string,
     underlineStyle: React.PropTypes.object,
     underlineFocusStyle: React.PropTypes.object,
+    underlineDisabledStyle: React.PropTypes.object,
   },
 
   getDefaultProps() {
@@ -180,6 +181,7 @@ let TextField = React.createClass({
 
     styles.error = this.mergeAndPrefix(styles.error, props.errorStyle);
     styles.underline = this.mergeAndPrefix(styles.underline, props.underlineStyle);
+    styles.underlineAfter = this.mergeAndPrefix(styles.underlineAfter, props.underlineDisabledStyle);
 
     styles.floatingLabel = this.mergeStyles(styles.hint, {
       lineHeight: '22px',