Rethink "messaging" components
Problem
We have multiple components that are simply for conveying different types of messages. Within those components there are also variants. This has created a rather complex decision tree of what to use and when. When you start to layer on additional factors, like underlying semantics (especially for alerts and toast), page hierarchy, keyboarding, and other options, the complexity increases.
| Component | Purpose | Variants | Options | Triggered by | Notes |
|---|---|---|---|---|---|
| Alert | An alert is a system generated, contextual, and timely message to a user that may or may not result from their action. | Danger Warning Success Info Tip |
Dismiss Title Actions Sticky |
System User action Authored |
Currently, a lot of content uses an alert based on styling alone, and not to take advantage of the underlying semantics. See gitlab-org&7538 (comment 837885210) for more considerations. |
| Banner | A banner promotes awareness of a new feature or high-priority research initiative. | Introduction Promotion |
Dismiss | Authored | A banner can get confused with the info or tip alert variants. Banner hierarchy and visual weight can also be problematic. |
| Broadcast message | A broadcast message delivers an instance level message from the admin to all users. | Admin Overlay (not in Pajamas, but used in the product) |
Dismiss Actions |
Admin | |
| Toast | A toast displays a short system message as a result of a user's action. | Default | Dismiss Action |
User action | A toast message can be confused with, and has a bit of overlap with a success alert. |
Concept
Hypothesis: Minimizing the number of components and overlaps increases likelihood of correct use, reduces design decisions, streamlines design and UX, and benefits accessibility.
Streamline the above into the following:
| Component | Purpose | Variants | Options | Triggered by | Notes |
|---|---|---|---|---|---|
| Alert | An alert is a system generated, contextual, and timely message to a single user. | Danger Warning |
Dismiss Title Actions Sticky |
System User action |
See gitlab-org&7538 (comment 837885210) for more considerations. A change like this allows the correct semantics and ARIA to be baked in while not calling static content an "alert" just because the style is what's desired. |
| Notice | A static (authored) message for multiple users. | Critical Info Neutral Product |
Dismiss Title Actions Image |
Admin Authored |
A notice absorbs static (authored) alerts, banners, and broadcast messages which all currently live in the page as static content available on page load. A "product" variant accounts for the current broadcast messages that appear as an overlay in the lower right of the window and contain GitLab specific messages. |
| Toast | A toast displays a short system message as a result of a single user's action. | Default | Dismiss | User action | Like an alert, a toast has specific semantics and different enough styling to be kept separate, see gitlab-org&7672 for more details. |
Note that this doesn't go deep into handling multiples of each of the above, but it would have to be solved for each type of component with consideration for context.
Design exploration
TBD
Out of scope
Anything to do with notifications