Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[List] Update to match the specification #15339

Merged
merged 6 commits into from
Apr 15, 2019
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/src/pages/demos/app-bar/BottomAppBar.js
Original file line number Diff line number Diff line change
@@ -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>
eps1lon marked this conversation as resolved.
Show resolved Hide resolved
<Avatar alt="Profile Picture" src={person} />
</ListItemAvatar>
<ListItemText primary={primary} secondary={secondary} />
</ListItem>
</React.Fragment>
5 changes: 4 additions & 1 deletion docs/src/pages/demos/app-bar/BottomAppBar.tsx
Original file line number Diff line number Diff line change
@@ -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>
29 changes: 17 additions & 12 deletions docs/src/pages/demos/dividers/InsetDividers.js
Original file line number Diff line number Diff line change
@@ -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>
29 changes: 17 additions & 12 deletions docs/src/pages/demos/dividers/InsetDividers.tsx
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 6 additions & 3 deletions docs/src/pages/demos/dividers/SubheaderDividers.js
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 6 additions & 3 deletions docs/src/pages/demos/dividers/SubheaderDividers.tsx
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -37,9 +37,7 @@ const ExpansionPanelSummary = withStyles({
},
},
expanded: {},
})(props => <MuiExpansionPanelSummary {...props} />);

ExpansionPanelSummary.muiName = 'ExpansionPanelSummary';
})(MuiExpansionPanelSummary);

const ExpansionPanelDetails = withStyles(theme => ({
root: {
Original file line number Diff line number Diff line change
@@ -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: {
3 changes: 3 additions & 0 deletions docs/src/pages/demos/lists/AlignItemsList.js
Original file line number Diff line number Diff line change
@@ -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" />
3 changes: 3 additions & 0 deletions docs/src/pages/demos/lists/AlignItemsList.tsx
Original file line number Diff line number Diff line change
@@ -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" />
12 changes: 10 additions & 2 deletions docs/src/pages/demos/lists/CheckboxList.js
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 10 additions & 2 deletions docs/src/pages/demos/lists/CheckboxList.tsx
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 5 additions & 1 deletion docs/src/pages/demos/lists/CheckboxListSecondary.js
Original file line number Diff line number Diff line change
@@ -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>
))}
6 changes: 5 additions & 1 deletion docs/src/pages/demos/lists/CheckboxListSecondary.tsx
Original file line number Diff line number Diff line change
@@ -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>
))}
25 changes: 16 additions & 9 deletions docs/src/pages/demos/lists/FolderList.js
Original file line number Diff line number Diff line change
@@ -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>
Loading