nimble-banner Component

[m-akinc]

👩🏽‍🤝‍👩🏼👨🏻‍🤝‍👨🏾 Feature Team

Feature Lead: @m-akinc
Feature Tech Lead: @jattasNI
Feature Manager: @fredvisser
Product Manager: @nate-ni
IxD: @leslieab
ViD: @NIbokeefe

😯 Problem to Solve

We need a banner to provide information to the user.

For ease of use, the banner should be simply configured without requiring knowledge of the Nimble Design token system or the need to hardcode design information into the instance of the component (colors, sizing, etc.).

This feature is for more persistent/static notifications. There is another component (currently called toast) that would be used for a temporary, overlay style notifications.

💁 Proposed solution

In scope

• The banner will support common design system features (theme awareness, multi-platform support, etc.)
• The user should be able to easily configure a severity level/variant for the banner - Error, Warning, Info, Neutral/None (Default)
• The user should be able to easily configure whether or not the banner is dismissible.
• More than one banner should be able to be displayed at a time.

Out of scope

Supporting arbitrary content in the banner.

Open questions

Question	Initial Recommendation	Answer	Resolved
Do we need to support links or button(s) in the banner or is just text?	Unless there are existing needs, No	Yes	Yes
Do we need to support raw HTML?	No	No	Yes
Do we need to provide a "container" for multiple banners?	No	No	Yes

Banners references from other Design Systems

https://spectrum.adobe.com/page/alert-banner/
https://carbondesignsystem.com/components/notification/usage/
https://atlassian.design/components/banner/examples

Some examples of banner screenshots

Visual Design

• Banner Enhancements #724

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

Beta Give feedback

1. Open questions resolved
2. Banner Enhancements #724
   UX-Deprecated +1
   
3. Banner spec #994
   +0
4. nimble-banner custom element
5. nimble-banner unit tests
6. nimble-banner Storybook tests
7. nimble-banner Storybook docs
8. nimble-banner Angular wrapper
9. Add to Angular example app
10. nimble-banner Blazor wrapper
11. Add to Blazor example app
12. Update Component Status table in README

Related PRs

Beta Give feedback

1. Banner spec #994
   +0
2. Banner component #1036
   +0
3. Blazor support for banner #1063
   +0
4. Angular support for banner #1062
   +0
5. Define type for banner toggle event detail #1065
   +0

[jattasNI]

Related: awaiting some UX input from #724

[mollykreis]

Whether or not the banner is dismissible should be configurable.

Potential use-case for a non-dismissible banner from azdo feature 1919090: User sees 401 page when unauthorized to view an application:

The landing page shows a persistent error affordance stating the user does not have a role assigned and to contact their SystemLink administrator

[mollykreis]

@nate-ni, your current recommendation is not supporting arbitrary content in the banner, but my initial reaction is that limiting to purely string content is too prohibited. In fact, most of the screenshots you show as examples have additional content. I think a common use case will be putting a link in the banner to get extra help or more information. Therefore, I think we should let clients put more content, such as anchors, within their banner.

[jattasNI]

Do we need to support links or button(s) in the banner or is just text?

I found one example in SLS where a banner contained a link (source).

It would be worth checking with the PM or UX designer for SLE licensing to see if the SLE Licensing feature has a similar requirement.

[nate-ni]

It's great to see an example. Translating that to the nimble banner would probably be like:

If we provide a version with link or button for the action.
Text - "The SystemLinkServer - Advanced license...yada...will be archived."
Link or Button - "Learn more"
Close - True (This would take the place of the OK button)

[nate-ni]

I think we should let clients put more content, such as anchors, within their banner.

@mollykreis, thanks for the input. We have added the ability to provide a link or command into the banner. From the visual design, urls will get presented as links and commands will get presented as a button. We'll only support one for now, I believe, but can definitely expand on that in the future if needed.