Skip to content

Commit 492fed0

Browse files
pagharpaghar
committed
feat(list): new list component
added component files + props, tests, stories, examples fix #1017
1 parent c1567bd commit 492fed0

File tree

19 files changed

+556
-7
lines changed

19 files changed

+556
-7
lines changed

‎content/docs/typography/list.mdx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: React Lists - Flowbite
3+
description: Use the list component to show an unordred or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite
4+
---
5+
6+
Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.
7+
8+
Start using the list component by first importing it from Flowbite React:
9+
10+
```jsx
11+
import { List } from 'flowbite-react';
12+
```
13+
14+
## Default list
15+
16+
Use this example to create a default unordered list of items using the `List` component with `List.Item` child components inside of it.
17+
18+
<Example name="list.root" />
19+
20+
## Nested
21+
22+
Use this example to nested another list of items inside the parent list element.
23+
24+
<Example name="list.nested" />
25+
26+
## Unstyled
27+
28+
Use the `unstyled` prop to disable the list style bullets or numbers.
29+
30+
<Example name="list.unstyled" />
31+
32+
## Ordered list
33+
34+
Use the `ordered` prop tag to create an ordered list of items with numbers.
35+
36+
<Example name="list.ordered" />
37+
38+
## Theme
39+
40+
To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
41+
42+
<Theme name="list" />
43+
44+
## References
45+
46+
- [Flowbite List](https://flowbite.com/docs/typography/list/)

‎data/components.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -343,13 +343,13 @@ export const COMPONENTS_DATA: Component[] = [
343343
// link: `/docs/typography/images`,
344344
// classes: 'w-64'
345345
// },
346-
// {
347-
// name: 'List',
348-
// image: '/images/components/list.svg',
349-
// imageDark: '/images/components/list-dark.svg',
350-
// link: `/docs/typography/lists`,
351-
// classes: 'w-64'
352-
// },
346+
{
347+
name: 'List',
348+
image: '/images/components/list.svg',
349+
imageDark: '/images/components/list-dark.svg',
350+
link: `/docs/typography/list`,
351+
classes: 'w-64'
352+
},
353353
// {
354354
// name: 'Link',
355355
// image: '/images/components/link.svg',

‎examples/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export * as footer from './footer';
1616
export * as forms from './forms';
1717
export * as kbd from './kbd';
1818
export * as listGroup from './listGroup';
19+
export * as list from './list';
1920
export * as modal from './modal';
2021
export * as navbar from './navbar';
2122
export * as pagination from './pagination';

‎examples/list/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { root } from './list.root';
2+
export { unstyled } from './list.unstyled';
3+
export { nested } from './list.nested';
4+
export { ordered } from './list.ordered';

‎examples/list/list.nested.tsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { type CodeData } from '~/components/code-demo';
2+
import { List, ListItem } from '~/src';
3+
4+
const code = `
5+
'use client';
6+
7+
import { List } from 'flowbite-react';
8+
9+
function Component() {
10+
return (
11+
<>
12+
<List>
13+
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
14+
<List.Item>At least one lowercase character</List.Item>
15+
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
16+
</List>
17+
</>
18+
);
19+
}
20+
`;
21+
22+
const codeRSC = `
23+
import { List, ListItem } from 'flowbite-react';
24+
25+
function Component() {
26+
return (
27+
<>
28+
<List>
29+
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
30+
<ListItem>At least one lowercase character</ListItem>
31+
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
32+
</List>
33+
</>
34+
);
35+
}
36+
`;
37+
38+
function Component() {
39+
return (
40+
<>
41+
<List>
42+
<ListItem>
43+
List item one
44+
<List ordered nested>
45+
<ListItem>You might feel like you are being really "organized" o</ListItem>
46+
<ListItem>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</ListItem>
47+
<ListItem>Nesting tons of folders in your source code is also not helpful.</ListItem>
48+
</List>
49+
</ListItem>
50+
<ListItem>
51+
List item two
52+
<List ordered nested>
53+
<ListItem>I'm not sure if we'll bother styling more than two levels deep.</ListItem>
54+
<ListItem>Two is already too much, three is guaranteed to be a bad idea.</ListItem>
55+
<ListItem>If you nest four levels deep you belong in prison.</ListItem>
56+
</List>
57+
</ListItem>
58+
<ListItem>
59+
List item three
60+
<List ordered nested>
61+
<ListItem>Again please don't nest lists if you want</ListItem>
62+
<ListItem>Nobody wants to look at this.</ListItem>
63+
<ListItem>I'm upset that we even have to bother styling this.</ListItem>
64+
</List>
65+
</ListItem>
66+
</List>
67+
</>
68+
);
69+
}
70+
71+
export const nested: CodeData = {
72+
type: 'single',
73+
code: [
74+
{
75+
fileName: 'client',
76+
language: 'tsx',
77+
code,
78+
},
79+
{
80+
fileName: 'server',
81+
language: 'tsx',
82+
code: codeRSC,
83+
},
84+
],
85+
githubSlug: 'list/list.nested.tsx',
86+
component: <Component />,
87+
};

‎examples/list/list.ordered.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { type CodeData } from '~/components/code-demo';
2+
import { List, ListItem } from '~/src';
3+
4+
const code = `
5+
'use client';
6+
7+
import { List } from 'flowbite-react';
8+
9+
function Component() {
10+
return (
11+
<>
12+
<List ordered>
13+
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
14+
<List.Item>At least one lowercase character</List.Item>
15+
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
16+
</List>
17+
</>
18+
);
19+
}
20+
`;
21+
22+
const codeRSC = `
23+
import { List, ListItem } from 'flowbite-react';
24+
25+
function Component() {
26+
return (
27+
<>
28+
<List ordered>
29+
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
30+
<ListItem>At least one lowercase character</ListItem>
31+
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
32+
</List>
33+
</>
34+
);
35+
}
36+
`;
37+
38+
function Component() {
39+
return (
40+
<>
41+
<List ordered>
42+
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
43+
<ListItem>At least one lowercase character</ListItem>
44+
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
45+
</List>
46+
</>
47+
);
48+
}
49+
50+
export const ordered: CodeData = {
51+
type: 'single',
52+
code: [
53+
{
54+
fileName: 'client',
55+
language: 'tsx',
56+
code,
57+
},
58+
{
59+
fileName: 'server',
60+
language: 'tsx',
61+
code: codeRSC,
62+
},
63+
],
64+
githubSlug: 'list/list.ordered.tsx',
65+
component: <Component />,
66+
};

‎examples/list/list.root.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { type CodeData } from '~/components/code-demo';
2+
import { List, ListItem } from '~/src';
3+
4+
const code = `
5+
'use client';
6+
7+
import { List } from 'flowbite-react';
8+
9+
function Component() {
10+
return (
11+
<>
12+
<List>
13+
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
14+
<List.Item>At least one lowercase character</List.Item>
15+
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
16+
</List>
17+
</>
18+
);
19+
}
20+
`;
21+
22+
const codeRSC = `
23+
import { List, ListItem } from 'flowbite-react';
24+
25+
function Component() {
26+
return (
27+
<>
28+
<List>
29+
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
30+
<ListItem>At least one lowercase character</ListItem>
31+
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
32+
</List>
33+
</>
34+
);
35+
}
36+
`;
37+
38+
function Component() {
39+
return (
40+
<>
41+
<List>
42+
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
43+
<ListItem>At least one lowercase character</ListItem>
44+
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
45+
</List>
46+
</>
47+
);
48+
}
49+
50+
export const root: CodeData = {
51+
type: 'single',
52+
code: [
53+
{
54+
fileName: 'client',
55+
language: 'tsx',
56+
code,
57+
},
58+
{
59+
fileName: 'server',
60+
language: 'tsx',
61+
code: codeRSC,
62+
},
63+
],
64+
githubSlug: 'list/list.root.tsx',
65+
component: <Component />,
66+
};

‎examples/list/list.unstyled.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { type CodeData } from '~/components/code-demo';
2+
import { List, ListItem } from '~/src';
3+
4+
const code = `
5+
'use client';
6+
7+
import { List } from 'flowbite-react';
8+
9+
function Component() {
10+
return (
11+
<>
12+
<List unstyled>
13+
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
14+
<List.Item>At least one lowercase character</List.Item>
15+
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
16+
</List>
17+
</>
18+
);
19+
}
20+
`;
21+
22+
const codeRSC = `
23+
import { List, ListItem } from 'flowbite-react';
24+
25+
function Component() {
26+
return (
27+
<>
28+
<List unstyled>
29+
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
30+
<ListItem>At least one lowercase character</ListItem>
31+
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
32+
</List>
33+
</>
34+
);
35+
}
36+
`;
37+
38+
function Component() {
39+
return (
40+
<>
41+
<List unstyled>
42+
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
43+
<ListItem>At least one lowercase character</ListItem>
44+
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
45+
</List>
46+
</>
47+
);
48+
}
49+
50+
export const unstyled: CodeData = {
51+
type: 'single',
52+
code: [
53+
{
54+
fileName: 'client',
55+
language: 'tsx',
56+
code,
57+
},
58+
{
59+
fileName: 'server',
60+
language: 'tsx',
61+
code: codeRSC,
62+
},
63+
],
64+
githubSlug: 'list/list.unstyled.tsx',
65+
component: <Component />,
66+
};

‎public/images/components/list-dark.svg

Lines changed: 27 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)