Allow to hide a button's label on smaller screens, keep icon

[lode]

I often find myself creating two buttons, one for small screens with only the icon, and one for bigger screens with icon and label.

However the code that I have to write becomes a bit ugly:

<flux:button icon="chevron-left" class="sm:hidden" />
<flux:button icon="chevron-left" class="max-sm:hidden">Previous</flux:button>
<flux:button icon="chevron-right" class="sm:hidden" />
<flux:button icon="chevron-right" class="max-sm:hidden">Next</flux:button>

Especially when the button has more arguments, like I found this in my code:

<flux:button variant="default" icon:trailing="chevron-right" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->nextCursor()->encode() }}" wire:click="setPage('{{ $paginator->nextCursor()->encode() }}','{{ $paginator->getCursorName() }}')" x-on:click="resetScroll" class="sm:hidden" />
<flux:button variant="default" icon:trailing="chevron-right" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->nextCursor()->encode() }}" wire:click="setPage('{{ $paginator->nextCursor()->encode() }}','{{ $paginator->getCursorName() }}')" x-on:click="resetScroll" class="max-sm:hidden">

---

The nicer alternative code-wise would be to only hide the label text on smaller screens:

<flux:button icon="chevron-left"><span class="max-sm:hidden">Previous</span></flux:button>
<flux:button icon="chevron-right"><span class="max-sm:hidden">Next</span></flux:button>

However, this changes how buttons are styled, keeping space for an empty label (top how this looks, bottom how it should look):

---

It would be great if this can be solved inside Flux. With something like:

<flux:button icon="chevron-left" label-hidden="max-sm">Previous</flux:button>

[jeffchown]

@lode Wouldn't something like this work?:

<div class="flex items-center gap-3">
    <flux:button class="flex items-center lg:gap-2">
        <flux:icon.chevron-left />
        <span class="hidden lg:inline-block">Previous</span>
    </flux:button>

    <flux:button class="flex items-center lg:gap-2">
        <span class="hidden lg:inline-block">Next</span>
        <flux:icon.chevron-right />
    </flux:button>
</div>

[lode]

Might yeah. Still feels like quite a lot of code for something that is so common. Plus the button with an empty content vs button without a closing tag feels like a bug.

[jeffchown]

@lode Not sure what you mean re: your last sentence

Plus the button with an empty content vs button without a closing tag feels like a bug.

By using the slot in the button, instead of the icon property in this case, we have total control over what is displayed, when and how (via CSS breakpoints, etc).

[lode]

I don't per se want total control, want something that works and doesn't cost me a lot of code to maintain. I want to receive updates from how Flux' code is improving. Now for example I have to also manually take care of the icon being too big when the text label is next to it (top your example, bottom native Flux).

[jeffchown]

My example at least eliminates the need to code two versions of each button (for the different screen sizes) as you describe in your original post.

In my opinion, the trick is to find the right balance between flexibility and performance in the 'base' Flux components so they aren't trying to accommodate too many different needs/conditions/properties or that could complicate their code and slow them down.

Personally, If it were in my app, I would use my code as a starting point then extract it to a custom component if I found I was using it in a lot of places in my application. That would give me the best of both worlds as I would be leveraging the base flux:button to get my desired result.

PS adding variant="mini" matches the icon size to the default used in flux:button:

<div class="flex items-center gap-3">
    <flux:button class="flex items-center lg:gap-2">
        <flux:icon.chevron-left variant="mini" />
        <span class="hidden lg:inline-block">Previous</span>
    </flux:button>

    <flux:button class="flex items-center lg:gap-2">
        <span class="hidden lg:inline-block">Next</span>
        <flux:icon.chevron-right variant="mini" />
    </flux:button>
</div>

[lode]

Found out another reason why a double button is problematic. Parent elements like flux:dropdown only act on the first button/element.