Skip to content

Commit

Permalink
Make title optional in generated flash component (#6065)
Browse files Browse the repository at this point in the history 
* Remove title from generated flash component

Use sky as color to be more info-like for type :info.
Relates to: #5969

* move error title to text

* semibold

* re-add title, but make it optional
  • Loading branch information
@SteffenDE
SteffenDE authored Jan 27, 2025
1 parent cc9c666 commit f4ee4a0
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 26 deletions.
27 changes: 15 additions & 12 deletions installer/templates/phx_web/components/core_components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,23 @@ 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" />
<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" />
</button>
</div>
</div>
"""
end
Expand All @@ -77,8 +80,8 @@ 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}
Expand Down
5 changes: 3 additions & 2 deletions installer/test/phx_new_test.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ->
Expand Down Expand Up @@ -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
Expand Down
27 changes: 15 additions & 12 deletions priv/templates/phx.gen.live/core_components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,23 @@ 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" />
<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" />
</button>
</div>
</div>
"""
end
Expand All @@ -77,8 +80,8 @@ 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}
Expand Down

0 comments on commit f4ee4a0

Please sign in to comment.