Refractored css into js for flat-buttons

docs/src/app/components/pages/components/buttons.jsx

@@ -16,13 +16,13 @@ var ButtonPage = React.createClass({
       '<FlatButton label="Primary" primary={true} />\n' +
       '<FlatButton label="Secondary" secondary={true} />\n' +
       '<FlatButton secondary={true}>\n' +
-      '  <span className="mui-flat-button-label example-image-button">Choose an Image</span>\n' +
+      '  <span className="example-image-button">Choose an Image</span>\n' +
       '  <input type="file" id="imageButton" className="example-image-input"></input>\n' +
       '</FlatButton>\n' +
       '<div className="button-example-container">\n' +
       '  <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>\n' +
       '    <FontIcon className="muidocs-icon-custom-github example-flat-button-icon"/>\n' +
-      '    <span className="mui-flat-button-label">Github</span>\n' +
+      '    <span>Github</span>\n' +
       '  </FlatButton>\n' +
       '</div>\n' +
       '<FlatButton label="Disabled" disabled={true} />\n\n' +
@@ -172,14 +172,14 @@ var ButtonPage = React.createClass({
             </div>
             <div className="button-example-container">
               <FlatButton secondary={true}>
-                <span className="mui-flat-button-label example-image-button">Choose an Image</span>
+                <span className="example-image-button">Choose an Image</span>
                 <input type="file" id="imageButton" className="example-image-input"></input>
               </FlatButton>
             </div>
             <div className="button-example-container">
               <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true}>
                 <FontIcon className="muidocs-icon-custom-github example-flat-button-icon"/>
-                <span className="mui-flat-button-label example-icon-button-label">Github</span>
+                <span className="example-icon-button-label">Github</span>
               </FlatButton>
             </div>
             <div className="button-example-container">

docs/src/less/pages/components/buttons.less

@@ -18,7 +18,7 @@
   }
 
   .example-icon-button-label {
-    padding-left: 8px; 
+    padding: 0px 8px; 
   }
 }
 
@@ -34,6 +34,7 @@
   margin-top: 24px;
   margin-right: auto;
   margin-left: auto;
+  padding: 0px 8px; 
 }
 
 .example-image-input {
@@ -53,7 +54,7 @@
   display: inline-block;
   vertical-align: middle;
   float: left;
-  padding-left: 12px;
+  padding: 0px 8px;
   line-height: 36px;
 }
 

src/js/enhanced-button.jsx

@@ -120,6 +120,7 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
+    this.props.onKeyboardFocus(false);
 
     if (this.props.onBlur) this.props.onBlur(e);
   },
@@ -133,6 +134,7 @@ var EnhancedButton = React.createClass({
         this.setState({
           isKeyboardFocused: true
         });
+        this.props.onKeyboardFocus(true);
       }
     }.bind(this), 150);
 
@@ -144,6 +146,8 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
+    this.props.onKeyboardFocus(false);
+
     if (this.props.onTouchTap) this.props.onTouchTap(e);
   }
 

src/js/flat-button.jsx

@@ -1,11 +1,14 @@
 var React = require('react');
-var Classable = require('./mixins/classable');
+var StylePropable = require('./mixins/style-propable');
+var Transitions = require('./styles/mixins/transitions');
+var CustomVariables = require('./styles/variables/custom-variables');
+var Typography = require('./styles/core/typography');
+var Theme = require('./styles/theme');
 var EnhancedButton = require('./enhanced-button');
-var Theme = require('./styles/theme').get();
 
 var FlatButton = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     className: React.PropTypes.string,
@@ -18,45 +21,123 @@ var FlatButton = React.createClass({
     secondary: React.PropTypes.bool
   },
 
-  getDefaultProps: function() {
+  getInitialState: function() {
     return {
-
+      hovered: false,
     };
   },
 
+  /** Styles */
+
+  _getBackgroundColor: function() {
+    return  this.props.primary ? CustomVariables.flatButtonPrimaryHoverColor :
+            this.props.secondary ? CustomVariables.flatButtonSecondaryHoverColor :
+            CustomVariables.flatButtonHoverColor;  
+  },
+
+  _main: function() {
+
+    var style = {
+      transition: Transitions.easeOut(),
+
+      fontSize: Typography.fontStyleButtonFontSize,
+      letterSpacing: 0,
+      textTransform: 'uppercase',
+
+      fontWeight: Typography.fontWeightMedium, 
+
+      borderRadius: 2,
+      userSelect: 'none',
+
+      position: 'relative',
+      overflow: 'hidden',
+      backgroundColor: CustomVariables.flatButtonColor,
+      color: CustomVariables.flatButtonTextColor,
+      lineHeight: CustomVariables.buttonHeight + 'px',
+      minWidth: CustomVariables.buttonMinWidth,
+      padding: 0, 
+      margin: 0,
+
+      //This is need so that ripples do not bleed past border radius.
+      //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
+      transform: 'translate3d(0, 0, 0)',
+
+      color:  this.props.disabled ? CustomVariables.flatButtonDisabledTextColor :
+              this.props.primary ? CustomVariables.flatButtonPrimaryTextColor :
+              this.props.secondary ? CustomVariables.flatButtonSecondaryTextColor :
+              Theme.textColor,
+    };
+
+    if (this.state.hovered && !this.props.disabled) {
+      style.backgroundColor = this._getBackgroundColor();
+    }  
+
+    return style;
+  },
+
+  _label: function() {
+    return {
+      position: 'relative',
+      padding: '0 ' + CustomVariables.spacing.desktopGutterLess + 'px',
+    };
+  },
+
+
   render: function() {
 
     var {
         label,
         primary,
         secondary,
+        onMouseOver,
+        onMouseOut,
         ...other
       } = this.props;
 
-    var classes = this.getClasses('mui-flat-button', {
-      'mui-is-primary': primary,
-      'mui-is-secondary': !primary && secondary
-    });
     var children = label ?
-      <span className="mui-flat-button-label">{label}</span> :
+      <span style={this._label()}>{label}</span> :
       this.props.children;
 
-    var focusRippleColor = primary ?
-      Theme.accent1Color : secondary ?
-      Theme.primary1Color : Theme.textColor;
-
-    var touchRippleColor = focusRippleColor;
+    var focusRippleColor =  primary ? CustomVariables.flatButtonPrimaryFocusRippleColor : 
+                            secondary ? CustomVariables.flatButtonSecondaryFocusRippleColor : 
+                            CustomVariables.flatButtonFocusRippleColor;
+    var touchRippleColor =  primary ? CustomVariables.flatButtonPrimaryRippleColor : 
+                            secondary ? CustomVariables.flatButtonSecondaryRippleColor : 
+                            CustomVariables.flatButtonRippleColor;
 
     return (
       <EnhancedButton {...other}
-        className={classes}
+        style={this._main()}
+        onMouseOver={this._onMouseOver} 
+        onMouseOut={this._onMouseOut} 
         focusRippleColor={focusRippleColor}
-        touchRippleColor={touchRippleColor}>
+        touchRippleColor={touchRippleColor}
+        onKeyboardFocus={this._handleKeyboardFocus}>
         {children}
       </EnhancedButton>
     );
+  },
+
+  _onMouseOver: function(e) {
+    this.setState({hovered: true});
+    if (this.props.onMouseOver) this.props.onMouseOver(e);
+  },
+
+  _onMouseOut: function(e) {
+    this.setState({hovered: false});
+    if (this.props.onMouseOut) this.props.onMouseOut(e);
+  },
+
+  _handleKeyboardFocus: function(keyboardFocused) {
+
+    if (keyboardFocused && !this.props.disabled) {
+      this.getDOMNode().style.backgroundColor = this._getBackgroundColor();
+    } else {
+      this.getDOMNode().style.backgroundColor = 'transparent';
+    }
   }
 
+
 });
 
-module.exports = FlatButton;
+module.exports = FlatButton;

src/js/styles/core/typography.js

@@ -0,0 +1,22 @@
+var Colors = require('../colors');
+
+var typography = new (function() {
+
+	// text colors
+	this.textFullBlack = Colors.fullBlack;
+	this.textDarkBlack = Colors.darkBlack;
+	this.textLightBlack = Colors.lightBlack;
+	this.textMinBlack = Colors.minBlack;
+	this.textFullWhite = Colors.fullWhite;
+	this.textDarkWhite = Colors.darkWhite;
+	this.textLightWhite = Colors.lightWhite;
+
+	// font weight
+	this.fontWeightLight = 300;
+	this.fontWeightNormal = 400;
+	this.fontWeightMedium = 500;
+
+  this.fontStyleButtonFontSize = 14;
+});
+
+module.exports = typography;

src/js/styles/variables/custom-variables.js

@@ -1,6 +1,7 @@
 var Colors = require('../colors');
 var Spacing = require('./spacing');
 var Theme = require('../theme').get();
+var ColorManipulator = require('../../utils/color-manipulator');
 
 var customVariables = new (function() {
 
@@ -39,6 +40,27 @@ var customVariables = new (function() {
   // buttons
   this.iconButtonSize = Spacing.iconSize * 2;
 
+  this.buttonHeight = 36;
+  this.buttonMinWidth = 88;
+
+  this.iconButtonSize = Spacing.iconSize * 2;
+
+  this.flatButtonColor = Colors.white;
+  this.flatButtonHoverColor = ColorManipulator.darken(this.flatButtonColor, 0.1);
+  this.flatButtonTextColor = Theme.textColor;
+
+  this.flatButtonRippleColor = 'rgba(0,0,0,0.7)';
+  this.flatButtonFocusRippleColor = ColorManipulator.fade(this.flatButtonRippleColor, 0.7);
+  this.flatButtonPrimaryHoverColor = ColorManipulator.lighten(Theme.accent1Color, 0.32);
+  this.flatButtonPrimaryTextColor = Theme.accent1Color;
+  this.flatButtonPrimaryRippleColor = ColorManipulator.fade(this.flatButtonPrimaryTextColor, 0.8);
+  this.flatButtonPrimaryFocusRippleColor = ColorManipulator.fade(this.flatButtonPrimaryRippleColor, 0.8);
+  this.flatButtonSecondaryHoverColor = ColorManipulator.lighten(Theme.primary1Color, 0.52);
+  this.flatButtonSecondaryTextColor = Theme.primary1Color;
+  this.flatButtonSecondaryRippleColor = ColorManipulator.fade(this.flatButtonSecondaryTextColor, 0.8);
+  this.flatButtonSecondaryFocusRippleColor = ColorManipulator.fade(this.flatButtonSecondaryRippleColor, 0.8);
+  this.flatButtonDisabledTextColor = ColorManipulator.fade(this.flatButtonTextColor, 0.3);
+
   // date picker
   this.datePickerColor = Theme.primary1Color;
   this.datePickerTextColor = Colors.white;