diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.js b/docs/src/pages/demos/app-bar/BottomAppBar.js
index 941122a26ee0dd..7e209a24623cff 100644
--- a/docs/src/pages/demos/app-bar/BottomAppBar.js
+++ b/docs/src/pages/demos/app-bar/BottomAppBar.js
@@ -9,6 +9,7 @@ import Paper from '@material-ui/core/Paper';
import Fab from '@material-ui/core/Fab';
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 ListSubheader from '@material-ui/core/ListSubheader';
import Avatar from '@material-ui/core/Avatar';
@@ -111,7 +112,9 @@ function BottomAppBar() {
{id === 1 && <ListSubheader className={classes.subheader}>Today</ListSubheader>}
{id === 3 && <ListSubheader className={classes.subheader}>Yesterday</ListSubheader>}
<ListItem button>
- <Avatar alt="Profile Picture" src={person} />
+ <ListItemAvatar>
+ <Avatar alt="Profile Picture" src={person} />
+ </ListItemAvatar>
<ListItemText primary={primary} secondary={secondary} />
</ListItem>
</React.Fragment>
diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.tsx b/docs/src/pages/demos/app-bar/BottomAppBar.tsx
index 5a8fe5ca431bba..970786f3107e9f 100644
--- a/docs/src/pages/demos/app-bar/BottomAppBar.tsx
+++ b/docs/src/pages/demos/app-bar/BottomAppBar.tsx
@@ -9,6 +9,7 @@ import Paper from '@material-ui/core/Paper';
import Fab from '@material-ui/core/Fab';
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 ListSubheader from '@material-ui/core/ListSubheader';
import Avatar from '@material-ui/core/Avatar';
@@ -113,7 +114,9 @@ function BottomAppBar() {
{id === 1 && <ListSubheader className={classes.subheader}>Today</ListSubheader>}
{id === 3 && <ListSubheader className={classes.subheader}>Yesterday</ListSubheader>}
<ListItem button>
- <Avatar alt="Profile Picture" src={person} />
+ <ListItemAvatar>
+ <Avatar alt="Profile Picture" src={person} />
+ </ListItemAvatar>
<ListItemText primary={primary} secondary={secondary} />
</ListItem>
</React.Fragment>
diff --git a/docs/src/pages/demos/dividers/InsetDividers.js b/docs/src/pages/demos/dividers/InsetDividers.js
index 413268c9cacccf..173791e8592db9 100644
--- 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,29 @@ 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>
+ <Divider variant="inset" component="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
index 5341c8084b2115..d59e034d88a2e7 100644
--- 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,29 @@ 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>
+ <Divider variant="inset" component="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
index 85b1eee9b92df5..0265a2861a3f9d 100644
--- 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
index 030f8239ffdf1d..212025f13a0d73 100644
--- 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
index 14810b683f17b4..3ec84239dd63e9 100644
--- 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
index 170ea9779e7176..b3d7d5ec285182 100644
--- 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
index 28a55864b44810..e52e773c65d3d7 100644
--- 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,7 @@ function AlignItemsList(props) {
}
/>
</ListItem>
+ <Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
@@ -65,6 +67,7 @@ function AlignItemsList(props) {
}
/>
</ListItem>
+ <Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/3.jpg" />
diff --git a/docs/src/pages/demos/lists/AlignItemsList.tsx b/docs/src/pages/demos/lists/AlignItemsList.tsx
index 5e3371f8e5925d..2303735ac82548 100644
--- a/docs/src/pages/demos/lists/AlignItemsList.tsx
+++ b/docs/src/pages/demos/lists/AlignItemsList.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem, { ListItemProps } 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';
@@ -47,6 +48,7 @@ function AlignItemsList(props: AlignItemListProps) {
}
/>
</ListItem>
+ <Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
@@ -68,6 +70,7 @@ function AlignItemsList(props: AlignItemListProps) {
}
/>
</ListItem>
+ <Divider variant="inset" component="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
index 1101e84913a79a..293616e47ac2df 100644
--- 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/CheckboxList.tsx b/docs/src/pages/demos/lists/CheckboxList.tsx
index 5ee653e994800a..b012bfa623c3c0 100644
--- a/docs/src/pages/demos/lists/CheckboxList.tsx
+++ b/docs/src/pages/demos/lists/CheckboxList.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { createStyles, makeStyles, Theme } 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';
@@ -39,10 +40,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
index b20bdbc90599d5..8b82e0bc1b8b89 100644
--- a/docs/src/pages/demos/lists/CheckboxListSecondary.js
+++ b/docs/src/pages/demos/lists/CheckboxListSecondary.js
@@ -42,7 +42,11 @@ function CheckboxListSecondary() {
</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/CheckboxListSecondary.tsx b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
index bd3c208821f4fb..a664145cd4cb85 100644
--- a/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
+++ b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
@@ -44,7 +44,11 @@ function CheckboxListSecondary() {
</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
index 94202e51b54fe6..1a27fb03e2632d 100644
--- 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/FolderList.tsx b/docs/src/pages/demos/lists/FolderList.tsx
index 164b6528e0896a..f1c1a3bb2e06de 100644
--- a/docs/src/pages/demos/lists/FolderList.tsx
+++ b/docs/src/pages/demos/lists/FolderList.tsx
@@ -4,6 +4,7 @@ import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/s
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';
@@ -25,21 +26,27 @@ function FolderList(props: FolderListProps) {
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
index 7bc540957290e4..e4bd666edc324f 100644
--- 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/InsetList.tsx b/docs/src/pages/demos/lists/InsetList.tsx
index 4d7e5a1b5125f3..85ae73516c2959 100644
--- a/docs/src/pages/demos/lists/InsetList.tsx
+++ b/docs/src/pages/demos/lists/InsetList.tsx
@@ -26,7 +26,7 @@ function InsetList(props: InsetListProps) {
<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
index 18eb3df6165358..8e65394b3dbcd4 100644
--- 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
index 7100c9b3dc35ae..d13dce2695e2cf 100644
--- 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
index e9fd99579a051f..8e8ca16becc9ce 100644
--- 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/demos/transfer-list/SelectAllTransferList.js b/docs/src/pages/demos/transfer-list/SelectAllTransferList.js
index bddad4099400dd..e08e225a2fe9c4 100644
--- a/docs/src/pages/demos/transfer-list/SelectAllTransferList.js
+++ b/docs/src/pages/demos/transfer-list/SelectAllTransferList.js
@@ -6,6 +6,7 @@ import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
import Checkbox from '@material-ui/core/Checkbox';
import Button from '@material-ui/core/Button';
import Divider from '@material-ui/core/Divider';
@@ -23,10 +24,6 @@ const useStyles = makeStyles(theme => ({
backgroundColor: theme.palette.background.paper,
overflow: 'auto',
},
- listItem: {
- paddingTop: 4,
- paddingBottom: 4,
- },
button: {
margin: theme.spacing(0.5, 0),
},
@@ -106,14 +103,10 @@ function TransferList() {
<Divider />
<List className={classes.list} dense>
{items.map(value => (
- <ListItem
- className={classes.listItem}
- key={value}
- role={undefined}
- button
- onClick={handleToggle(value)}
- >
- <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
+ <ListItem key={value} role={undefined} button onClick={handleToggle(value)}>
+ <ListItemIcon>
+ <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
+ </ListItemIcon>
<ListItemText primary={`List item ${value + 1}`} />
</ListItem>
))}
diff --git a/docs/src/pages/demos/transfer-list/TransferList.js b/docs/src/pages/demos/transfer-list/TransferList.js
index c4e9b9e61ebb9c..147fa176e85f81 100644
--- a/docs/src/pages/demos/transfer-list/TransferList.js
+++ b/docs/src/pages/demos/transfer-list/TransferList.js
@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import Button from '@material-ui/core/Button';
@@ -17,10 +18,6 @@ const useStyles = makeStyles(theme => ({
height: 230,
overflow: 'auto',
},
- listItem: {
- paddingTop: 4,
- paddingBottom: 4,
- },
button: {
margin: theme.spacing(0.5, 0),
},
@@ -82,14 +79,10 @@ function TransferList() {
<Paper className={classes.paper}>
<List dense>
{items.map(value => (
- <ListItem
- className={classes.listItem}
- key={value}
- role={undefined}
- button
- onClick={handleToggle(value)}
- >
- <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
+ <ListItem key={value} role={undefined} button onClick={handleToggle(value)}>
+ <ListItemIcon>
+ <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
+ </ListItemIcon>
<ListItemText primary={`List item ${value + 1}`} />
</ListItem>
))}
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index ceffe787c8fe1b..6ea804f6ca2e18 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -38,6 +38,10 @@ export const styles = theme => ({
const Divider = React.forwardRef(function Divider(props, ref) {
const { absolute, classes, className, component: Component, light, variant, ...other } = props;
+ if (Component === 'li' && !other.role) {
+ other.role = 'separator';
+ }
+
return (
<Component
className={clsx(
diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js
index 5500452e25437e..8b65988e97f736 100644
--- 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
index a54ac9feb5c517..0039c4c953b615 100644
--- 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,
@@ -43,24 +40,24 @@ const List = React.forwardRef(function List(props, ref) {
const context = React.useMemo(() => ({ dense }), [dense]);
return (
- <Component
- className={clsx(
- classes.root,
- {
- [classes.dense]: dense && !disablePadding,
- [classes.padding]: !disablePadding,
- [classes.subheader]: subheader,
- },
- className,
- )}
- ref={ref}
- {...other}
- >
- <ListContext.Provider value={context}>
+ <ListContext.Provider value={context}>
+ <Component
+ className={clsx(
+ classes.root,
+ {
+ [classes.dense]: dense,
+ [classes.padding]: !disablePadding,
+ [classes.subheader]: subheader,
+ },
+ className,
+ )}
+ ref={ref}
+ {...other}
+ >
{subheader}
{children}
- </ListContext.Provider>
- </Component>
+ </Component>
+ </ListContext.Provider>
);
});
@@ -85,8 +82,8 @@ List.propTypes = {
component: PropTypes.elementType,
/**
* If `true`, compact vertical padding designed for keyboard and mouse input will be used for
- * the list and list items. The property is available to descendant components as the
- * `dense` context.
+ * the list and list items.
+ * The property is available to descendant components as the `dense` context.
*/
dense: PropTypes.bool,
/**
diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 52c604074d1e2f..daa06ec919721a 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -5,7 +5,7 @@ import { chainPropTypes } from '@material-ui/utils';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';
import { isMuiElement } from '../utils/reactHelpers';
-import MergeListContext from './MergeListContext';
+import ListContext from '../List/ListContext';
export const styles = theme => ({
/* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
@@ -18,8 +18,8 @@ export const styles = theme => ({
width: '100%',
boxSizing: 'border-box',
textAlign: 'left',
- paddingTop: 11, // To use 10px in v4
- paddingBottom: 11, // To use 10px in v4
+ paddingTop: 8,
+ paddingBottom: 8,
'&$selected, &$selected:hover': {
backgroundColor: theme.palette.action.selected,
},
@@ -33,12 +33,10 @@ export const styles = theme => ({
focusVisible: {
backgroundColor: theme.palette.action.selected,
},
- /* Legacy styles applied to the root element. Use `root` instead. */
- default: {},
- /* Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`. */
+ /* Styles applied to the `component` element if dense. */
dense: {
- paddingTop: 8,
- paddingBottom: 8,
+ paddingTop: 4,
+ paddingBottom: 4,
},
/* Styles applied to the `component` element if `alignItems="flex-start"`. */
alignItemsFlexStart: {
@@ -76,7 +74,7 @@ export const styles = theme => ({
secondaryAction: {
// Add some space to avoid collision as `ListItemSecondaryAction`
// is absolutely positioned.
- paddingRight: 32,
+ paddingRight: 48,
},
/* Styles applied to the root element if `selected={true}`. */
selected: {},
@@ -91,11 +89,11 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
button,
children: childrenProp,
classes,
- className: classNameProp,
+ className,
component: componentProp,
ContainerComponent,
ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
- dense: denseProp,
+ dense,
disabled,
disableGutters,
divider,
@@ -104,72 +102,75 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
...other
} = props;
- return (
- <MergeListContext dense={denseProp} alignItems={alignItems}>
- {({ dense }) => {
- const children = React.Children.toArray(childrenProp);
- const hasAvatar = children.some(value => isMuiElement(value, ['ListItemAvatar']));
- const hasSecondaryAction =
- children.length &&
- isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
+ const context = React.useContext(ListContext);
+ const childContext = {
+ dense: dense || context.dense || false,
+ alignItems,
+ };
- const className = clsx(
- classes.root,
- classes.default,
- {
- [classes.dense]: dense || hasAvatar,
- [classes.gutters]: !disableGutters,
- [classes.divider]: divider,
- [classes.disabled]: disabled,
- [classes.button]: button,
- [classes.alignItemsFlexStart]: alignItems === 'flex-start',
- [classes.secondaryAction]: hasSecondaryAction,
- [classes.selected]: selected,
- },
- classNameProp,
- );
+ const children = React.Children.toArray(childrenProp);
+ const hasSecondaryAction =
+ children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
- const componentProps = { className, disabled, ...other };
- let Component = componentProp || 'li';
+ const componentProps = {
+ className: clsx(
+ classes.root,
+ {
+ [classes.dense]: childContext.dense,
+ [classes.gutters]: !disableGutters,
+ [classes.divider]: divider,
+ [classes.disabled]: disabled,
+ [classes.button]: button,
+ [classes.alignItemsFlexStart]: alignItems === 'flex-start',
+ [classes.secondaryAction]: hasSecondaryAction,
+ [classes.selected]: selected,
+ },
+ className,
+ ),
+ disabled,
+ ...other,
+ };
+ let Component = componentProp || 'li';
- if (button) {
- componentProps.component = componentProp || 'div';
- componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
- Component = ButtonBase;
- }
+ if (button) {
+ componentProps.component = componentProp || 'div';
+ componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
+ Component = ButtonBase;
+ }
- if (hasSecondaryAction) {
- // Use div by default.
- Component = !componentProps.component && !componentProp ? 'div' : Component;
+ if (hasSecondaryAction) {
+ // Use div by default.
+ Component = !componentProps.component && !componentProp ? 'div' : Component;
- // Avoid nesting of li > li.
- if (ContainerComponent === 'li') {
- if (Component === 'li') {
- Component = 'div';
- } else if (componentProps.component === 'li') {
- componentProps.component = 'div';
- }
- }
+ // Avoid nesting of li > li.
+ if (ContainerComponent === 'li') {
+ if (Component === 'li') {
+ Component = 'div';
+ } else if (componentProps.component === 'li') {
+ componentProps.component = 'div';
+ }
+ }
- return (
- <ContainerComponent
- className={clsx(classes.container, ContainerClassName)}
- ref={ref}
- {...ContainerProps}
- >
- <Component {...componentProps}>{children}</Component>
- {children.pop()}
- </ContainerComponent>
- );
- }
+ return (
+ <ListContext.Provider value={childContext}>
+ <ContainerComponent
+ className={clsx(classes.container, ContainerClassName)}
+ ref={ref}
+ {...ContainerProps}
+ >
+ <Component {...componentProps}>{children}</Component>
+ {children.pop()}
+ </ContainerComponent>
+ </ListContext.Provider>
+ );
+ }
- return (
- <Component ref={ref} {...componentProps}>
- {children}
- </Component>
- );
- }}
- </MergeListContext>
+ return (
+ <ListContext.Provider value={childContext}>
+ <Component ref={ref} {...componentProps}>
+ {children}
+ </Component>
+ </ListContext.Provider>
);
});
@@ -263,7 +264,6 @@ ListItem.defaultProps = {
alignItems: 'center',
button: false,
ContainerComponent: 'li',
- dense: false,
disabled: false,
disableGutters: false,
divider: false,
diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js
index b064d9e1d3d525..f8fb76f9df36ee 100644
--- a/packages/material-ui/src/ListItem/ListItem.test.js
+++ b/packages/material-ui/src/ListItem/ListItem.test.js
@@ -11,8 +11,6 @@ import consoleErrorMock from 'test/utils/consoleErrorMock';
import ListItemText from '../ListItemText';
import ListItemSecondaryAction from '../ListItemSecondaryAction';
import ListItem from './ListItem';
-import ListItemAvatar from '../ListItemAvatar';
-import Avatar from '../Avatar';
import ButtonBase from '../ButtonBase';
import ListContext from '../List/ListContext';
@@ -55,20 +53,6 @@ describe('<ListItem />', () => {
assert.strictEqual(listItem.hasClass(classes.gutters), false);
});
- it('should use dense class when ListItemAvatar is present', () => {
- const wrapper = mount(
- <ListContext.Provider value={{ dense: false }}>
- <ListItem>
- <ListItemAvatar>
- <Avatar />
- </ListItemAvatar>
- </ListItem>
- </ListContext.Provider>,
- );
- const listItem = findOutermostIntrinsic(wrapper);
- assert.strictEqual(listItem.hasClass(classes.dense), true);
- });
-
describe('prop: button', () => {
it('renders a div', () => {
const wrapper = mount(<ListItem button />);
diff --git a/packages/material-ui/src/ListItem/MergeListContext.d.ts b/packages/material-ui/src/ListItem/MergeListContext.d.ts
deleted file mode 100644
index 4502151b2170e2..00000000000000
--- a/packages/material-ui/src/ListItem/MergeListContext.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export interface MergeWithListContextProps {
- dense?: boolean;
-}
-
-declare const MergeWithListContext: React.ComponentType<MergeWithListContextProps>;
-
-export default MergeWithListContext;
diff --git a/packages/material-ui/src/ListItem/MergeListContext.js b/packages/material-ui/src/ListItem/MergeListContext.js
deleted file mode 100644
index 49d839e6729f7c..00000000000000
--- a/packages/material-ui/src/ListItem/MergeListContext.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ListContext from '../List/ListContext';
-
-/**
- * @ignore - internal component.
- *
- * Consumes a context and passes that context merged with its props.
- */
-function MergeListContext(props) {
- const { alignItems, children, dense } = props;
- return (
- <ListContext.Consumer>
- {context => {
- const childContext = {
- dense: dense || context.dense || false,
- alignItems,
- };
-
- return (
- <ListContext.Provider value={childContext}>{children(childContext)}</ListContext.Provider>
- );
- }}
- </ListContext.Consumer>
- );
-}
-
-MergeListContext.propTypes = {
- alignItems: PropTypes.oneOf(['flex-start', 'center']).isRequired,
- children: PropTypes.func.isRequired,
- dense: PropTypes.bool.isRequired,
-};
-
-export default MergeListContext;
diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
index cbfdde9963b83f..0609c9ad0d0875 100644
--- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
+++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
@@ -4,55 +4,39 @@ import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import ListContext from '../List/ListContext';
-export const styles = theme => ({
+export const styles = {
/* Styles applied to the root element. */
root: {
- width: 36,
- height: 36,
- fontSize: theme.typography.pxToRem(18),
- marginRight: 4,
+ minWidth: 56,
+ flexShrink: 0,
},
- /* Styles applied to the root element when. */
+ /* Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
alignItemsFlexStart: {
- marginTop: 4,
+ marginTop: 8,
},
- /* Styles applied to the children – typically the `Avatar` component. */
- icon: {
- width: 20,
- height: 20,
- fontSize: theme.typography.pxToRem(20),
- },
-});
+};
/**
- * This is a simple wrapper to apply the `dense`
- * and `align-items="flex-start"` mode styles to `Avatar`.
+ * A simple wrapper to apply `List` styles to an `Avatar`.
*/
-function ListItemAvatar(props) {
- const { children, classes, className, ...other } = props;
+const ListItemAvatar = React.forwardRef(function ListItemAvatar(props, ref) {
+ const { classes, className, ...other } = props;
+ const context = React.useContext(ListContext);
return (
- <ListContext.Consumer>
- {context =>
- React.cloneElement(children, {
- className: clsx(
- {
- [classes.root]: context.dense,
- [classes.alignItemsFlexStart]: context.alignItems === 'flex-start',
- },
- className,
- children.props.className,
- ),
- childrenClassName: clsx(
- { [classes.icon]: context.dense },
- children.props.childrenClassName,
- ),
- ...other,
- })
- }
- </ListContext.Consumer>
+ <div
+ className={clsx(
+ classes.root,
+ {
+ [classes.alignItemsFlexStart]: context.alignItems === 'flex-start',
+ },
+ className,
+ )}
+ ref={ref}
+ {...other}
+ />
);
-}
+});
ListItemAvatar.propTypes = {
/**
@@ -70,6 +54,4 @@ ListItemAvatar.propTypes = {
className: PropTypes.string,
};
-ListItemAvatar.muiName = 'ListItemAvatar';
-
export default withStyles(styles, { name: 'MuiListItemAvatar' })(ListItemAvatar);
diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js
index fed39a41bb8198..45b24d7ef65458 100644
--- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js
+++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js
@@ -1,9 +1,6 @@
import React from 'react';
-import { assert } from 'chai';
-import { createMount, getClasses } from '@material-ui/core/test-utils';
-import Avatar from '../Avatar';
+import { createMount, getClasses, describeConformance } from '@material-ui/core/test-utils';
import ListItemAvatar from './ListItemAvatar';
-import ListContext from '../List/ListContext';
describe('<ListItemAvatar />', () => {
let mount;
@@ -12,8 +9,8 @@ describe('<ListItemAvatar />', () => {
before(() => {
mount = createMount({ strict: true });
classes = getClasses(
- <ListItemAvatar className="foo">
- <Avatar className="bar" />
+ <ListItemAvatar>
+ <div />
</ListItemAvatar>,
);
});
@@ -22,17 +19,16 @@ describe('<ListItemAvatar />', () => {
mount.cleanUp();
});
- it('should render with the user and root classes', () => {
- const wrapper = mount(
- <ListContext.Provider value={{ dense: true }}>
- <ListItemAvatar className="foo">
- <Avatar className="bar" />
- </ListItemAvatar>
- </ListContext.Provider>,
- );
- const avatar = wrapper.find(Avatar);
- assert.strictEqual(avatar.hasClass('foo'), true);
- assert.strictEqual(avatar.hasClass('bar'), true);
- assert.strictEqual(avatar.hasClass(classes.root), true);
- });
+ describeConformance(
+ <ListItemAvatar>
+ <div />
+ </ListItemAvatar>,
+ () => ({
+ classes,
+ inheritComponent: 'div',
+ mount,
+ refInstanceof: window.HTMLDivElement,
+ skip: ['componentProp'],
+ }),
+ );
});
diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
index b16d2018bb6146..89e61d727ce5af 100644
--- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js
+++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
@@ -6,7 +6,7 @@ import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
- marginRight: 16,
+ minWidth: 56,
color: theme.palette.action.active,
flexShrink: 0,
display: 'inline-flex',
@@ -17,13 +17,9 @@ export const styles = theme => ({
* A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
*/
const ListItemIcon = React.forwardRef(function ListItemIcon(props, ref) {
- const { children, classes, className: classNameProp, ...other } = props;
+ const { classes, className, ...other } = props;
- return (
- <div className={clsx(classes.root, classNameProp)} ref={ref} {...other}>
- {children}
- </div>
- );
+ return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
});
ListItemIcon.propTypes = {
diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
index 05be0938c8299a..0f67a2933a7b51 100644
--- a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
+++ b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
@@ -7,7 +7,7 @@ export const styles = {
/* Styles applied to the root element. */
root: {
position: 'absolute',
- right: 4,
+ right: 16,
top: '50%',
transform: 'translateY(-50%)',
},
@@ -17,13 +17,9 @@ export const styles = {
* Must be used as the last child of ListItem to function properly.
*/
const ListItemSecondaryAction = React.forwardRef(function ListItemSecondaryAction(props, ref) {
- const { children, classes, className, ...other } = props;
+ const { classes, className, ...other } = props;
- return (
- <div className={clsx(classes.root, className)} ref={ref} {...other}>
- {children}
- </div>
- );
+ return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
});
ListItemSecondaryAction.propTypes = {
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
index 22b709eb0eb6c4..3aca24cd174a69 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -5,109 +5,91 @@ import withStyles from '../styles/withStyles';
import Typography from '../Typography';
import ListContext from '../List/ListContext';
-export const styles = theme => ({
+export const styles = {
/* Styles applied to the root element. */
root: {
flex: '1 1 auto',
minWidth: 0,
- padding: '0 16px',
- '&:first-child': {
- paddingLeft: 0,
- },
+ marginTop: 4,
+ marginBottom: 4,
},
+ /* Styles applied to the `Typography` components if primary and secondary are set. */
+ multiline: {
+ marginTop: 6,
+ marginBottom: 6,
+ },
+ /* Styles applied to the `Typography` components if dense. */
+ dense: {},
/* Styles applied to the root element if `inset={true}`. */
inset: {
- '&:first-child': {
- paddingLeft: 56,
- },
- },
- /* Styles applied to the root element if `context.dense` is `true`. */
- dense: {
- fontSize: theme.typography.pxToRem(13),
+ paddingLeft: 56,
},
/* Styles applied to the primary `Typography` component. */
- primary: {
- '&$textDense': {
- fontSize: 'inherit',
- },
- },
+ primary: {},
/* Styles applied to the secondary `Typography` component. */
- secondary: {
- '&$textDense': {
- fontSize: 'inherit',
- },
- },
- /* Styles applied to the `Typography` components if `context.dense` is `true`. */
- textDense: {},
-});
+ secondary: {},
+};
const ListItemText = React.forwardRef(function ListItemText(props, ref) {
const {
children,
classes,
- className: classNameProp,
+ className,
disableTypography,
inset,
primary: primaryProp,
primaryTypographyProps,
secondary: secondaryProp,
secondaryTypographyProps,
- theme,
...other
} = props;
+ const { dense } = React.useContext(ListContext);
- return (
- <ListContext.Consumer>
- {({ dense }) => {
- let primary = primaryProp != null ? primaryProp : children;
- if (primary != null && primary.type !== Typography && !disableTypography) {
- primary = (
- <Typography
- variant="body1"
- className={clsx(classes.primary, { [classes.textDense]: dense })}
- component="span"
- {...primaryTypographyProps}
- >
- {primary}
- </Typography>
- );
- }
+ let primary = primaryProp != null ? primaryProp : children;
+ if (primary != null && primary.type !== Typography && !disableTypography) {
+ primary = (
+ <Typography
+ variant={dense ? 'body2' : 'body1'}
+ className={classes.primary}
+ component="span"
+ {...primaryTypographyProps}
+ >
+ {primary}
+ </Typography>
+ );
+ }
- let secondary = secondaryProp;
- if (secondary != null && secondary.type !== Typography && !disableTypography) {
- secondary = (
- <Typography
- variant="body2"
- className={clsx(classes.secondary, {
- [classes.textDense]: dense,
- })}
- color="textSecondary"
- {...secondaryTypographyProps}
- >
- {secondary}
- </Typography>
- );
- }
+ let secondary = secondaryProp;
+ if (secondary != null && secondary.type !== Typography && !disableTypography) {
+ secondary = (
+ <Typography
+ variant="body2"
+ className={classes.secondary}
+ color="textSecondary"
+ {...secondaryTypographyProps}
+ >
+ {secondary}
+ </Typography>
+ );
+ }
- return (
- <div
- className={clsx(
- classes.root,
- {
- [classes.dense]: dense,
- [classes.inset]: inset,
- },
- classNameProp,
- )}
- ref={ref}
- {...other}
- >
- {primary}
- {secondary}
- </div>
- );
- }}
- </ListContext.Consumer>
+ return (
+ <div
+ className={clsx(
+ classes.root,
+ {
+ [classes.dense]: dense,
+ [classes.inset]: inset,
+ [classes.multiline]: primary && secondary,
+ },
+ className,
+ )}
+ ref={ref}
+ {...other}
+ >
+ {primary}
+ {secondary}
+ </div>
);
});
@@ -155,10 +137,6 @@ ListItemText.propTypes = {
* (as long as disableTypography is not `true`).
*/
secondaryTypographyProps: PropTypes.object,
- /**
- * @ignore
- */
- theme: PropTypes.object.isRequired,
};
ListItemText.defaultProps = {
@@ -166,4 +144,4 @@ ListItemText.defaultProps = {
inset: false,
};
-export default withStyles(styles, { name: 'MuiListItemText', withTheme: true })(ListItemText);
+export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
index 220a1d393f74de..f2fcd0fb2a4278 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -116,6 +116,4 @@ ListSubheader.defaultProps = {
inset: false,
};
-ListSubheader.muiName = 'ListSubheader';
-
export default withStyles(styles, { name: 'MuiListSubheader' })(ListSubheader);
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index cc2e2a5c2303ce..c979714ea6ff0c 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -22,6 +22,14 @@ export const styles = theme => ({
zIndex: 0, // Reset the stacking context.
verticalAlign: 'middle', // For correct alignment with the text.
},
+ /* Styles applied to the root element if `edge="start"`. */
+ edgeStart: {
+ marginLeft: -8,
+ },
+ /* Styles applied to the root element if `edge="end"`. */
+ edgeEnd: {
+ marginRight: -8,
+ },
/* Styles applied to the internal `SwitchBase` component's `root` class. */
switchBase: {
position: 'absolute',
@@ -116,11 +124,20 @@ export const styles = theme => ({
});
const Switch = React.forwardRef(function Switch(props, ref) {
- const { classes, className, color, ...other } = props;
+ const { classes, className, color, edge, ...other } = props;
const icon = <span className={classes.thumb} />;
return (
- <span className={clsx(classes.root, className)}>
+ <span
+ className={clsx(
+ classes.root,
+ {
+ [classes.edgeStart]: edge === 'start',
+ [classes.edgeEnd]: edge === 'end',
+ },
+ className,
+ )}
+ >
<SwitchBase
type="checkbox"
icon={icon}
@@ -173,6 +190,13 @@ Switch.propTypes = {
* If `true`, the ripple effect will be disabled.
*/
disableRipple: PropTypes.bool,
+ /**
+ * If given, uses a negative margin to counteract the padding on one
+ * side (this is often helpful for aligning the left or right
+ * side of the icon with content above or below, without ruining the border
+ * size and shape).
+ */
+ edge: PropTypes.oneOf(['start', 'end', false]),
/**
* The icon to display when the component is unchecked.
*/
@@ -209,6 +233,7 @@ Switch.propTypes = {
Switch.defaultProps = {
color: 'secondary',
+ edge: false,
};
export default withStyles(styles, { name: 'MuiSwitch' })(Switch);
diff --git a/packages/material-ui/src/utils/reactHelpers.test.js b/packages/material-ui/src/utils/reactHelpers.test.js
index ec324a24839eb7..77a7cb7ced93a5 100644
--- a/packages/material-ui/src/utils/reactHelpers.test.js
+++ b/packages/material-ui/src/utils/reactHelpers.test.js
@@ -3,7 +3,7 @@ import { assert } from 'chai';
import { spy } from 'sinon';
import PropTypes from 'prop-types';
import { isMuiElement, setRef, useForkRef } from './reactHelpers';
-import { Input, ListItemAvatar, ListItemSecondaryAction, SvgIcon } from '..';
+import { Input, ListItemSecondaryAction, SvgIcon } from '..';
import { mount } from 'enzyme';
describe('utils/reactHelpers.js', () => {
@@ -21,7 +21,6 @@ describe('utils/reactHelpers.js', () => {
it('should be truthy for matching components', () => {
[
[Input, 'Input'],
- [ListItemAvatar, 'ListItemAvatar'],
[ListItemSecondaryAction, 'ListItemSecondaryAction'],
[SvgIcon, 'SvgIcon'],
].forEach(([Component, muiName]) => {
diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md
index 337bc8ccd21401..dd9bec99625311 100644
--- a/pages/api/icon-button.md
+++ b/pages/api/icon-button.md
@@ -23,7 +23,7 @@ regarding the available icon options.
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">enum: 'default' |<br> 'inherit' |<br> 'primary' |<br> 'secondary'<br></span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
-| <span class="prop-name">edge</span> | <span class="prop-type">enum: 'start' |<br> 'end' |<br> false<br></span> | | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
+| <span class="prop-name">edge</span> | <span class="prop-type">enum: 'start' |<br> 'end' |<br> false<br></span> | <span class="prop-default">false</span> | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
| <span class="prop-name">size</span> | <span class="prop-type">enum: 'small' |<br> 'medium'<br></span> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
The `ref` is forwarded to the root element.
diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md
index 3bfa0160c0b2e3..979d602d291dd8 100644
--- a/pages/api/list-item-avatar.md
+++ b/pages/api/list-item-avatar.md
@@ -12,8 +12,7 @@ filename: /packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
```
-This is a simple wrapper to apply the `dense`
-and `align-items="flex-start"` mode styles to `Avatar`.
+A simple wrapper to apply `List` styles to an `Avatar`.
## Props
@@ -22,7 +21,7 @@ and `align-items="flex-start"` mode styles to `Avatar`.
| <span class="prop-name required">children *</span> | <span class="prop-type">element</span> | | The content of the component – normally `Avatar`. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-The component cannot hold a ref.
+The `ref` is forwarded to the root element.
Any other properties supplied will be spread to the root element (native element).
@@ -35,8 +34,7 @@ This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">alignItemsFlexStart</span> | Styles applied to the root element when.
-| <span class="prop-name">icon</span> | Styles applied to the children – typically the `Avatar` component.
+| <span class="prop-name">alignItemsFlexStart</span> | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`.
Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js)
diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md
index 9caddfe933c431..9555c44e0f0a48 100644
--- a/pages/api/list-item-text.md
+++ b/pages/api/list-item-text.md
@@ -40,11 +40,11 @@ This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| <span class="prop-name">root</span> | Styles applied to the root element.
+| <span class="prop-name">multiline</span> | Styles applied to the `Typography` components if primary and secondary are set.
+| <span class="prop-name">dense</span> | Styles applied to the `Typography` components if dense.
| <span class="prop-name">inset</span> | Styles applied to the root element if `inset={true}`.
-| <span class="prop-name">dense</span> | Styles applied to the root element if `context.dense` is `true`.
| <span class="prop-name">primary</span> | Styles applied to the primary `Typography` component.
| <span class="prop-name">secondary</span> | Styles applied to the secondary `Typography` component.
-| <span class="prop-name">textDense</span> | Styles applied to the `Typography` components if `context.dense` is `true`.
Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
and the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ListItemText/ListItemText.js)
diff --git a/pages/api/list-item.md b/pages/api/list-item.md
index 1415ddc5473423..22488cb8144f35 100644
--- a/pages/api/list-item.md
+++ b/pages/api/list-item.md
@@ -25,7 +25,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last
| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
| <span class="prop-name">ContainerComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The container component used when a `ListItemSecondaryAction` is the last child. |
| <span class="prop-name">ContainerProps</span> | <span class="prop-type">object</span> | | Properties applied to the container component if used. |
-| <span class="prop-name">dense</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
+| <span class="prop-name">dense</span> | <span class="prop-type">bool</span> | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be disabled. |
| <span class="prop-name">disableGutters</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the left and right padding is removed. |
| <span class="prop-name">divider</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, a 1px light border is added to the bottom of the list item. |
@@ -46,8 +46,7 @@ This property accepts the following keys:
| <span class="prop-name">root</span> | Styles applied to the (normally root) `component` element. May be wrapped by a `container`.
| <span class="prop-name">container</span> | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`.
| <span class="prop-name">focusVisible</span> | Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`.
-| <span class="prop-name">default</span> | Legacy styles applied to the root element. Use `root` instead.
-| <span class="prop-name">dense</span> | Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`.
+| <span class="prop-name">dense</span> | Styles applied to the `component` element if dense.
| <span class="prop-name">alignItemsFlexStart</span> | Styles applied to the `component` element if `alignItems="flex-start"`.
| <span class="prop-name">disabled</span> | Styles applied to the inner `component` element if `disabled={true}`.
| <span class="prop-name">divider</span> | Styles applied to the inner `component` element if `divider={true}`.
diff --git a/pages/api/list.md b/pages/api/list.md
index 19607b35570142..b5d63ebe100365 100644
--- a/pages/api/list.md
+++ b/pages/api/list.md
@@ -39,7 +39,7 @@ This property accepts the following keys:
|:-----|:------------|
| <span class="prop-name">root</span> | Styles applied to the root element.
| <span class="prop-name">padding</span> | Styles applied to the root element if `disablePadding={false}`.
-| <span class="prop-name">dense</span> | Styles applied to the root element if `dense={true}` & `disablePadding={false}`.
+| <span class="prop-name">dense</span> | Styles applied to the root element if dense.
| <span class="prop-name">subheader</span> | Styles applied to the root element if a `subheader` is provided.
Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
diff --git a/pages/api/switch.md b/pages/api/switch.md
index 093e669edea5f9..ea3fc1931fc2fe 100644
--- a/pages/api/switch.md
+++ b/pages/api/switch.md
@@ -24,6 +24,7 @@ import Switch from '@material-ui/core/Switch';
| <span class="prop-name">color</span> | <span class="prop-type">enum: 'primary' |<br> 'secondary' |<br> 'default'<br></span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | | If `true`, the switch will be disabled. |
| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> | | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name">edge</span> | <span class="prop-type">enum: 'start' |<br> 'end' |<br> false<br></span> | <span class="prop-default">false</span> | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | The icon to display when the component is unchecked. |
| <span class="prop-name">id</span> | <span class="prop-type">string</span> | | The id of the `input` element. |
| <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. |
@@ -45,6 +46,8 @@ This property accepts the following keys:
| Name | Description |
|:-----|:------------|
| <span class="prop-name">root</span> | Styles applied to the root element.
+| <span class="prop-name">edgeStart</span> | Styles applied to the root element if `edge="start"`.
+| <span class="prop-name">edgeEnd</span> | Styles applied to the root element if `edge="end"`.
| <span class="prop-name">switchBase</span> | Styles applied to the internal `SwitchBase` component's `root` class.
| <span class="prop-name">colorPrimary</span> | Styles applied to the internal SwitchBase component's root element if `color="primary"`.
| <span class="prop-name">colorSecondary</span> | Styles applied to the internal SwitchBase component's root element if `color="secondary"`.
diff --git a/test/regressions/tests/List/AvatarListItem.js b/test/regressions/tests/List/AvatarListItem.js
deleted file mode 100644
index f319ca0c270955..00000000000000
--- a/test/regressions/tests/List/AvatarListItem.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Avatar from '@material-ui/core/Avatar';
-import Icon from '@material-ui/core/Icon';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-
-export default function AvatarListItem() {
- return (
- <div style={{ backgroundColor: '#fff', width: 300 }}>
- <ListItem>
- <Avatar>
- <Icon>folder</Icon>
- </Avatar>
- <ListItemText primary="Avatar" />
- </ListItem>
- <ListItem>
- <Avatar>
- <Icon>folder</Icon>
- </Avatar>
- <ListItemText primary="Avatar" secondary="Secondary" />
- </ListItem>
- <List dense>
- <ListItem>
- <Avatar>
- <Icon>folder</Icon>
- </Avatar>
- <ListItemText primary="Avatar" />
- </ListItem>
- <ListItem>
- <Avatar>
- <Icon>folder</Icon>
- </Avatar>
- <ListItemText primary="Avatar" secondary="Secondary" />
- </ListItem>
- </List>
- </div>
- );
-}
diff --git a/test/regressions/tests/List/PrimaryActionCheckboxListItem.js b/test/regressions/tests/List/PrimaryActionCheckboxListItem.js
deleted file mode 100644
index 134f63bd0fb94a..00000000000000
--- a/test/regressions/tests/List/PrimaryActionCheckboxListItem.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import Checkbox from '@material-ui/core/Checkbox';
-import IconButton from '@material-ui/core/IconButton';
-import Icon from '@material-ui/core/Icon';
-
-export default function PrimaryActionCheckboxListItem() {
- return (
- <div style={{ backgroundColor: '#fff', width: 300 }}>
- <List>
- <ListItem button>
- <Checkbox tabIndex={-1} disableRipple />
- <ListItemText primary="Primary" />
- <ListItemSecondaryAction>
- <IconButton>
- <Icon>comment</Icon>
- </IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- <ListItem button dense>
- <Checkbox tabIndex={-1} disableRipple />
- <ListItemText primary="Primary" />
- <ListItemSecondaryAction>
- <IconButton>
- <Icon>comment</Icon>
- </IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- <ListItem button selected>
- <Checkbox tabIndex={-1} disableRipple />
- <ListItemText primary="Primary" />
- <ListItemSecondaryAction>
- <IconButton>
- <Icon>comment</Icon>
- </IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- </List>
- </div>
- );
-}