From 027c96d4492a4f11c0f9b019af9aa72263015971 Mon Sep 17 00:00:00 2001
From: Evan Henley <henleyedition@gmail.com>
Date: Sun, 24 Apr 2016 16:04:28 -0500
Subject: [PATCH] [TextField] add floatingLabelFocusStyle prop

---
 .../components/TextField/ExampleCustomize.js  | 13 ++++-
 src/TextField/TextField.js                    |  5 ++
 src/TextField/TextFieldLabel.js               | 47 ++++++++++---------
 src/TextField/TextFieldLabel.spec.js          | 25 ++++++++++
 4 files changed, 68 insertions(+), 22 deletions(-)
 create mode 100644 src/TextField/TextFieldLabel.spec.js

diff --git a/docs/src/app/components/pages/components/TextField/ExampleCustomize.js b/docs/src/app/components/pages/components/TextField/ExampleCustomize.js
index 593ca70d219c24..4e024b3998c6f2 100644
--- a/docs/src/app/components/pages/components/TextField/ExampleCustomize.js
+++ b/docs/src/app/components/pages/components/TextField/ExampleCustomize.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import TextField from 'material-ui/TextField';
-import {orange500} from 'material-ui/styles/colors';
+import {orange500, blue500} from 'material-ui/styles/colors';
 
 const styles = {
   errorStyle: {
@@ -9,6 +9,12 @@ const styles = {
   underlineStyle: {
     borderColor: orange500,
   },
+  floatingLabelStyle: {
+    color: orange500,
+  },
+  floatingLabelFocusStyle: {
+    color: blue500,
+  },
 };
 
 const TextFieldExampleCustomize = () => (
@@ -29,6 +35,11 @@ const TextFieldExampleCustomize = () => (
     <TextField
       hintText="Custom Underline Focus Color"
       underlineFocusStyle={styles.underlineStyle}
+    /><br />
+    <TextField
+      floatingLabelText="Styled Floating Label Text"
+      floatingLabelStyle={styles.floatingLabelStyle}
+      floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
     />
   </div>
 );
diff --git a/src/TextField/TextField.js b/src/TextField/TextField.js
index 7fdaf45bb47acf..baba16345b0e05 100644
--- a/src/TextField/TextField.js
+++ b/src/TextField/TextField.js
@@ -139,6 +139,10 @@ class TextField extends Component {
      * If true, the floating label will float even when there is no value.
      */
     floatingLabelFixed: PropTypes.bool,
+    /**
+     * The style object to use to override floating label styles when focused.
+     */
+    floatingLabelFocusStyle: PropTypes.object,
     /**
      * The style object to use to override floating label styles.
      */
@@ -419,6 +423,7 @@ class TextField extends Component {
       <TextFieldLabel
         muiTheme={this.context.muiTheme}
         style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
+        shrinkStyle={this.props.floatingLabelFocusStyle}
         htmlFor={inputId}
         shrink={this.state.hasValue || this.state.isFocused || floatingLabelFixed}
         disabled={disabled}
diff --git a/src/TextField/TextFieldLabel.js b/src/TextField/TextFieldLabel.js
index 6b878627828ce5..3d2b250dcbcf55 100644
--- a/src/TextField/TextFieldLabel.js
+++ b/src/TextField/TextFieldLabel.js
@@ -1,6 +1,26 @@
 import React, {PropTypes} from 'react';
 import transitions from '../styles/transitions';
 
+function getStyles(props) {
+  const shrinkStyles = props.shrink ? Object.assign({
+    transform: 'perspective(1px) scale(0.75) translate3d(0, -28px, 0)',
+    pointerEvents: 'none',
+  }, props.shrinkStyle) : null;
+
+  return Object.assign({
+    position: 'absolute',
+    lineHeight: '22px',
+    top: 38,
+    transition: transitions.easeOut(),
+    zIndex: 1, // Needed to display label above Chrome's autocomplete field background
+    cursor: props.disabled ? 'default' : 'text',
+    transform: 'scale(1) translate3d(0, 0, 0)',
+    transformOrigin: 'left top',
+    pointerEvents: 'auto',
+    userSelect: 'none',
+  }, props.style, shrinkStyles);
+}
+
 const propTypes = {
   /**
    * @ignore
@@ -35,6 +55,10 @@ const propTypes = {
    * Override the inline-styles of the root element.
    */
   style: PropTypes.object,
+  /**
+   * Override the inline-styles of the root element when focused.
+   */
+  shrinkStyle: PropTypes.object,
 };
 
 const defaultProps = {
@@ -47,36 +71,17 @@ const TextFieldLabel = (props) => {
     muiTheme,
     className,
     children,
-    disabled,
-    shrink,
     htmlFor,
-    style,
     onTouchTap,
   } = props;
 
-  const styles = {
-    root: {
-      position: 'absolute',
-      lineHeight: '22px',
-      top: 38,
-      transition: transitions.easeOut(),
-      zIndex: 1, // Needed to display label above Chrome's autocomplete field background
-      cursor: disabled ? 'default' : 'text',
-      transform: shrink ?
-        'perspective(1px) scale(0.75) translate3d(0, -28px, 0)' :
-        'scale(1) translate3d(0, 0, 0)',
-      transformOrigin: 'left top',
-      pointerEvents: shrink ? 'none' : 'auto',
-      userSelect: 'none',
-    },
-  };
-
   const {prepareStyles} = muiTheme;
+  const styles = getStyles(props);
 
   return (
     <label
       className={className}
-      style={prepareStyles(Object.assign({}, styles.root, style))}
+      style={prepareStyles(styles)}
       htmlFor={htmlFor}
       onTouchTap={onTouchTap}
     >
diff --git a/src/TextField/TextFieldLabel.spec.js b/src/TextField/TextFieldLabel.spec.js
new file mode 100644
index 00000000000000..7d6f56c55f4419
--- /dev/null
+++ b/src/TextField/TextFieldLabel.spec.js
@@ -0,0 +1,25 @@
+/* eslint-env mocha */
+import React from 'react';
+import {shallow} from 'enzyme';
+import {expect} from 'chai';
+import TextFieldLabel from './TextFieldLabel';
+import getMuiTheme from '../styles/getMuiTheme';
+
+describe('<TextFieldLabel>', () => {
+  it('uses focus styles', () => {
+    const wrapper = shallow(
+      <TextFieldLabel
+        muiTheme={getMuiTheme()}
+        shrink={false}
+        style={{color: 'regularcolor'}}
+        shrinkStyle={{color: 'focuscolor'}}
+      />
+    );
+
+    expect(wrapper.type()).to.equal('label');
+    expect(wrapper.prop('style').color).to.equal('regularcolor');
+
+    wrapper.setProps({shrink: true});
+    expect(wrapper.prop('style').color).to.equal('focuscolor');
+  });
+});