search

livewire / flux

The official Livewire UI component library
https://fluxui.dev
485 stars 42 forks source link

<flux:menu.group> with <flux:menu.submenu> inside the group causes spacing to the left of the group heading #655

Closed bjornbjorn closed 1 day ago

bjornbjorn commented 1 week ago

To reproduce use this code:

   <flux:dropdown position="bottom" align="end">
            <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>
            <flux:menu>
                <flux:menu.group class="items-start" heading="Page settings">
                   <flux:menu.submenu heading="Menu">
                        <flux:menu.radio.group>
                            <flux:menu.radio>Display menu</flux:menu.radio>
                            <flux:menu.radio>Hide menu</flux:menu.radio>
                        </flux:menu.radio.group>
                    </flux:menu.submenu>
                </flux:menu.group>
            </flux:menu>
        </flux:dropdown>

You'll see that the group heading "Page settings" has space on the left side:

Image

It's caused by the display:block which overrides the default 'hidden' on the div, if you toggle this off it looks correct:

Image

bjornbjorn commented 1 week ago

It actually looks like it's the flux:menu.radio causing it, with this code the spacing shows up:

<flux:menu.group class="items-start" heading="Page settings">
                            <flux:menu.item>
                                Test
                            </flux:menu.item>

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

                </flux:menu.group>

But if I remove the <flux:menu.radio> elements it goes away:

 <flux:menu.group class="items-start" heading="Page settings">
                            <flux:menu.item>
                                Test
                            </flux:menu.item>

                            <flux:menu.submenu heading="Sort by">
                            </flux:menu.submenu>
                </flux:menu.group>
calebporzio commented 1 day ago

Good catch - it was a bad CSS selector. Fixed (will be in the next release):

Image