fix: default classes should try and hide flashes before they come in

srcrip · May 22, 2024 · d4b32c5 · d4b32c5
1 parent fe3be81
commit d4b32c5
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -177,9 +177,14 @@ You can define a custom toast class function, like so:
 defmodule MyModule do
   def toast_class_fn(assigns) do
     [
+      # base classes
       "group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-lg p-4 shadow-lg border col-start-1 col-end-1 row-start-1 row-end-2",
+      # start hidden if javascript is enabled
+      "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
+      # used to hide the disconnected flashes
       if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
-      assigns[:kind] == :info && " bg-white text-black",
+      # override styles per severity
+      assigns[:kind] == :info && "bg-white text-black",
       assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200"
     ]
   end

diff --git a/lib/live_toast.ex b/lib/live_toast.ex
@@ -120,11 +120,17 @@ defmodule LiveToast do
       defmodule MyModule do
         def toast_class_fn(assigns) do
           [
+            # base classes
             "group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-lg p-4 shadow-lg border col-start-1 col-end-1 row-start-1 row-end-2",
+            # start hidden if javascript is enabled
+            "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
+            # used to hide the disconnected flashes
             if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
-            assigns[:kind] == :info && " bg-white text-black",
+            # override styles per severity
+            assigns[:kind] == :info && "bg-white text-black",
             assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200"
           ]
+
         end
       end
 
@@ -134,9 +140,14 @@ defmodule LiveToast do
   """
   def toast_class_fn(assigns) do
     [
+      # base classes
       "group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-lg p-4 shadow-lg border col-start-1 col-end-1 row-start-1 row-end-2",
+      # start hidden if javascript is enabled
+      "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
+      # used to hide the disconnected flashes
       if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
-      assigns[:kind] == :info && " bg-white text-black",
+      # override styles per severity
+      assigns[:kind] == :info && "bg-white text-black",
       assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200"
     ]
   end

diff --git a/lib/live_toast/components.ex b/lib/live_toast/components.ex
@@ -84,7 +84,7 @@ defmodule LiveToast.Components do
         type="button"
         class={[
           "group-has-[[data-part='title']]/toast:absolute",
-          "right-[5px] top-[5px] rounded-md p-[5px] text-black/50 transition-opacity  hover:text-black focus:opacity-100 focus:outline-none focus:ring-1 group group-hover:opacity-100"
+          "right-[5px] top-[5px] rounded-md p-[5px] text-black/50 transition-opacity hover:text-black focus:opacity-100 focus:outline-none focus:ring-1 group group-hover:opacity-100"
         ]}
         aria-label="close"
         {

diff --git a/lib/live_toast/utility.ex b/lib/live_toast/utility.ex
@@ -51,8 +51,7 @@ defmodule LiveToast.Utility do
       to: selector,
       display: "flex",
       transition:
-        {"transition-all transform ease-out duration-300",
-         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+        {"transition-all transform ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
          "opacity-100 translate-y-0 sm:scale-100"}
     )
   end
@@ -62,8 +61,7 @@ defmodule LiveToast.Utility do
       to: selector,
       time: 200,
       transition:
-        {"transition-all transform ease-in duration-200",
-         "opacity-100 translate-y-0 sm:scale-100",
+        {"transition-all transform ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
     )
   end