Skip to content

Commit 89b5b4f

Browse files
siriwatknpoliviertassinari
siriwatknp
and
oliviertassinari
authored
[List] extract button from ListItem to ListItemButton (#26446)
Co-authored-by: Olivier Tassinari <[email protected]>
1 parent e0ea548 commit 89b5b4f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1694
-215
lines changed

‎docs/pages/api-docs/list-item-button.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import ApiPage from 'docs/src/modules/components/ApiPage';
3+
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
4+
import jsonPageContent from './list-item-button.json';
5+
6+
export default function Page(props) {
7+
const { descriptions, pageContent } = props;
8+
return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
9+
}
10+
11+
Page.getInitialProps = () => {
12+
const req = require.context(
13+
'docs/translations/api-docs/list-item-button',
14+
false,
15+
/list-item-button.*.json$/,
16+
);
17+
const descriptions = mapApiPageTranslations(req);
18+
19+
return {
20+
descriptions,
21+
pageContent: jsonPageContent,
22+
};
23+
};

‎docs/pages/api-docs/list-item-button.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"props": {
3+
"alignItems": {
4+
"type": { "name": "enum", "description": "'center'<br>&#124;&nbsp;'flex-start'" },
5+
"default": "'center'"
6+
},
7+
"autoFocus": { "type": { "name": "bool" } },
8+
"children": { "type": { "name": "node" } },
9+
"classes": { "type": { "name": "object" } },
10+
"component": { "type": { "name": "elementType" } },
11+
"dense": { "type": { "name": "bool" } },
12+
"disabled": { "type": { "name": "bool" } },
13+
"disableGutters": { "type": { "name": "bool" } },
14+
"divider": { "type": { "name": "bool" } },
15+
"focusVisibleClassName": { "type": { "name": "string" } },
16+
"selected": { "type": { "name": "bool" } },
17+
"sx": { "type": { "name": "object" } }
18+
},
19+
"name": "ListItemButton",
20+
"styles": {
21+
"classes": [
22+
"root",
23+
"focusVisible",
24+
"dense",
25+
"alignItemsFlexStart",
26+
"disabled",
27+
"divider",
28+
"gutters",
29+
"selected"
30+
],
31+
"globalClasses": {
32+
"focusVisible": "Mui-focusVisible",
33+
"disabled": "Mui-disabled",
34+
"selected": "Mui-selected"
35+
},
36+
"name": "MuiListItemButton"
37+
},
38+
"spread": true,
39+
"forwardsRefTo": "HTMLDivElement",
40+
"filename": "/packages/material-ui/src/ListItemButton/ListItemButton.js",
41+
"inheritance": null,
42+
"demos": "<ul><li><a href=\"/components/lists/\">Lists</a></li></ul>",
43+
"styledComponent": true,
44+
"cssComponent": false
45+
}

‎docs/pages/api-docs/list-item.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
"dense": { "type": { "name": "bool" } },
2323
"disabled": { "type": { "name": "bool" } },
2424
"disableGutters": { "type": { "name": "bool" } },
25+
"disablePadding": { "type": { "name": "bool" } },
2526
"divider": { "type": { "name": "bool" } },
27+
"secondaryAction": { "type": { "name": "node" } },
2628
"selected": { "type": { "name": "bool" } },
2729
"sx": { "type": { "name": "object" } }
2830
},
@@ -37,6 +39,7 @@
3739
"disabled",
3840
"divider",
3941
"gutters",
42+
"padding",
4043
"button",
4144
"secondaryAction",
4245
"selected"

‎docs/src/pages/components/lists/CheckboxList.js

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import List from '@material-ui/core/List';
33
import ListItem from '@material-ui/core/ListItem';
4+
import ListItemButton from '@material-ui/core/ListItemButton';
45
import ListItemIcon from '@material-ui/core/ListItemIcon';
5-
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
66
import ListItemText from '@material-ui/core/ListItemText';
77
import Checkbox from '@material-ui/core/Checkbox';
88
import IconButton from '@material-ui/core/IconButton';
@@ -32,26 +32,25 @@ export default function CheckboxList() {
3232
return (
3333
<ListItem
3434
key={value}
35-
role={undefined}
36-
dense
37-
button
38-
onClick={handleToggle(value)}
39-
>
40-
<ListItemIcon>
41-
<Checkbox
42-
edge="start"
43-
checked={checked.indexOf(value) !== -1}
44-
tabIndex={-1}
45-
disableRipple
46-
inputProps={{ 'aria-labelledby': labelId }}
47-
/>
48-
</ListItemIcon>
49-
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
50-
<ListItemSecondaryAction>
35+
secondaryAction={
5136
<IconButton edge="end" aria-label="comments">
5237
<CommentIcon />
5338
</IconButton>
54-
</ListItemSecondaryAction>
39+
}
40+
disablePadding
41+
>
42+
<ListItemButton role={undefined} onClick={handleToggle(value)} dense>
43+
<ListItemIcon>
44+
<Checkbox
45+
edge="start"
46+
checked={checked.indexOf(value) !== -1}
47+
tabIndex={-1}
48+
disableRipple
49+
inputProps={{ 'aria-labelledby': labelId }}
50+
/>
51+
</ListItemIcon>
52+
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
53+
</ListItemButton>
5554
</ListItem>
5655
);
5756
})}

‎docs/src/pages/components/lists/CheckboxList.tsx

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import List from '@material-ui/core/List';
33
import ListItem from '@material-ui/core/ListItem';
4+
import ListItemButton from '@material-ui/core/ListItemButton';
45
import ListItemIcon from '@material-ui/core/ListItemIcon';
5-
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
66
import ListItemText from '@material-ui/core/ListItemText';
77
import Checkbox from '@material-ui/core/Checkbox';
88
import IconButton from '@material-ui/core/IconButton';
@@ -32,26 +32,25 @@ export default function CheckboxList() {
3232
return (
3333
<ListItem
3434
key={value}
35-
role={undefined}
36-
dense
37-
button
38-
onClick={handleToggle(value)}
39-
>
40-
<ListItemIcon>
41-
<Checkbox
42-
edge="start"
43-
checked={checked.indexOf(value) !== -1}
44-
tabIndex={-1}
45-
disableRipple
46-
inputProps={{ 'aria-labelledby': labelId }}
47-
/>
48-
</ListItemIcon>
49-
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
50-
<ListItemSecondaryAction>
35+
secondaryAction={
5136
<IconButton edge="end" aria-label="comments">
5237
<CommentIcon />
5338
</IconButton>
54-
</ListItemSecondaryAction>
39+
}
40+
disablePadding
41+
>
42+
<ListItemButton role={undefined} onClick={handleToggle(value)} dense>
43+
<ListItemIcon>
44+
<Checkbox
45+
edge="start"
46+
checked={checked.indexOf(value) !== -1}
47+
tabIndex={-1}
48+
disableRipple
49+
inputProps={{ 'aria-labelledby': labelId }}
50+
/>
51+
</ListItemIcon>
52+
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
53+
</ListItemButton>
5554
</ListItem>
5655
);
5756
})}

‎docs/src/pages/components/lists/CheckboxListSecondary.js

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import List from '@material-ui/core/List';
33
import ListItem from '@material-ui/core/ListItem';
4-
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
4+
import ListItemButton from '@material-ui/core/ListItemButton';
55
import ListItemText from '@material-ui/core/ListItemText';
66
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
77
import Checkbox from '@material-ui/core/Checkbox';
@@ -28,22 +28,27 @@ export default function CheckboxListSecondary() {
2828
{[0, 1, 2, 3].map((value) => {
2929
const labelId = `checkbox-list-secondary-label-${value}`;
3030
return (
31-
<ListItem key={value} button>
32-
<ListItemAvatar>
33-
<Avatar
34-
alt={`Avatar n°${value + 1}`}
35-
src={`/static/images/avatar/${value + 1}.jpg`}
36-
/>
37-
</ListItemAvatar>
38-
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
39-
<ListItemSecondaryAction>
31+
<ListItem
32+
key={value}
33+
secondaryAction={
4034
<Checkbox
4135
edge="end"
4236
onChange={handleToggle(value)}
4337
checked={checked.indexOf(value) !== -1}
4438
inputProps={{ 'aria-labelledby': labelId }}
4539
/>
46-
</ListItemSecondaryAction>
40+
}
41+
disablePadding
42+
>
43+
<ListItemButton>
44+
<ListItemAvatar>
45+
<Avatar
46+
alt={`Avatar n°${value + 1}`}
47+
src={`/static/images/avatar/${value + 1}.jpg`}
48+
/>
49+
</ListItemAvatar>
50+
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
51+
</ListItemButton>
4752
</ListItem>
4853
);
4954
})}

‎docs/src/pages/components/lists/CheckboxListSecondary.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import List from '@material-ui/core/List';
33
import ListItem from '@material-ui/core/ListItem';
4-
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
4+
import ListItemButton from '@material-ui/core/ListItemButton';
55
import ListItemText from '@material-ui/core/ListItemText';
66
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
77
import Checkbox from '@material-ui/core/Checkbox';
@@ -28,22 +28,27 @@ export default function CheckboxListSecondary() {
2828
{[0, 1, 2, 3].map((value) => {
2929
const labelId = `checkbox-list-secondary-label-${value}`;
3030
return (
31-
<ListItem key={value} button>
32-
<ListItemAvatar>
33-
<Avatar
34-
alt={`Avatar n°${value + 1}`}
35-
src={`/static/images/avatar/${value + 1}.jpg`}
36-
/>
37-
</ListItemAvatar>
38-
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
39-
<ListItemSecondaryAction>
31+
<ListItem
32+
key={value}
33+
secondaryAction={
4034
<Checkbox
4135
edge="end"
4236
onChange={handleToggle(value)}
4337
checked={checked.indexOf(value) !== -1}
4438
inputProps={{ 'aria-labelledby': labelId }}
4539
/>
46-
</ListItemSecondaryAction>
40+
}
41+
disablePadding
42+
>
43+
<ListItemButton>
44+
<ListItemAvatar>
45+
<Avatar
46+
alt={`Avatar n°${value + 1}`}
47+
src={`/static/images/avatar/${value + 1}.jpg`}
48+
/>
49+
</ListItemAvatar>
50+
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
51+
</ListItemButton>
4752
</ListItem>
4853
);
4954
})}

0 commit comments

Comments
 (0)