Skip to content

Commit a77cf84

Browse files
pagharpaghar
authored
Feat/list component (#1122)
* feat(list): new list component added component files + props, tests, stories, examples fix #1017 * style(examples/list/list.*): remove ununcessary fragment in JSX * style(list component): run prettier to format changed files
1 parent f8853af commit a77cf84

File tree

19 files changed

+532
-7
lines changed

19 files changed

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

‎examples/list/list.ordered.tsx

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

‎examples/list/list.root.tsx

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

‎examples/list/list.unstyled.tsx

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

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

Lines changed: 27 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)