Implement OnyxModalDialog

[larsrickert]

Why?

We want to offer a pre-build modal dialog component that can be used to quickly implement common dialogs (e.g. with a headline, content and bottom bar).

Internally, the component uses our existing generic OnyxDialog component.

Design

Figma

Acceptance criteria

• a close "x" button is shown in the top right corner to close the dialog, uses the OnyxSystemButton
• the props are implemented as described in the implementation details below
• custom content can optionally be passed via a head slot for the head, which will overwrite the default titleand subtitle
• custom content can optionally be passed via a content slot for the main dialog content
• title, subtitle and description are still made available using aria-labelledby and aria-describedby when head and content slots are used.

Out of scope:

• a bottom bar can be shown

Implementation details

• the close "x" button is implemented inside the OnyxDialog configurable per prop for all modals

const props = defineProps<{
  /**
   *  Headline shown at the top of the component. Will be used as `aria-label` of the dialog. Will not be visiblly shown, when `head` slot is used.
   */
  title: string;
  /**
   *  Subtitle shown beneath the title.  Will also be used as `aria-label` for the dialog. Will not be visiblly shown, when `head` slot is used.
   */
  subTitle?: string;
  /**
    * The text shown in the dialog.
    */
  description: string;
}>;


const slots = defineSlots<{
  /**
   * Will hide `title` and `subtitle` props, and show the slot content instead. They will still be used as aria-labels for the screenreader.
   */
  head?: unknown
  /**
   * Will hide `description` and show this slot content instead. `description` will still made be available for screen readers.
   */
  head?: unknown
}>();

export type OnyxModalDialogProps = Omit<OnyxDialogProps, "modal">;

Applicable ARIA Pattern

Modal 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