[AppBar] make IconMenu to render correctly

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>
     );

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',

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>
+} />

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),

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);