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

resolves #24080
ionic-team · Jul 15, 2022 · a6f3ae6 · a6f3ae6
1 parent 2d1efdb
commit a6f3ae6
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 0 deletions.
diff --git 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>
diff --git 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`);
+  });
+});
diff --git a/...alog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png b/...alog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png
diff --git a/...log/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png b/...log/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png
diff --git a/...alog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png b/...alog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png
diff --git a/...ialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png b/...ialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png
diff --git a/...alog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png b/...alog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png
diff --git a/...ialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png b/...ialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
@@ -162,6 +162,22 @@ html.ios ion-modal.modal-card .ion-page {
   z-index: $z-index-page-container;
 }
 
+/**
+ * When making custom dialogs, using
+ * ion-content is not required. As a result,
+ * some developers may wish to have dialogs
+ * that are automatically sized by the browser.
+ * These changes allow certain dimension values
+ * such as fit-content to work correctly.
+ */
+ion-modal .ion-page {
+  position: relative;
+
+  contain: layout style;
+
+  height: 100%;
+}
+
 .split-pane-visible > .ion-page.split-pane-main {
   position: relative;
 }