diff --git a/.changeset/lucky-ladybugs-film.md b/.changeset/lucky-ladybugs-film.md new file mode 100644 index 000000000..3a12afbdf --- /dev/null +++ b/.changeset/lucky-ladybugs-film.md @@ -0,0 +1,5 @@ +--- +"flowbite-react": patch +--- + +Allow `Timeline.Point` to render components as inner content. diff --git a/apps/web/content/docs/components/timeline.mdx b/apps/web/content/docs/components/timeline.mdx index 62733b489..1402afbeb 100644 --- a/apps/web/content/docs/components/timeline.mdx +++ b/apps/web/content/docs/components/timeline.mdx @@ -31,6 +31,12 @@ Use the `horizontal` prop to show the timeline component and the child component +## Render props + +Use the `render` prop to render an Avatar or any other component as TimelinePoint inner content. + + + ## Theme To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). diff --git a/apps/web/examples/timeline/index.ts b/apps/web/examples/timeline/index.ts index 479235816..8ba113a98 100644 --- a/apps/web/examples/timeline/index.ts +++ b/apps/web/examples/timeline/index.ts @@ -1,3 +1,4 @@ export { horizontal } from "./timeline.horizontal"; export { root } from "./timeline.root"; export { vertical } from "./timeline.vertical"; +export { render } from "./timeline.render"; diff --git a/apps/web/examples/timeline/timeline.render.tsx b/apps/web/examples/timeline/timeline.render.tsx new file mode 100644 index 000000000..e61e5822c --- /dev/null +++ b/apps/web/examples/timeline/timeline.render.tsx @@ -0,0 +1,211 @@ +"use client"; + +import { + Avatar, + Badge, + Card, + Timeline, + TimelineBody, + TimelineContent, + TimelineItem, + TimelinePoint, +} from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { Avatar, Badge, Timeline } from "flowbite-react"; + +export function Component() { + + + ( + + )} + /> + + + +
+ + +
+ Bonnie moved{" "} + + Jese Leos + {" "} + to{" "} + + Funny Group + +
+
+ + + + + + ( + + )} + /> + + + +
+
+ +
+ Thomas Lean commented on{" "} + + Flowbite Pro + +
+
+ + +
+ Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design + system! This is the second session of our new webinar series on #DesignSystems discussions where + we'll be speaking about Measurement. +
+ +
+ + + + + + ( + + )} + /> + + + +
+ + +
+ Jese Leos has changed{" "} + + Pricing page + {" "} + task status to Finished +
+
+ + + + + +} +`; + +export function Component() { + return ( + + + ( + + )} + /> + + + +
+ + +
+ Bonnie moved{" "} + + Jese Leos + {" "} + to{" "} + + Funny Group + +
+
+ + + + + + ( + + )} + /> + + + +
+
+ +
+ Thomas Lean commented on{" "} + + Flowbite Pro + +
+
+ + +
+ Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design + system! This is the second session of our new webinar series on #DesignSystems discussions where + we'll be speaking about Measurement. +
+ +
+ + + + + + ( + + )} + /> + + + +
+ + +
+ Jese Leos has changed{" "} + + Pricing page + {" "} + task status to Finished +
+
+ + + + + + ); +} + +export const render: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + ], + githubSlug: "timeline/timeline.render.tsx", + component: , + iframe: 391, +}; diff --git a/packages/ui/src/components/Timeline/Timeline.spec.tsx b/packages/ui/src/components/Timeline/Timeline.spec.tsx index ed9f27730..78b6cf8e8 100644 --- a/packages/ui/src/components/Timeline/Timeline.spec.tsx +++ b/packages/ui/src/components/Timeline/Timeline.spec.tsx @@ -21,6 +21,13 @@ describe("Components / Timeline", () => { expect(timelinePoint().childNodes[0]).toContainHTML("svg"); }); + it("should render custom inner content when using render prop", () => { + render(); + + expect(timelinePoint()).toBeInTheDocument(); + expect(timelinePoint().childNodes[0]).toContainHTML("img"); + }); + it("should use `horizontal` classes of content if provided", () => { render( @@ -56,6 +63,13 @@ describe("Components / Timeline", () => { expect(timelinePoint().childNodes[0]).toContainHTML("svg"); }); + it("should render custom inner content when using render prop", () => { + render(); + + expect(timelinePoint()).toBeInTheDocument(); + expect(timelinePoint().childNodes[0]).toContainHTML("img"); + }); + it("should use `vertical` classes of content if provided", () => { render( @@ -135,6 +149,24 @@ const TestTimelineWithIcon: FC = ({ horizontal, className }): JSX ); }; +const TestTimelineWithRenderProp: FC = ({ horizontal, className }): JSX.Element => { + return ( + + + } /> + + February 2022 + Application UI code in Tailwind CSS + + Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order + E-commerce & Marketing pages. + + + + + ); +}; + const IconSVG = () => ( ), }; + +export const ActivityLog = Template.bind({}); +ActivityLog.args = { + children: ( + <> + + ( + + )} + /> + + + +
+ + +
+ Bonnie moved{" "} + + Jese Leos + {" "} + to{" "} + + Funny Group + +
+
+ + + + + + ( + + )} + /> + + + +
+
+ +
+ Thomas Lean commented on{" "} + + Flowbite Pro + +
+
+ + +
+ Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design + system! This is the second session of our new webinar series on #DesignSystems discussions where + we'll be speaking about Measurement. +
+ +
+ + + + + + ( + + )} + /> + + + +
+ + +
+ Jese Leos has changed{" "} + + Pricing page + {" "} + task status to Finished +
+
+ + + + + + ), +}; diff --git a/packages/ui/src/components/Timeline/TimelinePoint.tsx b/packages/ui/src/components/Timeline/TimelinePoint.tsx index 17112af06..6c660f9d9 100644 --- a/packages/ui/src/components/Timeline/TimelinePoint.tsx +++ b/packages/ui/src/components/Timeline/TimelinePoint.tsx @@ -26,6 +26,7 @@ export interface FlowbiteTimelinePointTheme { export interface TimelnePointProps extends ComponentProps<"div"> { icon?: FC>; theme?: DeepPartial; + render?: () => React.ReactNode; } export const TimelinePoint: FC = ({ @@ -33,6 +34,7 @@ export const TimelinePoint: FC = ({ className, icon: Icon, theme: customTheme = {}, + render, ...props }) => { const { horizontal } = useTimelineContext(); @@ -51,6 +53,8 @@ export const TimelinePoint: FC = ({ + ) : render ? ( + {render()} ) : (