Class states defaults

[danieldocki]

Component:

defmodule MyAppWeb.Components.Button do
  use MyAppWeb, :component
  import PhxComponentHelpers

  @button_class "leading-6 rounded-full px-6 py-3 border border-orange-500 bg-orange-500 focus:outline focus:outline-2 focus:outline-orange-500/50"
  @label_class "text-medium text-white"

  def button(assigns) do
    assigns
    |> set_attributes([:label, :router], required: [:label, :router])
    |> extend_class(@button_class, attribute: :button_class)
    |> extend_class(@label_class, attribute: :label_class)
    |> render()
  end

  defp render(assigns) do
    ~H"""
    <%= live_patch [{:to, @router} | @heex_button_class] do %>
      <span {@heex_label_class}><%= @label %></span>
    <% end %>
    """
  end
end

Call component

<.button
  label="Button text"
  router="#"
  button_class="bg-indigo-500 border-indigo-100 focus:outline-indigo-500/50"
/>

Render

<a class="py-3 px-6 rounded-full leading-6 bg-indigo-500 border-indigo-100 focus:outline-indigo-500/50" data-phx-link="patch" data-phx-link-state="push" href="#">
  <span class="text-white text-medium">Button text</span>
</a>

Expected

<a class="py-3 px-6 rounded-full leading-6 bg-indigo-500 border-indigo-100 focus:outline focus:outline-2 focus:outline-indigo-500/50" data-phx-link="patch" data-phx-link-state="push" href="#">
  <span class="text-white text-medium">Button text</span>
</a>

I don't know why removes the classes focus:outline focus:outline-2

[cblavier]

Sorry for the delay, I'm just back from vacations!
This is indeed the current behaviour: extend_class will replace all classes starting with the same prefix (the prefix being everything before the first hyphen).
You're not the first one complaining about this, I will think of a smarter way to extend classes

[danieldocki]

I've also been thinking about how to solve this for a few days, because this behavior happens here https://github.com/cblavier/phx_component_helpers/blob/main/lib/phx_component_helpers/css.ex#L31. I haven't come up with any solution to this problem yet.

[cblavier]

@danieldocki @omginbd let me know if 1.1.0 with new extend_class/3 is working better for you!