[Notification] Actionable/Persistent variant

[tay1orjones]

Summary

ToastNotification was updated as part of #8406 to use only an accessible role of alert, status, or log in v11. This change meant that Toast would no longer accept interactive elements/buttons/children. This leaves InlineNotification as the only notification component to allow action buttons.

This leaves a big gap for teams needing actionable notifications that mimic the visual styling of a Toast notification.

The proposal here is to add a new notification variant with the following requirements:

• Mimics the visual styling of Toast
  • has constrained width
  • has box shadow
  • is not position: relative;
• Action buttons are required, with potential visual design to indicate primary vs secondary actions
• Always has role of alertdialog
• Can optionally automatically take focus
• Can optionally be closed via pressing esc
• No timeout option
• Proposed naming includes PersistentNotification, AlertDialogNotification, ActionableNotification

I originally intended to deliver this as part of #8560, but it was clear this needed visual/ux design.

[kingtraceyj]

For now, we are going to constrain the amount of action buttons in the new toast to only one action. We had a few iterations of what two action buttons would look like but after much discussion we believe it would be best to stick to one for the time being. We couldn't find that many use cases for two and the ones we did, the actions seemed redundant.

update! We are going with the small tertiary button.

Visual specs for toast with actions

Low contrast (uses light theme small tertiary button)

High contrast (uses dark theme small tertiary button)

[joshua-vaughn]

Cloud Pak for Data and the Cloud Pak Platform have already been including links in toast notifications as these are always accessible later from the Notification list page