Merge pull request #1588 from oliviertassinari/app-bar-icon-menu

[AppBar] make IconMenu to render correctly
mui · Sep 30, 2015 · 03319fe · 03319fe
2 parents 4dcdae9 + 50b4a5b
commit 03319fe
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);