[Snackbar / Banner / Toast / Alert] - consolidate and remove redundant features

[yinonov]

Banner

Addresses a scenario where page notifies a user of an important message in an intrusive manner.

Most UX design name the equivalent vivid banner as banner, some call it toast 🤷‍♂️. Most use the role alert internally. some assign log as role

• w3c school

• w3 aria

• nord

• spectrum

• Atlassian

• Carbon inline

• Carbon Toast

• [ ] Banner - consider renaming to alert?

• [ ] Banner - default to role

A dismissible element requires programmatic handling of user alert and disruption As Banner is no longer a dismissible element, rather has natural flow display, it might not need that programmatic handling

• [ ] Banner - remove programmatic handling of user alert

Snackbar

Addresses a scenario where a page notifies a user of a system occurrences and often requires immediate user attention

Overlaps with Toast

• [ ] Snackbar - consider renaming to log

Some library maintainers allow multiple stacked instances

• [ ] Snackbar - consider allowing stacked instances

[jshenkman]

Carbon has a good 'Notification pattern' explanation with details on all notification (user feedback) components https://carbondesignsystem.com/patterns/notification-pattern/#notification-types.

By design, their inline alert and pattern look the same, but they have different functionalities

Top is inline and bottom is banner

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.

[olaf-k]

reopening as we're still missing one or several component(s) and @AyalaBu is working on that topic.

the Carbon summary @jshenkman linked is a good document to compare to. so here's an attempt:

• banner: used for persistent app-wide notifications. generally presented on top of content. already exists in Vivid.
• inline notifications: mostly used for task-related notifications (forms most of the time?). presented close to related items. does not exist in Vivid.
• toasts: used for ephemeral app-wide notifications. generally showed in a corner above all other content. does not exist in Vivid.

notes:

• our banner displays only centered content atm > should this be customizable? it is also optionally actionable > should it be?
• inline notifications seem to just be our current banner displayed next to task items.
• toasts exist in Vivid 2 as snackbars. the most significant difference being that they appear at the bottom and are not stackable.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[rinaok]

@AyalaBu What should we do with this ticket? Are you still working on the design?

[AyalaBu]

@rinaok The design is finished: https://www.figma.com/file/JJNgZvt1qf3ydYmOwbE3Jg/Vivid-UI-Kit---3.0-WIP?node-id=21271%3A142119&t=DTrdMW2piZjbOokz-1

The component still needs to be migrated.

[AyalaBu]

The issue was moved to JIRA: https://jira.vonage.com/browse/VIV-1009