[Docs] Update Documentation for Icon Menu

docs/src/app/app-routes.jsx

@@ -35,7 +35,7 @@ import FloatingActionButtonPage from './components/pages/components/FloatingActi
 import FontIconPage from './components/pages/components/FontIcon/Page';
 import GridListPage from './components/pages/components/GridList/Page';
 import IconButtonPage from './components/pages/components/IconButton/Page';
-import IconMenus from './components/pages/components/icon-menus';
+import IconMenuPage from './components/pages/components/IconMenu/Page';
 import LeftNavPage from './components/pages/components/LeftNav/Page';
 import ListPage from './components/pages/components/List/Page';
 import LinearProgressPage from './components/pages/components/LinearProgress/Page';
@@ -102,7 +102,7 @@ const AppRoutes = (
       <Route path="floating-action-button" component={FloatingActionButtonPage} />
       <Route path="grid-list" component={GridListPage} />
       <Route path="icon-button" component={IconButtonPage} />
-      <Route path="icon-menus" component={IconMenus} />
+      <Route path="icon-menu" component={IconMenuPage} />
       <Route path="left-nav" component={LeftNavPage} />
       <Route path="list" component={ListPage} />
       <Route path="linear-progress" component={LinearProgressPage} />

docs/src/app/components/app-left-nav.jsx

@@ -202,8 +202,8 @@ const AppLeftNav = React.createClass({
                 primaryText="Icon Button"
               />,
               <ListItem
-                value="/components/icon-menus"
-                primaryText="Icon Menus"
+                value="/components/icon-menu"
+                primaryText="Icon Menu"
               />,
               <ListItem
                 primaryText="Icons"

docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import IconMenu from 'material-ui/lib/menus/icon-menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+import IconButton from 'material-ui/lib/icon-button';
+import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
+import ContentFilter from 'material-ui/lib/svg-icons/content/filter-list';
+
+export default class IconMenuExampleControlled extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      valueSingle: '3',
+      valueMultiple: ['3', '5'],
+    };
+  }
+
+  handleChangeSingle = (event, value) => {
+    this.setState({
+      valueSingle: value,
+    });
+  };
+
+  handleChangeMultiple = (event, value) => {
+    this.setState({
+      valueMultiple: value,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <IconMenu
+          iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+          onChange={this.handleChangeSingle}
+          value={this.state.valueSingle}
+        >
+          <MenuItem value="1" primaryText="Refresh" />
+          <MenuItem value="2" primaryText="Send feedback" />
+          <MenuItem value="3" primaryText="Settings" />
+          <MenuItem value="4" primaryText="Help" />
+          <MenuItem value="5" primaryText="Sign out" />
+        </IconMenu>
+        <IconMenu
+          iconButtonElement={<IconButton><ContentFilter /></IconButton>}
+          onChange={this.handleChangeMultiple}
+          value={this.state.valueMultiple}
+          multiple={true}
+        >
+          <MenuItem value="1" primaryText="Blu-ray" />
+          <MenuItem value="2" primaryText="Cassette" />
+          <MenuItem value="3" primaryText="CD" />
+          <MenuItem value="4" primaryText="DVD Audio" />
+          <MenuItem value="5" primaryText="Hybrid SACD" />
+          <MenuItem value="6" primaryText="Vinyl" />
+        </IconMenu>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/IconMenu/ExampleScrollable.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import IconMenu from 'material-ui/lib/menus/icon-menu';
+import IconButton from 'material-ui/lib/icon-button';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+import MapsPlace from 'material-ui/svg-icons/maps/place';
+
+const IconMenuExampleScrollable = () => (
+  <IconMenu
+    iconButtonElement={<IconButton><MapsPlace /></IconButton>}
+    anchorOrigin={{horizontal: 'left', vertical: 'top'}}
+    targetOrigin={{horizontal: 'left', vertical: 'top'}}
+    maxHeight={272}
+  >
+    <MenuItem value="AL" primaryText="Alabama" />
+    <MenuItem value="AK" primaryText="Alaska" />
+    <MenuItem value="AZ" primaryText="Arizona" />
+    <MenuItem value="AR" primaryText="Arkansas" />
+    <MenuItem value="CA" primaryText="California" />
+    <MenuItem value="CO" primaryText="Colorado" />
+    <MenuItem value="CT" primaryText="Connecticut" />
+    <MenuItem value="DE" primaryText="Delaware" />
+    <MenuItem value="DC" primaryText="District Of Columbia" />
+    <MenuItem value="FL" primaryText="Florida" />
+    <MenuItem value="GA" primaryText="Georgia" />
+    <MenuItem value="HI" primaryText="Hawaii" />
+    <MenuItem value="ID" primaryText="Idaho" />
+    <MenuItem value="IL" primaryText="Illinois" />
+    <MenuItem value="IN" primaryText="Indiana" />
+    <MenuItem value="IA" primaryText="Iowa" />
+    <MenuItem value="KS" primaryText="Kansas" />
+    <MenuItem value="KY" primaryText="Kentucky" />
+    <MenuItem value="LA" primaryText="Louisiana" />
+    <MenuItem value="ME" primaryText="Maine" />
+    <MenuItem value="MD" primaryText="Maryland" />
+    <MenuItem value="MA" primaryText="Massachusetts" />
+    <MenuItem value="MI" primaryText="Michigan" />
+    <MenuItem value="MN" primaryText="Minnesota" />
+    <MenuItem value="MS" primaryText="Mississippi" />
+    <MenuItem value="MO" primaryText="Missouri" />
+    <MenuItem value="MT" primaryText="Montana" />
+    <MenuItem value="NE" primaryText="Nebraska" />
+    <MenuItem value="NV" primaryText="Nevada" />
+    <MenuItem value="NH" primaryText="New Hampshire" />
+    <MenuItem value="NJ" primaryText="New Jersey" />
+    <MenuItem value="NM" primaryText="New Mexico" />
+    <MenuItem value="NY" primaryText="New York" />
+    <MenuItem value="NC" primaryText="North Carolina" />
+    <MenuItem value="ND" primaryText="North Dakota" />
+    <MenuItem value="OH" primaryText="Ohio" />
+    <MenuItem value="OK" primaryText="Oklahoma" />
+    <MenuItem value="OR" primaryText="Oregon" />
+    <MenuItem value="PA" primaryText="Pennsylvania" />
+    <MenuItem value="RI" primaryText="Rhode Island" />
+    <MenuItem value="SC" primaryText="South Carolina" />
+    <MenuItem value="SD" primaryText="South Dakota" />
+    <MenuItem value="TN" primaryText="Tennessee" />
+    <MenuItem value="TX" primaryText="Texas" />
+    <MenuItem value="UT" primaryText="Utah" />
+    <MenuItem value="VT" primaryText="Vermont" />
+    <MenuItem value="VA" primaryText="Virginia" />
+    <MenuItem value="WA" primaryText="Washington" />
+    <MenuItem value="WV" primaryText="West Virginia" />
+    <MenuItem value="WI" primaryText="Wisconsin" />
+    <MenuItem value="WY" primaryText="Wyoming" />
+  </IconMenu>
+);
+
+export default IconMenuExampleScrollable;

docs/src/app/components/pages/components/IconMenu/ExampleSimple.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import IconMenu from 'material-ui/lib/menus/icon-menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+import IconButton from 'material-ui/lib/icon-button';
+import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
+
+const AvatarExampleSimple = () => (
+  <div>
+    <IconMenu
+      iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+      anchorOrigin={{horizontal: 'left', vertical: 'top'}}
+      targetOrigin={{horizontal: 'left', vertical: 'top'}}
+    >
+      <MenuItem primaryText="Refresh" />
+      <MenuItem primaryText="Send feedback" />
+      <MenuItem primaryText="Settings" />
+      <MenuItem primaryText="Help" />
+      <MenuItem primaryText="Sign out" />
+    </IconMenu>
+    <IconMenu
+      iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+      anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
+      targetOrigin={{horizontal: 'left', vertical: 'bottom'}}
+    >
+      <MenuItem primaryText="Refresh" />
+      <MenuItem primaryText="Send feedback" />
+      <MenuItem primaryText="Settings" />
+      <MenuItem primaryText="Help" />
+      <MenuItem primaryText="Sign out" />
+    </IconMenu>
+    <IconMenu
+      iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+      anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
+      targetOrigin={{horizontal: 'right', vertical: 'bottom'}}
+    >
+      <MenuItem primaryText="Refresh" />
+      <MenuItem primaryText="Send feedback" />
+      <MenuItem primaryText="Settings" />
+      <MenuItem primaryText="Help" />
+      <MenuItem primaryText="Sign out" />
+    </IconMenu>
+    <IconMenu
+      iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+      anchorOrigin={{horizontal: 'right', vertical: 'top'}}
+      targetOrigin={{horizontal: 'right', vertical: 'top'}}
+    >
+      <MenuItem primaryText="Refresh" />
+      <MenuItem primaryText="Send feedback" />
+      <MenuItem primaryText="Settings" />
+      <MenuItem primaryText="Help" />
+      <MenuItem primaryText="Sign out" />
+    </IconMenu>
+  </div>
+);
+
+export default AvatarExampleSimple;

docs/src/app/components/pages/components/IconMenu/Page.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import iconMenuReadmeText from './README';
+import iconMenuCode from '!raw!material-ui/lib/menus/icon-menu';
+import IconMenuExampleSimple from './ExampleSimple';
+import iconMenuExampleSimpleCode from '!raw!./ExampleSimple';
+import IconMenuExampleControlled from './ExampleControlled';
+import iconMenuExampleControlledCode from '!raw!./ExampleControlled';
+import IconMenuExampleScrollable from './ExampleScrollable';
+import iconMenuExampleScrollableCode from '!raw!./ExampleScrollable';
+
+const IconMenusPage = () => (
+  <div>
+    <MarkdownElement text={iconMenuReadmeText} />
+    <CodeExample code={iconMenuExampleSimpleCode}>
+      <IconMenuExampleSimple />
+    </CodeExample>
+    <CodeExample code={iconMenuExampleControlledCode}>
+      <IconMenuExampleControlled />
+    </CodeExample>
+    <CodeExample code={iconMenuExampleScrollableCode}>
+      <IconMenuExampleScrollable />
+    </CodeExample>
+    <PropTypeDescription code={iconMenuCode} />
+  </div>
+);
+
+export default IconMenusPage;

docs/src/app/components/pages/components/IconMenu/README.md

@@ -0,0 +1,7 @@
+## Icon Menu
+
+[Icon Menus](https://www.google.com/design/spec/components/menus.html#menus-usage)
+are menus that open from icons. They can give options related to the icon and use
+a minimal space.
+
+### Examples