Skip to content

Commit 99b808b

Browse files
SteffenDESteffenDE
committed
Remove title from generated flash component
Use sky as color to be more info-like for type :info. Relates to: #5969
1 parent 82215a5 commit 99b808b

File tree

3 files changed

+29
-34
lines changed

3 files changed

+29
-34
lines changed

‎installer/templates/phx_web/components/core_components.ex

+13-16
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
2929
"""
3030
attr :id, :string, doc: "the optional id of flash container"
3131
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
32-
attr :title, :string, default: nil
3332
attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
3433
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
3534

@@ -46,26 +45,26 @@ defmodule <%= @web_namespace %>.CoreComponents do
4645
role="alert"
4746
class={[
4847
"fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
49-
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
48+
@kind == :info && "bg-sky-50 text-sky-800 shadow-md ring-sky-500 fill-sky-900",
5049
@kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
5150
]}
5251
{@rest}
5352
>
54-
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
55-
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
56-
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
57-
{@title}
58-
</p>
59-
<p class="mt-2 text-sm leading-5">{msg}</p>
60-
<button type="button" class="group absolute top-1 right-1 p-2" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
61-
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
62-
</button>
53+
<div class="flex gap-2">
54+
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-5 w-5 shrink-0" />
55+
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-5 w-5 shrink-0" />
56+
<p class="text-sm leading-5">{msg}</p>
57+
<div class="flex-1" />
58+
<button type="button" class="group flex self-start" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
59+
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
60+
</button>
61+
</div>
6362
</div>
6463
"""
6564
end
6665

6766
@doc """
68-
Shows the flash group with standard titles and content.
67+
Shows the flash group with standard content.
6968
7069
## Examples
7170
@@ -77,12 +76,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
7776
def flash_group(assigns) do
7877
~H"""
7978
<div id={@id} aria-live="polite">
80-
<.flash kind={:info} title=<%= maybe_heex_attr_gettext.("Success!", @gettext) %> flash={@flash} />
81-
<.flash kind={:error} title=<%= maybe_heex_attr_gettext.("Error!", @gettext) %> flash={@flash} />
79+
<.flash kind={:info} flash={@flash} />
80+
<.flash kind={:error} flash={@flash} />
8281
<.flash
8382
id="client-error"
8483
kind={:error}
85-
title=<%= maybe_heex_attr_gettext.("We can't find the internet", @gettext) %>
8684
phx-disconnected={show(".phx-client-error #client-error")}
8785
phx-connected={hide("#client-error")}
8886
hidden
@@ -94,7 +92,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
9492
<.flash
9593
id="server-error"
9694
kind={:error}
97-
title=<%= maybe_heex_attr_gettext.("Something went wrong!", @gettext) %>
9895
phx-disconnected={show(".phx-server-error #server-error")}
9996
phx-connected={hide("#server-error")}
10097
hidden

‎installer/test/phx_new_test.exs

+3-2
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ defmodule Mix.Tasks.Phx.NewTest do
111111
assert_file("phx_blog/lib/phx_blog_web/components/core_components.ex", fn file ->
112112
assert file =~ "defmodule PhxBlogWeb.CoreComponents"
113113
assert file =~ ~S|aria-label={gettext("close")}|
114-
assert file =~ ~S|<.flash kind={:info} title={gettext("Success!")} flash={@flash} />|
114+
assert file =~ ~S|gettext("Attempting to reconnect")|
115115
end)
116116

117117
assert_file("phx_blog/lib/phx_blog_web/components/layouts.ex", fn file ->
@@ -567,7 +567,8 @@ defmodule Mix.Tasks.Phx.NewTest do
567567

568568
assert_file("phx_blog/lib/phx_blog_web/components/core_components.ex", fn file ->
569569
assert file =~ ~S|aria-label="close"|
570-
assert file =~ ~S|<.flash kind={:info} title="Success!" flash={@flash} />|
570+
assert file =~ ~S|Attempting to reconnect|
571+
refute file =~ ~S|gettext("Attempting to reconnect")|
571572
end)
572573
end)
573574
end

‎priv/templates/phx.gen.live/core_components.ex

+13-16
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
2929
"""
3030
attr :id, :string, doc: "the optional id of flash container"
3131
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
32-
attr :title, :string, default: nil
3332
attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
3433
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
3534

@@ -46,26 +45,26 @@ defmodule <%= @web_namespace %>.CoreComponents do
4645
role="alert"
4746
class={[
4847
"fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
49-
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
48+
@kind == :info && "bg-sky-50 text-sky-800 shadow-md ring-sky-500 fill-sky-900",
5049
@kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
5150
]}
5251
{@rest}
5352
>
54-
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
55-
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
56-
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
57-
{@title}
58-
</p>
59-
<p class="mt-2 text-sm leading-5">{msg}</p>
60-
<button type="button" class="group absolute top-1 right-1 p-2" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
61-
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
62-
</button>
53+
<div class="flex gap-2">
54+
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-5 w-5 shrink-0" />
55+
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-5 w-5 shrink-0" />
56+
<p class="text-sm leading-5">{msg}</p>
57+
<div class="flex-1" />
58+
<button type="button" class="group flex self-start" aria-label=<%= maybe_heex_attr_gettext.("close", @gettext) %>>
59+
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
60+
</button>
61+
</div>
6362
</div>
6463
"""
6564
end
6665

6766
@doc """
68-
Shows the flash group with standard titles and content.
67+
Shows the flash group with standard content.
6968
7069
## Examples
7170
@@ -77,12 +76,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
7776
def flash_group(assigns) do
7877
~H"""
7978
<div id={@id} aria-live="polite">
80-
<.flash kind={:info} title=<%= maybe_heex_attr_gettext.("Success!", @gettext) %> flash={@flash} />
81-
<.flash kind={:error} title=<%= maybe_heex_attr_gettext.("Error!", @gettext) %> flash={@flash} />
79+
<.flash kind={:info} flash={@flash} />
80+
<.flash kind={:error} flash={@flash} />
8281
<.flash
8382
id="client-error"
8483
kind={:error}
85-
title=<%= maybe_heex_attr_gettext.("We can't find the internet", @gettext) %>
8684
phx-disconnected={show(".phx-client-error #client-error")}
8785
phx-connected={hide("#client-error")}
8886
hidden
@@ -94,7 +92,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
9492
<.flash
9593
id="server-error"
9694
kind={:error}
97-
title=<%= maybe_heex_attr_gettext.("Something went wrong!", @gettext) %>
9895
phx-disconnected={show(".phx-server-error #server-error")}
9996
phx-connected={hide("#server-error")}
10097
hidden

0 commit comments

Comments
 (0)