The Changelog

What's new around here?

Succinct and informative updates about Flux.

November 24, 2024

Rich text editor

Version ^1.0.27

Welp, we did it. As of today, Flux now ships with a rich text editor 🎉.

Just slap this one-liner anywhere in your app and you're off and editing:

Copy to clipboard

We really sweat the details on this one and hope it shows.

Configurable toolbar

A rich text editor with a different toolbar configuration than before

Copy to clipboard

To configure an editor's toolbar items, you can pass a custom arrangement into the

toolbar

prop as a string of item names mixed with separators (

) and spacers (

Because each of these items is a simple Blade component inside Flux, you can easily create your own Blade components and reference them by name inside the

toolbar

prop.

Custom toolbar items

An editor with a custom dropdown menu in the toolbar

If you want complete control over the toolbar, you can compose your own editor by assembling the Blade components yourself.

Here's an example of adding a custom dropdown menu to an editor's toolbar:

Copy to clipboard

As you can see, this is just Blade/HTML like any other component. You can style and assemble any other Flux components you like into the editor's toolbar.

Mouse optional

Showing there is only one tab stop at a time on the editor toolbar

The editor's toolbar uses a roving tabindex so that you don't have to tab through every toolbar item as you tab along the page. The toolbar acts as a single tab stop that you can navigate using the arrow keys.

You can navigate sub menus within the toolbar using only your keyboard as well.

In fact, you can operate everything about this editor, easily, without ever touching your mouse.

Markdown syntax

Although this is a rich text editor, it supports Markdown syntax as a convenient way to control styling in your document as you edit.

Shortcuts

All the available toolbar operation icons in a row

All the standard keyboard shortcuts you're familiar with from other editors like Google Docs are available to use as well.

Here are a few examples:

Cmd+B
Bold
Cmd+I
Italic
Cmd+K
Insert link

Browse the available shortcut keys ->

As a form field

An editor with a form field label and description

Copy to clipboard

We wanted this component to feel no different than a textarea field when using it inside a form.

This means tackling things like disabled and invalid states at both the field AND fieldset level, associating labels/descriptions with the editor, as well as focusing the editor when the field label is clicked.

Screen readers

A screenshot of the editor's accessibility tree in Chrome devtools

As you can see by the figure above, we worked hard to make sure the editor's accessibility tree was as descriptive and functional as possible.

Screen readers can easily discover and use all features inside the editor. This includes the tricky bits like toolbar sub-selects, tooltips, and insert-link popovers.

Dynamic JS bundle

Currently, every bit of Flux's JavaScript is contained inside a

21.5KB

file.

Because of the enormity of a rich text editor and its dependancies, this component would add a whopping

85.3KB

to the the Flux bundle size.

The problem is that many pages in an app don't use a rich-text editor at all and it doesn't make sense to penalize them with a bigger bundle.

Therefore, we included the editor's JavaScript as a separate bundle that gets loaded in parallel on an as-needed basis. The editor's JS will only be included at the exact moment it's needed to keep everything else in your app feeling light and snappy. This includes edge cases like lazy-loading an editor long after a page has already been loaded.

Localization

A screenshot of editor tooltip in spanish

All of the english copy used in this component is translatable by copying a predefined set of keys into your

lang/?.json

files.

Built on Tiptap & ProseMirror

Rather than wrapping a more batteries-included editor like Quill or TinyMCE, we opted to use Tiptap under the hood for the editor's core functionality.

Tiptap is a convenience wrapper around the extremely powerful ProseMirror project.

It's completely headless, meaning we have full control over all of the markup, visuals, and accessibility, without having to be responsible for the input/formatting interactions.

This means we can make the toolbar as customizable as everything else in Flux because we own all the HTML/CSS/JS for it.

Also, to help support and thank the ProseMirror project, we donated $1000 via their GitHub sponsors profile.

The future

For launch our goal was: a rock-solid editor that feels just as good to develop and use as any other component in Flux.

Now that we've accomplished that, we can start adding next-level features like image support and @mentions.

Stay tuned!

Read the full editor documentation ->

November 13, 2024

Multi-selects

Version ^1.0.23

We held off on releasing multi-selects at launch because we felt like there were too many decisions to get right, but here we are. In Flux version 1.0.23 and above, you are now able to pass the

multiple

prop and turn a single-select into a multi-select:

Copy to clipboard

Of course, data binding works as you'd expect, by passing the name of a Livewire property into

wire:model

, Livewire will keep the state of that property in sync with your selections:

Copy to clipboard

We have big plans for the future of multi-select, like adding new variants for selecting pills, tags, avatars, etc., but for now, this is a good start.

Custom selected suffix

A select dropdown with the words: 2 industries selected

After your first selection, Flux shows the number of items selected, followed by the word "selected".

If you want to customize this to make it more contextual, you can do so using the

selected-suffix

prop:

Copy to clipboard

Checkbox indicator

The default check mark icon is now configurable for multi-selects. If you want a checkbox visual indicator instead, you can use the new

indicator

prop:

Copy to clipboard

Support for multi-selects
Dispatch input events when select listbox clearable button is clicked so that wire:model.live picks up the change

View full release on GitHub

November 3, 2024

Custom icon sets, file inputs, click outside modals, & more

Version ^1.0.20

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

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

Flux uses the browser's new(ish)

element for its modals. There tons of benefits to this, but also a few quirks. One of them being, the

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

View full release on GitHub

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

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

If you want cleaner looking cards, you can remove the radio indicator by passing

:indicator="false"

into the radio group.

Copy to clipboard

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

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

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

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

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

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

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

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.