Design Pattern: dialogs, modals, toasts, errors

[kyleledbetter]

Dialog (Modal)

use when there’s a catastrophic error (like api error) that has a message that can be copied/pasted to give to support -OR- when you want a confirmation “Do you really want to delete this system? - Cancel/Delete"
also: when you use that confirmation, use the Verb “Discard” or “Delete” etc
so, a) Confirmation, bc) catastrophic error w/ details
spec: https://material.google.com/components/dialogs.html

or

Toast/Snackbar

if you just have a status update like “Source saved!” or “Updating…” or “User edited”, used a toast
use a toast/snackbar when the message is just an update or message that can pop in and out, that you’ll never need to copy/paste
used toasts in a non-pervasive top-right or bottom-right corner on desktop, or snackbar on top or bottom of mobile
spec: https://material.google.com/components/snackbars-toasts.html

Inline Errors (Forms/Fields)

Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text.
Error text should reflect your product’s color palette. It’s recommended that you use a contrasting color for error states, such as a warmer hue like red or orange.
Minimize form text to the essentials. Not every text field needs helper and/or error text.

spec: https://material.google.com/patterns/errors.html

[facilpralembrar]

Hi,
For while, what do you recommend using for modal and dialogs?

Regards,

[kyleledbetter]

@facilpralembrar not sure what you mean, by For while

Since dialogs are in the latest angular-material release, Covalent will have them in our next release (Alpha 0.8) around Oct 14th.

We still recommend using them only for verbose/catastrophic error messages (like: API Error! the system doesn't allow this type of upload bc of blah blah blah), or for confirmations (like: Are you really sure you want to delete your bank account? Yeah/Nope)

[facilpralembrar]

Ok. I've got it
Tks

[emoralesb05]

Added docs in #100

[AlexJuca]

Nice work here!