From 873bd303e804e99c20c233bbb6f6ffdef8f156ff Mon Sep 17 00:00:00 2001
From: Neil Gabbadon <neil.gabbadon@emikra.com>
Date: Thu, 17 Dec 2015 01:15:20 -0500
Subject: [PATCH 1/2] Separate TextFieldHint into separate internal component.

---
 src/TextField/TextField.jsx     | 47 +++++++++--------------
 src/TextField/TextFieldHint.jsx | 66 +++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 29 deletions(-)
 create mode 100644 src/TextField/TextFieldHint.jsx

diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx
index b3fd7b16d8ae8a..fca7150bc0ed21 100644
--- a/src/TextField/TextField.jsx
+++ b/src/TextField/TextField.jsx
@@ -8,6 +8,7 @@ import EnhancedTextarea from '../enhanced-textarea';
 import DefaultRawTheme from '../styles/raw-themes/light-raw-theme';
 import ThemeManager from '../styles/theme-manager';
 import ContextPure from '../mixins/context-pure';
+import TextFieldHint from './TextFieldHint';
 import TextFieldUnderline from './TextFieldUnderline';
 import warning from 'warning';
 
@@ -178,13 +179,17 @@ const TextField = React.createClass({
         color: errorColor,
         transition: Transitions.easeOut(),
       },
-      hint: {
+      floatingLabel: {
         position: 'absolute',
         lineHeight: '22px',
+        top: 38,
         opacity: 1,
         color: hintColor,
         transition: Transitions.easeOut(),
-        bottom: 12,
+        zIndex: 1, // Needed to display label above Chrome's autocomplete field background
+        cursor: 'text',
+        transform: 'scale(1) translate3d(0, 0, 0)',
+        transformOrigin: 'left top',
       },
       input: {
         tapHighlightColor: 'rgba(0,0,0,0)',
@@ -202,17 +207,6 @@ const TextField = React.createClass({
 
     styles.error = this.mergeStyles(styles.error, props.errorStyle);
 
-    styles.floatingLabel = this.mergeStyles(styles.hint, {
-      lineHeight: '22px',
-      top: 38,
-      bottom: 'none',
-      opacity: 1,
-      zIndex: 1, // Needed to display label above Chrome's autocomplete field background
-      cursor: 'text',
-      transform: 'scale(1) translate3d(0, 0, 0)',
-      transformOrigin: 'left top',
-    });
-
     styles.textarea = this.mergeStyles(styles.input, {
       marginTop: props.floatingLabelText ? 36 : 12,
       marginBottom: props.floatingLabelText ? -36 : -12,
@@ -229,17 +223,11 @@ const TextField = React.createClass({
     if (this.state.hasValue) {
       styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5);
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)';
-      styles.hint.opacity = 0;
     }
 
     if (props.floatingLabelText) {
-      styles.hint.opacity = 0;
       styles.input.boxSizing = 'border-box';
 
-      if (this.state.isFocused && !this.state.hasValue) {
-        styles.hint.opacity = 1;
-      }
-
       if (!props.multiLine) {
         styles.input.marginTop = 14;
       }
@@ -249,10 +237,6 @@ const TextField = React.createClass({
       }
     }
 
-    if (props.style && props.style.height) {
-      styles.hint.lineHeight = props.style.height;
-    }
-
     if (this.state.errorText) {
       if (this.state.isFocused) {
         styles.floatingLabel.color = styles.error.color;
@@ -277,6 +261,7 @@ const TextField = React.createClass({
       onBlur,
       onChange,
       onFocus,
+      style,
       type,
       underlineDisabledStyle,
       underlineFocusStyle,
@@ -295,10 +280,6 @@ const TextField = React.createClass({
       <div style={this.prepareStyles(styles.error)}>{this.state.errorText}</div>
     ) : null;
 
-    let hintTextElement = hintText ? (
-      <div style={this.prepareStyles(styles.hint, hintStyle)}>{hintText}</div>
-    ) : null;
-
     let floatingLabelTextElement = floatingLabelText ? (
       <label
         style={this.prepareStyles(styles.floatingLabel, this.props.floatingLabelStyle)}
@@ -354,9 +335,17 @@ const TextField = React.createClass({
     return (
       <div className={className} style={this.prepareStyles(styles.root, this.props.style)}>
         {floatingLabelTextElement}
-        {hintTextElement}
+        {hintText ?
+          <TextFieldHint
+            hidden={this.state.hasValue || (floatingLabelText && !this.state.isFocused)}
+            muiTheme={this.state.muiTheme}
+            style={hintStyle}
+            text={hintText}
+          /> :
+          null
+        }
         {inputElement}
-        {this.props.underlineShow ?
+        {underlineShow ?
           <TextFieldUnderline
             disabled={disabled}
             disabledStyle={underlineDisabledStyle}
diff --git a/src/TextField/TextFieldHint.jsx b/src/TextField/TextFieldHint.jsx
new file mode 100644
index 00000000000000..885ce70407b904
--- /dev/null
+++ b/src/TextField/TextFieldHint.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import Transitions from '../styles/transitions';
+import styleUtils from '../utils/styles';
+
+const propTypes = {
+  /**
+   * True if the hint text should be hidden.
+   */
+  hidden: React.PropTypes.bool,
+
+  /**
+   * The material-ui theme applied to this component.
+   */
+  muiTheme: React.PropTypes.object.isRequired,
+
+  /**
+   * Override the inline-styles of the hint text.
+   */
+  style: React.PropTypes.object,
+
+  /**
+   * The hint text displayed.
+   */
+  text: React.PropTypes.string,
+};
+
+const defaultProps = {
+  visible: true,
+};
+
+const TextFieldHint = (props) => {
+
+  const {
+    hidden,
+    muiTheme,
+    style,
+    text,
+  } = props;
+
+  const {
+    textField: {
+      hintColor,
+    },
+  } = muiTheme;
+
+  const styles = {
+    root: {
+      position: 'absolute',
+      opacity: hidden ? 0 : 1,
+      color: hintColor,
+      transition: Transitions.easeOut(),
+      bottom: 12,
+    },
+  };
+
+  return (
+    <div
+      style={styleUtils.prepareStyles(muiTheme, styles.root, style)}>{text}
+    </div>
+  );
+};
+
+TextFieldHint.propTypes = propTypes;
+TextFieldHint.defaultProps = defaultProps;
+
+export default TextFieldHint;

From baacb87f617f0e2b7d68653cbbd01d3589f83065 Mon Sep 17 00:00:00 2001
From: Neil Gabbadon <neil.gabbadon@emikra.com>
Date: Thu, 17 Dec 2015 12:48:43 -0500
Subject: [PATCH 2/2] Switched hidden prop to show, and inverted bool logic

---
 src/TextField/TextField.jsx     |  2 +-
 src/TextField/TextFieldHint.jsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx
index fca7150bc0ed21..5f0d449b8c8740 100644
--- a/src/TextField/TextField.jsx
+++ b/src/TextField/TextField.jsx
@@ -337,8 +337,8 @@ const TextField = React.createClass({
         {floatingLabelTextElement}
         {hintText ?
           <TextFieldHint
-            hidden={this.state.hasValue || (floatingLabelText && !this.state.isFocused)}
             muiTheme={this.state.muiTheme}
+            show={!(this.state.hasValue || (floatingLabelText && !this.state.isFocused))}
             style={hintStyle}
             text={hintText}
           /> :
diff --git a/src/TextField/TextFieldHint.jsx b/src/TextField/TextFieldHint.jsx
index 885ce70407b904..2b5e876351e905 100644
--- a/src/TextField/TextFieldHint.jsx
+++ b/src/TextField/TextFieldHint.jsx
@@ -4,14 +4,14 @@ import styleUtils from '../utils/styles';
 
 const propTypes = {
   /**
-   * True if the hint text should be hidden.
+   * The material-ui theme applied to this component.
    */
-  hidden: React.PropTypes.bool,
+  muiTheme: React.PropTypes.object.isRequired,
 
   /**
-   * The material-ui theme applied to this component.
+   * True if the hint text should be visible.
    */
-  muiTheme: React.PropTypes.object.isRequired,
+  show: React.PropTypes.bool,
 
   /**
    * Override the inline-styles of the hint text.
@@ -25,14 +25,14 @@ const propTypes = {
 };
 
 const defaultProps = {
-  visible: true,
+  show: true,
 };
 
 const TextFieldHint = (props) => {
 
   const {
-    hidden,
     muiTheme,
+    show,
     style,
     text,
   } = props;
@@ -46,7 +46,7 @@ const TextFieldHint = (props) => {
   const styles = {
     root: {
       position: 'absolute',
-      opacity: hidden ? 0 : 1,
+      opacity: show ? 1 : 0,
       color: hintColor,
       transition: Transitions.easeOut(),
       bottom: 12,