CVA - easily construct component variants

I just had a quick look at the readme, but wanted to leave a thank you for retaining the simple functional API. Macros are great, but I’d be worried wrapping Phoenix.Component that things will break with future liveview versions, but I can see myself using the plain API.

I just release version 0.2.0 of ex_cva.

[v0.2.0] (2022-12-06)

Improvements

• variant/2 now properly supports boolean values. You can now do something like the following:

variant :disabled,
        [true: "disabled-class", false: "enabled-class"],
        default: false
        
# or

variant :disabled,
        [true: "disabled-class"],
        default: nil
        
def button(assigns) do
  ~H"""
  <button class={@cva_class} disabled={@disabled}>
    <%= render_slot(@inner_block) %>
  </button>
  """
end
        
# ... where you use that component

<.button disabled>Click me</.button> 

# -> <button class="disabled-class" disabled>Click me</button>

Thanks for bringing that up Jon. I found a few things in the library when using that approach.

In general I agree with the way the original CVA library recommends on handling things like disabled. Adding a new boolean variant if the way to go. Otherwise you could also add classes with the :disabled css pseudoclasses to style the button, when it’s disabled.

Starting with 0.2.0 of ex_cva you can do sth like the post recommended. Read below.