Style disabled toggle button (#2977)

* fix toggle button not having a disabled look * remove unneeded push_event on the modal component * oops! remove commented lines
OpenFn · Feb 28, 2025 · 5bf2ddf · 5bf2ddf
1 parent 635ade1
commit 5bf2ddf
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,8 @@ and this project adheres to
 
 ### Fixed
 
+- Fix toggle button not visually disabled
+  [#2976](https://github.com/OpenFn/lightning/issues/2976)
 - Dont clear dataclip input when user saves workflow
   [#2944](https://github.com/OpenFn/lightning/issues/2944)
 

diff --git a/lib/lightning_web/components/new_inputs.ex b/lib/lightning_web/components/new_inputs.ex
@@ -441,8 +441,6 @@ defmodule LightningWeb.Components.NewInputs do
       |> assign_new(:checked, fn ->
         Form.normalize_value("checkbox", assigns[:value]) == true
       end)
-      |> assign_new(:disabled, fn -> false end)
-      |> assign_new(:required, fn -> false end)
       |> assign_new(:tooltip, fn -> nil end)
 
     ~H"""
@@ -471,21 +469,19 @@ defmodule LightningWeb.Components.NewInputs do
             value="true"
             class="sr-only peer"
             checked={@checked}
-            disabled={@disabled}
-            required={@required}
             {@rest}
           />
 
           <div
-            tabindex={if @disabled, do: "-1", else: "0"}
+            tabindex={if @rest[:disabled], do: "-1", else: "0"}
             role="switch"
             aria-checked={@checked}
             class={[
               "relative inline-flex w-11 h-6 rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent",
               "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
               @checked && "bg-indigo-600",
               !@checked && "bg-gray-200",
-              if(@disabled,
+              if(@rest[:disabled],
                 do: "opacity-50 cursor-not-allowed",
                 else: "cursor-pointer"
               )
@@ -523,11 +519,11 @@ defmodule LightningWeb.Components.NewInputs do
             :if={@label}
             class={[
               "ml-3 text-sm font-medium select-none",
-              if(@disabled, do: "text-gray-400", else: "text-gray-900")
+              if(@rest[:disabled], do: "text-gray-400", else: "text-gray-900")
             ]}
           >
             <%= @label %>
-            <span :if={@required} class="text-red-500 ml-1">*</span>
+            <span :if={@rest[:required]} class="text-red-500 ml-1">*</span>
           </span>
         </label>
       </div>

diff --git a/lib/lightning_web/live/components/modal.ex b/lib/lightning_web/live/components/modal.ex
@@ -12,7 +12,6 @@ defmodule LightningWeb.Components.Modal do
   attr :id, :string, required: true
   attr :show, :boolean, default: false
   attr :with_frame, :boolean, default: true
-  attr :target, :any, default: nil
   attr :position, :string, default: "fixed inset-0"
   attr :width, :string, default: "max-w-3xl"
   attr :close_on_click_away, :boolean, default: true
@@ -47,7 +46,6 @@ defmodule LightningWeb.Components.Modal do
         phx-click={
           @close_on_click_away &&
             hide_modal(@on_close, @id)
-            |> push_modal_closed(@id, @target)
         }
       />
       <div
@@ -66,13 +64,11 @@ defmodule LightningWeb.Components.Modal do
               phx-window-keydown={
                 @close_on_keydown &&
                   hide_modal(@on_close, @id)
-                  |> push_modal_closed(@id, @target)
               }
               phx-key="escape"
               phx-click-away={
                 @close_on_click_away &&
                   hide_modal(@on_close, @id)
-                  |> push_modal_closed(@id, @target)
               }
               class={[
                 "hidden relative rounded-xl transition",
@@ -164,14 +160,4 @@ defmodule LightningWeb.Components.Modal do
     |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
     |> JS.pop_focus()
   end
-
-  defp push_modal_closed(js, modal_id, nil) do
-    js
-    |> JS.push("modal_closed", value: %{id: modal_id})
-  end
-
-  defp push_modal_closed(js, modal_id, target) do
-    js
-    |> JS.push("modal_closed", value: %{id: modal_id}, target: target)
-  end
 end
diff --git a/lib/lightning_web/live/dashboard_live/components.ex b/lib/lightning_web/live/dashboard_live/components.ex
@@ -72,7 +72,12 @@ defmodule LightningWeb.DashboardLive.Components do
     <div class="text-xs">
       <.modal
         id={"arcade-modal-#{@resource.id}"}
-        target={"##{@target}"}
+        on_close={
+          JS.push("modal_closed",
+            value: %{id: "arcade-modal-#{@resource.id}"},
+            target: "##{@target}"
+          )
+        }
         with_frame={false}
         show={true}
         width="w-5/6"

diff --git a/test/lightning_web/live/workflow_live/edit_test.exs b/test/lightning_web/live/workflow_live/edit_test.exs
@@ -1027,6 +1027,10 @@ defmodule LightningWeb.WorkflowLive.EditTest do
         |> element("#toggle-settings")
         |> render_click()
 
+        assert view
+               |> element("#toggle-control-toggle-workflow-logs-btn")
+               |> render() =~ "opacity-50 cursor-not-allowed"
+
         assert has_element?(
                  view,
                  "#toggle-workflow-logs-btn"
@@ -1060,6 +1064,10 @@ defmodule LightningWeb.WorkflowLive.EditTest do
         |> element("#toggle-settings")
         |> render_click()
 
+        refute view
+               |> element("#toggle-control-toggle-workflow-logs-btn")
+               |> render() =~ "opacity-50 cursor-not-allowed"
+
         assert has_element?(
                  view,
                  "#toggle-workflow-logs-btn"