Dropdowns - format tweaks

[jjagielka]

Describe the bug Dropdown is like a List group merged with Tooltip (or rather Popover). However it does not look consistent with those:

• rounding: Dropdown uses class rounded while List group, Tooltip, Popover and even Card, Button, Toast and Modal all use rounded-lg
• space filling: List group fills the parent space fully i.e. first and last item are rounded in accordance with parent rounding. Dropdown however uses py-1 on the parent, preventing items to fill the space fully (look at the hovering).

To Reproduce Steps to reproduce the behavior:

1. Go to Dropdown and play with the hover
2. Go to List Group with icons and play with the hover
3. Observe the differences

Expected behavior Dropdown to look more like List group

Screenshots

Additional context Add any other context about the problem here.

[zoltanszogyenyi]

Hey @jjagielka,

Thanks for the feedback.

This is something I'll have to pass by the design team.

@robert1508 what do you think?

[robert1508]

Hello there,

When there are no lines between the nav items, additional space must be placed to have visual consistency between the nav items and the dropdown menu itself. But of course, we will also add a variant similar to List group.

[jjagielka]

Even button is rounded-lg and looks strange with rounded only dropdown.

[zoltanszogyenyi]

Hello @jjagielka,

I have updated all of the dropdown components (https://github.com/themesberg/flowbite/commit/29c4ca37cfa5fd2d64a86eb4d5b259fccf948198) to now use rounded-lg and also added py-2 instead of py-1 to the spacing between the menu items to better match the distance between items. Later we will make these updates to the block collection and templates.

This will be launched and deployed on the docs when v1.6.3 will be published.

Cheers, Zoltan