-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add flash kind for successful interactions #5969
base: main
Are you sure you want to change the base?
Conversation
c6c88e7
to
12c9888
Compare
@@ -46,13 +46,15 @@ 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-blue-50 text-blue-800 ring-blue-500 fill-blue-900", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
personally, I would use cyan or sky for info messages, but it may be bias from seeing so many UI Frameworks using the word "info" with a light blue color
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess sky it will be then :-)
Hi @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 Just let me know how you would like me to proceed. |
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. In certain cases (e.g. password reset), `:info` is retained to avoid disclosing too much information (such as the existence of an account). These messages now appear in blue with a "Please note" title. 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
12c9888
to
6f4838c
Compare
Personally I think this introduces a very useful and intuitive option that most people would likely self-implement. An "official" option makes total sense. |
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) :) |
@SteffenDE agreed. |
I will change the color to sky then. |
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.In certain cases (e.g. password reset),
:info
is retained to avoid disclosing too much information (such as the existence of an account). These messages now appear in blue with a "Please note" title.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