Fix button icon offset due to hidden content

[joshhanley]

The scenario

Currently if you have a button that contains text that should be hidden on mobile devices and shown on desktops, and you have a wire:click on that button, then the icon on mobile devices is offset.

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

Removing the wire:click then the button looks correct, like:

The problem

The reason that this is happening is because if wire:click is being added to the button, then we are wrapping the slot content in a <span> so that it's opacity can be set to 0 when loading is happening.

<?php if ($loading && ! $slot->isEmpty()): ?>
    {{-- If we have a loading indicator, we need to wrap it in a span so it can be a target of *:opacity-0... --}}
    <span>{{ $slot }}</span>
<?php else: ?>

By wrapping that slot in a span tag, it means that the gap-2 that is on the button is still being applied when the slot has hidden elements, which is causing the offset/gap to the right of the icon.

If we remove the added <span> and if the contents of the slot doesn't have an element in it, then the contents cannot be hidden while the loading indicator is being displayed.

<flux:button icon="arrow-path" variant="primary" wire:click="test">
    Refresh
</flux:button>

The solution

To fix this, we need a way to add an element around the contents without being impacted by the gap-2.

The only way I could find to do this is to wrap all of the button contents, except the loading icon, in a div and add the flex and gap styles to it.

Now everything works as expected.

When reviewing the button code, the main thing I can think of that will be impacted by this extra wrapping element is if people try to change the gap between the icons and the button content, as this now can't be changed. Because of that I'm not completely sold on this solution.

Fixes #824