The Changelog
What's new around here?
Succinct and informative updates about Flux.
October 21, 2024
Customize navigation badge colors
You can now customize the color of navigation badges using the badge-color property:
<flux:navlist.item badge="Pro" badge-color="lime"> Calendar</flux:navlist.item>Modal close listeners
You can now run any Livewire action when a Flux modal closes for any reason—escape, cancel, close button, etc.
<flux:modal @close="someLivewireAction"> <!-- ... --></flux:modal>Fuzzier searchable selects
All searchable inputs in Flux—searchable selects, comboboxes, command palettes—will now use JavaScript .includes(...) instead of .startsWith(...) when matching results so that searches are more inclusive.
This behavior mirrors the browser's native autocomplete behavior for the <datalist> element.
October 14, 2024
Toasts just got better
Version ^1.0.10
Flux's Toast component just got a heap of improvements based on a mixture of your feedback and our intuition.
Making them stand-out
First, we increased the drop-shadow to make Toasts appear as if they are in the foreground of the page.
We also increased the slide-up animation duration so that the motion of the Toast more easily catches the user's eye.
Adding variants
You can now add additional context to your Toast messages using one of three new variants: success, danger, and warning.
Variants can be used by passing the variant parameter to Flux::toast() like so:
Flux::toast('Something went wrong', variant: 'danger');Positioning
You can now specify where on the page you want your toasts to appear by passing the position prop to <flux:toast />:
<flux:toast position="top right" />If you have a header navbar at the top of your app, you may want to add extra padding using Tailwind:
<flux:toast position="top right" class="pt-24" />Flux automatically adjusts animations based on position. Toasts positioned at the top will slide-in from the side, while Toasts on the bottom will slide up from the bottom.
Persisting toasts between redirects
A common pattern in applications is to trigger a toast before redirecting your users elsewhere:
Flux::toast(...);$this->redirect('...', navigate: true);If you wish to preserve your toasts between page visits, you can do so using the @persist Blade directive in your layout:
@persist('toast') <flux:toast />@endpersistNow, If you trigger a toast before a redirect, it will remain on the page after the redirect.
This behavior was previously broken because of the way Browsers handle popovers between pages, however we introduced a patch in Livewire version 3.5.10 to allow for this.
