From e9cfd1b1b05814c41f0be385cebdd783ec4dc10b Mon Sep 17 00:00:00 2001
From: M03M <muhammad_martinez@yahoo.com>
Date: Tue, 17 Mar 2015 11:12:10 -0500
Subject: [PATCH] Updated menu styling.

---
 .../app/components/pages/components/menus.jsx |   3 +
 src/js/menu/link-menu-item.jsx                | 112 ++++++++++++------
 src/js/menu/menu-item.jsx                     |   9 +-
 src/js/menu/menu.jsx                          |  52 ++++++--
 src/js/menu/subheader-menu-item.jsx           |  66 +++++++++--
 src/less/components/components.less           |   1 -
 src/less/components/menu-item.less            |  69 -----------
 src/less/components/menu.less                 |  50 --------
 src/less/components/subheader.less            |  17 ---
 9 files changed, 184 insertions(+), 195 deletions(-)
 delete mode 100644 src/less/components/menu-item.less
 delete mode 100644 src/less/components/menu.less
 delete mode 100644 src/less/components/subheader.less

diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
index 1bfa65fb2adbde..3d516246d790dd 100644
--- a/docs/src/app/components/pages/components/menus.jsx
+++ b/docs/src/app/components/pages/components/menus.jsx
@@ -3,6 +3,9 @@ var mui = require('mui');
 var CodeExample = require('../../code-example/code-example.jsx');
 
 var labelMenuItems = [
+  { payload: '4', text: 'subheader first child', type: mui.MenuItem.Types.SUBHEADER},
+  { payload: '5', text: 'subheader', type: mui.MenuItem.Types.SUBHEADER},
+  {type: mui.MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub'},
   { payload: '1', text: 'ID', data: '1234567890', icon: 'home' },
   { payload: '2', text: 'Type', data: 'Announcement', icon: 'home' },
   { payload: '3', text: 'Caller ID', data: '(123) 456-7890', icon: 'home' }
diff --git a/src/js/menu/link-menu-item.jsx b/src/js/menu/link-menu-item.jsx
index d8f6fa590c2f4c..447ed9d8fb69e7 100644
--- a/src/js/menu/link-menu-item.jsx
+++ b/src/js/menu/link-menu-item.jsx
@@ -1,41 +1,87 @@
 var React = require('react');
-var Classable = require('../mixins/classable');
+var StylePropable = require('../mixins/style-propable');
+var CustomVariables = require('../styles/variables/custom-variables');
 
 var LinkMenuItem = React.createClass({
 
-    mixins: [Classable],
-    
-    propTypes: {
-        index: React.PropTypes.number.isRequired,
-        payload: React.PropTypes.string.isRequired,
-        text: React.PropTypes.string.isRequired,
-        target: React.PropTypes.string,
-        disabled: React.PropTypes.bool
-    },
-    
-    getDefaultProps: function() {
-        return {
-            disabled: false
-        };
-    },
-    
-    render: function() {
-        var classes = this.getClasses('mui-menu-item', {
-          'mui-is-disabled': this.props.disabled
-        });
-        var onClickHandler = (this.props.disabled) ? this._stopLink : undefined;
-        // Prevent context menu 'Open In New Tab/Window'
-        var linkAttribute = (this.props.disabled) ? 'data-href' : 'href';
-        var link = {linkAttribute: this.props.payload};
-        
-        return (
-            <a key={this.props.index} className={classes} {...link} target={this.props.target} onClick={onClickHandler}>{this.props.text}</a>
-        );
-    },
-    
-    _stopLink: function(event) {
-      event.preventDefault();
+  mixins: [StylePropable],
+  
+  propTypes: {
+    index: React.PropTypes.number.isRequired,
+    payload: React.PropTypes.string.isRequired,
+    text: React.PropTypes.string.isRequired,
+    target: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    className: React.PropTypes.string,
+  },
+  
+  getDefaultProps: function() {
+      return {
+          disabled: false
+      };
+  },
+
+  getInitialState: function() {
+    return {
+      hovered: false
+    }
+  },
+
+  /** Styles */
+  _main: function() { // Same as MenuItem.
+    var style = this.mergeAndPrefix({
+      userSelect: 'none',
+      cursor: 'pointer',
+      display: 'block',
+      lineHeight: CustomVariables.menuItemHeight + 'px',
+      paddingLeft: CustomVariables.menuItemPadding,
+      paddingRight: CustomVariables.menuItemPadding,
+    });
+
+    if (this.state.hovered && !this.props.disabled) style.backgroundColor = CustomVariables.menuItemHoverColor;
+    if (this.props.selected) style.color = CustomVariables.menuItemSelectedTextColor;
+
+    if (this.props.disabled) {
+      style.cursor = 'default';
+      style.color = CustomVariables.disabledColor;
     }
+
+    return this.mergeAndPrefix(style);
+  },
+
+  render: function() {
+    var onClickHandler = (this.props.disabled) ? this._stopLink : undefined;
+    // Prevent context menu 'Open In New Tab/Window'
+    var linkAttribute = (this.props.disabled) ? 'data-href' : 'href';
+    var link = {linkAttribute: this.props.payload};
+
+    return (
+      <a 
+        key={this.props.index} 
+        target={this.props.target} 
+        style={this._main()} {...link} 
+        className={this.props.className} 
+        onClick={onClickHandler}
+        onMouseOver={this._handleMouseOver}
+        onMouseOut={this._handleMouseOut}>
+          {this.props.text}
+      </a>
+    );
+  },
+  
+  _stopLink: function(event) {
+    event.preventDefault();
+  },
+
+  _handleMouseOver: function(e) {
+    this.setState({hovered: true});
+    if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e);
+  },
+
+  _handleMouseOut: function(e) {
+    this.setState({hovered: false});
+    if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e);
+  }
 });
 
 module.exports = LinkMenuItem;
\ No newline at end of file
diff --git a/src/js/menu/menu-item.jsx b/src/js/menu/menu-item.jsx
index f304b58b384010..7d4778037125f0 100644
--- a/src/js/menu/menu-item.jsx
+++ b/src/js/menu/menu-item.jsx
@@ -16,6 +16,7 @@ var MenuItem = React.createClass({
 
   propTypes: {
     index: React.PropTypes.number.isRequired,
+    className: React.PropTypes.string,
     iconClassName: React.PropTypes.string,
     iconRightClassName: React.PropTypes.string,
     iconStyle: React.PropTypes.object,
@@ -58,9 +59,14 @@ var MenuItem = React.createClass({
       paddingRight: CustomVariables.menuItemPadding,
     });
 
-    if (this.state.hovered) style.backgroundColor = CustomVariables.menuItemHoverColor;
+    if (this.state.hovered && !this.props.disabled) style.backgroundColor = CustomVariables.menuItemHoverColor;
     if (this.props.selected) style.color = CustomVariables.menuItemSelectedTextColor;
 
+    if (this.props.disabled) {
+      style.cursor = 'default';
+      style.color = CustomVariables.disabledColor;
+    }
+
     return style;
   },
 
@@ -147,6 +153,7 @@ var MenuItem = React.createClass({
       <div
         key={this.props.index}
         style={this._main()}
+        className={this.props.className} 
         onTouchTap={this._handleTouchTap}
         onClick={this._handleOnClick}
         onMouseOver={this._handleMouseOver}
diff --git a/src/js/menu/menu.jsx b/src/js/menu/menu.jsx
index e08aca7364adfe..f6b9f8acec2d60 100644
--- a/src/js/menu/menu.jsx
+++ b/src/js/menu/menu.jsx
@@ -23,11 +23,11 @@ var NestedMenuItem = React.createClass({
     index: React.PropTypes.number.isRequired,
     text: React.PropTypes.string,
     menuItems: React.PropTypes.array.isRequired,
-    menuItemStyle: React.PropTypes.object,
     zDepth: React.PropTypes.number,
     disabled: React.PropTypes.bool,
     onItemClick: React.PropTypes.func,
-    onItemTap: React.PropTypes.func
+    onItemTap: React.PropTypes.func,
+    menuItemStyle: React.PropTypes.object,
   },
   
   getDefaultProps: function() {
@@ -62,17 +62,23 @@ var NestedMenuItem = React.createClass({
       color: CustomVariables.dropDownMenuIconColor
     }
 
+    var {
+      index,
+      menuItemStyle,
+      ...other,
+    } = this.props;
+
     return (
       <div style={styles}>
         <MenuItem 
-          index={this.props.index}
-          style={this.props.menuItemStyle}
+          index={index}
+          style={menuItemStyle}
           iconRightStyle={iconCustomArrowDropRight} 
           iconRightClassName="muidocs-icon-custom-arrow-drop-right" 
           onClick={this._onParentItemClick}>
             {this.props.text}
         </MenuItem>
-        <Menu
+        <Menu {...other}
           ref="nestedMenu"
           menuItems={this.props.menuItems}
           onItemClick={this._onMenuItemClick}
@@ -120,11 +126,16 @@ var Menu = React.createClass({
     onItemClick: React.PropTypes.func,
     onToggleClick: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
-    menuItemStyle: React.PropTypes.object,
     selectedIndex: React.PropTypes.number,
     hideable: React.PropTypes.bool,
     visible: React.PropTypes.bool,
-    zDepth: React.PropTypes.number
+    zDepth: React.PropTypes.number,
+    menuItemStyle: React.PropTypes.object,
+    menuItemStyleSubheader: React.PropTypes.object,
+    menuItemStyleLink: React.PropTypes.object,
+    menuItemClassName: React.PropTypes.string,
+    menuItemClassNameSubheader: React.PropTypes.string,
+    menuItemClassNameLink: React.PropTypes.string,
   },
 
   getInitialState: function() {
@@ -136,7 +147,7 @@ var Menu = React.createClass({
       autoWidth: true,
       hideable: false,
       visible: true,
-      zDepth: 1
+      zDepth: 1,
     };
   },
 
@@ -188,10 +199,10 @@ var Menu = React.createClass({
   },
 
   _subheader: function() {
-    return {
+    return this.mergeAndPrefix({
       paddingLeft: CustomVariables.menuSubheaderPadding,
       paddingRight: CustomVariables.menuSubheaderPadding,
-    }
+    }, this.props.menuItemStyleSubheader);
   },
 
   render: function() {
@@ -237,10 +248,12 @@ var Menu = React.createClass({
             <LinkMenuItem 
               key={i}
               index={i}
-              payload={menuItem.payload}
-              target={menuItem.target}
               text={menuItem.text}
-              disabled={isDisabled} />
+              disabled={isDisabled} 
+              className={this.props.menuItemClassNameLink}
+              style={this.props.menuItemStyleLink}
+              payload={menuItem.payload}
+              target={menuItem.target}/>
           );
           break;
 
@@ -249,13 +262,25 @@ var Menu = React.createClass({
             <SubheaderMenuItem 
               key={i}
               index={i}
+              className={this.props.menuItemClassNameSubheader}
+              style={this._subheader()}
+              firstChild={i == 0}
               text={menuItem.text} />
           );
           break;
 
         case MenuItem.Types.NESTED:
+          var {
+            ref,
+            key,
+            index,
+            zDepth,
+            ...other
+          } = this.props;
+
           itemComponent = (
             <NestedMenuItem
+              {...other}
               ref={i}
               key={i}
               index={i}
@@ -279,6 +304,7 @@ var Menu = React.createClass({
               index={i}
               icon={menuItem.icon}
               data={menuItem.data}
+              className={this.props.menuItemClassName}
               style={this.props.menuItemStyle}
               attribute={menuItem.attribute}
               number={menuItem.number}
diff --git a/src/js/menu/subheader-menu-item.jsx b/src/js/menu/subheader-menu-item.jsx
index 12942afea68972..e6598dfdd467a8 100644
--- a/src/js/menu/subheader-menu-item.jsx
+++ b/src/js/menu/subheader-menu-item.jsx
@@ -1,18 +1,62 @@
 var React = require('react');
+var StylePropable = require('../mixins/style-propable');
+var Typography = require('../styles/core/typography');
+var CustomVariables = require('../styles/variables/custom-variables');
 
 var SubheaderMenuItem = React.createClass({
-    
-    propTypes: {
-        index: React.PropTypes.number.isRequired,
-        text: React.PropTypes.string.isRequired
-    },
-    
-    render: function() {
-        return (
-            <div key={this.props.index} className="mui-subheader">{this.props.text}</div>
-        );
+  
+  mixins: [StylePropable],
+
+  propTypes: {
+      index: React.PropTypes.number.isRequired,
+      text: React.PropTypes.string.isRequired,
+      firstChild: React.PropTypes.bool,
+      className: React.PropTypes.string,
+  },
+  
+  /** Styles */
+  _main: function() {
+
+    var gutterMini = CustomVariables.spacing.desktopGutterMini;
+    var subheaderHeight = CustomVariables.spacing.desktopSubheaderHeight;
+
+    var style = {
+      fontSize: '13px',
+      letterSpacing: 0,
+      fontWeight: Typography.fontWeightMedium,
+      color: Typography.textDarkBlack,
+      margin: 0,
+      height: subheaderHeight + gutterMini,
+      lineHeight: subheaderHeight + 'px',
+      color: CustomVariables.subheaderTextColor,
+      borderTop: 'solid 1px ' + CustomVariables.subheaderBorderColor,
+      paddingTop: gutterMini,
+      marginTop: gutterMini,
+    };
+
+    if (this.props.firstChild) {
+      style = this.mergeAndPrefix(style, {
+        height: subheaderHeight,
+        borderTop: 'none',
+        paddingTop: 0,
+        marginTop: 0,
+      });
     }
-    
+
+    return this.mergeAndPrefix(style);
+  },
+
+  render: function() {
+    return (
+        <div 
+        	key={this.props.index} 
+        	style={this._main()}
+          className={this.props.className}>
+        		{this.props.text}
+        </div>
+    );
+  }
+  
 });
 
 module.exports = SubheaderMenuItem;
\ No newline at end of file
diff --git a/src/less/components/components.less b/src/less/components/components.less
index 29fd97ab12628b..cce06349b6c249 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -1,5 +1,4 @@
 @import "date-picker/date-picker.less";
 @import "left-nav.less";
 @import "paper.less";
-@import "subheader.less";
 @import "toolbar.less";
\ No newline at end of file
diff --git a/src/less/components/menu-item.less b/src/less/components/menu-item.less
deleted file mode 100644
index 9d7900a02c1d24..00000000000000
--- a/src/less/components/menu-item.less
+++ /dev/null
@@ -1,69 +0,0 @@
-.mui-menu-item {
-
-  * { user-select: none }
-  
-  cursor: pointer;
-  line-height: @menu-item-height;
-  padding-left: @menu-item-padding;
-  padding-right: @menu-item-padding;
-  background-color: fade(@menu-item-hover-color, 0%);
-
-  &:hover {
-    &:not(.mui-is-disabled) {
-      background-color: @menu-item-hover-color;
-    }
-  }
-
-  .mui-menu-item-number {
-    float: right;
-    width: 24px;
-    text-align: center;
-  }
-
-  .mui-menu-item-attribute {
-    float: right;
-  }
-
-  .mui-menu-item-icon-right {
-    line-height: @menu-item-height;
-    float: right;
-  }
-
-  .mui-menu-item-icon {
-    float: left;
-    line-height: @menu-item-height;
-    margin-right: @desktop-gutter;
-  }
-
-  .mui-menu-item-data {
-    display: block;
-    padding-left: (@desktop-gutter * 2);
-    line-height: @menu-item-data-height;
-    height: @menu-item-data-height;
-    vertical-align: top;
-    top: -12px;
-    position: relative;
-    .mui-font-weight-light;
-  }
-
-  .muidocs-icon-custom-arrow-drop-right {
-    margin-right: (@desktop-gutter-mini * -1);
-    color: @drop-down-menu-icon-color;
-  }
-
-  .mui-toggle {
-    margin-top: ((@menu-item-height - @radio-button-size) / 2);
-    float: right;
-    width: 42px;
-  }
-
-  &.mui-is-selected {
-    color: @menu-item-selected-text-color;
-  }
-    
-  &.mui-is-disabled {
-    color: @disabled-color !important;
-    cursor: default;
-  }
-
-}
\ No newline at end of file
diff --git a/src/less/components/menu.less b/src/less/components/menu.less
deleted file mode 100644
index a93b5041f209a3..00000000000000
--- a/src/less/components/menu.less
+++ /dev/null
@@ -1,50 +0,0 @@
-.mui-menu {
-
-  * { .ease-out; }
-
-  background-color: @menu-background-color;
-
-  &.mui-menu-hideable {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    z-index: 1;
-
-    .mui-paper-container {
-      overflow: hidden;
-      padding: 0;
-    }
-
-    &.mui-visible {
-      & > .mui-paper-container {
-        padding-top: @desktop-gutter-mini;
-        padding-bottom: @desktop-gutter-mini;
-      }
-    }
-  }
-
-  .mui-paper-container {
-    padding-top: @desktop-gutter-mini;
-    padding-bottom: @desktop-gutter-mini;
-  }
-
-  .mui-subheader {
-    padding-left: @menu-subheader-padding;
-    padding-right: @menu-subheader-padding;
-  }
-
-  .mui-nested-menu-item {
-    position: relative;
-      
-    &.mui-is-disabled {
-        color: @disabled-color;
-        cursor: default;
-    }
-
-    &.mui-open {
-      & > .mui-menu {
-        opacity: 1;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/less/components/subheader.less b/src/less/components/subheader.less
deleted file mode 100644
index 0859b75ca4b4a6..00000000000000
--- a/src/less/components/subheader.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.mui-subheader {
-  .mui-font-style-body-2;
-  margin: 0;
-  height: @desktop-subheader-height + @desktop-gutter-mini;
-  line-height: @desktop-subheader-height;
-  color: @subheader-text-color;
-  border-top: solid 1px @subheader-border-color;
-  padding-top: @desktop-gutter-mini;
-  margin-top: @desktop-gutter-mini;
-
-  &:first-child {
-    height: @desktop-subheader-height;
-    border-top: none;
-    padding-top: 0;
-    margin-top: 0;
-  }
-}