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.

Sign up for GitHub

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

[List] Update to match the specification #15339

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fa11147
[List] Update to match the specification
oliviertassinari Apr 13, 2019
fd89480
Update packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
eps1lon Apr 14, 2019
9886741
review
oliviertassinari Apr 14, 2019
e8fab84
multilines -> multiline
oliviertassinari Apr 14, 2019
4a9254f
handle more reviews
oliviertassinari Apr 14, 2019
af3b825
Merge branch 'next' into list-specification
oliviertassinari Apr 15, 2019
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion docs/src/pages/demos/app-bar/BottomAppBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
29 changes: 17 additions & 12 deletions docs/src/pages/demos/dividers/InsetDividers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand Down
29 changes: 17 additions & 12 deletions docs/src/pages/demos/dividers/InsetDividers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions docs/src/pages/demos/dividers/SubheaderDividers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions docs/src/pages/demos/dividers/SubheaderDividers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,7 @@ const ExpansionPanelSummary = withStyles({
},
},
expanded: {},
})(props => <MuiExpansionPanelSummary {...props} />);

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

const ExpansionPanelDetails = withStyles(theme => ({
root: {
Expand Down
8 changes: 2 additions & 6 deletions docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx
View file
Open in desktop
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';

Expand Down Expand Up @@ -39,9 +37,7 @@ const ExpansionPanelSummary = withStyles({
},
},
expanded: {},
})((props: ExpansionPanelSummaryProps) => <MuiExpansionPanelSummary {...props} />);

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

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