Success flash message is not styled on new accounts forms

[seanh]

What this used to look like:

[sean-roberts]

@conordelahunty @seanh is there a spec for what we want this to look like?

[robertknight]

Quick suggestion - Perhaps we could make this a feature of the saving status indicator? eg. After saving completes, it would display the flash message briefly and then fade away?

[ghost]

@sean-roberts @robertknight That's not a bad idea. Will that work with all our flash messages? I assume we have a failed message too?

[robertknight]

I assume we have a failed message too?

For forms, validation error messages are rendered inline in the form itself. In future we might have use cases where there are other kinds of error message reported via flash messages.

[seanh]

If/when this is done I'd like to request that it works without js as well (as normal flash messages would) then enhance if the js version is better

[dwhly]

I'm late to the game, but don't many sites simply reuse the button to indicate the status? In other words, the Change email address button once clicked changes to "Saving " with the circle, and then "Saved" once it's done. Change any text in the boxes after that and the button goes back to "Change email address".

[seanh]

Will this saved message on the button thing work? Currently the save and cancel buttons disappear when the form is saved:

So there's no button there anymore to say "Saved" on it. Is the suggestion that the button remain visible for a couple of seconds to say "Saved" and then disappear?

[seanh]

We might want to have a fallback behaviour for when javascript is not available, as temporarily changing the text on the button won't work without javascript.

Currently, when javascript isn't available, there's no cancel button and the save button doesn't disappear, it's always visible. Hit save, form submission and full page reload, new value is saved and reloaded page is still showing the save button and is additionally showing a success message:

So a simple suggestion would be to just put the success message beside the save button instead of up top where it currently is:

And we should probably change it to just say "Saved" as well.

What do people think of that as a no-js fallback behaviour?

Unfortunately it would not work when js is available, even as a temporary stop-gap solution until we implement something like the changing button text idea, because the Save button disappears you can't put text beside it (and also the Cancel button is in the way). (It's usually nice, when you implement a no-js fallback behaviour, if it can also stand in when js is available until the fancier js version is implemented.)

[justinthrelkeld]

Joining in here... a couple of thoughts if there's still room in the conversation:

I agree with the discussion so far that a non-JS fallback behavior is important, and that it should be consistent with the JS enhanced behavior. Which leads me to my first question: why does the save button disappear currently and can that behavior be easily changed?

Perhaps the cancel button it can be removed to make room for the flash message to render and the save button can start out lightened when JavaScript is available and darken when the form is edited. With JavaScript enhancements, the cancel button could also be added on edit. Without JavaScript, cancel would likely just serve the same function as backwards navigation and may be considered redundant.

This creates a clear indication of state: a sort of active/inactive state that's more obvious than the appearing button scenario and a consistent home for the flash message whether JS is available or not. Just keep in mind the success message is the most important part of the newly reloaded page and should be displayed appropriately in the content flow for screen readers and text-based browsers and be clearly visible after the non-JavaScript page refresh. If this is something to discuss I can work up an image to illustrate.