From 981e9f938e2eae14d7e1d754ecfee12b7bcf6b33 Mon Sep 17 00:00:00 2001
From: Aditya Dhade <aditya.dhade@rtcamp.com>
Date: Thu, 5 Feb 2026 14:24:40 +0530
Subject: [PATCH] Update Divider component

---
 .../components/divider/divider.stories.tsx    | 178 ++++++++++++++++++
 .../src/components/divider/divider.tsx        |  99 +++++-----
 .../src/components/divider/tests/divider.tsx  | 111 +++++++++++
 .../src/components/divider/types.ts           |  12 +-
 4 files changed, 347 insertions(+), 53 deletions(-)
 create mode 100644 packages/frappe-ui-react/src/components/divider/divider.stories.tsx
 create mode 100644 packages/frappe-ui-react/src/components/divider/tests/divider.tsx

diff --git a/packages/frappe-ui-react/src/components/divider/divider.stories.tsx b/packages/frappe-ui-react/src/components/divider/divider.stories.tsx
new file mode 100644
index 00000000..aaa026e5
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/divider/divider.stories.tsx
@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown } from "lucide-react";
+
+import Divider from "./divider";
+import { Button } from "../button";
+import { Badge } from "../badge";
+
+const meta: Meta<typeof Divider> = {
+  title: "Components/Divider",
+  component: Divider,
+  parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "Orientation of the divider",
+    },
+    slot: {
+      control: false,
+      description: "Element to render in the divider slot",
+    },
+    position: {
+      control: { type: "select" },
+      options: ["start", "center", "end"],
+      description: "Position of the slot element",
+    },
+    padding: {
+      control: "number",
+      description: "Padding around the divider in pixels",
+    },
+    flexItem: {
+      control: "boolean",
+      description: "If true, adapts to flex container",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the divider",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Horizontal: Story = {
+  render: (args) => (
+    <div className="w-80">
+      <p className="text-sm text-ink-gray-7">Content above</p>
+      <Divider {...args} />
+      <p className="text-sm text-ink-gray-7">Content below</p>
+    </div>
+  ),
+  args: {
+    orientation: "horizontal",
+    padding: 16,
+  },
+};
+
+export const Vertical: Story = {
+  render: (args) => (
+    <div className="flex items-center h-16">
+      <span className="text-sm text-ink-gray-7">Left</span>
+      <Divider {...args} />
+      <span className="text-sm text-ink-gray-7">Right</span>
+    </div>
+  ),
+  args: {
+    orientation: "vertical",
+    flexItem: true,
+    padding: 16,
+  },
+};
+
+export const WithSlot: Story = {
+  render: (args) => (
+    <div className="w-80">
+      <p className="text-sm text-ink-gray-7">Content above</p>
+      <Divider {...args} />
+      <p className="text-sm text-ink-gray-7">Content below</p>
+    </div>
+  ),
+  args: {
+    orientation: "horizontal",
+    position: "center",
+    padding: 6,
+    slot: () => <Button label="Load More" size="sm" variant="outline" />,
+  },
+};
+
+export const SlotPositionsHorizontal: Story = {
+  render: () => (
+    <div className="flex flex-col gap-14 w-80">
+      <Divider
+        orientation="horizontal"
+        position="start"
+        slot={() => <Button label="Start" size="sm" variant="outline" />}
+      />
+      <Divider
+        orientation="horizontal"
+        position="center"
+        slot={() => <Button label="Center" size="sm" variant="outline" />}
+      />
+      <Divider
+        orientation="horizontal"
+        position="end"
+        slot={() => <Button label="End" size="sm" variant="outline" />}
+      />
+    </div>
+  ),
+};
+
+export const SlotPositionsVertical: Story = {
+  render: () => (
+    <div className="flex items-center gap-20 h-48">
+      <Divider
+        orientation="vertical"
+        position="start"
+        flexItem
+        slot={() => <Button label="Start" size="sm" variant="outline" />}
+      />
+      <Divider
+        orientation="vertical"
+        position="center"
+        flexItem
+        slot={() => <Button label="Center" size="sm" variant="outline" />}
+      />
+      <Divider
+        orientation="vertical"
+        position="end"
+        flexItem
+        slot={() => <Button label="End" size="sm" variant="outline" />}
+      />
+    </div>
+  ),
+};
+
+export const Timeline: Story = {
+  render: () => (
+    <div className="w-125 flex flex-col gap-8 items-center">
+      <Divider
+        position="start"
+        slot={() => <Badge label="Jun" size="lg" variant="outline" />}
+      />
+      <Divider
+        position="start"
+        slot={() => (
+          <Badge label="Today 2 hours ago" size="lg" variant="outline" />
+        )}
+      />
+      <Divider
+        position="center"
+        slot={() => (
+          <Button
+            label="Today"
+            size="sm"
+            variant="outline"
+            iconRight={() => <ChevronDown className="w-4 h-4" />}
+          />
+        )}
+      />
+      <Divider
+        position="start"
+        slot={() => <Badge label="New messages" size="lg" theme="blue" />}
+      />
+      <div className="w-80 flex flex-col gap-8 items-center">
+        <Divider
+          position="start"
+          slot={() => <Button label="Continue" size="sm" variant="outline" />}
+        />
+        <Divider
+          position="center"
+          slot={() => <Button icon="message-circle" variant="ghost" />}
+        />
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/frappe-ui-react/src/components/divider/divider.tsx b/packages/frappe-ui-react/src/components/divider/divider.tsx
index c49b7b0e..55bc4ac4 100644
--- a/packages/frappe-ui-react/src/components/divider/divider.tsx
+++ b/packages/frappe-ui-react/src/components/divider/divider.tsx
@@ -1,65 +1,72 @@
-import { useMemo } from "react";
+/**
+ * External dependencies.
+ */
 import clsx from "clsx";
 
-import { Button } from "../button";
+/**
+ * Internal dependencies.
+ */
 import type { DividerProps } from "./types";
 
 const Divider = ({
   orientation = "horizontal",
+  slot,
   position = "center",
+  padding = 0,
   flexItem = false,
-  action,
+  className = "",
 }: DividerProps) => {
-  const alignmentClasses = useMemo(() => {
-    const spacerDimensionClasses = {
-      horizontal: "border-t w-full",
-      vertical: "border-l",
-    }[orientation];
+  const isHorizontal = orientation === "horizontal";
+  const flexClasses = flexItem ? "self-stretch h-auto" : "";
 
-    const flexClasses = flexItem ? "self-stretch h-auto" : "h-full";
+  if (!slot) {
+    return (
+      <hr
+        className={clsx(
+          "border-0 border-outline-gray-1",
+          isHorizontal ? "border-t w-full" : "border-l h-full",
+          flexClasses,
+          className
+        )}
+        style={
+          isHorizontal
+            ? { marginTop: padding, marginBottom: padding }
+            : { marginLeft: padding, marginRight: padding }
+        }
+      />
+    );
+  }
 
-    return [spacerDimensionClasses, flexClasses];
-  }, [orientation, flexItem]);
-
-  const actionAlignmentClasses = useMemo(() => {
-    return {
-      horizontal: {
-        center: "left-1/2 top-0 -translate-y-1/2 -translate-x-1/2",
-        start: "left-0 top-0 -translate-y-1/2 ml-4",
-        end: "right-0 top-0 -translate-y-1/2 mr-4",
-      },
-      vertical: {
-        center: "-translate-x-1/2 top-1/2 left-0 -translate-y-1/2",
-        start: "-translate-x-1/2 top-0 mt-4 left-0",
-        end: "-translate-x-1/2 bottom-0 mb-4 left-0",
-      },
-    }[orientation][position];
-  }, [orientation, position]);
-
-  return action ? (
+  return (
     <div
       className={clsx(
-        "relative whitespace-nowrap border-0 border-outline-gray-2",
-        alignmentClasses
+        "flex",
+        isHorizontal ? "w-full items-center" : "h-full flex-col items-center",
+        flexClasses,
+        className
       )}
+      style={
+        isHorizontal
+          ? { paddingTop: padding, paddingBottom: padding }
+          : { paddingLeft: padding, paddingRight: padding }
+      }
     >
-      <span className={clsx("absolute", actionAlignmentClasses)}>
-        <Button
-          label={action.label}
-          loading={action.loading}
-          size="sm"
-          variant="outline"
-          onClick={action.handler}
-        />
-      </span>
+      <hr
+        className={clsx(
+          "border-0 border-outline-gray-1",
+          isHorizontal ? "border-t" : "border-l",
+          position === "start" ? (isHorizontal ? "w-4" : "h-4") : "flex-1"
+        )}
+      />
+      <span>{slot?.()}</span>
+      <hr
+        className={clsx(
+          "border-0 border-outline-gray-1",
+          isHorizontal ? "border-t" : "border-l",
+          position === "end" ? (isHorizontal ? "w-4" : "h-4") : "flex-1"
+        )}
+      />
     </div>
-  ) : (
-    <hr
-      className={clsx(
-        "relative whitespace-nowrap border-0 border-outline-gray-2",
-        alignmentClasses
-      )}
-    />
   );
 };
 
diff --git a/packages/frappe-ui-react/src/components/divider/tests/divider.tsx b/packages/frappe-ui-react/src/components/divider/tests/divider.tsx
new file mode 100644
index 00000000..6b39ee59
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/divider/tests/divider.tsx
@@ -0,0 +1,111 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Divider from "../divider";
+
+describe("Divider Component", () => {
+  describe("Basic rendering", () => {
+    it("renders horizontal divider by default", () => {
+      const { container } = render(<Divider />);
+      const hr = container.querySelector("hr");
+
+      expect(hr).toBeInTheDocument();
+      expect(hr).toHaveClass("border-t", "w-full");
+      expect(hr).not.toHaveClass("border-l", "h-full");
+    });
+
+    it("renders vertical divider", () => {
+      const { container } = render(<Divider orientation="vertical" />);
+      const hr = container.querySelector("hr");
+
+      expect(hr).toHaveClass("border-l", "h-full");
+      expect(hr).not.toHaveClass("border-t", "w-full");
+    });
+  });
+
+  describe("Padding", () => {
+    it("applies vertical padding for horizontal divider", () => {
+      const { container } = render(<Divider padding={10} />);
+      const hr = container.querySelector("hr");
+
+      expect(hr).toHaveStyle({ marginTop: "10px", marginBottom: "10px" });
+    });
+
+    it("applies horizontal padding for vertical divider", () => {
+      const { container } = render(
+        <Divider orientation="vertical" padding={15} />
+      );
+      const hr = container.querySelector("hr");
+
+      expect(hr).toHaveStyle({ marginLeft: "15px", marginRight: "15px" });
+    });
+  });
+
+  describe("Divider with slot", () => {
+    it("renders slot content between dividers", () => {
+      const { container } = render(<Divider slot={() => <span>Label</span>} />);
+
+      expect(screen.getByText("Label")).toBeInTheDocument();
+
+      const hrs = container.querySelectorAll("hr");
+      expect(hrs).toHaveLength(2);
+    });
+
+    it("positions slot at start", () => {
+      const { container } = render(
+        <Divider slot={() => "Start"} position="start" />
+      );
+      const hrs = container.querySelectorAll("hr");
+
+      expect(hrs[0]).toHaveClass("w-4");
+      expect(hrs[1]).toHaveClass("flex-1");
+    });
+
+    it("positions slot at center by default", () => {
+      const { container } = render(<Divider slot={() => "Center"} />);
+      const hrs = container.querySelectorAll("hr");
+
+      expect(hrs[0]).toHaveClass("flex-1");
+      expect(hrs[1]).toHaveClass("flex-1");
+    });
+
+    it("positions slot at end", () => {
+      const { container } = render(
+        <Divider slot={() => "End"} position="end" />
+      );
+      const hrs = container.querySelectorAll("hr");
+
+      expect(hrs[0]).toHaveClass("flex-1");
+      expect(hrs[1]).toHaveClass("w-4");
+    });
+
+    it("applies padding to wrapper with slot", () => {
+      const { container } = render(
+        <Divider slot={() => "Text"} padding={20} />
+      );
+      const wrapper = container.querySelector("div");
+
+      expect(wrapper).toHaveStyle({
+        paddingTop: "20px",
+        paddingBottom: "20px",
+      });
+    });
+  });
+
+  describe("Flex item", () => {
+    it("applies flex item classes when enabled", () => {
+      const { container } = render(<Divider flexItem />);
+      const hr = container.querySelector("hr");
+
+      expect(hr).toHaveClass("self-stretch", "h-auto");
+    });
+  });
+
+  describe("Custom className", () => {
+    it("applies custom className", () => {
+      const { container } = render(<Divider className="custom-divider" />);
+      const hr = container.querySelector("hr");
+
+      expect(hr).toHaveClass("custom-divider");
+    });
+  });
+});
diff --git a/packages/frappe-ui-react/src/components/divider/types.ts b/packages/frappe-ui-react/src/components/divider/types.ts
index 9b5ced05..1842789b 100644
--- a/packages/frappe-ui-react/src/components/divider/types.ts
+++ b/packages/frappe-ui-react/src/components/divider/types.ts
@@ -1,13 +1,11 @@
-interface DividerAction {
-  label: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  handler: () => any;
-  loading?: boolean;
-}
+import type { ReactNode } from "react";
 
 export interface DividerProps {
   orientation?: "horizontal" | "vertical";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  slot?: (args?: any) => ReactNode;
   position?: "start" | "center" | "end";
+  padding?: number;
   flexItem?: boolean;
-  action?: DividerAction;
+  className?: string;
 }