benvp/ex_cva

Class Variance Authority for Elixir

ex_cva's Issues

compound variant in action for function component

I've been following the docs and been unable to get a compound variant to work. It seems that there may be a level missing or, more likely, I'm complete misunderstanding them.

Any examples you can point to would be great.

Here's what we're doing. We've defined an intent variant on button/1 with several values, e.g. primary, secondary, etc. We've defined a color variant. Our app has two main areas and we differentiate them, in part, based on color.

So, I want a primary red button, I can do <.button intent="primary" color="red" ... My understanding of a compound variant would allow us to specify primary_red in some manner to include classes from both intent="primary" and color="red".

How do we indicate in the instance of the function component that we want a compound variant?

Allow defining variants values with attributes or functions

Right now, you can only do something like: variant :color, [blue: "text-blue-500"] and not variant :color, @text_colors because the macro is not expanding the module attribute. Would you be willing to support a similar syntax? This seems very helpful for cases where you want to share the variant definitions between similar components.

Support variants for nested elements

Allow controlling if/how compound variants are merged with @csa_class

Imagine the given scenario: You have an icon button component with two sizes, for each size you want not only to change the button classes but also the icon classes (so it resizes appropriately with the button):

variant :size, [sm: "text-sm px-2 py-1", lg: "text-lg px-4 py-2"]
slot :inner_block, required: true
def icon_button(assigns) do
   ~H"""
   <button class={@cva_class}>
     <.icon name="award" class="h-2 w-2 mr-2" />
     <%= render_slot(@inner_block) %>
   </button>
   """
end

It seems to me that this would be a good job for compound_variant if we had a way to split the classes instead of merging with @cva_class. Would you be interested in supporting something like this?

compound_variant :icon_class, "h-2 w-2 mr-2", size: :sm
compound_variant :icon_class, "h-4 w-4 mr-4", size: :lg