fix(modal): border radius is now correctly applied to card modals (#2…

…4204)
ionic-team · Nov 11, 2021 · 1f4f8eb · 1f4f8eb
1 parent 009dff5
commit 1f4f8eb
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 13 deletions.
diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
@@ -8,6 +8,11 @@
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
 }
 
+:host(.modal-card),
+:host(.modal-sheet) {
+  --border-radius: #{$modal-ios-border-radius};
+}
+
 @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
   :host {
     --border-radius: #{$modal-ios-border-radius};
@@ -36,7 +41,7 @@
   }
 
   :host(.modal-card) .modal-wrapper {
-    @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
+    @include border-radius(var(--border-radius), var(--border-radius), 0, 0);
   }
 
   :host(.modal-card) {
@@ -76,5 +81,5 @@
 // --------------------------------------------------
 
 :host(.modal-sheet) .modal-wrapper {
-  @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
+  @include border-radius(var(--border-radius), var(--border-radius), 0, 0);
 }
diff --git a/core/src/components/modal/test/card/e2e.ts b/core/src/components/modal/test/card/e2e.ts
@@ -0,0 +1,10 @@
+import { testModal } from '../test.utils';
+
+const DIRECTORY = 'card';
+
+test('modal: card', async () => {
+  await testModal(DIRECTORY, '#card', true);
+});
+test('modal: card - custom', async () => {
+  await testModal(DIRECTORY, '#card-custom', true);
+});
diff --git a/core/src/components/modal/test/card/index.html b/core/src/components/modal/test/card/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Modal - Card</title>
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="viewport" content="viewport-fit=cover, 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 type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  <script type="module">
+    import { modalController } from '../../../../dist/ionic/index.esm.js';
+    window.modalController = modalController;
+  </script>
+  <style>
+  ion-modal#custom {
+    --border-radius: 50px !important;
+  }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+
+    <div class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Card</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+       <ion-button expand="block" id="card" onclick="presentModal(document.querySelectorAll('.ion-page')[1])">Card Modal</ion-button>
+       <ion-button expand="block" id="card-custom" onclick="presentModal(document.querySelectorAll('.ion-page')[1], { id: 'custom' })">Card Modal Custom Radius</ion-button>
+      </ion-content>
+    </div>
+  </ion-app>
+
+  <script>
+    async function createModal(presentingEl, opts) {
+
+      // create component to open
+      const element = document.createElement('div');
+      element.innerHTML = `
+      <ion-header id="modal-header">
+        <ion-toolbar>
+          <ion-title>Contacts</ion-title>
+          <ion-buttons slot="end">
+            <ion-button class="add">
+              <ion-icon name="add" slot="icon-only"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        Hello World!
+        <ion-button class="dismiss">Dismiss Modal</ion-button>
+      </ion-content>
+      `;
+
+      // listen for close event
+      const button = element.querySelector('ion-button.dismiss');
+      button.addEventListener('click', () => {
+        modalController.dismiss();
+      });
+
+      const create = element.querySelector('ion-button.add');
+      create.addEventListener('click', async () => {
+        const topModal = await modalController.getTop();
+
+        presentModal(topModal, opts);
+      });
+
+      // present the modal
+      const modalElement = await modalController.create({
+        presentingElement: presentingEl,
+        component: element,
+        swipeToClose: true,
+        ...opts
+      });
+      return modalElement;
+    }
+
+    async function presentModal(presentingEl, opts) {
+      const modal = await createModal(presentingEl, opts);
+      await modal.present();
+    }
+  </script>
+</body>
+
+</html>
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
@@ -65,17 +65,6 @@ html.ios ion-modal ion-toolbar {
   padding-left: calc(var(--ion-safe-area-left) + 8px);
 }
 
-/**
- * .ion-page needs to explicitly set
- * the border radius in WebKit otherwise
- * modals will not show border radius properly.
- * Do not use inherit as that will not
- * work with shadow dom in this case.
- */
-html.ios ion-modal .ion-page {
-  border-radius: 10px 10px 0 0;
-}
-
 /**
  * Card style modal on iPadOS
  * should only have backdrop on first instance.
@@ -110,6 +99,20 @@ ion-modal:not(.overlay-hidden) ~ ion-modal {
   --box-shadow: none;
 }
 
+/**
+ * This works around a bug in WebKit where the
+ * content will overflow outside of the bottom border
+ * radius when re-painting. As long as a single
+ * border radius value is set on .ion-page, this
+ * issue does not happen. We set the top left radius
+ * here because the top left corner will always have a
+ * radius no matter the platform.
+ * This behavior only applies to card modals.
+ */
+html.ios ion-modal.modal-card .ion-page {
+  border-top-left-radius: var(--border-radius);
+}
+
 // Ionic Colors
 // --------------------------------------------------
 // Generates the color classes and variables based on the