themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2.13k stars 265 forks source link

Vertical Timeline Icon Container Duplicated #1139

Open ian-viri opened 11 months ago

ian-viri commented 11 months ago

Describe the bug

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

CleanShot 2023-10-31 at 10 33 15@2x

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.

CleanShot 2023-10-31 at 10 32 06@2x

Flowbite version and System Info

System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Max
    Memory: 297.86 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.6.1 - ~/.nvm/versions/node/v20.6.1/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v20.6.1/bin/npm
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 16.5
  npmPackages:
    @sveltejs/kit: ^1.20.4 => 1.26.0 
    flowbite-svelte: ^0.44.18 => 0.44.18 
    svelte: ^4.0.0 => 4.2.2 
    vite: ^4.3.0 => 4.3.9
stackblitz[bot] commented 11 months ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.