feat(modal): add default ionic theme styles

core/src/components/modal/modal.scss → core/src/components/modal/modal.common.scss

@@ -1,6 +1,6 @@
-@import "./modal.vars";
+@import "../../themes/native/native.globals";
 
-// Modals
+// Modals: Common Styles
 // --------------------------------------------------
 
 :host {
@@ -29,13 +29,10 @@
   --min-height: auto;
   --max-height: auto;
   --overflow: hidden;
-  --border-radius: 0;
   --border-width: 0;
   --border-style: none;
   --border-color: transparent;
-  --background: #{$background-color};
   --box-shadow: none;
-  --backdrop-opacity: 0;
 
   @include position(0, 0, 0, 0);
 
@@ -47,8 +44,6 @@
 
   outline: none;
 
-  color: $modal-text-color;
-
   contain: strict;
 }
 
@@ -90,37 +85,14 @@ ion-backdrop {
   background: transparent;
 }
 
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-  :host {
-    --width: #{$modal-inset-width};
-    --height: #{$modal-inset-height-small};
-    --ion-safe-area-top: 0px;
-    --ion-safe-area-bottom: 0px;
-    --ion-safe-area-right: 0px;
-    --ion-safe-area-left: 0px;
-  }
-}
-
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
-  :host {
-    --width: #{$modal-inset-width};
-    --height: #{$modal-inset-height-large};
-  }
-}
-
 // Sheet Modal
 // --------------------------------------------------
 
 .modal-handle {
-  @include position(5px, 0px, null, 0px);
-  @include border-radius(8px, 8px, 8px, 8px);
   @include margin(null, auto, null, auto);
 
   position: absolute;
 
-  width: 36px;
-  height: 5px;
-
   /**
    * This allows the handle to appear
    * on top of user content in WebKit.
@@ -129,8 +101,6 @@ ion-backdrop {
 
   border: 0;
 
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
-
   cursor: pointer;
 
   z-index: 11;
@@ -144,9 +114,6 @@ ion-backdrop {
 
     position: absolute;
 
-    width: 36px;
-    height: 5px;
-
     transform: translate(-50%, -50%);
 
     content: "";

core/src/components/modal/modal.ionic.scss

@@ -1,11 +1,15 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./modal";
+@import "./modal.common";
 
 // Ionic Modal
 // --------------------------------------------------
 
 :host {
+  --background: #{globals.$ionic-color-base-white};
+  --box-shadow: #{globals.$ionic-elevation-300};
   --backdrop-opacity: 1;
+
+  color: globals.$ionic-color-neutral-1200;
 }
 
 // Shape
@@ -21,3 +25,20 @@
 :host(.modal-rectangular) {
   --border-radius: #{globals.$ionic-border-radius-0};
 }
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+  @include globals.position(globals.$ionic-space-300, 0px, null, 0px);
+  @include globals.border-radius(globals.$ionic-border-radius-100);
+
+  width: globals.$ionic-scale-1100;
+  height: globals.$ionic-scale-100;
+
+  background-color: globals.$ionic-color-neutral-300;
+}
+
+:host(.modal-sheet) .modal-wrapper {
+  @include globals.border-radius(var(--border-radius), var(--border-radius), 0, 0);
+}

core/src/components/modal/modal.ios.scss

@@ -1,4 +1,4 @@
-@import "./modal";
+@import "./modal.native";
 @import "./modal.ios.vars";
 
 // iOS Modals

core/src/components/modal/modal.md.scss

@@ -1,4 +1,4 @@
-@import "./modal";
+@import "./modal.native";
 @import "./modal.md.vars";
 
 // Material Design Modals

core/src/components/modal/modal.native.scss

@@ -0,0 +1,49 @@
+@use "./modal.common";
+@import "./modal.vars";
+
+// Modals: Native Styles
+// --------------------------------------------------
+
+:host {
+  --background: #{$background-color};
+  --border-radius: 0;
+  --backdrop-opacity: 0;
+
+  color: $modal-text-color;
+}
+
+@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+  :host {
+    --width: #{$modal-inset-width};
+    --height: #{$modal-inset-height-small};
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
+  }
+}
+
+@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
+  :host {
+    --width: #{$modal-inset-width};
+    --height: #{$modal-inset-height-large};
+  }
+}
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+  @include position(5px, 0px, null, 0px);
+  @include border-radius(8px, 8px, 8px, 8px);
+
+  width: 36px;
+  height: 5px;
+
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
+
+  &::before {
+    width: 36px;
+    height: 5px;
+  }
+}

core/src/components/modal/test/shape/index.html

@@ -14,10 +14,6 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      ion-modal {
-        --box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
-      }
-
       .container {
         margin-bottom: 20px;
       }

core/src/components/modal/test/sheet/index.html

@@ -72,6 +72,10 @@
       .grid-item {
         height: 200px;
       }
+
+      .half-sheet {
+        --height: 50%;
+      }
     </style>
   </head>
 
@@ -140,6 +144,13 @@
             Backdrop is inactive
           </button>
 
+          <button
+            id="half-sheet"
+            onclick="presentHalfSheetModal({ cssClass: 'half-sheet', backdropBreakpoint: 0.5, initialBreakpoint: 1, breakpoints: [1] })"
+          >
+            Half Sheet w/ Footer
+          </button>
+
           <div class="grid">
             <div class="grid-item red"></div>
             <div class="grid-item green"></div>
@@ -214,12 +225,65 @@
         modal.remove();
       }
 
-      async function presentCardModal() {
-        const presentingEl = document.querySelectorAll('.ion-page')[1];
-        const modal = createModal('card', {
-          presentingElement: presentingEl,
+      async function presentHalfSheetModal(options) {
+        let items = '';
+
+        for (var i = 0; i < 3; i++) {
+          items += `<ion-item>Item ${i}</ion-item>`;
+        }
+
+        // create component to open
+        const element = document.createElement('div');
+        element.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Super Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button class="dismiss">Dismiss Modal</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          ${items}
+        </ion-list>
+      </ion-content>
+      <ion-footer>
+        <ion-toolbar>
+          <ion-button expand="block">Action</ion-button>
+        </ion-toolbar>
+      </ion-footer>
+      `;
+
+        let extraOptions = {
+          initialBreakpoint: 0.25,
+          breakpoints: [0, 0.25, 0.5, 0.75, 1],
+        };
+
+        if (options) {
+          extraOptions = {
+            ...extraOptions,
+            ...options,
+          };
+        }
+
+        // present the modal
+        const modalElement = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+          ...extraOptions,
         });
-        await modal.present();
+
+        // listen for close event
+        const button = element.querySelector('ion-button');
+        button.addEventListener('click', () => {
+          modalElement.dismiss();
+        });
+        document.body.appendChild(modalElement);
+
+        await modalElement.present();
+
+        await modalElement.onDidDismiss();
+        modalElement.remove();
       }
     </script>
   </body>

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -25,6 +25,30 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('sheet modal: half screen rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#half-sheet');
+
+      await ionModalDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`modal-half-sheet-present`), {
+        /**
+         * Animations must be enabled to capture the screenshot.
+         * By default, animations are disabled with toHaveScreenshot,
+         * and when capturing the screenshot will call animation.finish().
+         * This will cause the modal to close and the screenshot capture
+         * to be invalid.
+         */
+        animations: 'allow',
+      });
+    });
+  });
+});
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('sheet modal: backdrop'), () => {
     test.beforeEach(async ({ page }) => {