Add flash kind for successful interactions

[rmoorman]

Introduce a :success kind for flash messages in the generator output and update relevant documentation.

Success messages that previously used :info now use :success, ensuring they continue to appear in green with a "Success!" title.

The icon for success messages is now a checkmark.

Info messages do now appear in blue with the title "Info".

In certain cases (e.g. password reset), :info is retained to avoid disclosing too much information (such as the existence of an account).

Rationale for those changes:

• Differentiate informational messages from successful actions

• Avoid confusion from informational messages styled in green, which
  can imply success

• Ensure :info is used for neutral messages, and use :success to
  clearly indicate completed actions

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