Merge pull request #4043 from echenley/feature/floatingLabelFocusStyle

[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

@@ -47,7 +47,6 @@ const getStyles = (props, context, state) => {
     },
     floatingLabel: {
       color: hintColor,
-      pointerEvents: 'none',
     },
     input: {
       WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
@@ -73,14 +72,14 @@ const getStyles = (props, context, state) => {
     font: 'inherit',
   });
 
-  if (state.isFocused) {
-    styles.floatingLabel.color = focusColor;
-  }
-
   if (state.hasValue) {
     styles.floatingLabel.color = fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5);
   }
 
+  if (state.isFocused) {
+    styles.floatingLabel.color = focusColor;
+  }
+
   if (props.floatingLabelText) {
     styles.input.boxSizing = 'border-box';
 
@@ -139,6 +138,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 +422,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,12 +1,31 @@
 import React, {PropTypes} from 'react';
 import transitions from '../styles/transitions';
 
+function getStyles(props) {
+  const defaultStyles = {
+    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',
+  };
+
+  const shrinkStyles = props.shrink ? Object.assign({
+    transform: 'perspective(1px) scale(0.75) translate3d(0, -28px, 0)',
+    pointerEvents: 'none',
+  }, props.shrinkStyle) : null;
+
+  return {
+    root: Object.assign(defaultStyles, props.style, shrinkStyles),
+  };
+}
+
 const propTypes = {
-  /**
-   * @ignore
-   * The material-ui theme applied to this component.
-   */
-  muiTheme: PropTypes.object.isRequired,
   /**
    * The css class name of the root element.
    */
@@ -19,18 +38,27 @@ const propTypes = {
    * Disables the label if set to true.
    */
   disabled: PropTypes.bool,
-  /**
-   * True if the floating label should shrink.
-   */
-  shrink: PropTypes.bool,
   /**
    * The id of the target element that this label should refer to.
    */
   htmlFor: PropTypes.string,
+  /**
+   * @ignore
+   * The material-ui theme applied to this component.
+   */
+  muiTheme: PropTypes.object.isRequired,
   /**
    * Callback function for when the label is selected via a touch tap.
    */
   onTouchTap: PropTypes.func,
+  /**
+   * True if the floating label should shrink.
+   */
+  shrink: PropTypes.bool,
+  /**
+   * Override the inline-styles of the root element when focused.
+   */
+  shrinkStyle: PropTypes.object,
   /**
    * Override the inline-styles of the root element.
    */
@@ -47,36 +75,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.root)}
       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');
+  });
+});