From 5d4f5af36083eafcf7de91b22749ff307701087f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 11 Nov 2021 10:59:18 -0500
Subject: [PATCH] fix(modal): card modal shadow now shows up correctly on ipad
 (#24203)

---
 core/src/components/modal/modal.ios.scss   |  4 +
 core/src/components/modal/modal.tsx        |  4 +-
 core/src/components/modal/test/card/e2e.ts | 92 ++++++++++++++++++++++
 core/src/css/core.scss                     |  6 +-
 4 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index 76404e73917..627cb5a34a2 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -72,6 +72,10 @@
     transition: all 0.5s ease-in-out;
   }
 
+  :host(.modal-card) .modal-wrapper {
+    box-shadow: none;
+  }
+
   :host(.modal-card) .modal-shadow {
     box-shadow: var(--box-shadow);
   }
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 37a08dec654..1d1531763f9 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -557,6 +557,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const showHandle = handle !== false && isSheetModal;
     const mode = getIonMode(this);
     const { presented, modalId } = this;
+    const isCardModal = presentingElement !== undefined && mode === 'ios';
 
     return (
       <Host
@@ -569,7 +570,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
         }}
         class={{
           [mode]: true,
-          [`modal-card`]: presentingElement !== undefined && mode === 'ios',
+          ['modal-default']: !isCardModal && !isSheetModal,
+          [`modal-card`]: isCardModal,
           [`modal-sheet`]: isSheetModal,
           'overlay-hidden': true,
           'modal-interactive': presented,
diff --git a/core/src/components/modal/test/card/e2e.ts b/core/src/components/modal/test/card/e2e.ts
index 33e1bee8847..615dcf45655 100644
--- a/core/src/components/modal/test/card/e2e.ts
+++ b/core/src/components/modal/test/card/e2e.ts
@@ -1,3 +1,4 @@
+import { newE2EPage } from '@stencil/core/testing';
 import { testModal } from '../test.utils';
 
 const DIRECTORY = 'card';
@@ -5,6 +6,97 @@ const DIRECTORY = 'card';
 test('modal: card', async () => {
   await testModal(DIRECTORY, '#card', true);
 });
+
 test('modal: card - custom', async () => {
   await testModal(DIRECTORY, '#card-custom', true);
 });
+
+test('modal: card - Stacked, Tablet', async () => {
+  const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' });
+
+  // Ensure that we get tablet styles
+  await page.setViewport({ width: 768, height: 500 });
+
+  const screenshotCompares = [];
+  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+  await page.click('#card');
+  await page.waitForSelector('#card');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  await page.click('.add');
+  await page.waitForSelector('.add');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+});
+
+test('modal: card - Stacked, Mobile', async () => {
+  const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' });
+
+  const screenshotCompares = [];
+  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+  await page.click('#card');
+  await page.waitForSelector('#card');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  await page.click('.add');
+  await page.waitForSelector('.add');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+});
+
+test('modal: card - Custom, Stacked, Tablet', async () => {
+  const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' });
+
+  // Ensure that we get tablet styles
+  await page.setViewport({ width: 768, height: 500 });
+
+  const screenshotCompares = [];
+  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+  await page.click('#card-custom');
+  await page.waitForSelector('#card-custom');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  await page.click('.add');
+  await page.waitForSelector('.add');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+});
+
+test('modal: card - Custom, Stacked, Mobile', async () => {
+  const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' });
+
+  const screenshotCompares = [];
+  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+  await page.click('#card-custom');
+  await page.waitForSelector('#card-custom');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  await page.click('.add');
+  await page.waitForSelector('.add');
+
+  await ionModalDidPresent.next();
+
+  screenshotCompares.push(await page.compareScreenshot());
+});
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 819e30d14f5..be9f66a71fb 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -93,8 +93,12 @@ html.ios ion-modal ion-toolbar {
  * for selectors which would help us here. At the
  * time of writing it does not have great cross browser
  * support.
+ *
+ * Note 2: This should only apply to non-card and
+ * non-sheet modals. Card and sheet modals have their
+ * own criteria for displaying backdrops/box shadows.
  */
-ion-modal:not(.overlay-hidden) ~ ion-modal {
+ion-modal.modal-default:not(.overlay-hidden) ~ ion-modal.modal-default {
   --backdrop-opacity: 0;
   --box-shadow: none;
 }