fix(modal): allow for custom dialog implementations (#25630)

resolves #24080
2025-08-19 19:57:22 +08:00 · 2022-07-15 09:36:19 -04:00
parent 2d1efdbe6d
commit a6f3ae67ab
9 changed files with 117 additions and 0 deletions
--- a/core/src/components/modal/test/custom-dialog/index.html
+++ b/core/src/components/modal/test/custom-dialog/index.html
@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal - Custom Dialog</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      ion-modal {
+        --width: fit-content;
+        --min-width: 250px;
+        --height: fit-content;
+        --border-radius: 6px;
+        --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+      }
+
+      h1 {
+        margin: 20px 20px 10px 20px;
+      }
+
+      ion-icon {
+        margin-right: 6px;
+
+        width: 48px;
+        height: 48px;
+
+        padding: 4px 0;
+
+        color: #aaaaaa;
+      }
+
+      .wrapper {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <div class="ion-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal - Custom Dialog</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content class="ion-padding">
+          <ion-button id="custom-modal">Open Custom Dialog</ion-button>
+          <ion-modal trigger="custom-modal">
+            <div class="wrapper">
+              <h1>Dialog header</h1>
+
+              <ion-list lines="none">
+                <ion-item button="true" detail="false">
+                  <ion-icon name="person-circle"></ion-icon>
+                  <ion-label>Item 1</ion-label>
+                </ion-item>
+                <ion-item button="true" detail="false">
+                  <ion-icon name="person-circle"></ion-icon>
+                  <ion-label>Item 2</ion-label>
+                </ion-item>
+                <ion-item button="true" detail="false">
+                  <ion-icon name="person-circle"></ion-icon>
+                  <ion-label>Item 3</ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-modal>
+        </ion-content>
+      </div>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/modal/test/custom-dialog/modal.e2e.ts
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts
@ -0,0 +1,21 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('modal: custom dialog', () => {
+  test('should size custom modal correctly', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/24080',
+    });
+
+    await page.goto('/src/components/modal/test/custom-dialog');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+    await page.click('#custom-modal');
+
+    await ionModalDidPresent.next();
+
+    expect(await page.screenshot()).toMatchSnapshot(`modal-custom-dialog-${page.getSnapshotSettings()}.png`);
+  });
+});
--- a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png