Implement OnyxToast

[BoppLi]

Why?

A component for immediate feedback on user actions is needed.
Info: A Notification Center will be implemented at a later stage.

Design

• Figma

Acceptance criteria

• [x] storybook shows different color settings: neutral, danger, warning, success
• [x] a toast supports icon (optional), title (required!), description (optional)
• [x] truncation is implemented
  • truncate title: 1 line
  • truncate description: max 3 lines, after that the text gets scrollable
• [x] default: autoclose is implemented
  • [x] timer duration can be overwritten (default: 5sec)
• [x] manual close with "x" at the top right is provided
• [x] Interactivity: optional mode to make the toast clickable -> must be accessibly by keyboard too!
  • [x] when interactive, the cursor becomes a pointer

Out of scope

• How a toast works in combination with bottom bars

• 1299

• 1300

• 1301

Definition of Done

• The following component requirements are implemented:
  • [x] density
• [x] covered by component tests
• [x] screenshot tests are updated
• [x] updated version + documentation is deployed
• [x] Storybook can show the feature
• [x] Storybook code snippet of new/changed examples are checked that they are generated correctly
• [x] Set task to In Approval

Approval

• Storybook
• [x] approved by designer @mj-hof
• [x] approved by dev @BoppLi

Implementation Details

• uses the popover api for the Toaster
• emits click event if clickable is true
• toast properties:

  { 
  title: string; 
  description?: string;
  color: 'neutral' | 'danger' | 'warning' | 'success';
  durationMs?: number /* defaults 5000 */;
  clickable?: boolean
  icon?: string }

Reference implementations

• https://ui.nuxt.com/components/notification#usage
• https://core-ui.schwarz/components/scu-toast-controller

Aria Pattern

• Alert

[BoppLi]

will aprove once the icon-less variant is in Storybook 😊