The Changelog

What's new around here?

Succinct and informative updates about Flux.
November 3, 2024
Horizontally placed Lucide icons of brands like GitHub
Flux ships with the entire Heroicons icon set by default. As with anything the Tailwind folks do, it's excellent.
However, at ~400 icons, it's more limited than other alternatives.
If there's an icon in your project that you need but isn't available in Heroicons, it's probably available in Lucide.
In version v1.0.20 of Flux, we've shipped a new command to easily import individual Lucide icons into your project:
Copy to clipboard
You will be prompted to enter the names of any icons you want, and it will import them locally into your project and format them as Blade components ready to use with Flux.
If Lucide doesn't have what you need still, you can just add your icons manually to the following directory in your project:
Copy to clipboard

Custom file input

A custom file input button
The browser's default file input element is unstylable and frankly, looks outdated.
We've added our own simple wrapper around the native file input and exposed it through
type="file"
on the input component:
Copy to clipboard
Of course, we made sure our wrapper works just as well with both the keyboard, mouse, and screen readers as the native input does.

Closing modals by clicking outside

A cursor positioned outside a modal
Flux uses the browser's new(ish)
<dialog>
element for its modals. There tons of benefits to this, but also a few quirks. One of them being, the
<dialog>
element doesn't respond to clicking outside to close a modal; only the escape key or a close button.
With a sprinkle of custom JavaScript, it was fairly trivial to implement this behavior in Flux. Now, by default, all
<flux:modal>
components will close on click outside.

Clearable inputs and selects

An open searchable select showing a clearable x-mark button in the search input
Another small improvement we made in this release was making any searchable input in Flux show a clear button when filled.
We've also made this configurable for inputs that don't show one by default:
Copy to clipboard
  • Add flux:icon command to import third-party icons from Lucide for icons Heroicons is missing
  • Support clearable buttons on listbox, searchable input, and command input
  • Swap deprecated 'color-adjust' CSS property for 'print-color-adjust'
  • Fix profile name not being truncated in sidebar layout
  • Fix wire:model bugs on checkbox, radios, and switches due to errant input/change events being fired
  • Fix dynamic-component bug where attributes are double escaped
  • Fix checkbox group using an initial value of null
  • Preserve selected display event when selected option element is removed
  • Support closing modals by clicking outside
  • Add custom file input component
October 31, 2024
Vertical radio cards
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
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
Adding a cube icon to a card is as simple as passing an
icon="cube"
prop:
Copy to clipboard
Radio card with icon
If you want cleaner looking cards, you can remove the radio indicator by passing
:indicator="false"
into the radio group.
Copy to clipboard
Radio card with no radio indicator
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
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
Checkbox card variant
Of course, all of the aforementioned properties and customizations are available to checkbox cards as well.
While we were adding new radio variants, we decided to add another commonly requested one: Segmented radio buttons.
Segmented radio buttons variant
Just like cards, you can use segmented buttons with the
variant="segmented"
prop:
Copy to clipboard

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
October 21, 2024

Customize navigation badge colors

Custom badge color on navlist items
You can now customize the color of navigation badges using the
badge-color
property:
Copy to clipboard

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

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
October 17, 2024
Summary:
  • Improved button and input groups (supporting invalid states, etc.)
  • Support binding checkbox/groups to arrays like native ones
  • Prevent Livewire requests from closing popovers, resetting popover positions, and unfocusing radio groups
  • Support keydown Enter for
    wire:click
    on command palette items
  • Fix inset buttons inside tables not being vertically centered
  • Lots of other smaller fixes and improvements
  • Remove focus styles so safari doesn't focus menu on first click
  • Fix modal trigger buttons having double borders in button.groups
  • Fix off-center inset buttons in table cells
  • Fix character encoding in pass-through props
  • Fixes popovers closing after network roundtrips from Livewire
  • Allow checkboxes to be wire:model bound to Livewire array properties
  • Prevent whitespace-nowrap no tables from bleeding into modals and dropdowns inside cells
  • Support native HTML size attribute on inputs/selects
  • Prevent Livewire requests from removing dropdown anchor positioning
  • Clear Firefox console warning
  • Add missing translation for 'No results found' message on select options
  • Support calling .showModal() on ui-modal instead of only on
    <dialog>
  • Allow disabling checkbox.group components dynamically after page load
  • Add aria-label for sidebar toggle
  • Support 'alt' attribute on
    <flux:brand>
    component
  • Fix pagination link spacing on extremely large data sets
  • Show full red border on invalid inputs inside input groups
  • Fix breaking space-y-6 on select inputs and other elements like ui-modal, ui-dropdown, ui-menu
  • Support missing as well as empty tooltip content
  • Fix
    display: contents
    breaking space-y-6 on select inputs and other elements like ui-modal, ui-dropdown, ui-menu
  • Fix radio groups losing focus after Livewire requests
  • Remove yoyoyo from pagination
  • Fix breaking space-y-6 on select inputs and other elements like ui-modal, ui-dropdown, ui-menu
  • Support missing as well as empty tooltip content
  • Fix pagination spacing
  • Bump Livewire minimum version to 3.5.12 to fix checkboxes/radios/switches
  • Trigger click events on keydown Enter for command palettes
October 15, 2024
This release addresses a handful of problems relating to dropdowns and toasts.
We rewrote the Dropdown system to be more flexible and allow for expected behavior like closing dropdowns by pressing their trigger button.
We also made lots of improvements to the Toast component, both visually and behaviorly.
See the full changelog below for details.
  • Fix toast fade out animation
  • Remove extra top padding on top toasts
  • Fix toast dialog making entire page inert in Safari
  • Prevent double border on select inside input.group
  • Fix slot "is empty" conditionals
  • Prevent avatar in
    <flux:brand>
    from shrinking when name is truncated
  • Tweak listbox to better handle option label overflow
  • Fix profile name from being cut off on the bottom
  • Allow class="" attributes on navlist.group component
  • Make button with tooltip honor space-y-* on wrapping element
  • Prevent inputs from being set to false inside disclosure panel
  • Initialize ui-selected after everything else in a select menu. Closes…
  • Focus radios/checkboxes when clicking field labels.
  • Allow
    <flux:input.group>
    to use label prop
  • Change
    <flux:accordion.icon
    reverse variant icons
  • Popover overhaul by @calebporzio
  • Fix empty table causing header to scroll by @joshhanley
  • Add pagination spacing fix by @joshhanley
  • Fix publish command to include table by @joshhanley in #401
  • Add --force option to PublishCommand by @ThomasEnssner in #302
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.
Toast shadow comparison
We also increased the slide-up animation duration so that the motion of the Toast more easily catches the user's eye.
Toast shadow comparison

Adding variants

You can now add additional context to your Toast messages using one of three new variants: success, danger, and warning.
Toast variants
Variants can be used by passing the
variant
parameter to
Flux::toast()
like so:
Copy to clipboard

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
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 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
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
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.
Copyright © 2024 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie