From b7604e949820953fa769c6451592f8882be9919f Mon Sep 17 00:00:00 2001
From: Anudeep Palanki <apalanki@users.noreply.github.com>
Date: Fri, 1 Sep 2017 13:47:03 -0500
Subject: [PATCH] [docs] Add a NestedList example (#7995)

* Adding NestedList example

* disabling flow for NestedList
---
 .../modules/components/AppDrawerNavItem.js    |  2 +-
 docs/src/pages/demos/lists/NestedList.js      | 74 +++++++++++++++++++
 docs/src/pages/demos/lists/lists.md           |  4 +
 pages/demos/lists.js                          |  7 ++
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/demos/lists/NestedList.js

diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
index 8a21c8e9f51a94..6eb56a931e1177 100644
--- a/docs/src/modules/components/AppDrawerNavItem.js
+++ b/docs/src/modules/components/AppDrawerNavItem.js
@@ -36,7 +36,7 @@ const styles = theme => ({
   },
   navLinkButton: {
     color: theme.palette.text.secondary,
-    textIndent: 24,
+    textIndent: theme.spacing.unit * 3,
     fontSize: 13,
   },
   activeButton: {
diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js
new file mode 100644
index 00000000000000..019e3807a1bd6f
--- /dev/null
+++ b/docs/src/pages/demos/lists/NestedList.js
@@ -0,0 +1,74 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import ListSubheader from 'material-ui/List/ListSubheader';
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
+import Collapse from 'material-ui/transitions/Collapse';
+import InboxIcon from 'material-ui-icons/MoveToInbox';
+import DraftsIcon from 'material-ui-icons/Drafts';
+import SendIcon from 'material-ui-icons/Send';
+import ExpandLess from 'material-ui-icons/ExpandLess';
+import ExpandMore from 'material-ui-icons/ExpandMore';
+import StarBorder from 'material-ui-icons/StarBorder';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    background: theme.palette.background.paper,
+  },
+  nested: {
+    paddingLeft: theme.spacing.unit * 4,
+  },
+});
+
+class NestedList extends React.Component {
+  state = { open: true };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <List className={classes.root} subheader={<ListSubheader>Nested List Items</ListSubheader>}>
+        <ListItem button>
+          <ListItemIcon>
+            <SendIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Sent mail" />
+        </ListItem>
+        <ListItem button>
+          <ListItemIcon>
+            <DraftsIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Drafts" />
+        </ListItem>
+        <ListItem button onClick={this.handleClick}>
+          <ListItemIcon>
+            <InboxIcon />
+          </ListItemIcon>
+          <ListItemText inset primary="Inbox" />
+          {this.state.open ? <ExpandMore /> : <ExpandLess />}
+        </ListItem>
+        <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText inset primary="Starred" />
+          </ListItem>
+        </Collapse>
+      </List>
+    );
+  }
+}
+
+NestedList.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(NestedList);
diff --git a/docs/src/pages/demos/lists/lists.md b/docs/src/pages/demos/lists/lists.md
index b41f4a6f38dc52..adf1bd00169867 100644
--- a/docs/src/pages/demos/lists/lists.md
+++ b/docs/src/pages/demos/lists/lists.md
@@ -22,6 +22,10 @@ Lists are best suited for similar data types.
 
 {{demo='pages/demos/lists/InsetList.js'}}
 
+### Nested List
+
+{{demo='pages/demos/lists/NestedList.js'}}
+
 ## List Controls
 
 ### Checkbox
diff --git a/pages/demos/lists.js b/pages/demos/lists.js
index 701f249ae34f25..a441556f269221 100644
--- a/pages/demos/lists.js
+++ b/pages/demos/lists.js
@@ -29,6 +29,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/lists/InsetList'), 'utf8')
+`,
+        },
+        'pages/demos/lists/NestedList.js': {
+          js: require('docs/src/pages/demos/lists/NestedList').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/lists/NestedList'), 'utf8')
 `,
         },
         'pages/demos/lists/CheckboxList.js': {