"Above-header" error message component gets easily lost

[dkoo]

Is your feature request related to a problem? Please describe. As @miguelpeixe and I were discussing in #1424, the wizard's error message component that appears at the very top of the wizard gets visually lost very easily:

• It's relatively small compared to other elements on the page, so it doesn't stand out much
• It appears in a location that's likely very far away from the last element interacted with on the page (the "save" button at the bottom of the page, in the example above), so you're likely not focused on where it will render
• If the page is long enough to be scrolled down at all, it will likely render completely outside of the viewport

Describe the solution you'd like Ideally, error messages should be shown in a prominent location near the point of interaction that triggered the error, or in an unmissable place (like in a modal overlay). Can we establish a new standard style/location for error messages in wizard pages?

[thomasguillot]

Agreed. We should keep the "error" message at the top only for newspack debug

in fact, we could probably redesign the debug warning

[dkoo]

I dig the new design in your second screenshot! Although, it still might get lost on screens with a lot of vertical scroll (e.g. the Site Design wizard). Should we consider showing it directly above the "cancel"/"save" buttons so it's close to the point of interaction?

[adekbadek]

Another idea – "toaster" overlay messaging. Surely won't get lost. Edit: as @thomasguillot suggested, Gutenberg offers the Snackbar component

[thomasguillot]

The Snackbar component doesn't seem reliable outside of the editor at the moment.

Might be worth creating our own light Toaster/Snackbar component.

[thomasguillot]

Let's use a toaster component and I can style it like the snackbar.

• https://fkhadra.github.io/react-toastify/introduction/
• https://react-hot-toast.com/ <- I like the simplicity of this one