Skip to content

Commit

Permalink
Correct :info flash type styling confusion
Browse files Browse the repository at this point in the history
Correct the display of `:info` flash messages to be in line with what
would be expected from an informational message (blue with "Info" in the
title).

Before this change, flash messages of kind `:info` would be green and
have "Success!" in their title. This is wrong, as success-style feedback
should only be shown on clearly successful actions and in cases neutral
feedback is needed, success-style feedback does not fit.

One example for this is the password reset, when we don't want to
disclose whether or not a reset email has been sent. A green "Success!"
flash message doesn't fit there.

The other way around, a more neutral blue flash message does also fit in
situations the user should receive positive feedback.

In cases a distinct `:success` flash message kind is needed, it can be
added in the project's core components.
  • Loading branch information
rmoorman committed Dec 5, 2024
1 parent 5e62a39 commit b52e704
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 6 deletions.
4 changes: 2 additions & 2 deletions installer/templates/phx_web/components/core_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ 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}
Expand Down Expand Up @@ -77,7 +77,7 @@ 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={:info} title=<%= maybe_heex_attr_gettext.("Info", @gettext) %> flash={@flash} />
<.flash kind={:error} title=<%= maybe_heex_attr_gettext.("Error!", @gettext) %> flash={@flash} />
<.flash
id="client-error"
Expand Down
4 changes: 2 additions & 2 deletions installer/test/phx_new_test.exs
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|<.flash kind={:info} title={gettext("Info")} flash={@flash} />|
end)

assert_file("phx_blog/lib/phx_blog_web/components/layouts.ex", fn file ->
Expand Down Expand Up @@ -567,7 +567,7 @@ 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|<.flash kind={:info} title="Info" flash={@flash} />|
end)
end)
end
Expand Down
4 changes: 2 additions & 2 deletions priv/templates/phx.gen.live/core_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ 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}
Expand Down Expand Up @@ -77,7 +77,7 @@ 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={:info} title=<%= maybe_heex_attr_gettext.("Info", @gettext) %> flash={@flash} />
<.flash kind={:error} title=<%= maybe_heex_attr_gettext.("Error!", @gettext) %> flash={@flash} />
<.flash
id="client-error"
Expand Down

0 comments on commit b52e704

Please sign in to comment.