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={} iconElementRight={} /> +
+ } + iconElementRight={ + + }> + + + + + } /> ); 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 @@ } - iconElementRight={} />; + iconElementRight={} /> + +} + iconElementRight={ + + }> + + + + +} /> 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);