The Changelog

What's new around here?

Succinct and informative updates about Flux.

October 31, 2024

Radio cards have landed

Version ^1.0.19

You know those big boxy toggle thingy's you use to configure your new laptop purchase? Yep, those are radio cards; simple, bordered boxes that behave like radio buttons—meaning only one can be selected at a time.

Welp, we've got em' in Flux now, and using them is as simple as adding variant="cards" to a radio group:

Copy to clipboard

<flux:radio.group wire:model="shipping" variant="cards">    <flux:radio value="standard" label="Standard" description="4-10 business days" />    ...</flux:radio.group>

By default, the cards will be laid out horizontally, but you can easily control this using simple flex box utilities like .flex-col. This makes it really easy to change the layout on mobile with a responsive utility like .max-sm:flex-col:

Copy to clipboard

<flux:radio.group variant="cards" class="max-sm:flex-col">

Adding a cube icon to a card is as simple as passing an icon="cube" prop:

Copy to clipboard

<flux:radio icon="cube" ... />

If you want cleaner looking cards, you can remove the radio indicator by passing :indicator="false" into the radio group.

Copy to clipboard

<flux:radio.group variant="cards" :indicator="false">    ...</flux:radio.group>

For most cases, this level of customization is enough, but still, there might be times where you need full control over the contents of each card.

If that's the case, you can compose these radio cards your self with the full-form syntax:

Copy to clipboard

<flux:radio.group variant="cards">    <flux:radio>        <div>            <flux:heading>Standard</flux:heading>            <flux:subheading size="sm">4-10 business days</flux:subheading>        </div>        <flux:radio.indicator />    </flux:radio></flux:radio.group>

Read the radio card documentation ->

Although less common, there might be times you want the appearance of cards, but the behavior of checkboxes. Flux also supports variant="cards" for checkboxes:

Copy to clipboard

<flux:checkbox.group variant="cards">    <flux:checkbox label="Newsletter" description="Stay up to date" />    ...</flux:checkbox.group>

Of course, all of the aforementioned properties and customizations are available to checkbox cards as well.

Read the checkbox card documentation ->

While we were adding new radio variants, we decided to add another commonly requested one: Segmented radio buttons.

Just like cards, you can use segmented buttons with the variant="segmented" prop:

Copy to clipboard

<flux:radio.group variant="segmented">    <flux:radio label="Light" icon="sun" />    <flux:radio label="Dark" icon="moon" />    <flux:radio label="System" icon="computer-desktop" /></flux:radio.group>

Read the segmented radio documentation ->

Creating radio and checkbox variants like these is much more than just visuals. Each of these is fully controllable with a keyboard, uses a roving-tabindex to mimic the focus behavior of native checkboxes and radio buttons, and supports the proper attributes and roles so that screenreaders recognize these as standard form controls.

These are among the many details that differentiate Flux among other component libraries. We care deeply about providing world-class UI components that look amazing in the browser, feel amazing in your editor, and are accessible to as many people as possible.

Add radio cards variant
Add checkbox cards variant
Add segmented radio group variant
Change to solid icons for segmented tabs and radios
Add two pixel focus outline offset to radio, checkbox, and switch to match native outlines
Sortable column backgrounds were getting cut off on mobile
Translate "No results found" strings in combobox and listbox
:href properties were being escaped, causing links with ampersands to be malformed
Support as="div" to render a button as a div

View full release on GitHub

October 21, 2024

New release—v1.0.16

Customize navigation badge colors

You can now customize the color of navigation badges using the badge-color property:

Copy to clipboard

<flux:navlist.item badge="Pro" badge-color="lime">    Calendar</flux:navlist.item>

View navigation badge color documentation ->

Modal close listeners

You can now run any Livewire action when a Flux modal closes for any reason—escape, cancel, close button, etc.

Copy to clipboard

<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.

User typing into a searchable select and showing that searches match even if results don't start with the query

Support @close listeners on modal component
Add badge-color property to navlist and navbar
Use .includes() instead of .startsWith() for autocomplete/combobox/command search
Fix listbox/combobox not showing newly selected option if added dynamically
Make accordion heading text full-width
Silence error when non-valid colors are passed to badge component
Prevent radio/checkbox group labels from being grayed out if individual controls are disabled
Expose slots for select button and input in listbox/combobox
Make select full-width and forward classes to the <ui-selected> element instead of the <button> element
Polyfill the popover attribute for Safari 16 and lower
Provide fallbacks for unsupported CSS in older browsers
Disable modal triggering on disabled buttons

View full release on GitHub

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:

Copy to clipboard

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 />:

Copy to clipboard

<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:

Copy to clipboard

<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:

Copy to clipboard

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:

Copy to clipboard

@persist('toast')    <flux:toast />@endpersist

Now, 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.

Newer posts