Correct :info flash type styling confusion #5969

rmoorman · 2024-11-08T16:40:34Z

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.

installer/templates/phx_web/components/core_components.ex

SteffenDE · 2024-11-08T18:52:58Z

Hi @rmoorman,
thank you for contributing! Did you see #5844 and especially #5844 (comment)?

rmoorman · 2024-11-08T19:11:56Z

Oh my! @SteffenDE , I indeed didn't see that.

I suppose @josevalim didn't have a change of heart yet in this matter? 😄

IMHO it is likely that at least one neutral message kind/style is often needed (instead of green).

On one hand this could be added (like in this PR at the moment). In case it would be feasible/wanted to move this forward, of course I would also amend the inline documentation.

But on the other hand, indeed the :info style could be adjusted to be more neutral without adding another kind. I can also amend this PR to give the info flash message a more neutral styling. (wondering though how the title could be made more neutral 🤷🏻 )

Just let me know how you would like me to proceed.

glhrmv · 2024-11-19T23:03:56Z

Personally I think this introduces a very useful and intuitive option that most people would likely self-implement. An "official" option makes total sense.

SteffenDE · 2024-11-26T13:43:56Z

In order to move this forward, I'd say let's just change info to use sky (I visually prefer it to blue):

https://play.tailwindcss.com/Bn7JbDMpq4

People can easily extend their flash types themselves. If the docs aren't clear enough, we should improve those (see also phoenixframework/phoenix_live_view#3344) :)

josevalim · 2024-11-26T13:52:29Z

@SteffenDE agreed.

rmoorman · 2024-11-26T14:43:38Z

I will change the color to sky then.
You also seem to prefer "Info" instead of "Please note", right? I can see that it might be more in line with the single-word flash titles for the error and success cases. Also it is more grep-able and matches the status itself. I will change that as well.
And it seems there might be some conflicts too to resolve here :-)

Update the documentation to match the changes introduced in phoenixframework/phoenix#5969

rmoorman · 2024-11-27T23:24:26Z

So I went on and did the following

resolved a few minor conflicts (Use aria-live="polite" for flash_groups #5920 and Change snake_case auth URLs to kebab-case #5979)
adjusted the color of the flash messages to use the sky tint instead of blue
adjusted the icon of the success flash message to use a check icon instead of an information icon
changed the info flash message title to just read "Info" (instead of "Please note")
opened up Update phoenix_live_view.ex phoenix_live_view#3534 to adjust the inline documentation to match the changes here

SteffenDE · 2024-12-01T15:47:33Z

@rmoorman I think there was a misunderstanding. With my comment I wanted to say that we should keep just info and error for now, but adjust info to be less "successy", i.e., change it from green to blue. Instead of the dark blue my preference was the lighter sky blue. I do see that I didn't express this as clearly as I should have, so now I'm myself not sure if that's also what @josevalim agreed on 😅

josevalim · 2024-12-01T15:54:31Z

@SteffenDE I am in agreement with you :) That's what I had in mind too (just change the color).

rmoorman · 2024-12-01T16:15:09Z

So, you want the following adjustments @SteffenDE and/or @josevalim:

remove the :success component variant; effect being that only :info and :error remain, as it was basically, but now with the color changed to "sky", "Info" instead of "Success" in the flash message's title, and that at least the confusion between :info kind and "success" title and styling is cleaned up
adjust the (live view/components) documentation (e.g. here) to make it more obvious that one meant to add own states to flash (like success) if needed

Is that correct?

(P.s. I still really find it a pity because (as others mentioned as well) it seems to be a common thing to have)

SteffenDE · 2024-12-01T16:59:50Z

@rmoorman yes!

lifeiscontent · 2024-12-03T20:08:13Z

(P.s. I still really find it a pity because (as others mentioned as well) it seems to be a common thing to have)

I think the reasoning here for not adding success is phoenix has already been using :info so in the effort of not changing things out from under people, @SteffenDE is suggesting to continue to use :info for that reason.

--- @SteffenDE feel free to chime in if I have misspoken here.

and I agree with this, live view currently doesn't have any strong opinions, if you want to add a success type to flashes, its relatively straight forward, and for all the generated code, you still have the ability to change it, the framework isn't stopping you in any way to use :success in your own application.

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.

rmoorman · 2024-12-05T12:44:22Z

@SteffenDE , I adjusted the PR to match the requested changes. It now only adjusts the styling and the title of the :info flash messages.

SteffenDE

Sorry for letting this slide again. One minor comment, but in general this looks good!

The pipeline should be happy if you rebase to latest main :)

SteffenDE · 2025-01-27T16:39:02Z

installer/templates/phx_web/components/core_components.ex

@@ -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} />


To be consistent, should we use "Info!" with exclamation mark?

Reading "Info" or "Info!" feels weird. Maybe we can just get rid of the title? Let's just use an icon instead?

For reference: that's how it currently looks

I would kill the title fully. Just have the message. The color and the icon already tell me enough about it.

Multi-line messages

Info

I increased the icon size to match the text's line-height, otherwise it would not look aligned:

I opened #6065.

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

SteffenDE · 2025-01-27T17:37:49Z

Closing in favor of #6065. Thank you very much for starting this @rmoorman!

* 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

rmoorman marked this pull request as draft November 8, 2024 16:42

rmoorman marked this pull request as ready for review November 8, 2024 16:45

rmoorman marked this pull request as draft November 8, 2024 16:47

rmoorman force-pushed the flash-kind-success branch from c6c88e7 to 12c9888 Compare November 8, 2024 17:38

rmoorman marked this pull request as ready for review November 8, 2024 17:47

lifeiscontent reviewed Nov 8, 2024

View reviewed changes

installer/templates/phx_web/components/core_components.ex Outdated Show resolved Hide resolved

rmoorman force-pushed the flash-kind-success branch from 12c9888 to 6f4838c Compare November 9, 2024 16:40

rmoorman force-pushed the flash-kind-success branch 2 times, most recently from 464e75a to 78529c7 Compare November 27, 2024 23:03

rmoorman added a commit to rmoorman/phoenix_live_view that referenced this pull request Nov 27, 2024

Update phoenix_live_view.ex

4211a57

Update the documentation to match the changes introduced in phoenixframework/phoenix#5969

rmoorman mentioned this pull request Nov 27, 2024

Update phoenix_live_view.ex phoenixframework/phoenix_live_view#3534

Closed

rmoorman force-pushed the flash-kind-success branch from 78529c7 to b52e704 Compare December 5, 2024 12:31

rmoorman changed the title ~~Add flash kind for successful interactions~~ Correct :info flash type styling confusion Dec 5, 2024

SteffenDE approved these changes Jan 27, 2025

View reviewed changes

SteffenDE added a commit that referenced this pull request Jan 27, 2025

Remove title from generated flash component

275029f

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

SteffenDE mentioned this pull request Jan 27, 2025

Make title optional in generated flash component #6065

Merged

SteffenDE added a commit that referenced this pull request Jan 27, 2025

Remove title from generated flash component

99b808b

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

SteffenDE closed this Jan 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Correct :info flash type styling confusion #5969

Correct :info flash type styling confusion #5969

rmoorman commented Nov 8, 2024 •

edited

Loading

SteffenDE commented Nov 8, 2024

rmoorman commented Nov 8, 2024 •

edited

Loading

glhrmv commented Nov 19, 2024

SteffenDE commented Nov 26, 2024

josevalim commented Nov 26, 2024

rmoorman commented Nov 26, 2024

rmoorman commented Nov 27, 2024

SteffenDE commented Dec 1, 2024

josevalim commented Dec 1, 2024

rmoorman commented Dec 1, 2024

SteffenDE commented Dec 1, 2024

lifeiscontent commented Dec 3, 2024 •

edited

Loading

rmoorman commented Dec 5, 2024

SteffenDE left a comment

SteffenDE Jan 27, 2025

josevalim Jan 27, 2025

SteffenDE Jan 27, 2025

josevalim Jan 27, 2025

SteffenDE Jan 27, 2025

SteffenDE Jan 27, 2025

SteffenDE commented Jan 27, 2025

Correct :info flash type styling confusion #5969

Correct :info flash type styling confusion #5969

Conversation

rmoorman commented Nov 8, 2024 • edited Loading

SteffenDE commented Nov 8, 2024

rmoorman commented Nov 8, 2024 • edited Loading

glhrmv commented Nov 19, 2024

SteffenDE commented Nov 26, 2024

josevalim commented Nov 26, 2024

rmoorman commented Nov 26, 2024

rmoorman commented Nov 27, 2024

SteffenDE commented Dec 1, 2024

josevalim commented Dec 1, 2024

rmoorman commented Dec 1, 2024

SteffenDE commented Dec 1, 2024

lifeiscontent commented Dec 3, 2024 • edited Loading

rmoorman commented Dec 5, 2024

SteffenDE left a comment

Choose a reason for hiding this comment

SteffenDE Jan 27, 2025

Choose a reason for hiding this comment

josevalim Jan 27, 2025

Choose a reason for hiding this comment

SteffenDE Jan 27, 2025

Choose a reason for hiding this comment

josevalim Jan 27, 2025

Choose a reason for hiding this comment

SteffenDE Jan 27, 2025

Choose a reason for hiding this comment

SteffenDE Jan 27, 2025

Choose a reason for hiding this comment

SteffenDE commented Jan 27, 2025

rmoorman commented Nov 8, 2024 •

edited

Loading

rmoorman commented Nov 8, 2024 •

edited

Loading

lifeiscontent commented Dec 3, 2024 •

edited

Loading