fix(ui): timeline - content - separate base styles from horizontal/vertical (#1430)

* fix(ui): timeline
- separate `TimelineContent` base styles from horizontal/vertical styles

* add changeset

Author: SutuSebastian

.changeset/quiet-camels-bake.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+fix(ui): timeline - content - separate `TimelineContent` base styles from horizontal/vertical styles

packages/ui/src/components/Timeline/Timeline.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import type { FC } from "react";
 import { describe, expect, it } from "vitest";
+import { Flowbite, type CustomFlowbiteTheme } from "../Flowbite";
 import type { TimelineProps } from "./Timeline";
 import { Timeline } from "./Timeline";
 
@@ -19,6 +20,26 @@ describe("Components / Timeline", () => {
       expect(timelinePoint()).toBeInTheDocument();
       expect(timelinePoint().childNodes[0]).toContainHTML("svg");
     });
+
+    it("should use `horizontal` classes of content if provided", () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon horizontal={true} />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(horizontalContentClass);
+    });
+
+    it("should not use `vertical` classes of content if provided", () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon horizontal={true} />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).not.toHaveClass(verticalContentClass);
+    });
   });
   describe("Rendering vertical mode", () => {
     it("should have margin-top when do not icon", () => {
@@ -34,6 +55,47 @@ describe("Components / Timeline", () => {
       expect(timelinePoint()).toBeInTheDocument();
       expect(timelinePoint().childNodes[0]).toContainHTML("svg");
     });
+
+    it("should use `vertical` classes of content if provided", () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(verticalContentClass);
+    });
+
+    it("should not use `horizontal` classes of content if provided", () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).not.toHaveClass(horizontalContentClass);
+    });
+  });
+  describe("Theme", () => {
+    it("should use `base` classes of content in horizontal mode", () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon horizontal={true} />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(baseContentClass);
+    });
+
+    it("should use `base` classes of content in vertical mode", () => {
+      render(
+        <Flowbite theme={{ theme }}>
+          <TestTimelineNoIcon />
+        </Flowbite>,
+      );
+
+      expect(timelineContent()).toHaveClass(baseContentClass);
+    });
   });
 });
 
@@ -92,3 +154,22 @@ const IconSVG = () => (
 );
 
 const timelinePoint = () => screen.getByTestId("timeline-point");
+const timelineContent = () => screen.getByTestId("timeline-content");
+
+const baseContentClass = "dummy-base-content";
+const verticalContentClass = "dummy-vertical-content";
+const horizontalContentClass = "dummy-horizontal-content";
+
+const theme: CustomFlowbiteTheme = {
+  timeline: {
+    item: {
+      content: {
+        root: {
+          base: baseContentClass,
+          vertical: verticalContentClass,
+          horizontal: horizontalContentClass,
+        },
+      },
+    },
+  },
+};

packages/ui/src/components/Timeline/TimelineContent.tsx

@@ -14,6 +14,8 @@ import type { FlowbiteTimelineTitleTheme } from "./TimelineTitle";
 export interface FlowbiteTimelineContentTheme {
   root: {
     base: string;
+    horizontal: string;
+    vertical: string;
   };
   time: FlowbiteTimelineTitleTheme;
   title: FlowbiteTimelineTimeTheme;
@@ -37,7 +39,11 @@ export const TimelineContent: FC<TimelineContentProps> = ({
 
   return (
     <TimelineContentContext.Provider value={{ theme }}>
-      <div data-testid="timeline-content" className={twMerge(horizontal && theme.root.base, className)} {...props}>
+      <div
+        data-testid="timeline-content"
+        className={twMerge(theme.root.base, horizontal ? theme.root.horizontal : theme.root.vertical, className)}
+        {...props}
+      >
         {children}
       </div>
     </TimelineContentContext.Provider>

packages/ui/src/components/Timeline/theme.ts

@@ -15,7 +15,9 @@ export const timelineTheme: FlowbiteTimelineTheme = createTheme({
     },
     content: {
       root: {
-        base: "mt-3 sm:pr-8",
+        base: "",
+        horizontal: "mt-3 sm:pr-8",
+        vertical: "",
       },
       body: {
         base: "mb-4 text-base font-normal text-gray-500 dark:text-gray-400",