Correct :info flash type styling confusion

[rmoorman]

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.

[SteffenDE]

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

[rmoorman]

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]

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]

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]

@SteffenDE agreed.

[rmoorman]

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 :-)

[rmoorman]

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]

@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]

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

[rmoorman]

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]

@rmoorman yes!

[lifeiscontent]

(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.

[rmoorman]

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