The Timeline component has a slot for an icon, but it doesn't render correctly. This TimelineItem in a vertical timeline
<TimelineItem title="Flowbite Library v1.2.2" date="Released on December 2nd, 2021">
<svelte:fragment slot="icon">
<CalendarWeekSolid class="w-3 h-3 text-primary-600 dark:text-primary-400" />
</svelte:fragment>
<p class="text-base font-normal text-gray-500 dark:text-gray-400">
Get started with dozens of web components and interactive elements built on top of
Tailwind CSS.
</p>
</TimelineItem>
gives this result
The component provides a container, it just doesn't render the slot inside the container for some reason:
In the first TimelineItem, we just add the icon to the icon slot, and it renders incorrectly. The "workaround", which is encoded in the docs, is to create another container div with the same exact classes. You can see that by inspecting the second timeline item in the repro.
Describe the bug
The Timeline component has a slot for an icon, but it doesn't render correctly. This
TimelineItem
in a vertical timelinegives this result
The component provides a container, it just doesn't render the slot inside the container for some reason:
https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/timeline/TimelineItem.svelte#L41-L47
More info in the repro.
I'm happy to put up a PR if the team agrees this is a bug, otherwise maybe I'm just missing something.
Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-qsf68n?file=src%2Froutes%2Ftimeline%2F%2Bpage.svelte
In the first TimelineItem, we just add the icon to the
icon
slot, and it renders incorrectly. The "workaround", which is encoded in the docs, is to create another container div with the same exact classes. You can see that by inspecting the second timeline item in the repro.Flowbite version and System Info