nimble-tab alert support

😯 Problem to Solve

Nimble tabs should support displaying a visual "alert" indication. This is needed by SL to indicate active/inactive alarms.

💁 Proposed Solution

Here are some more insights about implementation details from a meeting chat.

[Yesterday 17:38] Brandon O'Keefe

Just a heads up that the Nimble Components spec includes the placement and size of that red dot. In the development spec the state is tagged as Alert_'' ''

Screen Shot 2021-09-23 at 10.34.00 AM.png

Screen Shot 2021-09-23 at 10.37.47 AM.png

[Yesterday 17:44] Lukas LK. Kall

I didn't noticed that while implementing the tabs. We might want to add another property to the element so it's easier to enable the alert. Or even set the color of it 🤔

[Yesterday 17:45] Joshua Prewitt

we will need to set the color since we use it to indicate when there is an active alarm vs inactive alarm that just needs to be acknowledged

[Yesterday 17:46] Milan Raj

We can give it a color as defined by the design system and expose it as a CSS Part where the application consumer can then style however they need 👍

[Yesterday 17:46] Milan Raj

(hopefully with tokens from the design system to represent those different color states)

[Yesterday 17:49] Brandon O'Keefe

Joshua Prewitt
we will need to set the color since we use it to indicate when there is an active alarm vs inactive alarm that just needs to be acknowledged

Also, it will be important to have set the color since the specific red value is different between light and dark modes.

Start by locating the Nimble tabs component and reviewing how its existing states and styling are exposed. Confirm the alert placement, size, configurable color states, and CSS Part expectations against the Nimble Components and development specifications. Done means tabs can show the required alert indication with distinct colors in light and dark modes.