diff --git a/.changeset/thirty-jobs-reflect.md b/.changeset/thirty-jobs-reflect.md new file mode 100644 index 0000000000..dffa627907 --- /dev/null +++ b/.changeset/thirty-jobs-reflect.md @@ -0,0 +1,5 @@ +--- +"sit-onyx": minor +--- + +feat: implement `OnyxAlertDialog` component diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-edge-linux.png new file mode 100644 index 0000000000..bafe9cd418 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-firefox-linux.png new file mode 100644 index 0000000000..820f4dfb73 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-webkit-linux.png new file mode 100644 index 0000000000..1b33ab8e3d Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-2xs-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-edge-linux.png new file mode 100644 index 0000000000..3efcbcd920 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-firefox-linux.png new file mode 100644 index 0000000000..3a24f0a6b7 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-webkit-linux.png new file mode 100644 index 0000000000..ff151938b5 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-sm-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-edge-linux.png new file mode 100644 index 0000000000..34852e25a8 Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-firefox-linux.png new file mode 100644 index 0000000000..15e0ce76db Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-webkit-linux.png new file mode 100644 index 0000000000..a8eb8d3edb Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxAlertDialog/breakpoint-xs-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-edge-linux.png index 8cd0de6b44..c5ef4c34c6 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-firefox-linux.png index 9a3261364d..0deaba2043 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-webkit-linux.png index 0a11f7dfb1..4e8da70af3 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-2xs-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-edge-linux.png index cada4ba266..c1b438945c 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-firefox-linux.png index 4bd38a3dd2..18d2bb5eee 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-webkit-linux.png index d1d56db876..3b7c7391a1 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-lg-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-edge-linux.png index 345333963b..e7970243d9 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-firefox-linux.png index 628f52881d..0b4f6bc473 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-webkit-linux.png index ab2560bcd6..3fb2464eb8 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-md-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-edge-linux.png index 1fc0f482a9..208265594d 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-firefox-linux.png index b43eb29270..35b41ea1f8 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-webkit-linux.png index b60bf985cd..e9866fe6d6 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-sm-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-edge-linux.png index 903dd4a730..a1e577f2cd 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-firefox-linux.png index 5ea0bdce00..79de9f1bba 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-webkit-linux.png index b3107e3590..b7036a98b8 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xl-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-edge-linux.png index 09341bfbe5..c1b9e5ca6d 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-firefox-linux.png index a797d72431..c56a0c833b 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-webkit-linux.png index 63cf9d907d..65f144df78 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/breakpoint-xs-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-edge-linux.png index ccd1e0bd83..41b6398805 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-firefox-linux.png index 0fa0c1bac7..2a0007800f 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-webkit-linux.png index f5707aed57..fcb37f2df1 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/long-content-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-edge-linux.png index eaa2605b34..f1e847bea3 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-firefox-linux.png index 23e02c5666..d75b6ac7bf 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-webkit-linux.png index fdfc73987f..d6b799a0e5 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxDialog/modal-webkit-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-edge-linux.png index b0fc5be0fa..d6fec05911 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-edge-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-edge-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-firefox-linux.png index 629d95e192..5428961d18 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-firefox-linux.png differ diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-webkit-linux.png index 1c189bb9b8..bb8e78e7da 100644 Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/modules/OnyxColorSchemeDialog/Color-scheme-dialog-webkit-linux.png differ diff --git a/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.ct.tsx b/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.ct.tsx new file mode 100644 index 0000000000..74d9758f66 --- /dev/null +++ b/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.ct.tsx @@ -0,0 +1,37 @@ +import { ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints"; +import { expect, test } from "../../playwright/a11y"; +import TestWrapperCt from "./TestWrapper.ct.vue"; + +test.describe("Screenshot tests", () => { + for (const breakpoint of ["2xs", "xs", "sm"] as const) { + test(`Screenshot ${breakpoint}`, async ({ mount, makeAxeBuilder, page }) => { + await page.setViewportSize({ width: ONYX_BREAKPOINTS[breakpoint] + 1, height: 256 }); + + // ARRANGE + await mount(); + + // ASSERT + await expect(page).toHaveScreenshot(`breakpoint-${breakpoint}.png`); + + // ACT + const accessibilityScanResults = await makeAxeBuilder().analyze(); + + // ASSERT + expect(accessibilityScanResults.violations).toEqual([]); + }); + } +}); + +test("should behave correctly", async ({ mount }) => { + let closeEventCount = 0; + + // ARRANGE + const component = await mount( closeEventCount++} />); + const closeButton = component.getByRole("button", { name: "Close dialog" }); + + // ACT + await closeButton.click(); + + // ASSERT + expect(closeEventCount).toBe(1); +}); diff --git a/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.stories.ts b/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.stories.ts new file mode 100644 index 0000000000..c378adda82 --- /dev/null +++ b/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.stories.ts @@ -0,0 +1,55 @@ +import circleAttention from "@sit-onyx/icons/circle-attention.svg?raw"; +import type { Meta, StoryObj } from "@storybook/vue3"; +import { h, ref, watchEffect } from "vue"; +import OnyxButton from "../OnyxButton/OnyxButton.vue"; +import OnyxAlertDialog from "./OnyxAlertDialog.vue"; + +/** + * The alert dialog is used to provide important information to the user. + * Note that this dialog is an [alert dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). + * It interrupts the user's workflow to communicate an important message and acquires a response, e.g. a delete confirmation. + * + * You can also implement a custom dialog using the [OnyxDialog](/docs/support-dialog--docs) component. + */ +const meta: Meta = { + title: "Feedback/AlertDialog", + component: OnyxAlertDialog, + argTypes: { + default: { control: { type: "text" } }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default = { + args: { + label: "Confirm deletion", + default: + "Are you sure that you want to delete the selected item? This action can not be reverted.", + icon: { + icon: circleAttention, + color: "danger", + }, + actions: [ + h(OnyxButton, { label: "Cancel", color: "neutral", mode: "plain", autofocus: true }), + h(OnyxButton, { label: "Delete", color: "danger" }), + ], + }, + decorators: [ + (story, ctx) => ({ + components: { story, OnyxButton }, + setup: () => { + const isOpen = ref(false); + watchEffect(() => { + ctx.args.open = isOpen.value; + }); + return { isOpen }; + }, + template: `
+ + +
`, + }), + ], +} satisfies Story; diff --git a/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.vue b/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.vue new file mode 100644 index 0000000000..1c21add750 --- /dev/null +++ b/packages/sit-onyx/src/components/OnyxAlertDialog/OnyxAlertDialog.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/packages/sit-onyx/src/components/OnyxAlertDialog/TestWrapper.ct.vue b/packages/sit-onyx/src/components/OnyxAlertDialog/TestWrapper.ct.vue new file mode 100644 index 0000000000..8e27800195 --- /dev/null +++ b/packages/sit-onyx/src/components/OnyxAlertDialog/TestWrapper.ct.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/sit-onyx/src/components/OnyxAlertDialog/types.ts b/packages/sit-onyx/src/components/OnyxAlertDialog/types.ts new file mode 100644 index 0000000000..d9cb35c761 --- /dev/null +++ b/packages/sit-onyx/src/components/OnyxAlertDialog/types.ts @@ -0,0 +1,9 @@ +import type { OnyxDialogProps } from "../OnyxDialog/types"; +import type { OnyxIconProps } from "../OnyxIcon/types"; + +export type OnyxAlertDialogProps = Omit & { + /** + * Optional icon to show. + */ + icon?: Omit; +}; diff --git a/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.stories.ts b/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.stories.ts index d63ced5557..1f4b6cf6c1 100644 --- a/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.stories.ts +++ b/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.stories.ts @@ -8,7 +8,7 @@ import OnyxDialog from "./OnyxDialog.vue"; * If using the `modal` mode, the primary page content will not be interactive. */ const meta: Meta = { - title: "Feedback/Dialog", + title: "Support/Dialog", component: OnyxDialog, argTypes: { default: { control: { type: "text" } }, diff --git a/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue b/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue index 772ef58da0..dcd16d394c 100644 --- a/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue +++ b/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue @@ -82,7 +82,7 @@ watch( border-radius: var(--onyx-radius-md); font-family: var(--onyx-font-family); color: var(--onyx-color-text-icons-neutral-intense); - padding: var(--onyx-density-lg); + padding: var(--onyx-density-md) var(--onyx-density-lg); background-color: var(--onyx-color-base-background-blank); overflow: auto; z-index: var(--onyx-z-index-page-overlay); @@ -104,6 +104,7 @@ watch( &:modal { z-index: var(--onyx-z-index-app-overlay); + box-shadow: var(--onyx-shadow-soft-bottom); } } } diff --git a/packages/sit-onyx/src/i18n/locales/de-DE.json b/packages/sit-onyx/src/i18n/locales/de-DE.json index e84b2ba371..5a1f1f75f1 100644 --- a/packages/sit-onyx/src/i18n/locales/de-DE.json +++ b/packages/sit-onyx/src/i18n/locales/de-DE.json @@ -128,5 +128,8 @@ }, "input": { "clear": "Eingabe löschen" + }, + "dialog": { + "close": "Dialog schließen" } } diff --git a/packages/sit-onyx/src/i18n/locales/en-US.json b/packages/sit-onyx/src/i18n/locales/en-US.json index d3eaad2fbe..de7d9c0772 100644 --- a/packages/sit-onyx/src/i18n/locales/en-US.json +++ b/packages/sit-onyx/src/i18n/locales/en-US.json @@ -137,5 +137,8 @@ }, "input": { "clear": "Clear input" + }, + "dialog": { + "close": "Close dialog" } } diff --git a/packages/sit-onyx/src/index.ts b/packages/sit-onyx/src/index.ts index 07271977e7..7b06aa1c36 100644 --- a/packages/sit-onyx/src/index.ts +++ b/packages/sit-onyx/src/index.ts @@ -2,6 +2,9 @@ import "./styles/index.scss"; export { ONYX_BREAKPOINTS, type OnyxBreakpoint } from "@sit-onyx/shared/breakpoints"; +export { default as OnyxAlertDialog } from "./components/OnyxAlertDialog/OnyxAlertDialog.vue"; +export * from "./components/OnyxAlertDialog/types"; + export { default as OnyxAppLayout } from "./components/OnyxAppLayout/OnyxAppLayout.vue"; export * from "./components/OnyxAppLayout/types";