Update Documentation for Menus

docs/src/app/app-routes.jsx

@@ -35,7 +35,7 @@ import IconButtonPage from './components/pages/components/IconButton/Page';
 import IconMenus from './components/pages/components/icon-menus';
 import LeftNavPage from './components/pages/components/LeftNav/Page';
 import Lists from './components/pages/components/lists';
-import Menus from './components/pages/components/menus';
+import MenuPage from './components/pages/components/Menu/Page';
 import Paper from './components/pages/components/paper';
 import Popover from './components/pages/components/popover';
 import Progress from './components/pages/components/progress';
@@ -96,7 +96,7 @@ const AppRoutes = (
       <Route path="icon-menus" component={IconMenus} />
       <Route path="left-nav" component={LeftNavPage} />
       <Route path="lists" component={Lists} />
-      <Route path="menus" component={Menus} />
+      <Route path="menu" component={MenuPage} />
       <Route path="paper" component={Paper} />
       <Route path="popover" component={Popover} />
       <Route path="progress" component={Progress} />

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

@@ -203,8 +203,8 @@ const AppLeftNav = React.createClass({
                 primaryText="Lists"
               />,
               <ListItem
-                value="/components/menus"
-                primaryText="Menus"
+                value="/components/menu"
+                primaryText="Menu"
               />,
               <ListItem
                 value="/components/paper"

docs/src/app/components/pages/components/Menu/ExampleDisable.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Menu from 'material-ui/lib/menus/menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+import Divider from 'material-ui/lib/divider';
+
+const style = {
+  marginRight: 32,
+  marginBottom: 32,
+  float: 'left',
+  position: 'relative',
+  zIndex: 0,
+};
+
+const MenuExampleDisable = () => (
+  <div>
+    <Menu style={style} desktop={true}>
+      <MenuItem primaryText="Back" />
+      <MenuItem primaryText="Forward" disabled={true} />
+      <Divider />
+      <MenuItem primaryText="Recently closed" disabled={true} />
+      <MenuItem primaryText="Google" disabled={true} />
+      <MenuItem primaryText="YouTube" />
+    </Menu>
+    <Menu style={style} desktop={true}>
+      <MenuItem primaryText="Undo" />
+      <MenuItem primaryText="Redo" disabled={true} />
+      <Divider />
+      <MenuItem primaryText="Cut" disabled={true} />
+      <MenuItem primaryText="Copy" disabled={true} />
+      <MenuItem primaryText="Paste" />
+    </Menu>
+  </div>
+);
+
+export default MenuExampleDisable;

docs/src/app/components/pages/components/Menu/ExampleIcons.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Menu from 'material-ui/lib/menus/menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+import Divider from 'material-ui/lib/divider';
+import FontIcon from 'material-ui/lib/font-icon';
+import ContentCopy from 'material-ui/lib/svg-icons/content/content-copy';
+import ContentLink from 'material-ui/lib/svg-icons/content/link';
+import Delete from 'material-ui/lib/svg-icons/action/delete';
+import Download from 'material-ui/lib/svg-icons/file/file-download';
+import PersonAdd from 'material-ui/lib/svg-icons/social/person-add';
+import RemoveRedEye from 'material-ui/lib/svg-icons/image/remove-red-eye';
+
+const style = {
+  marginRight: 32,
+  marginBottom: 32,
+  float: 'left',
+  position: 'relative',
+  zIndex: 0,
+};
+
+const MenuExampleIcons = () => (
+  <div>
+    <Menu style={style}>
+      <MenuItem primaryText="Preview" leftIcon={<RemoveRedEye />} />
+      <MenuItem primaryText="Share" leftIcon={<PersonAdd />} />
+      <MenuItem primaryText="Get links" leftIcon={<ContentLink />} />
+      <Divider />
+      <MenuItem primaryText="Make a copy" leftIcon={<ContentCopy />} />
+      <MenuItem primaryText="Download" leftIcon={<Download />} />
+      <Divider />
+      <MenuItem primaryText="Remove" leftIcon={<Delete />} />
+    </Menu>
+    <Menu style={style} desktop={false}>
+      <MenuItem primaryText="Clear Config" />
+      <MenuItem primaryText="New Config" rightIcon={<PersonAdd />} />
+      <MenuItem primaryText="Project" rightIcon={<FontIcon className="material-icons">settings</FontIcon>}/>
+      <MenuItem primaryText="Workspace" rightIcon={
+        <FontIcon className="material-icons" style={{color: '#559'}}>settings</FontIcon>
+        }/>
+      <MenuItem primaryText="Paragraph" rightIcon={<b style={{paddingTop: 0}}>¶</b>} />
+      <MenuItem primaryText="Section" rightIcon={<b style={{paddingTop: 0}}>§</b>} />
+    </Menu>
+  </div>
+);
+
+export default MenuExampleIcons;

docs/src/app/components/pages/components/Menu/ExampleNested.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Menu from 'material-ui/lib/menus/menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+import Divider from 'material-ui/lib/divider';
+import ArrowDropRight from 'material-ui/lib/svg-icons/navigation-arrow-drop-right';
+
+const style = {
+  marginRight: 32,
+  marginBottom: 32,
+  float: 'left',
+  position: 'relative',
+  zIndex: 0,
+};
+
+const MenuExampleNested = () => (
+  <div>
+    <Menu style={style} desktop={true} width={320}>
+      <MenuItem primaryText="Single" insetChildren={true} />
+      <MenuItem primaryText="1.15" insetChildren={true} />
+      <MenuItem primaryText="Double" insetChildren={true} />
+      <MenuItem primaryText="Custom: 1.2" checked={true} rightIcon={<ArrowDropRight />} menuItems={[
+        <MenuItem primaryText="Show" rightIcon={<ArrowDropRight />} menuItems={[
+          <MenuItem primaryText="Show Level 2" />,
+          <MenuItem primaryText="Grid lines" checked={true} />,
+          <MenuItem primaryText="Page breaks" insetChildren={true} />,
+          <MenuItem primaryText="Rules" checked={true} />,
+        ]}/>,
+        <MenuItem primaryText="Grid lines" checked={true} />,
+        <MenuItem primaryText="Page breaks" insetChildren={true} />,
+        <MenuItem primaryText="Rules" checked={true} />,
+      ]} />
+      <Divider />
+      <MenuItem primaryText="Add space before paragraph" />
+      <MenuItem primaryText="Add space after paragraph" />
+      <Divider />
+      <MenuItem primaryText="Custom spacing..." />
+    </Menu>
+  </div>
+);
+
+export default MenuExampleNested;

docs/src/app/components/pages/components/Menu/ExampleSecondary.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Menu from 'material-ui/lib/menus/menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+import Divider from 'material-ui/lib/divider';
+import ArrowDropRight from 'material-ui/lib/svg-icons/navigation-arrow-drop-right';
+
+const style = {
+  marginRight: 32,
+  marginBottom: 32,
+  float: 'left',
+  position: 'relative',
+  zIndex: 0,
+};
+
+const MenuExampleSecondary = () => (
+  <div>
+    <Menu style={style} desktop={true} width={320}>
+      <MenuItem primaryText="Bold" secondaryText="&#8984;B" />
+      <MenuItem primaryText="Italic" secondaryText="&#8984;I" />
+      <MenuItem primaryText="Underline" secondaryText="&#8984;U" />
+      <MenuItem primaryText="Strikethrough" secondaryText="Alt+Shift+5" />
+      <MenuItem primaryText="Superscript" secondaryText="&#8984;." />
+      <MenuItem primaryText="Subscript" secondaryText="&#8984;," />
+      <Divider />
+      <MenuItem primaryText="Paragraph styles" rightIcon={<ArrowDropRight />} />
+      <MenuItem primaryText="Align" rightIcon={<ArrowDropRight />} />
+      <MenuItem primaryText="Line spacing" rightIcon={<ArrowDropRight />} />
+      <MenuItem primaryText="Numbered list" rightIcon={<ArrowDropRight />} />
+      <MenuItem primaryText="List options" rightIcon={<ArrowDropRight />} />
+      <Divider />
+      <MenuItem primaryText="Clear formatting" secondaryText="&#8984;/" />
+    </Menu>
+    <Menu style={style} desktop={true} width={320}>
+      <MenuItem primaryText="Open" secondaryText="Cmnd + O" />
+      <MenuItem primaryText="Paste in place" secondaryText="Shift + V" />
+      <MenuItem primaryText="Research" secondaryText="Opt + Shift + Cmnd + I" />
+    </Menu>
+    <Menu style={style} desktop={true} width={320}>
+      <MenuItem primaryText="Open" secondaryText="&#8984;O" />
+      <MenuItem primaryText="Paste in place" secondaryText="&#8679;&#8984;V" />
+      <MenuItem primaryText="Research" secondaryText="&#8997;&#8679;&#8984;I" />
+    </Menu>
+  </div>
+);
+
+export default MenuExampleSecondary;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Menu from 'material-ui/lib/menus/menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const style = {
+  marginRight: 32,
+  marginBottom: 32,
+  float: 'left',
+  position: 'relative',
+  zIndex: 0,
+};
+
+const MenuExampleSimple = () => (
+  <div>
+    <Menu style={style}>
+      <MenuItem primaryText="Maps" />
+      <MenuItem primaryText="Books" />
+      <MenuItem primaryText="Flights" />
+      <MenuItem primaryText="Apps" />
+    </Menu>
+    <Menu style={style}>
+      <MenuItem primaryText="Refresh" />
+      <MenuItem primaryText="Help &amp; feedback" />
+      <MenuItem primaryText="Settings" />
+      <MenuItem primaryText="Sign out" />
+    </Menu>
+  </div>
+);
+
+export default MenuExampleSimple;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import menuReadmeText from './README';
+import menuCode from '!raw!material-ui/lib/menus/menu';
+import menuItemCode from '!raw!material-ui/lib/menus/menu-item';
+import MenuExampleSimple from './ExampleSimple';
+import menuExampleSimpleCode from '!raw!./ExampleSimple';
+import MenuExampleDisable from './ExampleDisable';
+import menuExampleDisableCode from '!raw!./ExampleDisable';
+import MenuExampleIcons from './ExampleIcons';
+import menuExampleIconsCode from '!raw!./ExampleIcons';
+import MenuExampleSecondary from './ExampleSecondary';
+import menuExampleSecondaryCode from '!raw!./ExampleSecondary';
+import MenuExampleNested from './ExampleNested';
+import menuExampleNestedCode from '!raw!./ExampleNested';
+
+const MenuPage = () => (
+  <div>
+    <MarkdownElement text={menuReadmeText} />
+    <CodeExample code={menuExampleSimpleCode}>
+      <MenuExampleSimple />
+    </CodeExample>
+    <CodeExample code={menuExampleDisableCode}>
+      <MenuExampleDisable />
+    </CodeExample>
+    <CodeExample code={menuExampleIconsCode}>
+      <MenuExampleIcons />
+    </CodeExample>
+    <CodeExample code={menuExampleSecondaryCode}>
+      <MenuExampleSecondary />
+    </CodeExample>
+    <CodeExample code={menuExampleNestedCode}>
+      <MenuExampleNested />
+    </CodeExample>
+    <PropTypeDescription code={menuCode}/>
+    <PropTypeDescription code={menuItemCode}/>
+  </div>
+);
+
+export default MenuPage;

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

@@ -0,0 +1,6 @@
+## Menu
+[Menus](https://www.google.com/design/spec/components/menus.html) allow you to
+take an action by selecting from a list revealed upon opening a temporary,
+new sheet of material.
+
+### Examples