Messages

[dontpanicgr]

About messages in Tx.
This is an attempt to capture the meaning of each element in few lines.

Flag messages
Flag messages are used for confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages provide simple feedback about an operation performed in a small popup.

System messages
System messages are used to display system feedback after a user action or a system's background task or process and usually don't offer actions to users.

Modal messages
Modal messages are used to initiate a dialog between the system and the user. They can have information, actions, options or stepped wizards but can also be simple and informative.

Tooltip messages
Tooltip messages consist of a message that's revealed when a user hovers over an icon or element. They are used to provide additional context and important information to users.

Notifications
Notifications appear at the very top of the screen and shift the content below it. They are used for critical system-level messaging.

//

@mikegianno @codegaze @nbasili
Feedback, comments ⇣

[mikegianno]

I think Flag and System messages overlap a bit and we might need to separate them. If we do that on TxDS then we will feel more confident to apply in our platform too!

Also I believe we need better names for: Flag, System, Notification, Modal that we can easier communicate the purpose of their usage. A proper names always helps you adjust when in doubt of what to use.

[mikegianno]

On the light of issue #18 I think we could use a more abstract layer to describe messages. So the process could start by answering the abstract question and then choosing one of the available options per case.

Proposal:

Feedback message: which is triggered AFTER a user's action, with the purpose to inform on the outcome of that action (after a form submission, after a button click, after user changing the input of a field....)
State message: to signify the state of the system is currently in due to various parameters (in trial, org. locked due to X, system maintenance in XXX, a process is running on the background at this time....)
Informational message: to inform on functionality of an element, component or page (tooltips on an element, helptext, onboarding modals, onboarding bubbles...)