[docs] Improved documentation for Menu style overrides (mui#9126)

docs/src/pages/demos/menus/ListItemComposition.js

@@ -0,0 +1,59 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuList, MenuItem } from 'material-ui/Menu';
+import Paper from 'material-ui/Paper';
+import { withStyles } from 'material-ui/styles';
+import { ListItemIcon, ListItemText } from 'material-ui/List';
+import InboxIcon from 'material-ui-icons/MoveToInbox';
+import DraftsIcon from 'material-ui-icons/Drafts';
+import SendIcon from 'material-ui-icons/Send';
+
+const styles = theme => ({
+  menuItem: {
+    '&:focus': {
+      background: theme.palette.primary[500],
+      '& $text, & $icon': {
+        color: theme.palette.common.white,
+      },
+    },
+  },
+  text: {},
+  icon: {},
+});
+
+function ListItemComposition(props) {
+  const { classes } = props;
+
+  return (
+    <Paper>
+      <MenuList>
+        <MenuItem className={classes.menuItem}>
+          <ListItemIcon className={classes.icon}>
+            <SendIcon />
+          </ListItemIcon>
+          <ListItemText classes={{ text: classes.text }} inset primary="Sent mail" />
+        </MenuItem>
+        <MenuItem className={classes.menuItem}>
+          <ListItemIcon className={classes.icon}>
+            <DraftsIcon />
+          </ListItemIcon>
+          <ListItemText classes={{ text: classes.text }} inset primary="Drafts" />
+        </MenuItem>
+        <MenuItem className={classes.menuItem}>
+          <ListItemIcon className={classes.icon}>
+            <InboxIcon />
+          </ListItemIcon>
+          <ListItemText classes={{ text: classes.text }} inset primary="Inbox" />
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  );
+}
+
+ListItemComposition.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ListItemComposition);

docs/src/pages/demos/menus/menus.md

@@ -45,3 +45,10 @@ For answering those needs, we expose a `MenuList` component that you can compose
 The primary responsibility of the `MenuList` component is to handle the focus.
 
 {{demo='pages/demos/menus/MenuListComposition.js'}}
+
+## ListItem composition
+
+The `MenuItem` is a wrapper around `ListItem` with some additional styles.
+You can use the same list composition features with the `MenuItem` component:
+
+{{demo='pages/demos/menus/ListItemComposition.js'}}

pages/demos/menus.js

@@ -36,6 +36,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/menus/MenuListComposition'), 'utf8')
+`,
+        },
+        'pages/demos/menus/ListItemComposition.js': {
+          js: require('docs/src/pages/demos/menus/ListItemComposition').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/menus/ListItemComposition'), 'utf8')
 `,
         },
       }}