From 99b808b756c69ca4ed949250b7a3ce631667e5e7 Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Mon, 27 Jan 2025 18:28:48 +0100
Subject: [PATCH 1/4] Remove title from generated flash component

Use sky as color to be more info-like for type :info.
Relates to: #5969
---
 .../phx_web/components/core_components.ex     | 29 +++++++++----------
 installer/test/phx_new_test.exs               |  5 ++--
 .../templates/phx.gen.live/core_components.ex | 29 +++++++++----------
 3 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/installer/templates/phx_web/components/core_components.ex b/installer/templates/phx_web/components/core_components.ex
index 8c13d42948..83d1f16659 100644
--- a/installer/templates/phx_web/components/core_components.ex
+++ b/installer/templates/phx_web/components/core_components.ex
@@ -29,7 +29,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
   """
   attr :id, :string, doc: "the optional id of flash container"
   attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
-  attr :title, :string, default: nil
   attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
 
@@ -46,26 +45,26 @@ defmodule <%= @web_namespace %>.CoreComponents do
       role="alert"
       class={[
         "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
-        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
+        @kind == :info && "bg-sky-50 text-sky-800 shadow-md ring-sky-500 fill-sky-900",
         @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
       ]}
       {@rest}
     >
-      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
-        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
-        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        {@title}
-      </p>
-      <p class="mt-2 text-sm leading-5">{msg}</p>
-      <button type="button" class="group absolute top-1 right-1 p-2" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
-        <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
-      </button>
+      <div class="flex gap-2">
+        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-5 w-5 shrink-0" />
+        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-5 w-5 shrink-0" />
+        <p class="text-sm leading-5">{msg}</p>
+        <div class="flex-1" />
+        <button type="button" class="group flex self-start" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
+          <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
+        </button>
+      </div>
     </div>
     """
   end
 
   @doc """
-  Shows the flash group with standard titles and content.
+  Shows the flash group with standard content.
 
   ## Examples
 
@@ -77,12 +76,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
   def flash_group(assigns) do
     ~H"""
     <div id={@id} aria-live="polite">
-      <.flash kind={:info} title=<%= maybe_heex_attr_gettext.("Success!", @gettext) %> flash={@flash} />
-      <.flash kind={:error} title=<%= maybe_heex_attr_gettext.("Error!", @gettext) %> flash={@flash} />
+      <.flash kind={:info} flash={@flash} />
+      <.flash kind={:error} flash={@flash} />
       <.flash
         id="client-error"
         kind={:error}
-        title=<%= maybe_heex_attr_gettext.("We can't find the internet", @gettext) %>
         phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
@@ -94,7 +92,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <.flash
         id="server-error"
         kind={:error}
-        title=<%= maybe_heex_attr_gettext.("Something went wrong!", @gettext) %>
         phx-disconnected={show(".phx-server-error #server-error")}
         phx-connected={hide("#server-error")}
         hidden
diff --git a/installer/test/phx_new_test.exs b/installer/test/phx_new_test.exs
index 358a396915..9690c7b66b 100644
--- a/installer/test/phx_new_test.exs
+++ b/installer/test/phx_new_test.exs
@@ -111,7 +111,7 @@ defmodule Mix.Tasks.Phx.NewTest do
       assert_file("phx_blog/lib/phx_blog_web/components/core_components.ex", fn file ->
         assert file =~ "defmodule PhxBlogWeb.CoreComponents"
         assert file =~ ~S|aria-label={gettext("close")}|
-        assert file =~ ~S|<.flash kind={:info} title={gettext("Success!")} flash={@flash} />|
+        assert file =~ ~S|gettext("Attempting to reconnect")|
       end)
 
       assert_file("phx_blog/lib/phx_blog_web/components/layouts.ex", fn file ->
@@ -567,7 +567,8 @@ defmodule Mix.Tasks.Phx.NewTest do
 
       assert_file("phx_blog/lib/phx_blog_web/components/core_components.ex", fn file ->
         assert file =~ ~S|aria-label="close"|
-        assert file =~ ~S|<.flash kind={:info} title="Success!" flash={@flash} />|
+        assert file =~ ~S|Attempting to reconnect|
+        refute file =~ ~S|gettext("Attempting to reconnect")|
       end)
     end)
   end
diff --git a/priv/templates/phx.gen.live/core_components.ex b/priv/templates/phx.gen.live/core_components.ex
index 8c13d42948..83d1f16659 100644
--- a/priv/templates/phx.gen.live/core_components.ex
+++ b/priv/templates/phx.gen.live/core_components.ex
@@ -29,7 +29,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
   """
   attr :id, :string, doc: "the optional id of flash container"
   attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
-  attr :title, :string, default: nil
   attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
 
@@ -46,26 +45,26 @@ defmodule <%= @web_namespace %>.CoreComponents do
       role="alert"
       class={[
         "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
-        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
+        @kind == :info && "bg-sky-50 text-sky-800 shadow-md ring-sky-500 fill-sky-900",
         @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
       ]}
       {@rest}
     >
-      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
-        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
-        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        {@title}
-      </p>
-      <p class="mt-2 text-sm leading-5">{msg}</p>
-      <button type="button" class="group absolute top-1 right-1 p-2" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
-        <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
-      </button>
+      <div class="flex gap-2">
+        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-5 w-5 shrink-0" />
+        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-5 w-5 shrink-0" />
+        <p class="text-sm leading-5">{msg}</p>
+        <div class="flex-1" />
+        <button type="button" class="group flex self-start" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
+          <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
+        </button>
+      </div>
     </div>
     """
   end
 
   @doc """
-  Shows the flash group with standard titles and content.
+  Shows the flash group with standard content.
 
   ## Examples
 
@@ -77,12 +76,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
   def flash_group(assigns) do
     ~H"""
     <div id={@id} aria-live="polite">
-      <.flash kind={:info} title=<%= maybe_heex_attr_gettext.("Success!", @gettext) %> flash={@flash} />
-      <.flash kind={:error} title=<%= maybe_heex_attr_gettext.("Error!", @gettext) %> flash={@flash} />
+      <.flash kind={:info} flash={@flash} />
+      <.flash kind={:error} flash={@flash} />
       <.flash
         id="client-error"
         kind={:error}
-        title=<%= maybe_heex_attr_gettext.("We can't find the internet", @gettext) %>
         phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
@@ -94,7 +92,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <.flash
         id="server-error"
         kind={:error}
-        title=<%= maybe_heex_attr_gettext.("Something went wrong!", @gettext) %>
         phx-disconnected={show(".phx-server-error #server-error")}
         phx-connected={hide("#server-error")}
         hidden

From ebe19d679fcf6bc001613fe2f7b6fe634ac89947 Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Mon, 27 Jan 2025 19:14:51 +0100
Subject: [PATCH 2/4] move error title to text

---
 installer/templates/phx_web/components/core_components.ex | 2 ++
 priv/templates/phx.gen.live/core_components.ex            | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/installer/templates/phx_web/components/core_components.ex b/installer/templates/phx_web/components/core_components.ex
index 83d1f16659..8afa29ab62 100644
--- a/installer/templates/phx_web/components/core_components.ex
+++ b/installer/templates/phx_web/components/core_components.ex
@@ -85,6 +85,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#client-error")}
         hidden
       >
+        <span class="font-bold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
@@ -96,6 +97,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#server-error")}
         hidden
       >
+        <span class="font-bold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
diff --git a/priv/templates/phx.gen.live/core_components.ex b/priv/templates/phx.gen.live/core_components.ex
index 83d1f16659..8afa29ab62 100644
--- a/priv/templates/phx.gen.live/core_components.ex
+++ b/priv/templates/phx.gen.live/core_components.ex
@@ -85,6 +85,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#client-error")}
         hidden
       >
+        <span class="font-bold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
@@ -96,6 +97,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#server-error")}
         hidden
       >
+        <span class="font-bold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>

From d0eea4e3943225a13d4f8d3cd6846673afc4f10b Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Mon, 27 Jan 2025 19:16:44 +0100
Subject: [PATCH 3/4] semibold

---
 installer/templates/phx_web/components/core_components.ex | 4 ++--
 priv/templates/phx.gen.live/core_components.ex            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/installer/templates/phx_web/components/core_components.ex b/installer/templates/phx_web/components/core_components.ex
index 8afa29ab62..41e2d7a3fa 100644
--- a/installer/templates/phx_web/components/core_components.ex
+++ b/installer/templates/phx_web/components/core_components.ex
@@ -85,7 +85,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#client-error")}
         hidden
       >
-        <span class="font-bold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
+        <span class="font-semibold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
@@ -97,7 +97,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#server-error")}
         hidden
       >
-        <span class="font-bold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
+        <span class="font-semibold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
diff --git a/priv/templates/phx.gen.live/core_components.ex b/priv/templates/phx.gen.live/core_components.ex
index 8afa29ab62..41e2d7a3fa 100644
--- a/priv/templates/phx.gen.live/core_components.ex
+++ b/priv/templates/phx.gen.live/core_components.ex
@@ -85,7 +85,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#client-error")}
         hidden
       >
-        <span class="font-bold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
+        <span class="font-semibold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
@@ -97,7 +97,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         phx-connected={hide("#server-error")}
         hidden
       >
-        <span class="font-bold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
+        <span class="font-semibold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>

From 1bcb2e1323372881c3592b8c6787eea2f4a76524 Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Mon, 27 Jan 2025 20:49:02 +0100
Subject: [PATCH 4/4] re-add title, but make it optional

---
 .../templates/phx_web/components/core_components.ex  | 12 ++++++++----
 priv/templates/phx.gen.live/core_components.ex       | 12 ++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/installer/templates/phx_web/components/core_components.ex b/installer/templates/phx_web/components/core_components.ex
index 41e2d7a3fa..f5ba025411 100644
--- a/installer/templates/phx_web/components/core_components.ex
+++ b/installer/templates/phx_web/components/core_components.ex
@@ -29,6 +29,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
   """
   attr :id, :string, doc: "the optional id of flash container"
   attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
+  attr :title, :string, default: nil
   attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
 
@@ -53,7 +54,10 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <div class="flex gap-2">
         <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-5 w-5 shrink-0" />
         <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-5 w-5 shrink-0" />
-        <p class="text-sm leading-5">{msg}</p>
+        <div class="text-sm leading-5">
+          <p :if={@title} class="font-semibold">{@title}</p>
+          <p>{msg}</p>
+        </div>
         <div class="flex-1" />
         <button type="button" class="group flex self-start" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
           <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
@@ -64,7 +68,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
   end
 
   @doc """
-  Shows the flash group with standard content.
+  Shows the flash group with standard titles and content.
 
   ## Examples
 
@@ -81,11 +85,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <.flash
         id="client-error"
         kind={:error}
+        title=<%= maybe_heex_attr_gettext.("We can't find the internet", @gettext) %>
         phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
       >
-        <span class="font-semibold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
@@ -93,11 +97,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <.flash
         id="server-error"
         kind={:error}
+        title=<%= maybe_heex_attr_gettext.("Something went wrong!", @gettext) %>
         phx-disconnected={show(".phx-server-error #server-error")}
         phx-connected={hide("#server-error")}
         hidden
       >
-        <span class="font-semibold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
diff --git a/priv/templates/phx.gen.live/core_components.ex b/priv/templates/phx.gen.live/core_components.ex
index 41e2d7a3fa..f5ba025411 100644
--- a/priv/templates/phx.gen.live/core_components.ex
+++ b/priv/templates/phx.gen.live/core_components.ex
@@ -29,6 +29,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
   """
   attr :id, :string, doc: "the optional id of flash container"
   attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
+  attr :title, :string, default: nil
   attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
 
@@ -53,7 +54,10 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <div class="flex gap-2">
         <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-5 w-5 shrink-0" />
         <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-5 w-5 shrink-0" />
-        <p class="text-sm leading-5">{msg}</p>
+        <div class="text-sm leading-5">
+          <p :if={@title} class="font-semibold">{@title}</p>
+          <p>{msg}</p>
+        </div>
         <div class="flex-1" />
         <button type="button" class="group flex self-start" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
           <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
@@ -64,7 +68,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
   end
 
   @doc """
-  Shows the flash group with standard content.
+  Shows the flash group with standard titles and content.
 
   ## Examples
 
@@ -81,11 +85,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <.flash
         id="client-error"
         kind={:error}
+        title=<%= maybe_heex_attr_gettext.("We can't find the internet", @gettext) %>
         phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
       >
-        <span class="font-semibold"><%= maybe_eex_gettext.("We can't find the internet!", @gettext)%></span>
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
@@ -93,11 +97,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
       <.flash
         id="server-error"
         kind={:error}
+        title=<%= maybe_heex_attr_gettext.("Something went wrong!", @gettext) %>
         phx-disconnected={show(".phx-server-error #server-error")}
         phx-connected={hide("#server-error")}
         hidden
       >
-        <span class="font-semibold"><%= maybe_eex_gettext.("Something went wrong!", @gettext)%></span>
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>