Skip to content

Commit

Permalink
style(examples/list/list.*): remove ununcessary fragment in JSX
Browse files Browse the repository at this point in the history
  • Loading branch information
@paghar
paghar committed Nov 12, 2023
1 parent 492fed0 commit b4d7bf4
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 105 deletions.
78 changes: 36 additions & 42 deletions examples/list/list.nested.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ import { List } from 'flowbite-react';
function Component() {
return (
<>
<List>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
</>
<List>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
);
}
`;
Expand All @@ -24,47 +22,43 @@ import { List, ListItem } from 'flowbite-react';
function Component() {
return (
<>
<List>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
</>
<List>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
);
}
`;

function Component() {
return (
<>
<List>
<ListItem>
List item one
<List ordered nested>
<ListItem>You might feel like you are being really "organized" o</ListItem>
<ListItem>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</ListItem>
<ListItem>Nesting tons of folders in your source code is also not helpful.</ListItem>
</List>
</ListItem>
<ListItem>
List item two
<List ordered nested>
<ListItem>I'm not sure if we'll bother styling more than two levels deep.</ListItem>
<ListItem>Two is already too much, three is guaranteed to be a bad idea.</ListItem>
<ListItem>If you nest four levels deep you belong in prison.</ListItem>
</List>
</ListItem>
<ListItem>
List item three
<List ordered nested>
<ListItem>Again please don't nest lists if you want</ListItem>
<ListItem>Nobody wants to look at this.</ListItem>
<ListItem>I'm upset that we even have to bother styling this.</ListItem>
</List>
</ListItem>
</List>
</>
<List>
<ListItem>
List item one
<List ordered nested>
<ListItem>You might feel like you are being really "organized" o</ListItem>
<ListItem>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</ListItem>
<ListItem>Nesting tons of folders in your source code is also not helpful.</ListItem>
</List>
</ListItem>
<ListItem>
List item two
<List ordered nested>
<ListItem>I'm not sure if we'll bother styling more than two levels deep.</ListItem>
<ListItem>Two is already too much, three is guaranteed to be a bad idea.</ListItem>
<ListItem>If you nest four levels deep you belong in prison.</ListItem>
</List>
</ListItem>
<ListItem>
List item three
<List ordered nested>
<ListItem>Again please don't nest lists if you want</ListItem>
<ListItem>Nobody wants to look at this.</ListItem>
<ListItem>I'm upset that we even have to bother styling this.</ListItem>
</List>
</ListItem>
</List>
);
}

Expand Down
36 changes: 15 additions & 21 deletions examples/list/list.ordered.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ import { List } from 'flowbite-react';
function Component() {
return (
<>
<List ordered>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
</>
<List ordered>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
);
}
`;
Expand All @@ -24,26 +22,22 @@ import { List, ListItem } from 'flowbite-react';
function Component() {
return (
<>
<List ordered>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
</>
<List ordered>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
);
}
`;

function Component() {
return (
<>
<List ordered>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
</>
<List ordered>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
);
}

Expand Down
36 changes: 15 additions & 21 deletions examples/list/list.root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ import { List } from 'flowbite-react';
function Component() {
return (
<>
<List>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
</>
<List>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
);
}
`;
Expand All @@ -24,26 +22,22 @@ import { List, ListItem } from 'flowbite-react';
function Component() {
return (
<>
<List>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
</>
<List>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
);
}
`;

function Component() {
return (
<>
<List>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
</>
<List>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
);
}

Expand Down
36 changes: 15 additions & 21 deletions examples/list/list.unstyled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ import { List } from 'flowbite-react';
function Component() {
return (
<>
<List unstyled>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
</>
<List unstyled>
<List.Item>At least 10 characters (and up to 100 characters)</List.Item>
<List.Item>At least one lowercase character</List.Item>
<List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
</List>
);
}
`;
Expand All @@ -24,26 +22,22 @@ import { List, ListItem } from 'flowbite-react';
function Component() {
return (
<>
<List unstyled>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
</>
<List unstyled>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
);
}
`;

function Component() {
return (
<>
<List unstyled>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
</>
<List unstyled>
<ListItem>At least 10 characters (and up to 100 characters)</ListItem>
<ListItem>At least one lowercase character</ListItem>
<ListItem>Inclusion of at least one special character, e.g., ! @ # ?</ListItem>
</List>
);
}

Expand Down

0 comments on commit b4d7bf4

Please sign in to comment.