Refractored css into js for DropDownIcon and DropDownMenu

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

@@ -69,8 +69,7 @@ var ToolbarPage = React.createClass({
       <ComponentDoc
         name="Toolbars"
         code={code}
-        componentInfo={componentInfo}
-      >
+        componentInfo={componentInfo}>
 
         <Toolbar>
           <ToolbarGroup key={0} float="left">

src/js/before-after-wrapper.jsx

@@ -0,0 +1,97 @@
+var React = require('react');
+var StylePropable = require('./mixins/style-propable');
+var AutoPrefix = require('./styles/auto-prefix');
+
+/**  
+ *  BeforeAfterWrapper
+ *    An alternative for the ::before and ::after css pseudo-elements for 
+ *    components whose styles are defined in javascript instead of css.
+ *
+ *  Usage: For the element that we want to apply before and after elements to,
+ *    wrap its children with BeforeAfterWrapper. For example:
+ *
+ *                                            <Paper>
+ *  <Paper>                                     <div> // See notice
+ *    <BeforeAfterWrapper>        renders         <div/> // before element
+ *      [children of paper]       ------>         [children of paper]
+ *    </BeforeAfterWrapper>                       <div/> // after element
+ *  </Paper>                                    </div>
+ *                                            </Paper>
+ *
+ *  Notice: Notice that this div bundles together our elements. If the element 
+ *    that we want to apply before and after elements is a HTML tag (i.e. a 
+ *    div, p, or button tag), we can avoid this extra nesting by passing using 
+ *    the BeforeAfterWrapper in place of said tag like so:
+ *
+ *  <p>
+ *    <BeforeAfterWrapper>   do this instead   <BeforeAfterWrapper elementType='p'>
+ *      [children of p]          ------>         [children of p]
+ *    </BeforeAfterWrapper>                    </BeforeAfterWrapper> 
+ *  </p>
+ *
+ *  BeforeAfterWrapper features spread functionality. This means that we can 
+ *  pass HTML tag properties directly into the BeforeAfterWrapper tag.
+ *
+ *  When using BeforeAfterWrapper, ensure that the parent of the beforeElement 
+ *  and afterElement have a defined style position.
+ */  
+
+var BeforeAfterWrapper = React.createClass({
+
+  mixins: [StylePropable],
+
+  propTypes: {
+    beforeStyle: React.PropTypes.object,
+    afterStyle: React.PropTypes.object,
+    beforeElementType: React.PropTypes.string,
+    afterElementType: React.PropTypes.string,
+    elementType: React.PropTypes.string
+  },
+
+  getDefaultProps: function() {
+    return {
+      beforeElementType: 'div',
+      afterElementType: 'div',
+      elementType: 'div',
+    }
+  },
+
+  /** Styles */
+  _main: function() {
+    return this.mergeAndPrefix({
+      width: '100%',
+      height: '100%',
+    });
+  },
+
+  render: function() {
+
+    var {
+      beforeStyle,
+      afterStyle,
+      beforeElementType,
+      afterElementType,
+      elementType,
+      ...other
+    } = this.props;
+
+    var beforeElement, afterElement;
+
+    if (this.props.beforeStyle) beforeElement = 
+      React.createElement(this.props.beforeElementType, 
+                          {style: AutoPrefix.all(this.props.beforeStyle), key: "::before"});
+    if (this.props.afterStyle) afterElement = 
+      React.createElement(this.props.afterElementType, 
+                          {style: AutoPrefix.all(this.props.afterStyle), key: "::after"});
+
+    var children = [beforeElement, this.props.children, afterElement];
+
+    var props = other;
+    props.style = this._main();
+
+    return React.createElement(this.props.elementType, props, children);
+  }
+
+});
+
+module.exports = BeforeAfterWrapper;

src/js/clearfix.jsx

@@ -0,0 +1,35 @@
+var React = require('react');
+var BeforeAfterWrapper = require('./before-after-wrapper.jsx');
+
+var ClearFix = React.createClass({
+
+  render: function() {
+
+    var {
+      style,
+      ...other
+    } = this.props;
+
+    var before = function() { 
+      return {
+        content: "' '",
+        display: 'table'
+      }
+    }
+
+    var after = before();
+    after.clear = 'both';
+
+    return (
+      <BeforeAfterWrapper 
+        {...other} 
+        beforeStyle={before()} 
+        afterStyle={after} 
+        style={this.props.style}>
+          {this.props.children}
+      </BeforeAfterWrapper>
+    );
+  }
+});
+
+module.exports = ClearFix;

src/js/drop-down-icon.jsx

@@ -1,5 +1,7 @@
 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 ClickAwayable = require('./mixins/click-awayable');
 var KeyLine = require('./utils/key-line');
 var Paper = require('./paper');
@@ -9,7 +11,7 @@ var MenuItem = require('./menu-item');
 
 var DropDownIcon = React.createClass({
 
-  mixins: [Classable, ClickAwayable],
+  mixins: [StylePropable, ClickAwayable],
 
   propTypes: {
     onChange: React.PropTypes.func,
@@ -26,21 +28,57 @@ var DropDownIcon = React.createClass({
     this.setState({ open: false });
   },
 
-  render: function() {
-    var classes = this.getClasses('mui-drop-down-icon', {
-      'mui-open': this.state.open
+  /** Styles */
+
+  _main: function() {
+    var iconWidth = 48;
+    return this.mergeAndPrefix({
+      display: 'inline-block',
+      width: iconWidth + 'px !important',
+      position: 'relative',
+      height: CustomVariables.spacing.desktopToolbarHeight,
+      fontSize: CustomVariables.spacing.desktopDropDownMenuFontSize,
+      cursor: 'pointer'
     });
+  },
+
+  _menu: function() {
+
+    return {
+      transition: Transitions.easeOut(),
+      right: '-14px !important',
+      top: '9px !important',
+      opacity: (this.props.open) ? 1 : 0,
+    }
+  },
+
+  _menuItem: function() { // similair to drop down menu's menu item styles
+    return {
+      paddingRight: (CustomVariables.spacing.iconSize + (CustomVariables.spacing.desktopGutterLess*2)),
+      height: CustomVariables.spacing.desktopDropDownMenuItemHeight,
+      lineHeight: CustomVariables.spacing.desktopDropDownMenuItemHeight + 'px',
+    }
+  },
+
+  render: function() {
 
     var icon;
     if (this.props.iconClassName) icon = <FontIcon className={this.props.iconClassName} />;
 
     return (
-      <div className={classes}>
+      <div style={this._main()}>
           <div className="mui-menu-control" onClick={this._onControlClick}>
               {icon}
               {this.props.children}
           </div>
-          <Menu ref="menuItems" menuItems={this.props.menuItems} hideable={true} visible={this.state.open} onItemClick={this._onMenuItemClick} />
+          <Menu 
+            ref="menuItems" 
+            style={this._menu()} 
+            menuItems={this.props.menuItems}
+            menuItemStyle={this._menuItem()}
+            hideable={true} 
+            visible={this.state.open} 
+            onItemClick={this._onMenuItemClick} />
         </div>
     );
   },