Can Dropdown Menu Items size down with the dropdown trigger button ?

[dev-idkwhoami]

Hey there not sure if this really is a feature request or if i can achieve this some other way, but here we go.

Im using a dropdown, but the dropdown button itself is size xs but when you open the dropdown it's items are "normal" or rather the base size.

Now im not sure if it is possible to resize those items without modifying the menu.item component itself.
I tried forcing the item to be smaller but then the icon & text simply overlap the items limits.

Here some examples of what i mean:

This is the first dropdown example from the docs:

        <flux:dropdown>
            <flux:button icon-trailing="chevron-down">Options</flux:button>

            <flux:menu>
                <flux:menu.item icon="plus">New post</flux:menu.item>

                <flux:menu.separator />

                <flux:menu.submenu heading="Sort by">
                    <flux:menu.radio.group>
                        <flux:menu.radio checked>Name</flux:menu.radio>
                        <flux:menu.radio>Date</flux:menu.radio>
                        <flux:menu.radio>Popularity</flux:menu.radio>
                    </flux:menu.radio.group>
                </flux:menu.submenu>

                <flux:menu.submenu heading="Filter">
                    <flux:menu.checkbox checked>Draft</flux:menu.checkbox>
                    <flux:menu.checkbox checked>Published</flux:menu.checkbox>
                    <flux:menu.checkbox>Archived</flux:menu.checkbox>
                </flux:menu.submenu>

                <flux:menu.separator />

                <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
            </flux:menu>
        </flux:dropdown>

Now if i change the dropdown trigger button size to sm or even xs the menu & menu items look completely out of place because they are way to big compared to the button itself.

        <flux:dropdown>
            <flux:button size="xs" icon-trailing="chevron-down">Options</flux:button>

            <flux:menu>
                <flux:menu.item icon="plus">New post</flux:menu.item>

                <flux:menu.separator />

                <flux:menu.submenu heading="Sort by">
                    <flux:menu.radio.group>
                        <flux:menu.radio checked>Name</flux:menu.radio>
                        <flux:menu.radio>Date</flux:menu.radio>
                        <flux:menu.radio>Popularity</flux:menu.radio>
                    </flux:menu.radio.group>
                </flux:menu.submenu>

                <flux:menu.submenu heading="Filter">
                    <flux:menu.checkbox checked>Draft</flux:menu.checkbox>
                    <flux:menu.checkbox checked>Published</flux:menu.checkbox>
                    <flux:menu.checkbox>Archived</flux:menu.checkbox>
                </flux:menu.submenu>

                <flux:menu.separator />

                <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
            </flux:menu>
        </flux:dropdown>

Here is how it looks when i force the item to be a certain height:

        <flux:dropdown>
            <flux:button size="xs" icon-trailing="chevron-down">Options</flux:button>

            <flux:menu>
                <flux:menu.item class="h-4" icon="plus">New post</flux:menu.item>

                <flux:menu.separator />

                <flux:menu.submenu class="h-4" heading="Sort by">
                    <flux:menu.radio.group class="h-4">
                        <flux:menu.radio checked>Name</flux:menu.radio>
                        <flux:menu.radio>Date</flux:menu.radio>
                        <flux:menu.radio>Popularity</flux:menu.radio>
                    </flux:menu.radio.group>
                </flux:menu.submenu>

                <flux:menu.submenu class="h-4" heading="Filter">
                    <flux:menu.checkbox checked>Draft</flux:menu.checkbox>
                    <flux:menu.checkbox checked>Published</flux:menu.checkbox>
                    <flux:menu.checkbox>Archived</flux:menu.checkbox>
                </flux:menu.submenu>

                <flux:menu.separator />

                <flux:menu.item class="h-4" variant="danger" icon="trash">Delete</flux:menu.item>
            </flux:menu>
        </flux:dropdown>

I tried using h-6 to since that is xs button height but it also doesn't look right it's better but thats beside the point.

IMO the icon & the text of dropdown items, submenus, etc should be sized in relation to dropdown trigger.

I can see how that could be rather difficult to implement so i would argue that simply integrating the size property for components like menu.item, flux:menu.submenu and so on would already go a long way.

Now i wrote in the beginning im not sure whether this is a feature request or not so here comes the part where i embarrass myself.
If there is a way i missed or somebody knows how to achieve what im trying to do WITHOUT modifying the components please let me know ^^

[joshhanley]

@dev-idkwhoami I think you were on the right track with setting the height class, but you will probably also need to set text size to like text-sm! as I'm guessing they will be text-base by default. You will need the ! to tell Tailwind to use it over text-base.

But yeah adding a size attribute would make it nicer.