Implement OnyxAlertDialog

[larsrickert]

Why?

We want to offer a pre-build alert dialog component that can be used to quickly implement common alert dialogs (e.g. delete or confirm dialogs).

Internally, the component uses our existing generic OnyxDialog component.

Open questions / TODOs

No response

Depends on

No response

Design

Figma design

Acceptance criteria

• the component shows a required headline
• a close "x" button is shown in the top right corner to close the dialog, should use the OnyxSystemButton
• custom content can be passed via a slot for the main dialog content
• a slot for custom right-aligned buttons can be used
• an optional icon can be displayed. The icon and the color can be changed
• check if we want to have a dedicated group in the Storybook sidebar

Implementation details

• the close "x" button might be considered to be implemented inside the OnyxDialog for all modals
• for the internally used OnyxDialog, both modal and alert property are always set

export type OnyxAlertDialogProps = Omit<OnyxDialogProps, "modal" | "alert">;

Reference implementations

No response

Applicable ARIA Pattern

Alert dialog pattern

Definition of Done

• The following component requirements are implemented:

  • density
  • example usage added to apps/demo-app/src/views/HomeView.vue

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma

Approval

Storybook
Documentation

• Checked and approved by
  • designer
  • dev