Description
Flux version
v2.2.1
Livewire version
v3.6.3
Tailwind version
v4.0.7
Browser and Operating System
Chrome on Windows and Firefox on Windows
What is the problem?
The commit 8de57c8 introduced a padding bug in <flux:buttons> with normal size only if there is a wire:click directive on it or if the button has type="submit".
The problem is duo to the change in line 57 of the stubs/resources/views/flux/button/index.blade.php.
The directive wire:click and the type="submit" add a <div> with a <svg> spinner before the <span> that contain the text in the button.
This has the effect to apply the "ps-3" because the first-child is not a <span>.
The visual effect is the following:
(the button element has the px-4 and ps-3 classes for padding).
But the expected visual effect should be:
(the button element has only px-4 class for padding).
Code snippets
<flux:button wire:click="console.log('hi')">
AI
</flux:button>How do you expect it to work?
I expect that the "ps-3" and "pe-3" class should both or none of them be applied if the icon is not visible.
<flux:button>
AI
</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.