Skip to content

Clear All button and counter badge for the EuiGlobalToastList component #6945

@delanni

Description

@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.

image

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:
image

  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions