juliapedrosaxx commented 4 months ago

Propose a new pattern ✨

A toast is a non-modal dialog that appears and disappears (overlaying) with the purpose of displaying information that requires minimal user interaction. Toasts can close automatically after 5 seconds, or they may require manual close action.

An actionable notification toast variant displays non-critical information and allows for interactive elements. It can be highly disruptive, differing from toast default, once the actionable notification is read by screenreader when it appears.

Visual

Figma prototype.

Context

This pattern, which allows for interactive elements, should be used to display non-critical information in the user flow. Avoid using long messages since this component disappears automatically, which could make it difficult for users to read the entire message.

When using Tab, the focus moves in logical order to buttons or links inside the toast.
It shouldn't block the user from interacting with the interface.
Use the dismiss icon to close flags. The flag must close after an action is taken, or after 5 seconds. If the flag receives hover status, it should be kept open.
Try to keep the text of the message concise: it can be up to two lines in length.

State

Badge: True/False

Accessibility

The toast message is read when it appears.
When using Tab, the focus moves in logical order to buttons or links inside the toast.
When given focus, space key and enter key activate any buttons inside. The toast can optionally be closed with Escape key.
If it is possible to close the toast, focus then returns to a logical place in the page.
The close button is given an ARIA label of aria-label="close", and the icon has aria-hidden="true" so it is ignored by assistive technologies.

juliapedrosaxx commented 4 months ago

References: Magentaa, MUI and Carbon.

romulofer commented 3 months ago

QA

For reference, here is an example of implementation for this component:

larissadallagnol commented 3 months ago

QA

Currently, some component paddings are different from the prototype.

Title padding

How it is: 0px 16px 8px 16px How it should be: 0px 0px 4px 16px

Title image

![title](https://github.com/laboratoriobridge/bold/assets/110857802/deb67f6b-e318-47c1-b4bc-be72549e3928)

Message padding

How it is: 0px 16px 8px 16px How it should be: 0px 0px 8px 16px

Message image

![message](https://github.com/laboratoriobridge/bold/assets/110857802/391540ec-24df-42be-9e92-4f051354fb3a)

laboratoriobridge / bold

[TOAST] Actionable notification #844