nimble-toast Component

[atmgrifter00]

😯 Problem to Solve

There is a desire for Nimble to provide a toast-like component (see AngularJS Material Toast as an example).

Similar to the banner the toast should provide configurations and designs for:

• Severity level - Error, Warning, Info, Neutral/None (Default)
• Whether or not the toast is dismissible by the user.
• Supporting multiple toasts being displayed at the same time.

In addition to providing a Toast component (representative of a single Toast notification), it would also be beneficial to provide a container that would support displaying multiple stacked toast notifications.

The FAST team has a similar issue being tracked, but it is unclear when they will get to it.

💁 Proposed Solution

Other Considerations

Similar to the approach from Carbon Notifications we should consider if this should be separate component or an additional variant of the banner. If so, we will need to rename the banner component.

Nimble Component work

Provide the necessary custom elements to present toast notifications in a specified manner (just stacked, or are there are other presentations that make sense?). Toast notifications should be able to be positioned at different parts of the window (as shown in the AngularJS Material example above).

Nimble Angular work

We should provide a service for Angular clients to consume that will wrap the Nimble toast component and present it as needed. This should be the expected workflow for Angular apps, to use a service to present notifications, so we should provide that as part of Nimble.

Nimble Blazor work

Similar to the Angular work, the Blazor API should provide a service to display toast notifications (see this as an example).

Accessibility Considerations

Consider ARIA live regions for this component
https://web.dev/learn/accessibility/javascript/#page-level-2
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Tasks below are defined with an assumption this will be its own component. If we choose differently, these tasks, will be updated accordingly

Tasks

• Design for toast component #719
• nimble-toast interaction design issue
• nimble-toast interaction design spec
• nimble-toast visual design issue
• nimble-toast visual design spec
• nimble-toast spec
• nimble-toast custom element
• nimble-toast unit tests
• nimble-toast Storybook tests
• nimble-toast Storybook docs
• nimble-toast Angular wrapper
• nimble-toast Blazor wrapper
• Add to Angular example app
• Add to Blazor example app
• Update Component Status table in README