[TextField] add floatingLabelFocusStyle prop

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>
 );

src/TextField/TextField.js

@@ -139,10 +139,16 @@ 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.
      */
     floatingLabelStyle: PropTypes.object,
+
     /**
      * The content to use for the floating label element.
      */
@@ -419,6 +425,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}

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,11 @@ 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 +72,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}
     >

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');
+  });
+});