feat(timeline): allow custom point markers

.changeset/gentle-timelines-share.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+Allow `TimelinePoint` to render custom point markers.

apps/web/content/docs/components/timeline.mdx

@@ -25,6 +25,12 @@ Use this example to show the timeline component and the child components in a ve
 
 <Example name="timeline.vertical" />
 
+## Activity log
+
+Use a custom point marker such as an avatar to display activity feeds and user events.
+
+<Example name="timeline.activityLog" />
+
 ## Horizontal timeline
 
 Use the `horizontal` prop to show the timeline component and the child components in a horizontal alignment.

apps/web/examples/timeline/index.ts

@@ -1,3 +1,4 @@
+export { activityLog } from "./timeline.activityLog";
 export { horizontal } from "./timeline.horizontal";
 export { root } from "./timeline.root";
 export { vertical } from "./timeline.vertical";

apps/web/examples/timeline/timeline.activityLog.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  Avatar,
+  Timeline,
+  TimelineBody,
+  TimelineContent,
+  TimelineItem,
+  TimelinePoint,
+  TimelineTime,
+  TimelineTitle,
+} from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import {
+  Avatar,
+  Timeline,
+  TimelineBody,
+  TimelineContent,
+  TimelineItem,
+  TimelinePoint,
+  TimelineTime,
+  TimelineTitle,
+} from "flowbite-react";
+
+export function Component() {
+  return (
+    <Timeline>
+      <TimelineItem>
+        <TimelinePoint>
+          <Avatar rounded size="xs" img="/images/people/profile-picture-1.jpg" />
+        </TimelinePoint>
+        <TimelineContent>
+          <TimelineTime>just now</TimelineTime>
+          <TimelineTitle>Bonnie Green uploaded a new file</TimelineTitle>
+          <TimelineBody>Flowbite-react.fig was added to the project assets.</TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelinePoint>
+          <Avatar rounded size="xs" img="/images/people/profile-picture-2.jpg" />
+        </TimelinePoint>
+        <TimelineContent>
+          <TimelineTime>2 hours ago</TimelineTime>
+          <TimelineTitle>Jese Leos commented on your post</TimelineTitle>
+          <TimelineBody>Looks good to me. The dashboard cards are ready for review.</TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+`;
+
+export function Component() {
+  return (
+    <Timeline>
+      <TimelineItem>
+        <TimelinePoint>
+          <Avatar rounded size="xs" img="/images/people/profile-picture-1.jpg" />
+        </TimelinePoint>
+        <TimelineContent>
+          <TimelineTime>just now</TimelineTime>
+          <TimelineTitle>Bonnie Green uploaded a new file</TimelineTitle>
+          <TimelineBody>Flowbite-react.fig was added to the project assets.</TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelinePoint>
+          <Avatar rounded size="xs" img="/images/people/profile-picture-2.jpg" />
+        </TimelinePoint>
+        <TimelineContent>
+          <TimelineTime>2 hours ago</TimelineTime>
+          <TimelineTitle>Jese Leos commented on your post</TimelineTitle>
+          <TimelineBody>Looks good to me. The dashboard cards are ready for review.</TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+
+export const activityLog: CodeData = {
+  type: "single",
+  code: {
+    fileName: "index",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "timeline/timeline.activityLog.tsx",
+  component: <Component />,
+};

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

@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { ThemeProvider } from "../../theme/provider";
 import type { CustomFlowbiteTheme } from "../../types";
+import { Avatar } from "../Avatar";
 import type { TimelineProps } from "./Timeline";
 import { Timeline } from "./Timeline";
 import { TimelineBody } from "./TimelineBody";
@@ -62,6 +63,14 @@ describe("Components / Timeline", () => {
       expect(timelinePoint().childNodes[0]).toContainHTML("svg");
     });
 
+    it("should render children as the point marker", () => {
+      render(<TestTimelineWithCustomPoint />);
+
+      expect(timelinePoint()).toBeInTheDocument();
+      expect(timelinePoint().childNodes).toHaveLength(1);
+      expect(screen.getByTestId("flowbite-avatar")).toBeInTheDocument();
+    });
+
     it("should use `vertical` classes of content if provided", () => {
       render(
         <ThemeProvider theme={theme}>
@@ -141,6 +150,26 @@ function TestTimelineWithIcon({ horizontal, className }: TimelineProps): JSX.Ele
   );
 }
 
+function TestTimelineWithCustomPoint(): JSX.Element {
+  return (
+    <Timeline>
+      <TimelineItem>
+        <TimelinePoint>
+          <Avatar rounded size="xs" img="/images/people/profile-picture-1.jpg" />
+        </TimelinePoint>
+        <TimelineContent>
+          <TimelineTime>February 2022</TimelineTime>
+          <TimelineTitle>Application UI code in Tailwind CSS</TimelineTitle>
+          <TimelineBody>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
+            E-commerce & Marketing pages.
+          </TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+
 const IconSVG = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

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

@@ -67,8 +67,9 @@ export const TimelinePoint = forwardRef<HTMLDivElement, TimelinePointProps>((pro
       className={twMerge(horizontal && theme.horizontal, !horizontal && theme.vertical, className)}
       {...restProps}
     >
-      {children}
-      {Icon ? (
+      {children ? (
+        <span className={twMerge(theme.marker.icon.wrapper)}>{children}</span>
+      ) : Icon ? (
         <span className={twMerge(theme.marker.icon.wrapper)}>
           <Icon aria-hidden className={twMerge(theme.marker.icon.base)} />
         </span>