Skip to content

Commit f5ff015

Browse files
siriwatknpsiriwatknp
authored
[List] fix demo to have correct semantic (#26742)
1 parent 7dda433 commit f5ff015

File tree

5 files changed

+106
-80
lines changed

5 files changed

+106
-80
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from 'react';
2+
import Box from '@material-ui/core/Box';
3+
import List from '@material-ui/core/List';
4+
import ListItem from '@material-ui/core/ListItem';
5+
import ListItemButton from '@material-ui/core/ListItemButton';
6+
import ListItemIcon from '@material-ui/core/ListItemIcon';
7+
import ListItemText from '@material-ui/core/ListItemText';
8+
import Divider from '@material-ui/core/Divider';
9+
import InboxIcon from '@material-ui/icons/Inbox';
10+
import DraftsIcon from '@material-ui/icons/Drafts';
11+
12+
export default function BasicList() {
13+
return (
14+
<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
15+
<nav aria-label="main mailbox folders">
16+
<List>
17+
<ListItem disablePadding>
18+
<ListItemButton>
19+
<ListItemIcon>
20+
<InboxIcon />
21+
</ListItemIcon>
22+
<ListItemText primary="Inbox" />
23+
</ListItemButton>
24+
</ListItem>
25+
<ListItem disablePadding>
26+
<ListItemButton>
27+
<ListItemIcon>
28+
<DraftsIcon />
29+
</ListItemIcon>
30+
<ListItemText primary="Drafts" />
31+
</ListItemButton>
32+
</ListItem>
33+
</List>
34+
</nav>
35+
<Divider />
36+
<nav aria-label="secondary mailbox folders">
37+
<List>
38+
<ListItem disablePadding>
39+
<ListItemButton>
40+
<ListItemText primary="Trash" />
41+
</ListItemButton>
42+
</ListItem>
43+
<ListItem disablePadding>
44+
<ListItemButton component="a" href="#simple-list">
45+
<ListItemText primary="Spam" />
46+
</ListItemButton>
47+
</ListItem>
48+
</List>
49+
</nav>
50+
</Box>
51+
);
52+
}

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from 'react';
2+
import Box from '@material-ui/core/Box';
3+
import List from '@material-ui/core/List';
4+
import ListItem from '@material-ui/core/ListItem';
5+
import ListItemButton from '@material-ui/core/ListItemButton';
6+
import ListItemIcon from '@material-ui/core/ListItemIcon';
7+
import ListItemText from '@material-ui/core/ListItemText';
8+
import Divider from '@material-ui/core/Divider';
9+
import InboxIcon from '@material-ui/icons/Inbox';
10+
import DraftsIcon from '@material-ui/icons/Drafts';
11+
12+
export default function BasicList() {
13+
return (
14+
<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
15+
<nav aria-label="main mailbox folders">
16+
<List>
17+
<ListItem disablePadding>
18+
<ListItemButton>
19+
<ListItemIcon>
20+
<InboxIcon />
21+
</ListItemIcon>
22+
<ListItemText primary="Inbox" />
23+
</ListItemButton>
24+
</ListItem>
25+
<ListItem disablePadding>
26+
<ListItemButton>
27+
<ListItemIcon>
28+
<DraftsIcon />
29+
</ListItemIcon>
30+
<ListItemText primary="Drafts" />
31+
</ListItemButton>
32+
</ListItem>
33+
</List>
34+
</nav>
35+
<Divider />
36+
<nav aria-label="secondary mailbox folders">
37+
<List>
38+
<ListItem disablePadding>
39+
<ListItemButton>
40+
<ListItemText primary="Trash" />
41+
</ListItemButton>
42+
</ListItem>
43+
<ListItem disablePadding>
44+
<ListItemButton component="a" href="#simple-list">
45+
<ListItemText primary="Spam" />
46+
</ListItemButton>
47+
</ListItem>
48+
</List>
49+
</nav>
50+
</Box>
51+
);
52+
}

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

Lines changed: 0 additions & 39 deletions
This file was deleted.

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

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎docs/src/pages/components/lists/lists.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ Lists are a continuous group of text or images. They are composed of items conta
1313

1414
{{"component": "modules/components/ComponentLinkHeader.js"}}
1515

16-
## Simple List
16+
## Basic List
1717

18-
{{"demo": "pages/components/lists/SimpleList.js", "bg": true}}
18+
{{"demo": "pages/components/lists/BasicList.js", "bg": true}}
1919

2020
The last item of the previous demo shows how you can render a link:
2121

0 commit comments

Comments
 (0)