diff --git a/.changeset/afraid-mugs-argue.md b/.changeset/afraid-mugs-argue.md new file mode 100644 index 0000000000..95aa9a5904 --- /dev/null +++ b/.changeset/afraid-mugs-argue.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": minor +--- + +feat(core/message): add options to set size and position diff --git a/packages/core/src/components/utils/modal/index.ts b/packages/core/src/components/utils/modal/index.ts index 0dca7a3bc3..3af9622a81 100644 --- a/packages/core/src/components/utils/modal/index.ts +++ b/packages/core/src/components/utils/modal/index.ts @@ -8,7 +8,7 @@ */ export { showModalLoading } from './loading'; -export { showMessage } from './message'; +export { MessageConfig, showMessage } from './message'; export { closeModal, dismissModal, diff --git a/packages/core/src/components/utils/modal/message.ts b/packages/core/src/components/utils/modal/message.ts index c36ce1ea12..e264355831 100644 --- a/packages/core/src/components/utils/modal/message.ts +++ b/packages/core/src/components/utils/modal/message.ts @@ -9,6 +9,13 @@ import { getCoreDelegate } from '../delegate'; import { TypedEvent } from '../typed-event'; +import { ModalConfig } from './modal'; + +export type MessageConfig = Omit< + ModalConfig, + 'content' | 'title' +> & + MessageContent; function setA11yAttributes(element: HTMLElement, config: MessageContent) { const ariaDescribedby = config.ariaDescribedby; @@ -32,7 +39,8 @@ function createConfirmButtons( payloadOkay?: any, payloadCancel?: any ) { - let actions = []; + let actions: MessageAction[] = []; + if (textCancel !== undefined) { actions = [ ...actions, @@ -41,7 +49,7 @@ function createConfirmButtons( text: textCancel, type: 'cancel', payload: payloadCancel, - }, + } as MessageAction, ]; } return [ @@ -51,26 +59,28 @@ function createConfirmButtons( text: textOkay, type: 'okay', payload: payloadOkay, - }, + } as MessageAction, ]; } +export type MessageAction = { + id: string; + type: 'button-primary' | 'button-secondary' | 'okay' | 'cancel'; + text: string; + payload?: any; +}; + export type MessageContent = { icon: string; iconColor?: string; messageTitle: string; message: string; - actions: { - id: string; - type: 'button-primary' | 'button-secondary' | 'okay' | 'cancel'; - text: string; - payload?: any; - }[]; + actions: MessageAction[]; ariaLabelledby?: string; ariaDescribedby?: string; }; -export async function showMessage(config: MessageContent) { +export async function showMessage(config: MessageConfig) { const onMessageAction = new TypedEvent<{ actionId: string; payload: T; @@ -103,8 +113,7 @@ export async function showMessage(config: MessageContent) { }) ); return; - } - if (type === 'cancel') { + } else if (type === 'cancel') { button.variant = 'primary'; button.outline = true; button.addEventListener('click', () => @@ -150,6 +159,9 @@ export async function showMessage(config: MessageContent) { } ); + setA11yAttributes(dialogRef, config); + Object.assign(dialogRef, config); + dialogRef.showModal(); return onMessageAction; } diff --git a/packages/core/src/tests/message/message.e2e.ts b/packages/core/src/tests/message/message.e2e.ts new file mode 100644 index 0000000000..afb9e38918 --- /dev/null +++ b/packages/core/src/tests/message/message.e2e.ts @@ -0,0 +1,69 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { expect } from '@playwright/test'; +import { test } from '@utils/test'; +import { showMessage } from 'src/components/utils/modal/message'; +import { IxModalSize } from 'src/components'; + +declare global { + interface Window { + showMessage: typeof showMessage; + } +} + +const screenWidths: IxModalSize[] = [ + `360`, + `480`, + `600`, + `720`, + `840`, + `full-width`, + `full-screen`, +]; + +screenWidths.forEach((size) => { + test(`message size ${size}`, async ({ page, mount }) => { + await mount(``); + + await page.evaluate(() => { + return new Promise((resolve) => { + const script = document.createElement('script'); + script.type = 'module'; + script.innerHTML = ` + import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js'; + window.showMessage = ix.showMessage; + `; + + document.body.appendChild(script); + resolve(); + }); + }); + + await page.waitForTimeout(500); + + await page.evaluate( + ({ size }) => { + window.showMessage({ + messageTitle: 'Example title', + message: 'message', + icon: 'info', + size: size, + centered: true, + actions: [], + }); + }, + { size } + ); + + await page.waitForTimeout(500); + + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); +}); diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..cb751626e8 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..31964f8f33 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..9ba635a4a1 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..90d759015a Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..424a15b153 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..ff92b54e93 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..fe9cba8db5 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..304afba263 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..d58d210778 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..871602d5b0 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..5023c9f745 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..37956199a8 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000..e5aedfbee6 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000..cc66c46369 Binary files /dev/null and b/packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/modal/modal.e2e.ts b/packages/core/src/tests/modal/modal.e2e.ts index 951c58a7ad..84705c4eee 100644 --- a/packages/core/src/tests/modal/modal.e2e.ts +++ b/packages/core/src/tests/modal/modal.e2e.ts @@ -9,6 +9,7 @@ import { expect } from '@playwright/test'; import { regressionTest, test } from '@utils/test'; +import { IxModalSize } from 'src/components'; regressionTest.describe('modal', () => { regressionTest('basic', async ({ page }) => { @@ -94,15 +95,23 @@ test('modal with dropdown', async ({ mount, page }) => { expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); -[`360`, `480`, `600`, `720`, `840`, `full-width`, `full-screen`].forEach( - (size) => { - test(`modal size ${size}`, async ({ page, mount }) => { - await page.setViewportSize({ - height: 1080, - width: 1920, - }); +const screenWidths: IxModalSize[] = [ + `360`, + `480`, + `600`, + `720`, + `840`, + `full-width`, + `full-screen`, +]; +screenWidths.forEach((size) => { + test(`modal size ${size}`, async ({ page, mount }) => { + await page.setViewportSize({ + height: 1080, + width: 1920, + }); - await mount(` + await mount(` Header Some Content 123 content 123 content 123 content 123 @@ -112,14 +121,13 @@ test('modal with dropdown', async ({ mount, page }) => { `); - const modal = page.locator('ix-modal'); - await modal.evaluate((modal: HTMLIxModalElement) => modal.showModal()); + const modal = page.locator('ix-modal'); + await modal.evaluate((modal: HTMLIxModalElement) => modal.showModal()); - await page.waitForTimeout(1000); - expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); - }); - } -); + await page.waitForTimeout(1000); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); +}); test('modal should show centered', async ({ mount, page }) => { await mount(`