txet_input border behaviour

lib/moon/components/field_border.ex

@@ -14,7 +14,7 @@ defmodule Moon.Components.FieldBorder do
     <div
       class={
         get_default_class(),
-        @border_color_class || get_default_border_color(),
+        @border_color_class || get_default_border_color_class(),
         @states_class || get_default_states_class(),
         @class
       }
@@ -25,7 +25,7 @@ defmodule Moon.Components.FieldBorder do
     """
   end
 
-  def get_default_border_color() do
+  def get_default_border_color_class() do
     "border-beerus-100"
   end
 

lib/moon/components/select/helpers.ex

@@ -58,12 +58,14 @@ defmodule Moon.Components.Select.Helpers do
     |> Enum.reduce(%{}, fn k, acc -> Map.put(acc, k, nil) end)
   end
 
-  def get_active_border_color(class) do
+  def get_active_border_color(class) when is_binary(class) do
     Regex.run(~r(\bfocus:border.*\b), class)
     |> List.first()
     |> String.split(" ")
     |> List.first()
     |> String.split(":")
     |> List.last()
   end
+
+  def get_active_border_color(other), do: other
 end

lib/moon/components/select/multi_select.ex

@@ -181,11 +181,12 @@ defmodule Moon.Components.Select.MultiSelect do
   end
 
   def handle_event("toggle_open", _params, socket) do
+    IO.puts("togle_open")
     field_border_color = socket.assigns.field_border_class
 
     field_border_color =
       if is_nil(field_border_color) do
-        FieldBorder.get_default_border_color()
+        FieldBorder.get_default_border_color_class()
       else
         SelectHelpers.get_active_border_color(field_border_color)
       end

lib/moon/components/select/single_select.ex

@@ -188,18 +188,26 @@ defmodule Moon.Components.Select.SingleSelect do
   end
 
   def handle_event("toggle_open", _params, socket) do
-    field_border_color = socket.assigns.field_border_class
+    open = !socket.assigns.open
 
     field_border_color =
-      if is_nil(field_border_color) do
-        FieldBorder.get_default_border_color()
+      if open do
+        SelectHelpers.get_active_border_color(socket.assigns.field_border_class) ||
+          FieldBorder.get_default_border_color_class()
       else
-        SelectHelpers.get_active_border_color(field_border_color)
+        FieldBorder.get_default_border_color_class()
       end
 
+    # field_border_color =
+    #   if is_nil(field_border_color) do
+    #     FieldBorder.get_default_border_color()
+    #   else
+    #     SelectHelpers.get_active_border_color(socket.assigns.field_border_class)
+    #   end
+
     socket =
       socket
-      |> assign(open: !socket.assigns.open)
+      |> assign(open: open)
       |> assign(field_border_color_class: field_border_color)
 
     {:noreply, socket}

lib/moon/components/text_input.ex

@@ -37,6 +37,8 @@ defmodule Moon.Components.TextInput do
   prop step, :string, default: "1"
   prop background_color, :string, values: Moon.colors(), default: "goku-100"
   prop size, :string, values: ["medium", "large"], default: "large"
+  prop border_color_class, :string
+  prop states_class, :string
 
   slot left_icon
   slot right_icon
@@ -59,6 +61,8 @@ defmodule Moon.Components.TextInput do
       <Surface.Components.Form.TextInput
         class={
           Moon.Components.FieldBorder.get_default_class(),
+          @border_color_class || Moon.Components.FieldBorder.get_default_border_color_class(),
+          @states_class || Moon.Components.FieldBorder.get_default_states_class(),
           "h-10 text-sm px-3": @size == "medium",
           "h-12 text-base px-4": @size == "large",
           "pl-11": slot_assigned?(:left_icon),

lib/moon_web/pages/components/select/multi_select_page.ex

@@ -160,6 +160,9 @@ defmodule MoonWeb.Pages.Components.Select.MultiSelectPage do
                   id="user-permissions-example-1"
                   options={User.available_roles()}
                   prompt="Permission"
+                  field_border_class="hover:ring-piccolo-100 hover:border-piccolo-100
+                  focus:outline-none focus:border-piccolo-100 focus:ring-piccolo-100 focus:ring-1
+                  focus:invalid:border-piccolo-100 focus:invalid:ring-piccolo-100"
                 />
               </Field>
             </Form>