Design for toast component

[nate-ni]

Problem to Solve

As a user, I need to display a timely message to the user. This message will likely show up on top of the page. Other characteristics of the component:

1. It may auto-dismiss after a certain time
2. The end user can dismiss it
3. It may have a call to action

Similar component from other design systems are:

Material https://material.angular.io/components/snack-bar/overview

From Carbon (IBM) https://carbon-components-svelte.onrender.com/components/ToastNotification https://next.carbondesignsystem.com/libraries/carbon-react/latest/assets/notification#dashboard Stacked Notifications - https://carbon-for-ibm-products.netlify.app/?path=/docs/security-components-stackednotification--default

Shoelace https://shoelace.style/components/alert?id=toast-notifications

Open Questions

Questions for Interaction Design: Is there a need to display this in different locations? (Top, Bottom, Upper-right, etc.)? Are there any content differences between this component and a banner? Or is it similar types of content displayed in a different way?

## Design Deliverables
- [ ] Interaction Design information
- [x] Visual Design information

[fredvisser]

Visual design is done - waiting for Figma link to design from Brandon

[jattasNI]

https://www.figma.com/file/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?type=design&node-id=1295-65855&mode=design&t=JFE2kEisF4Vf7C9h-0

[jattasNI]

@NIbokeefe the team had some feedback about the current designs for toast:

1. some worries from the Nimble dev team that the red background (and all the solid color backgrounds) are too intense / scary for the types of things we use these for in SLE. They'd be even more overwhelming if multiple appeared at once. I think the sentiment was "we should use that appearance to warn that my server room is on fire but we'd prefer something more subtle for when an operation can't be completed".
2. Trevor hasn't seen the new designs but he was also advocating for subtlety in this SLE PR comment and suggested the Angular Material toast as inspiration

I vaguely recall an outline appearance before. Did we decide to cut that? Or we can brainstorm other ideas at our next meeting.

[NIbokeefe]

@jattasNI

You are recalling correctly, I originally proposed "high severity and low severity" banners which I referred to as "loud" and "quiet" versions.

I'm not opposed to changing direction. I was initially recommending we build both version knowing we might need them for one reason or another down the road.

However, I'd like to discuss this in more detail before being too reactive. I'm assuming we don't have user feedback on this yet and it's mostly internal. I'd like to look at some contextual examples regarding it being too intense. The solid colored design is still very on trend for banners and sufficient for many companies who's errors are soft and not referring to fires.

If we are still only proposing using 1 and only 1 version of the banner I may have a different perspective. The solid banners were favored over outline for a few reasons, one being they were more legible when multiple banners appeared together. On the flip side, I did always like that the outline version for how it visually aligned with errors on components (but that also had the possibility of being problematic for its lack of distinctive design).

[jattasNI]

@NIbokeefe Awesome background! Let's chat about it at this Thursday's meeting if we have time or a future one if we don't.

[jattasNI]

At our team meeting we decided to implement the existing designs so we can try them out in context in applications and see if the feedback still applies.

If the red banner is still too intense for SLE use cases, another option would be for those use cases to mark the banner as info/default instead.

If we still find we need a less intense presentation then we can consider reviving the quiet/outline appearance and coming up with guidance about when to use each.

[jattasNI]

@NIbokeefe I believe the remaining open design questions on this are:

1. any guidance on the prefered screen location for toast? Currently in SLE it's centered at the bottom of the screen but I've also seen other spots in other non-NI apps. It's possible this is an app-specific question and we don't give any guidance.
2. any guidance on stacking multiple toasts? The options I see are front-to-back, vertical stack, or only allow one at a time.
3. any general usage guidance? e.g. Using toast vs banner? Using toast vs invalid state on components? Automatically dismissing after a few seconds or after the error state has cleared?

This is all less urgent than other work right now like the table and combobox/select, so feel free to prioritize it lower.

[NIbokeefe]

Notification design relates to a bigger interaction discussion which @leslieab has showed interest in pursuing. For the time being I'll provide some guidance based on the information we have now for the designs I have created.

I updated the Toast/Banner document with as much usage guidance as I have available to provide: https://www.figma.com/file/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?type=design&node-id=1295%3A65855&mode=dev

1. This may vary slightly application to application and also depending on the notification type: auto-dismissing vs user dismissible. I've provided guidance in the spec document and will also provide more insight at line 3.

2. I've provided guidance in the spec document.

3. I've provided guidance in the spec document. a. Toast vs Banner - Defined See details in spec doc. Banners are inline controls and workspace specific. Toast are non-obstructive/non-modal - low severity application wide notifications. b. Using toast vs invalid state on components - Defined- Banners should be used instead as they often relate to invalid states located inline to a specific workspace in the IDE. Toast notifications should be used as non-modal unobstructive application wide notifications of low severity and unrelated to a specific control. c. Automatically dismissing -Defined- We should support this feature and this should only use the standard versioned (grey) toast visual design; no important information should be displayed in an auto-dismissing notification. This type of notification should align to the center-bottom position easily visible and should not stack/group with multiple notifications. Auto-dismissing versions can be configured to remain active for 5-10 seconds and by default 8 seconds.

All other user-dismissible toast should be located bottom-right aligned and can use any version of the status types. These types of toast can stack/group up to 3 notifications at one time.

More detailed information is available in the spec.

[NIbokeefe]

*** Closed this issue accidentally

[fredvisser]

@fredvisser - TODO: Extract the IxD recommendation into an IxD spec