fix(modal): card modal shadow now shows up correctly on ipad (#24203)

ionic-team · Nov 11, 2021 · 5d4f5af · 5d4f5af
1 parent 59e27bd
commit 5d4f5af
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 2 deletions.
diff --git 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
@@ -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
@@ -1,10 +1,102 @@
+import { newE2EPage } from '@stencil/core/testing';
 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);
 });
+
+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
@@ -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;
 }