Flux button using wire:click icon offset on hidden content

[edwinvdpol]

Flux version

v1.0.29

Livewire version

v3.5.16

What is the problem?

Hit there 👋

Given the code below, the icon in the button is not centered when using hidden content.

<flux:button icon="arrow-path" variant="primary" wire:click="xxx">
  <span class="hidden sm:inline">Refresh</span>
</flux:button>

When removing the wire:click attribute from the button, it is centered.
I think the loading spinner, or the extra span is what causes this behaviour.

Code snippets

<flux:button icon="arrow-path" variant="primary" wire:click="xxx">
  <span class="hidden sm:inline">Refresh</span>
</flux:button>

How do you expect it to work?

It should be centered like this:

<flux:button icon="arrow-path" variant="primary">
  <span class="hidden sm:inline">Refresh</span>
</flux:button>

A nice to have, is that it also should behave like the square variant, but I can image that would be complicated. 😉

<flux:button icon="arrow-path" variant="primary"></flux:button>

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@edwinvdpol I can reproduce the issue. I think you're right re: the loading spinner throwing the alignment off @calebporzio @joshhanley

[joshhanley]

@edwinvdpol thanks for reporting! I had a quick dig to see if I could find a simple solution to this. But I think it's going to need @calebporzio's input.

Here's a Volt component that shows both the bad and good scenarios and a small description of the issue and what I found.

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $show = true;

    public function test()
    {
        sleep(5);
    }
};

?>

<div>
    <p>This one demonstrates the problem:</p>
    <flux:button icon="arrow-path" variant="primary" wire:click="test">
        {{-- `sm:inline` normally added here to show icon and "Refresh" label on desktop and icon only on mobile --}}
        {{-- Setting to just `hidden` allows us to see the problem on desktop --}}
        <span class="hidden">Refresh</span>
    </flux:button>

    <p>This shows it working fine when we remove `wire:click`:</p>
    <flux:button icon="arrow-path" variant="primary">
        {{-- `sm:inline` normally added here to show icon and "Refresh" label on desktop and icon only on mobile --}}
        {{-- Setting to just `hidden` allows us to see the problem on desktop --}}
        <span class="hidden">Refresh</span>
    </flux:button>

    <p>
        The problem is due to the `wire:click` on the first button, the button component wraps the slot in a<br />
        `&lt;span&gt;&lt;/span&gt;` to ensure there is a target element to change the opacity of the button contents<br />
        when `wire:loading` is running and the loading element is shown. But this is a `gap-2` applied to<br />
        the button which is being shown even when there are no slot contents, due to the wrapping span.
    </p>
</div>