From 0044597f0737aa3277bbb4dd851da7491c05920c Mon Sep 17 00:00:00 2001
From: M03M <muhammad_martinez@yahoo.com>
Date: Mon, 16 Mar 2015 15:21:12 -0500
Subject: [PATCH 1/3] Refactored css for textfields.

---
 .../pages/components/text-fields.jsx          |  26 ++-
 .../less/pages/components/text-fields.less    |   5 -
 src/js/before-after-wrapper.jsx               |  18 +-
 src/js/enhanced-textarea.jsx                  |   6 +-
 src/js/styles/variables/custom-variables.js   |   3 +-
 src/js/text-field.jsx                         | 180 +++++++++++++++---
 src/less/components/components.less           |   1 -
 src/less/components/text-field.less           | 168 ----------------
 8 files changed, 187 insertions(+), 220 deletions(-)
 delete mode 100644 src/less/components/text-field.less

diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
index ea91ab347386e9..a4df52431ab39a 100644
--- a/docs/src/app/components/pages/components/text-fields.jsx
+++ b/docs/src/app/components/pages/components/text-fields.jsx
@@ -20,6 +20,12 @@ var TextFieldsPage = React.createClass({
     };
   },
 
+  _textfieldStyle: function() {
+    return {
+      marginTop: 24,
+    };
+  },
+
   render: function() {
 
     var code =
@@ -176,35 +182,44 @@ var TextFieldsPage = React.createClass({
         componentInfo={componentInfo}>
 
         <div className="text-field-example">
-          <div className="text-field-example-group text-field-example-single-line">
+          <div className="text-field-example-group">
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               defaultValue="Default Value" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               value={this.state.propValue}
               onChange={this._handleInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               valueLink={this.linkState('valueLinkValue')} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text (MultiLine)"
               multiLine={true} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.errorText}
               onChange={this._handleErrorInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.error2Text}
               onChange={this._handleError2InputChange}
               defaultValue="abc" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true}
               defaultValue="Disabled With Value" /><br/>
@@ -212,41 +227,50 @@ var TextFieldsPage = React.createClass({
 
           <div className="text-field-example-group">
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               floatingLabelText="Floating Label Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               defaultValue="Default Value"
               floatingLabelText="Floating Label Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               floatingLabelText="Floating Label Text"
               value={this.state.floatingPropValue}
               onChange={this._handleFloatingInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               floatingLabelText="Floating Label Text"
               valueLink={this.linkState('floatingValueLinkValue')} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text (MultiLine)"
               floatingLabelText="Floating Label Text"
               multiLine={true} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.floatingErrorText}
               floatingLabelText="Floating Label Text"
               onChange={this._handleFloatingErrorInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.floatingError2Text}
               defaultValue="abc"
               floatingLabelText="Floating Label Text"
               onChange={this._handleFloating2ErrorInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true}
               floatingLabelText="Floating Label Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true}
               defaultValue="Disabled With Value"
diff --git a/docs/src/less/pages/components/text-fields.less b/docs/src/less/pages/components/text-fields.less
index fc2e5ff4ed176f..7a4b516f727a9f 100644
--- a/docs/src/less/pages/components/text-fields.less
+++ b/docs/src/less/pages/components/text-fields.less
@@ -12,9 +12,4 @@
     }
   }
 
-  .text-field-example-single-line {
-    .mui-text-field {
-      margin-top: 24px;
-    }
-  }
 }
diff --git a/src/js/before-after-wrapper.jsx b/src/js/before-after-wrapper.jsx
index bcb4b000729ef6..a2f00df3e7c508 100644
--- a/src/js/before-after-wrapper.jsx
+++ b/src/js/before-after-wrapper.jsx
@@ -57,12 +57,6 @@ var BeforeAfterWrapper = React.createClass({
   },
 
   /** Styles */
-  _main: function() {
-    return this.mergeAndPrefix({
-      width: '100%',
-      height: '100%',
-    });
-  },
 
   render: function() {
 
@@ -78,16 +72,18 @@ var BeforeAfterWrapper = React.createClass({
     var beforeElement, afterElement;
 
     if (this.props.beforeStyle) beforeElement = 
-      React.createElement(this.props.beforeElementType, 
-                          {style: AutoPrefix.all(this.props.beforeStyle), key: "::before"});
+      React.createElement(beforeElementType, 
+                          {style: AutoPrefix.all(beforeStyle), key: "::before"}, beforeStyle.content);
     if (this.props.afterStyle) afterElement = 
-      React.createElement(this.props.afterElementType, 
-                          {style: AutoPrefix.all(this.props.afterStyle), key: "::after"});
+      React.createElement(afterElementType, 
+                          {style: AutoPrefix.all(afterStyle), key: "::after"}, afterStyle.content);
 
     var children = [beforeElement, this.props.children, afterElement];
 
+    console.log("BAW props", this.props);
+
     var props = other;
-    props.style = this._main();
+    props.style = this.props.style;
 
     return React.createElement(this.props.elementType, props, children);
   }
diff --git a/src/js/enhanced-textarea.jsx b/src/js/enhanced-textarea.jsx
index 9bc74f5e419cec..258ddafcf0d99e 100644
--- a/src/js/enhanced-textarea.jsx
+++ b/src/js/enhanced-textarea.jsx
@@ -9,6 +9,7 @@ var EnhancedTextarea = React.createClass({
   propTypes: {
     onChange: React.PropTypes.func,
     onHeightChange: React.PropTypes.func,
+    textareaStyle: React.PropTypes.object,
     rows: React.PropTypes.number
   },
 
@@ -35,16 +36,17 @@ var EnhancedTextarea = React.createClass({
       onHeightChange,
       rows,
       style,
+      textareaStyle,
       valueLink,
       ...other,
     } = this.props;
 
-    var inputStyles = {
+    var inputStyles = this.mergeAndPrefix({
       height: this.state.height + 'px',
       width: '100%',
       resize: 'none',
       overflow: 'hidden'
-    };
+    }, textareaStyle);
 
     var shadowStyles = {
       position: 'absolute',
diff --git a/src/js/styles/variables/custom-variables.js b/src/js/styles/variables/custom-variables.js
index 3990d2972042e7..9c49f4f8a09ee5 100644
--- a/src/js/styles/variables/custom-variables.js
+++ b/src/js/styles/variables/custom-variables.js
@@ -15,8 +15,7 @@ var customVariables = new (function() {
   this.borderColor = Colors.grey300;
 
   // Disabled Colors
-  this.disabledColor = Theme.textColor;
-  this.disabledOpacity = 0.3; // fadeout 30%
+  this.disabledColor = ColorManipulator.fade(Theme.textColor, 0.3);
 
   // Component Colors
   this.canvasColor = Colors.white;
diff --git a/src/js/text-field.jsx b/src/js/text-field.jsx
index a783f4932b8d57..9493391a262803 100644
--- a/src/js/text-field.jsx
+++ b/src/js/text-field.jsx
@@ -1,11 +1,17 @@
 var React = require('react');
-var Classable = require('./mixins/classable');
+var BeforeAfterWrapper = require('./before-after-wrapper');
+var ColorManipulator = require('./utils/color-manipulator');
+var Colors = require('./styles/colors');
+var Theme = require('./styles/theme').get();
+var StylePropable = require('./mixins/style-propable');
+var Transitions = require('./styles/mixins/transitions');
+var CustomVariables = require('./styles/variables/custom-variables');
 var DomIdable = require('./mixins/dom-idable');
 var EnhancedTextarea = require('./enhanced-textarea');
 
 var TextField = React.createClass({
 
-  mixins: [Classable, DomIdable],
+  mixins: [StylePropable, DomIdable],
 
   propTypes: {
     errorText: React.PropTypes.string,
@@ -18,7 +24,10 @@ var TextField = React.createClass({
     onFocus: React.PropTypes.func,
     onKeyDown: React.PropTypes.func,
     onEnterKeyDown: React.PropTypes.func,
-    type: React.PropTypes.string
+    type: React.PropTypes.string,
+
+    focusUnderlineStyle: React.PropTypes.object,
+    underlineStyle: React.PropTypes.object,
   },
 
   getDefaultProps: function() {
@@ -54,6 +63,126 @@ var TextField = React.createClass({
     if (newState) this.setState(newState);
   },
 
+  /** Styles */
+  disabledTextColor: ColorManipulator.fade(Theme.textColor, 0.3),
+  errorColor: Colors.red500,
+
+  _main: function() {
+    return this.mergeAndPrefix({
+      fontSize: '16px',
+      lineHeight: '24px',
+      width: (64 * 4),
+      height: (this.props.floatingLabelText) ? 72 : 48,
+      display: 'inline-block',
+      position: 'relative',
+      transition: Transitions.easeOut('200ms', 'height'),
+    });
+  },
+
+  _error: function() {
+    return {
+      position: 'absolute',
+      bottom: -10,
+      fontSize: '12px',
+      lineHeight: '12px',
+      color: this.errorColor,
+      transition: Transitions.easeOut(),
+    };
+  },
+
+  _floatingLabel: function() {
+    var style = this.mergeAndPrefix(this._hint(), {
+      top: 24,
+      opacity: 1,
+      transform: 'scale(1) translate3d(0, 0, 0)',
+      transformOrigin: 'left top',
+   });
+
+    if (this.state.isFocused) style.color = Theme.primary1Color;
+    if (this.state.hasValue) style.color = ColorManipulator.fade(Theme.textColor, 0.5);
+    if (this.state.isFocused || this.state.hasValue) style.transform = 'scale(0.75) translate3d(0, -18px, 0)';
+    if (this.props.errorText && this.state.isFocused) style.color = this.errorColor;
+
+    return style;
+  },
+
+  _hint: function() {
+    var style = {
+      position: 'absolute',
+      lineHeight: '48px',
+      opacity: 1,
+      color: this.disabledTextColor,
+      transition: Transitions.easeOut(),
+    };
+
+    if (this.state.isFocused) style.opacity = 1;
+    if (this.props.floatingLabelText) style.top = 24;
+    if (this.props.disabled) style.color = this.disabledTextColor;
+    if (this.props.floatingLabelText || this.state.hasValue) style.opacity = 0;
+
+    return style;
+  },
+
+  _input: function() {
+    var style = {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      border: 'none',
+      outline: 'none',
+      backgroundColor: 'transparent',
+      color: Theme.textColor,
+    };
+
+    if (this.props.disabled) style.color = this.disabledTextColor;
+    if (this.props.floatingLabelText && !this.props.multiLine) style.paddingTop = 24;
+
+    return style;
+  },
+
+  _textarea: function() {
+    return this.mergeAndPrefix(this._input(), {
+      paddingTop: this.props.floatingLabelText ? 24 : 0,
+      marginTop: 12,
+    });
+
+  },
+
+  _underline: function() {
+    return this.mergeAndPrefix({
+      position: 'absolute',
+      width: '100%',
+      bottom: 8,
+      margin: 0,
+    }, this.props.underlineStyle);
+  },
+
+  //hack because border style dotted just doesn't look right
+  //border-bottom-style: dotted;
+  _underlineAfter: function() {
+    return this.mergeAndPrefix({
+      position: 'absolute',
+      userSelect: 'none',
+      cursor: 'default',
+      bottom: 0,
+      color: this.disabledTextColor,
+    }, null);
+  },
+
+  _focusUnderline: function() {
+    var style = this.mergeAndPrefix({
+      borderColor: Theme.primary1Color,
+      borderBottomWidth: 2,
+      transform: 'scaleX(0)',
+      transition: Transitions.easeOut(),
+    }, this._underline());
+
+    if (this.props.errorText) style.borderColor = this.errorColor;
+    if (this.props.errorText || this.state.isFocused) style.transform = 'scaleX(1)';
+
+    return this.mergeAndPrefix(style, this.props.focusUnderlineStyle);
+  },
+
   render: function() {
     var {
       className,
@@ -69,44 +198,31 @@ var TextField = React.createClass({
       ...other
     } = this.props;
 
-    var classes = this.getClasses('mui-text-field', {
-      'mui-has-error': this.props.errorText,
-      'mui-has-floating-labels': this.props.floatingLabelText,
-      'mui-has-value': this.state.hasValue,
-      'mui-is-disabled': this.props.disabled,
-      'mui-is-focused': this.state.isFocused,
-      'mui-is-multiLine': this.props.multiLine
-    });
-
     var inputId = this.props.id || this.getDomId();
 
     var errorTextElement = this.state.errorText ? (
-      <div className="mui-text-field-error">{this.state.errorText}</div>
+      <div style={this._error()}>{this.state.errorText}</div>
     ) : null;
 
     var hintTextElement = this.props.hintText ? (
-      <div className="mui-text-field-hint">{this.props.hintText}</div>
+      <div style={this._hint()}>{this.props.hintText}</div>
     ) : null;
 
     var floatingLabelTextElement = this.props.floatingLabelText ? (
       <label
-        className="mui-text-field-floating-label"
+        style={this._floatingLabel()}
         htmlFor={inputId}>
         {this.props.floatingLabelText}
       </label>
     ) : null;
 
-    var textAreaStyles = {
-      paddingTop: this.props.floatingLabelText ? '24px' : 0
-    };
-
     var inputProps;
     var inputElement;
 
     inputProps = {
-      ref: 'input',
-      className: 'mui-text-field-input',
       id: inputId,
+      ref: 'input',
+      style: this._input(),
       onBlur: this._handleInputBlur,
       onFocus: this._handleInputFocus,
       onKeyDown: this._handleInputKeyDown
@@ -121,8 +237,7 @@ var TextField = React.createClass({
         {...other}
         {...inputProps}
         onHeightChange={this._handleTextAreaHeightChange}
-        className="mui-text-field-textarea"
-        style={textAreaStyles} />
+        textareaStyle={this._textarea()} />
     ) : (
       <input
         {...other}
@@ -130,18 +245,23 @@ var TextField = React.createClass({
         type={this.props.type} />
     );
 
-    return (
-      <div className={classes}>
+    var underlineElement = this.props.disabled ? (
+      <div style={this._underlineAfter()}>
+        .............................................................
+      </div>
+    ) : (
+      <hr style={this._underline()}/>
+    );
+    var focusUnderlineElement = <hr style={this._focusUnderline()} />;
 
+    return (
+      <div className={this.props.className} style={this._main()}>
         {floatingLabelTextElement}
         {hintTextElement}
         {inputElement}
-
-        <hr className="mui-text-field-underline" />
-        <hr className="mui-text-field-focus-underline" />
-
+        {underlineElement}
+        {focusUnderlineElement}
         {errorTextElement}
-
       </div>
     );
   },
diff --git a/src/less/components/components.less b/src/less/components/components.less
index 86927599b726dc..60457d618c576e 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -4,5 +4,4 @@
 @import "paper.less";
 @import "subheader.less";
 @import "table.less";
-@import "text-field.less";
 @import "toolbar.less";
\ No newline at end of file
diff --git a/src/less/components/text-field.less b/src/less/components/text-field.less
deleted file mode 100644
index 831e8dbdc21d4e..00000000000000
--- a/src/less/components/text-field.less
+++ /dev/null
@@ -1,168 +0,0 @@
-.mui-text-field {
-  @disabled-text-color: fade(@body-text-color, 30%);
-  @error-color: @red-500;
-
-	font-size: 16px;
-  line-height: 24px;
-  
-  width: (64px * 4);
-  height: 48px;
-  display: inline-block;
-  position: relative;
-  .ease-out(@property: height, @duration: 200ms);
-
-  //Normal Text Field Styles
-  //------------------------
-  .mui-text-field-hint,
-  .mui-text-field-floating-label {
-    position: absolute;
-    line-height: 48px;
-    color: @disabled-text-color;
-    opacity: 1;
-    .ease-out();
-  }
-
-  .mui-text-field-error {
-    position: absolute;
-    bottom: -10px;
-    font-size: 12px;
-    line-height: 12px;
-    color: @error-color;
-    .ease-out();
-  }
-
-  .mui-text-field-input,
-  .mui-text-field-textarea {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border: none;
-    outline: none;
-    background-color: @transparent;
-    color: @body-text-color;
-  }
-
-  .mui-text-field-textarea {
-    margin-top: 12px;
-  }
-
-  .mui-text-field-underline,
-  .mui-text-field-focus-underline {
-    position: absolute;
-    width: 100%;
-    bottom: 8px;
-    margin: 0;
-  }
-
-  .mui-text-field-focus-underline {
-    border-color: @primary-1-color;
-    border-bottom-width: 2px;
-    transform: scaleX(0);
-    .ease-out();
-  }
-
-  &.mui-has-error {
-    .mui-text-field-focus-underline {
-      border-color: @error-color;
-      transform: scaleX(1);
-    }
-  }
-
-  &.mui-has-value {
-    .mui-text-field-hint {
-      opacity: 0;
-    }
-  }
-
-  &.mui-is-disabled {
-
-    .mui-text-field-input {
-      color: @disabled-text-color;
-    }
-
-    .mui-text-field-underline {
-      border: none;
-      height: 40px;
-      overflow: hidden;
-
-      //hack because border style dotted just doesn't look right
-      //border-bottom-style: dotted;
-      &:after {
-        content: '..............................................................................................................................................................................................................................................................................................................................................................';
-        position: absolute;
-        top: 23px;
-        color: @disabled-text-color;
-      }
-    }
-  }
-
-  &.mui-is-focused {
-    .mui-text-field-focus-underline {
-      transform: scaleX(1);
-    }
-  }
-
-  //Floating Label Text Field Styles
-  //--------------------------------
-  &.mui-has-floating-labels {
-    height: 72px;
-
-    .mui-text-field-floating-label {
-      top: 24px;
-      transform: scale(1) translate3d(0, 0, 0);
-      transform-origin: left top;
-    }
-
-    .mui-text-field-hint {
-      top: 24px;
-      opacity: 0;
-    }
-
-    .mui-text-field-input {
-      padding-top: 24px;
-    }
-
-    &.mui-has-value,
-    &.mui-is-focused {
-      .mui-text-field-floating-label {
-        transform: scale(0.75) translate3d(0, -18px, 0);
-      }
-    }
-
-    &.mui-has-value {
-      .mui-text-field-floating-label {
-        color: fade(@body-text-color, 50%);
-      }
-    }
-
-    &.mui-is-disabled {
-      .mui-text-field-hint {
-        color: @disabled-text-color;
-      }
-    }
-
-    &.mui-is-focused {
-
-      .mui-text-field-hint {
-        opacity: 1;
-      }
-
-      .mui-text-field-floating-label {
-        transform: scale(0.75) translate3d(0, -18px, 0);
-        color: @primary-1-color;
-      }
-
-      &.mui-has-error {
-        .mui-text-field-floating-label {
-          color: @error-color;
-        }
-      }
-
-      &.mui-has-value {
-        .mui-text-field-hint {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file

From bd9faa53ab39c6f12ab4a7317dbf5f0193b341cd Mon Sep 17 00:00:00 2001
From: M03M <muhammad_martinez@yahoo.com>
Date: Mon, 16 Mar 2015 15:47:40 -0500
Subject: [PATCH 2/3] Removed underline style props.

---
 src/js/text-field.jsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/js/text-field.jsx b/src/js/text-field.jsx
index 9493391a262803..8c598cab3af8cd 100644
--- a/src/js/text-field.jsx
+++ b/src/js/text-field.jsx
@@ -25,9 +25,6 @@ var TextField = React.createClass({
     onKeyDown: React.PropTypes.func,
     onEnterKeyDown: React.PropTypes.func,
     type: React.PropTypes.string,
-
-    focusUnderlineStyle: React.PropTypes.object,
-    underlineStyle: React.PropTypes.object,
   },
 
   getDefaultProps: function() {
@@ -149,12 +146,12 @@ var TextField = React.createClass({
   },
 
   _underline: function() {
-    return this.mergeAndPrefix({
+    return {
       position: 'absolute',
       width: '100%',
       bottom: 8,
       margin: 0,
-    }, this.props.underlineStyle);
+    };
   },
 
   //hack because border style dotted just doesn't look right
@@ -180,7 +177,7 @@ var TextField = React.createClass({
     if (this.props.errorText) style.borderColor = this.errorColor;
     if (this.props.errorText || this.state.isFocused) style.transform = 'scaleX(1)';
 
-    return this.mergeAndPrefix(style, this.props.focusUnderlineStyle);
+    return style;
   },
 
   render: function() {

From 4b39b08fae7032c772f44a3b3aeaf7f329021241 Mon Sep 17 00:00:00 2001
From: M03M <muhammad_martinez@yahoo.com>
Date: Mon, 16 Mar 2015 15:52:15 -0500
Subject: [PATCH 3/3] Removed unused dependency.

---
 src/js/text-field.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/js/text-field.jsx b/src/js/text-field.jsx
index 8c598cab3af8cd..30cef32a8ecc27 100644
--- a/src/js/text-field.jsx
+++ b/src/js/text-field.jsx
@@ -1,5 +1,4 @@
 var React = require('react');
-var BeforeAfterWrapper = require('./before-after-wrapper');
 var ColorManipulator = require('./utils/color-manipulator');
 var Colors = require('./styles/colors');
 var Theme = require('./styles/theme').get();