From 50b4a5b780e3e9dde591fea200226236d62eeb87 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 3 Sep 2015 21:36:52 +0100
Subject: [PATCH] [AppBar] make IconMenu to render correctly

---
 .../app/components/pages/components/app-bar.jsx | 17 ++++++++++++++++-
 .../components/pages/components/icon-menus.jsx  |  6 ++++++
 .../app/components/raw-code/app-bar-code.txt    | 15 ++++++++++++++-
 src/app-bar.jsx                                 |  1 +
 src/menus/icon-menu.jsx                         |  3 +++
 5 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
index eebd2361a1b785..1eacb604f32b3b 100644
--- a/docs/src/app/components/pages/components/app-bar.jsx
+++ b/docs/src/app/components/pages/components/app-bar.jsx
@@ -6,7 +6,9 @@ let FlatButton = require('flat-button');
 let ComponentDoc = require('../../component-doc');
 let CodeExample = require('../../code-example/code-example');
 let Code = require('app-bar-code');
-
+const IconMenu = require('menus/icon-menu');
+const MenuItem = require('menus/menu-item');
+const MoreVertIcon = require('svg-icons/navigation/more-vert');
 
 class AppBarPage extends React.Component {
 
@@ -120,6 +122,19 @@ class AppBarPage extends React.Component {
             title="Title"
             iconElementLeft={<IconButton><NavigationClose /></IconButton>}
             iconElementRight={<FlatButton label="Save" />} />
+          <br />
+          <AppBar
+            title="Title"
+            iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+            iconElementRight={
+              <IconMenu iconButtonElement={
+                <IconButton><MoreVertIcon /></IconButton>
+              }>
+                <MenuItem primaryText="Refresh" />
+                <MenuItem primaryText="Help" />
+                <MenuItem primaryText="Sign out" />
+              </IconMenu>
+          } />
         </CodeExample>
       </ComponentDoc>
     );
diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx
index 0980497e76d511..e5dc029ebbaac4 100644
--- a/docs/src/app/components/pages/components/icon-menus.jsx
+++ b/docs/src/app/components/pages/components/icon-menus.jsx
@@ -56,6 +56,12 @@ class IconMenus extends React.Component {
             header: 'default: false',
             desc: 'Indicates if the menu should render with compact desktop styles.'
           },
+          {
+            name: 'iconStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'The style object to use to override underlying icon style.'
+          },
           {
             name: 'iconButtonElement',
             type: 'element: IconButton',
diff --git a/docs/src/app/components/raw-code/app-bar-code.txt b/docs/src/app/components/raw-code/app-bar-code.txt
index 6697c0f4f4b7dc..477eae19f02610 100644
--- a/docs/src/app/components/raw-code/app-bar-code.txt
+++ b/docs/src/app/components/raw-code/app-bar-code.txt
@@ -5,4 +5,17 @@
 <AppBar
   title="Title"
   iconElementLeft={<IconButton><NavigationClose /></IconButton>}
-  iconElementRight={<FlatButton label="Save" />} />;
+  iconElementRight={<FlatButton label="Save" />} />
+
+<AppBar
+  title="Title"
+  iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+  iconElementRight={
+    <IconMenu iconButtonElement={
+      <IconButton><MoreVertIcon /></IconButton>
+    }>
+      <MenuItem primaryText="Refresh" />
+      <MenuItem primaryText="Help" />
+      <MenuItem primaryText="Sign out" />
+    </IconMenu>
+} />
diff --git a/src/app-bar.jsx b/src/app-bar.jsx
index b39f0d44203548..115564d00563ec 100644
--- a/src/app-bar.jsx
+++ b/src/app-bar.jsx
@@ -187,6 +187,7 @@ const AppBar = React.createClass({
       let iconElementRight = props.iconElementRight;
 
       switch (iconElementRight.type.displayName) {
+        case 'IconMenu':
         case 'IconButton':
           iconElementRight = React.cloneElement(iconElementRight, {
             iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle),
diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx
index 2b02d4f1ed3dad..dfd251d4f181f5 100644
--- a/src/menus/icon-menu.jsx
+++ b/src/menus/icon-menu.jsx
@@ -19,6 +19,7 @@ const IconMenu = React.createClass({
   propTypes: {
     closeOnItemTouchTap: React.PropTypes.bool,
     iconButtonElement: React.PropTypes.element.isRequired,
+    iconStyle: React.PropTypes.object,
     openDirection: PropTypes.corners,
     onItemTouchTap: React.PropTypes.func,
     onKeyboardFocus: React.PropTypes.func,
@@ -85,6 +86,7 @@ const IconMenu = React.createClass({
     let {
       closeOnItemTouchTap,
       iconButtonElement,
+      iconStyle,
       openDirection,
       onItemTouchTap,
       onKeyboardFocus,
@@ -121,6 +123,7 @@ const IconMenu = React.createClass({
 
     let iconButton = React.cloneElement(iconButtonElement, {
       onKeyboardFocus: this.props.onKeyboardFocus,
+      iconStyle: this.mergeStyles(iconStyle, iconButtonElement.props.iconStyle),
       onTouchTap: (e) => {
         this.open(Events.isKeyboard(e));
         if (iconButtonElement.props.onTouchTap) iconButtonElement.props.onTouchTap(e);