Clear All button and counter badge for the EuiGlobalToastList component

[delanni]

Is your feature request related to a problem? Please describe.
The problem is not a developer problem, but it's a common, and frustrating issue users are facing. It's around overloading them with toast messages. See the longer threads here: elastic/kibana#116686, and here: elastic/kibana#161482

We agreed, we'd add a close all button to the notification container. However, it is not easy, and very error prone to implement this outside of EUI, and expect the button to be in the right place (because the EuiGlobalToastList is an absolutely placed/fixed component on the screen).

We've also agreed that toasts whose content is identical to a toast that is already on the screen will be combined into a single toast. We will show a badge on the top right concern of the toast, displaying the number of times that message is repeated

Describe the solution you'd like
We'd like a button to close all displayed toasts. An idea is to place this button just below all the toast. For the badge, we suggest the use of a EuiNotificationBadge in size m and subdued color.

Describe alternatives you've considered
For the Clear all button, we've considered:

• a button in a toast message - it's a bit ugly looking (unnecessary toast-notification-like look), and a bit more convoluted to manage as a virtual toast-message
• a button outside the EuiGlobalToastList - this is hard to place to the right place

For the badge, we've considered:

• a EuiNotificationBadge in the toast's title, aligned vertically
• a EuiNotificationBadge in the toast's title, aligned top

Additional context
elastic/kibana#116686
elastic/kibana#161482

[JasonStoltz]

Thank you @delanni. The team will discuss this early next week and try to get it prioritized. We'll also seek input from design. Do you have a desired timeline for this?

[delanni]

I don't think it's urgent. I think we can still deliver some user value without this improvement just by deduplicating toasts, we can add the button later on. So I don't think we have a timeline.

[ryankeairns]

I mentioned this in the Kibana issue, but Clint had some feedback around how this will look for very long titles. With the badge at the end of the text, it will both move around and could appear at the extreme right end next to the close icon.

This is rather subjective but perhaps we place it in front, instead:

[JasonStoltz]

An accessibility consideration: This button will need to be easy to navigate to from the same context as the toasts -- so being able to tab through toasts to the "Clear All" button.

@ryankeairns @andreadelrio Have ya'll reviewed this from a design standpoint?

[1Copenut]

I wanted to add two additional a11y considerations:

1. The Clear all button background needs a 3:1 or greater contrast ratio to adjacent background colors. The example made me think of this; the light blue button might not meet that threshold against a light gray background.
2. We'll need accessible labels for the Clear all button and the number blocks. Accessible labels could be something like "Clear all toast messages" and "Title of toast. This message appears 12 times" or "Title of toast. 12 duplicated messages."

[JasonStoltz]

@petrklapka @delanni We identified this as a "Medium" priority in our grooming meeting, which means it's not likely to get worked on in the near future. Please let us know if you believe this warrants a higher priority, or if you need a particular timeline for this request.

[eokoneyo]

Hi @JasonStoltz! I'm looking into the "clear All" button requirement of this issue, to accommodate another requirement for toast improvements in kibana (see here elastic/kibana#162646), I've put together a PoC (code is available here #7111) that takes into account couple of considerations already raised about implementing the "close all" button. I'd be curious to know if this fits into the direction the team would like to tackle including the clear all button.

[eokoneyo]

Update: the implementation to include a clear all button in EUI got merged and landed in version 88.3.0, that still leaves the second part of the request; adding a counter badge, but for what it's worth, an implementation for this has been shipped within Kibana.

[JasonStoltz]

@eokoneyo Great, thanks! Should we close this issue?

[eokoneyo]

@eokoneyo Great, thanks! Should we close this issue?

Yes let's close it, the feature request was opened to fulfil requirements within Kibana that have been catered to.