use different styling options for clear_button and clear_tag_button

Fixes: #75
maxmarcon · Jul 12, 2024 · 4c86c6b · 4c86c6b
1 parent ae285ff
commit 4c86c6b
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 8 deletions.
diff --git a/lib/live_select.ex b/lib/live_select.ex
@@ -437,7 +437,7 @@ defmodule LiveSelect do
     doc:
       "Event to emit when the text input receives focus. The component id will be sent in the event's params"
 
-  @styling_options ~w(active_option_class available_option_class clear_button_class container_class container_extra_class dropdown_class dropdown_extra_class option_class option_extra_class text_input_class text_input_extra_class text_input_selected_class selected_option_class tag_class tag_extra_class tags_container_class tags_container_extra_class)a
+  @styling_options ~w(active_option_class available_option_class clear_button_class clear_tag_button_class container_class container_extra_class dropdown_class dropdown_extra_class option_class option_extra_class text_input_class text_input_extra_class text_input_selected_class selected_option_class tag_class tag_extra_class tags_container_class tags_container_extra_class)a
 
   for attr_name <- @styling_options do
     Phoenix.Component.Declarative.__attr__!(

diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
@@ -16,6 +16,8 @@ defmodule LiveSelect.Component do
     available_option_class: nil,
     clear_button_class: nil,
     clear_button_extra_class: nil,
+    clear_tag_button_class: nil,
+    clear_tag_button_extra_class: nil,
     user_defined_options: false,
     container_class: nil,
     container_extra_class: nil,

diff --git a/lib/live_select/component.html.heex b/lib/live_select/component.html.heex
@@ -24,7 +24,12 @@
             type="button"
             data-idx={idx}
             class={
-              class(@style, :clear_tag_button, @clear_button_class, @clear_button_extra_class)
+              class(
+                @style,
+                :clear_tag_button,
+                @clear_tag_button_class,
+                @clear_tag_button_extra_class
+              )
             }
           >
             <%= if @clear_button == [] do %>

diff --git a/lib/mix/tasks/dump_style_table.ex b/lib/mix/tasks/dump_style_table.ex
@@ -35,15 +35,11 @@ defmodule Mix.Tasks.DumpStyleTable do
     |> IO.write()
   end
 
-  defp class_override_option(:clear_tag_button), do: class_override_option(:clear_button)
-
   defp class_override_option(el) do
     option_name = to_string(el) <> "_class"
     if option_name in class_options(), do: option_name, else: ""
   end
 
-  defp class_extend_option(:clear_tag_button), do: class_extend_option(:clear_button)
-
   defp class_extend_option(el) do
     option_name = to_string(el) <> "_extra_class"
     if option_name in class_options(), do: option_name, else: ""

diff --git a/styling.md b/styling.md
@@ -62,7 +62,7 @@ The following table shows the default styles for each element and the options yo
 | *active_option* | active | bg-gray-600 text-white | active_option_class |  |
 | *available_option* | cursor-pointer | cursor-pointer hover:bg-gray-400 rounded | available_option_class |  |
 | *clear_button* | cursor-pointer hidden | cursor-pointer hidden | clear_button_class | clear_button_extra_class |
-| *clear_tag_button* | cursor-pointer | cursor-pointer | clear_button_class | clear_button_extra_class |
+| *clear_tag_button* | cursor-pointer | cursor-pointer | clear_tag_button_class | clear_tag_button_extra_class |
 | *container* | dropdown dropdown-open | h-full relative text-black | container_class | container_extra_class |
 | *dropdown* | bg-base-200 dropdown-content menu menu-compact p-1 rounded-box shadow w-full z-[1] | absolute bg-gray-100 inset-x-0 rounded-md shadow top-full z-50 | dropdown_class | dropdown_extra_class |
 | *option* |  | px-4 py-1 rounded | option_class | option_extra_class |

diff --git a/test/support/helpers.ex b/test/support/helpers.ex
@@ -42,7 +42,7 @@ defmodule LiveSelect.TestHelpers do
   @override_class_option [
     available_option: :available_option_class,
     clear_button: :clear_button_class,
-    clear_tag_button: :clear_button_class,
+    clear_tag_button: :clear_tag_button_class,
     container: :container_class,
     dropdown: :dropdown_class,
     option: :option_class,