feat(list component): develop new horizontal state of list component (#1178)

* feat(list component): develop new horizontal state of list component

* refactor(list.ts): change the order of classes in twmerge

Author: paghar

content/docs/typography/list.mdx

@@ -35,6 +35,12 @@ Use the `ordered` prop tag to create an ordered list of items with numbers.
 
 <Example name="list.ordered" />
 
+## Horizontal list
+
+Use this example to create a horizontally aligned list of items.
+
+<Example name="list.horizontal" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

examples/list/index.ts

@@ -2,3 +2,4 @@ export { nested } from './list.nested';
 export { ordered } from './list.ordered';
 export { root } from './list.root';
 export { unstyled } from './list.unstyled';
+export { horizontal } from './list.horizontal';

examples/list/list.horizontal.tsx

@@ -0,0 +1,72 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+
+function Component() {
+  return (
+    <List horizontal>
+      <List.Item>About</List.Item>
+      <List.Item>Premium</List.Item>
+      <List.Item>Campaigns</List.Item>
+      <List.Item>Blog</List.Item>
+      <List.Item>Affiliate Program</List.Item>
+      <List.Item>FAQs</List.Item>
+      <List.Item>Contact</List.Item>
+    </List>
+  );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+
+function Component() {
+  return (
+    <List horizontal>
+      <ListItem>About</ListItem>
+      <ListItem>Premium</ListItem>
+      <ListItem>Campaigns</ListItem>
+      <ListItem>Blog</ListItem>
+      <ListItem>Affiliate Program</ListItem>
+      <ListItem>FAQs</ListItem>
+      <ListItem>Contact</ListItem>
+    </List>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <List horizontal>
+      <ListItem>About</ListItem>
+      <ListItem>Premium</ListItem>
+      <ListItem>Campaigns</ListItem>
+      <ListItem>Blog</ListItem>
+      <ListItem>Affiliate Program</ListItem>
+      <ListItem>FAQs</ListItem>
+      <ListItem>Contact</ListItem>
+    </List>
+  );
+}
+
+export const horizontal: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'list/list.horizontal.tsx',
+  component: <Component />,
+};

src/components/List/List.tsx

@@ -16,6 +16,7 @@ export interface FlowbiteListRootTheme {
     on: string;
     off: string;
   };
+  horizontal: string;
   unstyled: string;
   nested: string;
 }
@@ -30,6 +31,7 @@ export interface ListProps extends PropsWithChildren<ComponentProps<'ul'> & Comp
   ordered?: boolean;
   unstyled?: boolean;
   nested?: boolean;
+  horizontal?: boolean;
 }
 
 const ListComponent: FC<ListProps> = ({
@@ -38,6 +40,7 @@ const ListComponent: FC<ListProps> = ({
   unstyled,
   nested,
   ordered,
+  horizontal,
   theme: customTheme = {},
   ...props
 }) => {
@@ -47,10 +50,11 @@ const ListComponent: FC<ListProps> = ({
   return (
     <Component
       className={twMerge(
+        theme.root.base,
         theme.root.ordered[ordered ? 'on' : 'off'],
         unstyled && theme.root.unstyled,
         nested && theme.root.nested,
-        theme.root.base,
+        horizontal && theme.root.horizontal,
         className,
       )}
       {...props}

src/components/List/theme.ts

@@ -7,6 +7,7 @@ export const listTheme: FlowbiteListTheme = {
       off: 'list-disc',
       on: 'list-decimal',
     },
+    horizontal: 'flex flex-wrap items-center space-x-4 space-y-0 justify-center list-none',
     unstyled: 'list-none',
     nested: 'ps-5 mt-2',
   },