[List] Update to match the specification

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

Hide file tree

Showing 52 changed files with 379 additions and 485 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/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
@@ -37,9 +37,7 @@ const ExpansionPanelSummary = withStyles({
     },
   },
   expanded: {},
-})(props => <MuiExpansionPanelSummary {...props} />);
-
-ExpansionPanelSummary.muiName = 'ExpansionPanelSummary';
+})(MuiExpansionPanelSummary);
 
 const ExpansionPanelDetails = withStyles(theme => ({
   root: {

diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
-import MuiExpansionPanelSummary, {
-  ExpansionPanelSummaryProps,
-} from '@material-ui/core/ExpansionPanelSummary';
+import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import Typography from '@material-ui/core/Typography';
 
@@ -39,9 +37,7 @@ const ExpansionPanelSummary = withStyles({
     },
   },
   expanded: {},
-})((props: ExpansionPanelSummaryProps) => <MuiExpansionPanelSummary {...props} />);
-
-(ExpansionPanelSummary as any).muiName = 'ExpansionPanelSummary';
+})(MuiExpansionPanelSummary);
 
 const ExpansionPanelDetails = withStyles(theme => ({
   root: {

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/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js b/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js
@@ -3,10 +3,8 @@ import clsx from 'clsx';
 import MuiBadge from '@material-ui/core/Badge';
 import { BADGE } from '../../theme/core';
 
-const Badge = ({ className, dotted, children, ...props }) => (
-  <MuiBadge className={clsx(BADGE.root, className, dotted && BADGE.dotted)} {...props}>
-    {children}
-  </MuiBadge>
+const Badge = ({ className, dotted, ...props }) => (
+  <MuiBadge className={clsx(BADGE.root, className, dotted && BADGE.dotted)} {...props} />
 );
 
 export default Badge;
diff --git a/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js b/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js
@@ -3,13 +3,11 @@ import clsx from 'clsx';
 import MuiListItemIcon from '@material-ui/core/ListItemIcon';
 import { LIST_ITEM_ICON } from '../../theme/core';
 
-const ListItemIcon = ({ className, children, subcategory, ...props }) => (
+const ListItemIcon = ({ className, subcategory, ...props }) => (
   <MuiListItemIcon
     className={clsx(LIST_ITEM_ICON.root, className, subcategory && LIST_ITEM_ICON.subcategory)}
     {...props}
-  >
-    {children}
-  </MuiListItemIcon>
+  />
 );
 
 export default ListItemIcon;