[List] Update to match the specification

mui · Apr 13, 2019 · bc5b77d · bc5b77d
1 parent 1e86a1c
commit bc5b77d
Show file tree

Hide file tree

Showing 28 changed files with 250 additions and 242 deletions.
diff --git a/docs/src/pages/demos/dividers/InsetDividers.js b/docs/src/pages/demos/dividers/InsetDividers.js
@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
@@ -23,25 +24,31 @@ function InsetDividers(props) {
   return (
     <List className={classes.root}>
       <ListItem>
-        <Avatar>
-          <ImageIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <ImageIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <li>
         <Divider variant="inset" />
       </li>
       <ListItem>
-        <Avatar>
-          <WorkIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <WorkIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Work" secondary="Jan 7, 2014" />
       </ListItem>
       <Divider variant="inset" component="li" />
       <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Vacation" secondary="July 20, 2014" />
       </ListItem>
     </List>

diff --git a/docs/src/pages/demos/dividers/InsetDividers.tsx b/docs/src/pages/demos/dividers/InsetDividers.tsx
@@ -4,6 +4,7 @@ import { withStyles, Theme, WithStyles, WithTheme, createStyles } from '@materia
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
@@ -26,25 +27,31 @@ function InsetDividers(props: Props) {
   return (
     <List className={classes.root}>
       <ListItem>
-        <Avatar>
-          <ImageIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <ImageIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <li>
         <Divider variant="inset" />
       </li>
       <ListItem>
-        <Avatar>
-          <WorkIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <WorkIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Work" secondary="Jan 7, 2014" />
       </ListItem>
       <Divider variant="inset" component="li" />
       <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Vacation" secondary="July 20, 2014" />
       </ListItem>
     </List>

diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import Avatar from '@material-ui/core/Avatar';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
@@ -56,9 +57,11 @@ function SubheaderDividers(props) {
         </Typography>
       </li>
       <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Vacation" secondary="July 20, 2014" />
       </ListItem>
     </List>

diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.tsx b/docs/src/pages/demos/dividers/SubheaderDividers.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles, WithStyles, WithTheme, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import Avatar from '@material-ui/core/Avatar';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
@@ -58,9 +59,11 @@ function SubheaderDividers(props: Props) {
         </Typography>
       </li>
       <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Vacation" secondary="July 20, 2014" />
       </ListItem>
     </List>

diff --git a/docs/src/pages/demos/lists/AlignItemsList.js b/docs/src/pages/demos/lists/AlignItemsList.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import Divider from '@material-ui/core/Divider';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
@@ -44,6 +45,9 @@ function AlignItemsList(props) {
           }
         />
       </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
@@ -65,6 +69,9 @@ function AlignItemsList(props) {
           }
         />
       </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/3.jpg" />

diff --git a/docs/src/pages/demos/lists/CheckboxList.js b/docs/src/pages/demos/lists/CheckboxList.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import Checkbox from '@material-ui/core/Checkbox';
@@ -37,10 +38,17 @@ function CheckboxList() {
     <List className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} role={undefined} dense button onClick={handleToggle(value)}>
-          <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
+          <ListItemIcon>
+            <Checkbox
+              edge="start"
+              checked={checked.indexOf(value) !== -1}
+              tabIndex={-1}
+              disableRipple
+            />
+          </ListItemIcon>
           <ListItemText primary={`Line item ${value + 1}`} />
           <ListItemSecondaryAction>
-            <IconButton aria-label="Comments">
+            <IconButton edge="end" aria-label="Comments">
               <CommentIcon />
             </IconButton>
           </ListItemSecondaryAction>

diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.js b/docs/src/pages/demos/lists/CheckboxListSecondary.js
@@ -34,15 +34,19 @@ function CheckboxListSecondary() {
   };
 
   return (
-    <List dense className={classes.root}>
+    <List className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} button>
           <ListItemAvatar>
             <Avatar alt={`Avatar n°${value + 1}`} src={`/static/images/avatar/${value + 1}.jpg`} />
           </ListItemAvatar>
           <ListItemText primary={`Line item ${value + 1}`} />
           <ListItemSecondaryAction>
-            <Checkbox onChange={handleToggle(value)} checked={checked.indexOf(value) !== -1} />
+            <Checkbox
+              edge="end"
+              onChange={handleToggle(value)}
+              checked={checked.indexOf(value) !== -1}
+            />
           </ListItemSecondaryAction>
         </ListItem>
       ))}

diff --git a/docs/src/pages/demos/lists/FolderList.js b/docs/src/pages/demos/lists/FolderList.js
@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
@@ -22,21 +23,27 @@ function FolderList(props) {
   return (
     <List className={classes.root}>
       <ListItem>
-        <Avatar>
-          <ImageIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <ImageIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <ListItem>
-        <Avatar>
-          <WorkIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <WorkIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Work" secondary="Jan 7, 2014" />
       </ListItem>
       <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Vacation" secondary="July 20, 2014" />
       </ListItem>
     </List>

diff --git a/docs/src/pages/demos/lists/InsetList.js b/docs/src/pages/demos/lists/InsetList.js
@@ -23,7 +23,7 @@ function InsetList(props) {
         <ListItemIcon>
           <StarIcon />
         </ListItemIcon>
-        <ListItemText inset primary="Chelsea Otakan" />
+        <ListItemText primary="Chelsea Otakan" />
       </ListItem>
       <ListItem button>
         <ListItemText inset primary="Eric Hoffman" />

diff --git a/docs/src/pages/demos/lists/InteractiveList.js b/docs/src/pages/demos/lists/InteractiveList.js
@@ -146,7 +146,7 @@ function InteractiveList() {
                     secondary={secondary ? 'Secondary text' : null}
                   />
                   <ListItemSecondaryAction>
-                    <IconButton aria-label="Delete">
+                    <IconButton edge="end" aria-label="Delete">
                       <DeleteIcon />
                     </IconButton>
                   </ListItemSecondaryAction>

diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js
@@ -42,19 +42,19 @@ function NestedList() {
         <ListItemIcon>
           <SendIcon />
         </ListItemIcon>
-        <ListItemText inset primary="Sent mail" />
+        <ListItemText primary="Sent mail" />
       </ListItem>
       <ListItem button>
         <ListItemIcon>
           <DraftsIcon />
         </ListItemIcon>
-        <ListItemText inset primary="Drafts" />
+        <ListItemText primary="Drafts" />
       </ListItem>
       <ListItem button onClick={handleClick}>
         <ListItemIcon>
           <InboxIcon />
         </ListItemIcon>
-        <ListItemText inset primary="Inbox" />
+        <ListItemText primary="Inbox" />
         {open ? <ExpandLess /> : <ExpandMore />}
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
@@ -63,7 +63,7 @@ function NestedList() {
             <ListItemIcon>
               <StarBorder />
             </ListItemIcon>
-            <ListItemText inset primary="Starred" />
+            <ListItemText primary="Starred" />
           </ListItem>
         </List>
       </Collapse>

diff --git a/docs/src/pages/demos/lists/SwitchListSecondary.js b/docs/src/pages/demos/lists/SwitchListSecondary.js
@@ -43,7 +43,11 @@ function SwitchListSecondary() {
         </ListItemIcon>
         <ListItemText primary="Wi-Fi" />
         <ListItemSecondaryAction>
-          <Switch onChange={handleToggle('wifi')} checked={checked.indexOf('wifi') !== -1} />
+          <Switch
+            edge="end"
+            onChange={handleToggle('wifi')}
+            checked={checked.indexOf('wifi') !== -1}
+          />
         </ListItemSecondaryAction>
       </ListItem>
       <ListItem>
@@ -53,6 +57,7 @@ function SwitchListSecondary() {
         <ListItemText primary="Bluetooth" />
         <ListItemSecondaryAction>
           <Switch
+            edge="end"
             onChange={handleToggle('bluetooth')}
             checked={checked.indexOf('bluetooth') !== -1}
           />

diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js
@@ -178,6 +178,7 @@ IconButton.propTypes = {
 IconButton.defaultProps = {
   color: 'default',
   disabled: false,
+  edge: false,
   size: 'medium',
 };
 

diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
@@ -17,11 +17,8 @@ export const styles = {
     paddingTop: 8,
     paddingBottom: 8,
   },
-  /* Styles applied to the root element if `dense={true}` & `disablePadding={false}`. */
-  dense: {
-    paddingTop: 4,
-    paddingBottom: 4,
-  },
+  /* Styles applied to the root element if dense */
+  dense: {},
   /* Styles applied to the root element if a `subheader` is provided. */
   subheader: {
     paddingTop: 0,
@@ -47,7 +44,7 @@ const List = React.forwardRef(function List(props, ref) {
       className={clsx(
         classes.root,
         {
-          [classes.dense]: dense && !disablePadding,
+          [classes.dense]: dense,
           [classes.padding]: !disablePadding,
           [classes.subheader]: subheader,
         },