feat(core/message): add options to set size and position (#1533)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/afraid-mugs-argue.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": minor
+---
+
+feat(core/message): add options to set size and position

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,

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<T> = Omit<
+  ModalConfig<T, unknown>,
+  '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<T>(config: MessageContent) {
+export async function showMessage<T>(config: MessageConfig<T>) {
   const onMessageAction = new TypedEvent<{
     actionId: string;
     payload: T;
@@ -103,8 +113,7 @@ export async function showMessage<T>(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<T>(config: MessageContent) {
     }
   );
 
+  setA11yAttributes(dialogRef, config);
+  Object.assign(dialogRef, config);
+
   dialogRef.showModal();
   return onMessageAction;
 }

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<void>((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();
+  });
+});

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(`
         <ix-modal size="${size}">
           <ix-modal-header>Header</ix-modal-header>
           <ix-modal-content>Some Content 123 content 123 content 123 content 123</ix-modal-content>
@@ -112,14 +121,13 @@ test('modal with dropdown', async ({ mount, page }) => {
         </ix-modal>
       `);
 
-      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(`