[Popover][Menu][MenuItem] Port components

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   },
   plugins: [
     'babel',
+    'jsx-a11y',
     'mocha',
     'flowtype',
     'material-ui',
@@ -61,6 +62,11 @@ module.exports = {
         'render'
       ],
     }],
+    'jsx-a11y/aria-props': 'error',
+    'jsx-a11y/aria-proptypes': 'error',
+    'jsx-a11y/aria-role': 'error',
+    'jsx-a11y/img-has-alt': ['error', ['Avatar']],
+    'jsx-a11y/role-supports-aria-props': 'error',
     'material-ui/docgen-ignore-before-comment': 'error',
     'mocha/handle-done-callback': 'error',
     'mocha/no-exclusive-tests': 'error',

.flowconfig

@@ -1,6 +1,8 @@
 [ignore]
 
 .*/node_modules/fbjs/*
+./scripts/*
+./test/e2e/*
 
 [libs]
 flow/interfaces

docs/api/List/ListItem.md

@@ -9,6 +9,7 @@ Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
+| button | bool |  |   |
 | children | node |  |   |
 | className | string |  |   |
 | component | union | 'div' |   |

docs/api/Menu/Menu.md

@@ -0,0 +1,23 @@
+Menu
+====
+
+
+
+Props
+-----
+
+
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| anchorEl | object |  |  This is the DOM element that will be used to set the position of the menu. |
+| children | node |  |  Menu contents, should be menu items |
+| className | string |  |  The CSS class name of the list element. |
+| onEnter | function |  |  Callback fired before the Menu is entering |
+| onEntering | function |  |  Callback fired when the Menu is entering |
+| onEntered | function |  |  Callback fired when the Menu has entered |
+| onExit | function |  |  Callback fired before the Menu is exiting |
+| onExiting | function |  |  Callback fired when the Menu is exiting |
+| onExited | function |  |  Callback fired when the Menu has exited |
+| onRequestClose | function |  |  Callback function fired when the menu is requested to be closed.<br><br>**Signature:**<br>`function(event: event) => void`<br>*event:* The event that triggered the close request |
+| open | bool |  |  If true, the menu is visible. |
+| transitionDuration | union | 'auto' |  The length of the transition in `ms`, or 'auto' |

docs/api/Menu/MenuItem.md

@@ -0,0 +1,14 @@
+MenuItem
+========
+
+
+
+Props
+-----
+
+
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| children | node |  |  Menu item contents |
+| className | string |  |  The CSS class name of the root element. |
+| selected | bool |  |  Use to apply selected styling |

docs/api/Progress/CircularProgress.md

@@ -10,6 +10,6 @@ Props
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
 | className | string |  |   |
-| mode | enum:&nbsp;'determinate'<br>&nbsp;'indeterminate'<br> |  |  The mode of show your progress, indeterminate for when there is no value for progress. |
-| size | number | 50 |  The size of the circle. |
+| mode | enum:&nbsp;'determinate'<br>&nbsp;'indeterminate'<br> | 'indeterminate' |  The mode of show your progress, indeterminate for when there is no value for progress. |
+| size | number | 40 |  The size of the circle. |
 | value | number |  |  The value of progress, only works in determinate mode. |

docs/site/src/components/AppDrawerNavItem.js

@@ -96,7 +96,7 @@ export default class AppDrawerNavItem extends Component {
         >
           {title}
         </Button>
-        <Collapse in={this.state.open} transitionDuration="auto">
+        <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
           {children}
         </Collapse>
       </ListItem>

docs/site/src/components/Demo.js

@@ -17,6 +17,8 @@ const styleSheet = createStyleSheet('Demo', (theme) => {
       position: 'relative',
       backgroundColor: palette.background.contentFrame,
       marginBottom: 40,
+      marginLeft: -16,
+      marginRight: -16,
     },
     demo: mixins.gutters({
       display: 'flex',
@@ -25,12 +27,14 @@ const styleSheet = createStyleSheet('Demo', (theme) => {
       paddingBottom: 20,
     }),
     codeButton: {
+      display: 'none',
       zIndex: 10,
       position: 'absolute',
       top: 2,
       right: 7,
     },
     code: {
+      display: 'none',
       padding: 0,
       margin: 0,
       '@raw pre': {
@@ -40,6 +44,14 @@ const styleSheet = createStyleSheet('Demo', (theme) => {
         borderRadius: '0px !important',
       },
     },
+    [theme.breakpoints.up('md')]: {
+      codeButton: { display: 'block' },
+      code: { display: 'block' },
+      root: {
+        marginLeft: 0,
+        marginRight: 0,
+      },
+    },
   };
 });
 
@@ -74,7 +86,6 @@ export default class Demo extends Component {
     const DemoComponent = requireDemos(`./${this.props.demo}`).default;
     const demoSource = requireDemoSource(`./${this.props.demo}`);
     const classes = this.context.styleManager.render(styleSheet);
-
     const code = `\`\`\`js\n${demoSource}\n\`\`\``;
 
     return (

docs/site/src/demos/menus/SimpleListMenu.js

@@ -0,0 +1,84 @@
+// @flow weak
+
+import React, { Component, PropTypes } from 'react';
+import { createStyleSheet } from 'stylishly';
+import { List, ListItem, ListItemText } from 'material-ui/List';
+import { Menu, MenuItem } from 'material-ui/Menu';
+
+const styleSheet = createStyleSheet('SimpleListMenu', (theme) => {
+  return {
+    root: {
+      width: '100%',
+      maxWidth: '360px',
+      background: theme.palette.background.paper,
+    },
+  };
+});
+
+const options = [
+  'Show all notification content',
+  'Hide sensitive notification content',
+  'Hide all notification content',
+];
+
+export default class SimpleListMenu extends Component {
+  static contextTypes = {
+    styleManager: PropTypes.object.isRequired,
+  };
+
+  state = {
+    anchorEl: undefined,
+    open: false,
+    selectedIndex: 1,
+  };
+
+  button = undefined;
+
+  handleClickListItem = (event) => this.setState({ open: true, anchorEl: event.currentTarget });
+
+  handleMenuItemClick = (event, index) => this.setState({ selectedIndex: index, open: false });
+
+  handleRequestClose = () => this.setState({ open: false });
+
+  render() {
+    const classes = this.context.styleManager.render(styleSheet);
+    return (
+      <div className={classes.root}>
+        <List>
+          <ListItem
+            button
+            aria-haspopup="true"
+            aria-controls="lock-menu"
+            aria-label="When device is locked"
+            onClick={this.handleClickListItem}
+          >
+            <ListItemText
+              primary="When device is locked"
+              secondary={options[this.state.selectedIndex]}
+            />
+          </ListItem>
+        </List>
+        <Menu
+          id="lock-menu"
+          anchorEl={this.state.anchorEl}
+          className={classes.menu}
+          open={this.state.open}
+          onRequestClose={this.handleRequestClose}
+        >
+          {options.map((n, index) => {
+            return (
+              <MenuItem
+                key={index}
+                selected={index === this.state.selectedIndex}
+                onClick={(event) => this.handleMenuItemClick(event, index)}
+              >
+                {n}
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </div>
+    );
+  }
+}
+

docs/site/src/demos/menus/SimpleMenu.js

@@ -0,0 +1,59 @@
+// @flow weak
+
+import React, { Component, PropTypes } from 'react';
+import { createStyleSheet } from 'stylishly';
+import Button from 'material-ui/Button';
+import { Menu, MenuItem } from 'material-ui/Menu';
+
+const styleSheet = createStyleSheet('SimpleMenu', () => {
+  return {
+    menu: {},
+    content: {
+      margin: 0,
+    },
+  };
+});
+
+export default class SimpleMenu extends Component {
+  static contextTypes = {
+    styleManager: PropTypes.object.isRequired,
+  };
+
+  state = {
+    anchorEl: undefined,
+    open: false,
+  };
+
+  button = undefined;
+
+  handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });
+
+  handleRequestClose = () => this.setState({ open: false });
+
+  render() {
+    const classes = this.context.styleManager.render(styleSheet);
+    return (
+      <div>
+        <Button
+          aria-owns="simple-menu"
+          aria-haspopup="true"
+          onClick={this.handleClick}
+        >
+          Open Menu
+        </Button>
+        <Menu
+          id="simple-menu"
+          anchorEl={this.state.anchorEl}
+          className={classes.menu}
+          open={this.state.open}
+          onRequestClose={this.handleRequestClose}
+        >
+          <MenuItem onClick={this.handleRequestClose}>Profile</MenuItem>
+          <MenuItem onClick={this.handleRequestClose}>My account</MenuItem>
+          <MenuItem onClick={this.handleRequestClose}>Logout</MenuItem>
+        </Menu>
+      </div>
+    );
+  }
+}
+

docs/site/src/demos/menus/menus.md

@@ -0,0 +1,29 @@
+# Menus
+
+Menus display a list of choices on a transient sheet of material.
+
+Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
+
+Menu items may be disabled if not applicable to a certain context. Contextual menus dynamically change their available menu items based on the current state of the app.
+
+Menus should not be used as a primary method for navigation within an app.
+
+## Simple menus
+
+Simple menus open over the anchor element by default (this option can be changed via props). When close to a screen edge, simple menus vertically realign to make all menu items are completely visible.
+
+Choosing an option should immediately ideally commit the option and close the menu.
+
+**Disambiguation**: In contrast to simple menus, simple dialogs can present additional detail related to the options available for a list item or provide navigational or orthogonal actions related to the primary task. Although they can display the same content, simple menus are preferred over simple dialogs because simple menus are less disruptive to the user’s current context.
+
+{{demo='menus/SimpleMenu.js'}}
+
+If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element. The currently selected menu item is set using the `selected` prop.
+
+{{demo='menus/SimpleListMenu.js'}}
+
+If text in a simple menu wraps to a second line, use a simple dialog instead. Simple dialogs can have rows with varying heights.
+
+## TextField select menus
+
+Coming soon...

docs/site/src/index.js

@@ -9,11 +9,11 @@ import ReactPerf from 'react-addons-perf';
 import ReactDOM from 'react-dom';
 import App from './components/App';
 
-import a11y from 'react-a11y';
+// import a11y from 'react-a11y';
 
-if (process.env.NODE_ENV !== 'production') {
-  a11y(React, { includeSrcNode: true, ReactDOM });
-}
+// if (process.env.NODE_ENV !== 'production') {
+//   a11y(React, { includeSrcNode: true, ReactDOM });
+// }
 
 
 window.Perf = ReactPerf;

docs/site/webpack.dev.config.js

@@ -9,8 +9,9 @@ module.exports = {
   context: path.resolve(__dirname),
   entry: {
     main: [
+      'eventsource-polyfill', // hot reloading in IE
       'react-hot-loader/patch',
-      'webpack-dev-server/client?http://localhost:3000',
+      'webpack-dev-server/client?http://0.0.0.0:3000',
       'webpack/hot/only-dev-server',
       './src/index',
     ],

docs/site/webpack.dev.server.js

@@ -8,14 +8,14 @@ const serverOptions = {
   publicPath: webpackConfig.output.publicPath,
   hot: true,
   historyApiFallback: true,
-  stats: {colors: true},
+  stats: { colors: true },
 };
 
 new WebpackDevServer(webpack(webpackConfig), serverOptions)
-  .listen(3000, 'localhost', (err) => {
+  .listen(3000, '0.0.0.0', (err) => {
     if (err) {
       return console.log(err); // eslint-disable-line no-console
     }
 
-    return console.info('Webpack dev server listening at http://localhost:3000/'); // eslint-disable-line no-console
+    return console.info('Webpack dev server listening at http://0.0.0.0:3000/'); // eslint-disable-line no-console
   });