Update Documentation for Lists

docs/src/app/app-routes.jsx

@@ -34,7 +34,7 @@ import Icons from './components/pages/components/icons';
 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 ListPage from './components/pages/components/List/Page';
 import Menus from './components/pages/components/menus';
 import Paper from './components/pages/components/paper';
 import Popover from './components/pages/components/popover';
@@ -95,7 +95,7 @@ const AppRoutes = (
       <Route path="icon-button" component={IconButtonPage} />
       <Route path="icon-menus" component={IconMenus} />
       <Route path="left-nav" component={LeftNavPage} />
-      <Route path="lists" component={Lists} />
+      <Route path="list" component={ListPage} />
       <Route path="menus" component={Menus} />
       <Route path="paper" component={Paper} />
       <Route path="popover" component={Popover} />

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

@@ -199,8 +199,8 @@ const AppLeftNav = React.createClass({
                 primaryText="Left Nav"
               />,
               <ListItem
-                value="/components/lists"
-                primaryText="Lists"
+                value="/components/list"
+                primaryText="List"
               />,
               <ListItem
                 value="/components/menus"

docs/src/app/components/pages/components/List/ExampleChat.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import MobileTearSheet from '../../../MobileTearSheet';
+import Avatar from 'material-ui/lib/avatar';
+import List from 'material-ui/lib/lists/list';
+import ListItem from 'material-ui/lib/lists/list-item';
+import Divider from 'material-ui/lib/divider';
+import CommunicationChatBubble from 'material-ui/lib/svg-icons/communication/chat-bubble';
+
+const ListExampleChat = () => (
+  <MobileTearSheet>
+    <List subheader="Recent chats">
+      <ListItem
+        primaryText="Brendan Lim"
+        leftAvatar={<Avatar src="images/ok-128.jpg" />}
+        rightIcon={<CommunicationChatBubble />} />
+      <ListItem
+        primaryText="Eric Hoffman"
+        leftAvatar={<Avatar src="images/kolage-128.jpg" />}
+        rightIcon={<CommunicationChatBubble />} />
+      <ListItem
+        primaryText="Grace Ng"
+        leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
+        rightIcon={<CommunicationChatBubble />} />
+      <ListItem
+        primaryText="Kerem Suer"
+        leftAvatar={<Avatar src="images/kerem-128.jpg" />}
+        rightIcon={<CommunicationChatBubble />} />
+      <ListItem
+        primaryText="Raquel Parrado"
+        leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
+        rightIcon={<CommunicationChatBubble />} />
+    </List>
+    <Divider />
+    <List subheader="Previous chats">
+      <ListItem
+        primaryText="Chelsea Otakan"
+        leftAvatar={<Avatar src="images/chexee-128.jpg" />} />
+      <ListItem
+        primaryText="James Anderson"
+        leftAvatar={<Avatar src="images/jsa-128.jpg" />} />
+    </List>
+  </MobileTearSheet>
+);
+
+export default ListExampleChat;

docs/src/app/components/pages/components/List/ExampleContacts.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import MobileTearSheet from '../../../MobileTearSheet';
+import List from 'material-ui/lib/lists/list';
+import ListItem from 'material-ui/lib/lists/list-item';
+import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
+import Divider from 'material-ui/lib/divider';
+import Avatar from 'material-ui/lib/avatar';
+import Colors from 'material-ui/lib/styles/colors';
+
+const ListExampleContacts = () => (
+  <MobileTearSheet>
+    <List>
+      <ListItem
+        primaryText="Chelsea Otakan"
+        leftIcon={<ActionGrade color={Colors.pinkA200} />}
+        rightAvatar={<Avatar src="images/chexee-128.jpg" />} />
+      <ListItem
+        primaryText="Eric Hoffman"
+        insetChildren={true}
+        rightAvatar={<Avatar src="images/kolage-128.jpg" />} />
+      <ListItem
+        primaryText="James Anderson"
+        insetChildren={true}
+        rightAvatar={<Avatar src="images/jsa-128.jpg" />} />
+      <ListItem
+        primaryText="Kerem Suer"
+        insetChildren={true}
+        rightAvatar={<Avatar src="images/kerem-128.jpg" />} />
+    </List>
+    <Divider inset={true} />
+    <List>
+      <ListItem
+        primaryText="Adelle Charles"
+        leftAvatar={<Avatar color={Colors.pinkA200} backgroundColor={Colors.transparent}
+          style={{left: 8}}>A</Avatar>}
+        rightAvatar={<Avatar src="images/adellecharles-128.jpg" />} />
+      <ListItem
+        primaryText="Adham Dannaway"
+        insetChildren={true}
+        rightAvatar={<Avatar src="images/adhamdannaway-128.jpg" />} />
+      <ListItem
+        primaryText="Allison Grayce"
+        insetChildren={true}
+        rightAvatar={<Avatar src="images/allisongrayce-128.jpg" />} />
+      <ListItem
+        primaryText="Angel Ceballos"
+        insetChildren={true}
+        rightAvatar={<Avatar src="images/angelceballos-128.jpg" />} />
+    </List>
+  </MobileTearSheet>
+);
+
+export default ListExampleContacts;

docs/src/app/components/pages/components/List/ExampleFolders.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import MobileTearSheet from '../../../MobileTearSheet';
+import List from 'material-ui/lib/lists/list';
+import ListItem from 'material-ui/lib/lists/list-item';
+import ActionInfo from 'material-ui/lib/svg-icons/action/info';
+import Divider from 'material-ui/lib/divider';
+import Avatar from 'material-ui/lib/avatar';
+import FileFolder from 'material-ui/lib/svg-icons/file/folder';
+import ActionAssignment from 'material-ui/lib/svg-icons/action/assignment';
+import Colors from 'material-ui/lib/styles/colors';
+import EditorInsertChart from 'material-ui/lib/svg-icons/editor/insert-chart';
+
+const ListExampleFolder = () => (
+  <MobileTearSheet>
+    <List subheader="Folders" insetSubheader={true}>
+      <ListItem
+        leftAvatar={<Avatar icon={<FileFolder />} />}
+        rightIcon={<ActionInfo />}
+        primaryText="Photos"
+        secondaryText="Jan 9, 2014" />
+      <ListItem
+        leftAvatar={<Avatar icon={<FileFolder />} />}
+        rightIcon={<ActionInfo />}
+        primaryText="Recipes"
+        secondaryText="Jan 17, 2014" />
+      <ListItem
+        leftAvatar={<Avatar icon={<FileFolder />} />}
+        rightIcon={<ActionInfo />}
+        primaryText="Work"
+        secondaryText="Jan 28, 2014" />
+    </List>
+    <Divider inset={true} />
+    <List subheader="Files" insetSubheader={true}>
+      <ListItem
+        leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={Colors.blue500} />}
+        rightIcon={<ActionInfo />}
+        primaryText="Vacation itinerary"
+        secondaryText="Jan 20, 2014" />
+      <ListItem
+        leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={Colors.yellow600} />}
+        rightIcon={<ActionInfo />}
+        primaryText="Kitchen remodel"
+        secondaryText="Jan 10, 2014" />
+    </List>
+  </MobileTearSheet>
+);
+
+export default ListExampleFolder;

docs/src/app/components/pages/components/List/ExampleMessages.jsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import MobileTearSheet from '../../../MobileTearSheet';
+import List from 'material-ui/lib/lists/list';
+import ListItem from 'material-ui/lib/lists/list-item';
+import Divider from 'material-ui/lib/divider';
+import Avatar from 'material-ui/lib/avatar';
+import Colors from 'material-ui/lib/styles/colors';
+import IconButton from 'material-ui/lib/icon-button';
+import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
+import IconMenu from 'material-ui/lib/menus/icon-menu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const iconButtonElement = (
+  <IconButton
+    touch={true}
+    tooltip="more"
+    tooltipPosition="bottom-left">
+    <MoreVertIcon color={Colors.grey400} />
+  </IconButton>
+);
+
+const rightIconMenu = (
+  <IconMenu iconButtonElement={iconButtonElement}>
+    <MenuItem>Reply</MenuItem>
+    <MenuItem>Forward</MenuItem>
+    <MenuItem>Delete</MenuItem>
+  </IconMenu>
+);
+
+const ListExampleMessages = () => (
+  <div>
+  <MobileTearSheet>
+    <List subheader="Today">
+      <ListItem
+        leftAvatar={<Avatar src="images/ok-128.jpg" />}
+        primaryText="Brunch this weekend?"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Brendan Lim</span> --
+            I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/kolage-128.jpg" />}
+        primaryText={
+          <p>Summer BBQ&nbsp;&nbsp;<span style={{color: Colors.lightBlack}}>4</span></p>
+        }
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>to me, Scott, Jennifer</span> --
+            Wish I could come, but I&apos;m out of town this weekend.
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
+        primaryText="Oui oui"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Grace Ng</span> --
+            Do you have Paris recommendations? Have you ever been?
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/kerem-128.jpg" />}
+        primaryText="Birdthday gift"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Kerem Suer</span> --
+            Do you have any ideas what we can get Heidi for her birthday? How about a pony?
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
+        primaryText="Recipe to try"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Raquel Parrado</span> --
+            We should eat this: grated squash. Corn and tomatillo tacos.
+          </p>
+        }
+        secondaryTextLines={2} />
+    </List>
+  </MobileTearSheet>
+
+  <MobileTearSheet>
+    <List subheader="Today">
+      <ListItem
+        leftAvatar={<Avatar src="images/ok-128.jpg" />}
+        rightIconButton={rightIconMenu}
+        primaryText="Brendan Lim"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Brunch this weekend?</span><br/>
+            I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/kolage-128.jpg" />}
+        rightIconButton={rightIconMenu}
+        primaryText="me, Scott, Jennifer"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Summer BBQ</span><br/>
+            Wish I could come, but I&apos;m out of town this weekend.
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
+        rightIconButton={rightIconMenu}
+        primaryText="Grace Ng"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Oui oui</span><br/>
+            Do you have any Paris recs? Have you ever been?
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/kerem-128.jpg" />}
+        rightIconButton={rightIconMenu}
+        primaryText="Kerem Suer"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Birthday gift</span><br/>
+            Do you have any ideas what we can get Heidi for her birthday? How about a pony?
+          </p>
+        }
+        secondaryTextLines={2} />
+      <Divider inset={true} />
+      <ListItem
+        leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
+        rightIconButton={rightIconMenu}
+        primaryText="Raquel Parrado"
+        secondaryText={
+          <p>
+            <span style={{color: Colors.darkBlack}}>Recipe to try</span><br/>
+            We should eat this: grated squash. Corn and tomatillo tacos.
+          </p>
+        }
+        secondaryTextLines={2} />
+    </List>
+  </MobileTearSheet>
+  </div>
+);
+
+export default ListExampleMessages;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import MobileTearSheet from '../../../MobileTearSheet';
+import List from 'material-ui/lib/lists/list';
+import ListItem from 'material-ui/lib/lists/list-item';
+import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
+import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
+import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
+import ContentSend from 'material-ui/lib/svg-icons/content/send';
+
+const ListExampleNested = () => (
+  <MobileTearSheet>
+    <List subheader="Nested List Items">
+      <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
+      <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
+      <ListItem
+        primaryText="Inbox"
+        leftIcon={<ContentInbox />}
+        initiallyOpen={true}
+        primaryTogglesNestedList={true}
+        nestedItems={[
+          <ListItem primaryText="Starred" leftIcon={<ActionGrade />} />,
+          <ListItem
+            primaryText="Sent Mail"
+            leftIcon={<ContentSend />}
+            disabled={true}
+            nestedItems={[
+              <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />,
+            ]}
+          />,
+        ]}
+      />
+    </List>
+  </MobileTearSheet>
+);
+
+export default ListExampleNested;