Merge pull request #2421 from kirbydesign/release/v6.3.0

Release version 6.3
kirbydesign · Aug 16, 2022 · 01cfed6 · 01cfed6
2 parents 4e16f9f + 6c32335
commit 01cfed6
Show file tree

Hide file tree

Showing 16 changed files with 24,203 additions and 22,584 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 Notable changes to the project will be documented in this file.
 
+## [6.3.1](https://github.com/kirbydesign/designsystem/pull/2421) (16-08-2022)
+
+- Upgrade to Ionic 6
+
 ## [6.2.1](https://github.com/kirbydesign/designsystem/pull/2414) (11-08-2022)
 
 ### Bugfixes

diff --git a/libs/core/src/scss/_global-styles.scss b/libs/core/src/scss/_global-styles.scss
@@ -40,42 +40,24 @@
   @return $modal-header-vertical-center;
 }
 
-$backdrop-opacity: 0.4;
-
 body.allow-background-scroll {
   overflow: initial !important;
 }
 
+ion-modal::part(backdrop) {
+  --backdrop-opacity: 0.4;
+}
+
 ion-modal.kirby-overlay {
   position: fixed;
 
-  // Ensure consistent backdrop on all overlays:
-  &:not(.modal-card) {
-    --backdrop-opacity: #{$backdrop-opacity};
-
-    ion-backdrop {
-      opacity: var(--backdrop-opacity);
-    }
-  }
-
-  // Ensure consistent backdrop on card style modals, as Ionic 5 only applies --backdrop-opacity to :first-of-type:
-  // See https://github.com/ionic-team/ionic/commit/253cd96164914a803f6bb42ff95ca74880c940d0
-  // and https://github.com/ionic-team/ionic/issues/20800#issuecomment-606670762
-  &.modal-card,
-  &.modal-card:first-of-type {
-    --backdrop-opacity: #{$backdrop-opacity};
-  }
-
-  .modal-shadow {
-    display: none;
-  }
-
   &.kirby-modal {
     box-sizing: border-box;
 
     --background: var(--kirby-modal-background, #{utils.get-color('background-color')});
     --border-radius: 0;
     --height: auto;
+    --box-shadow: #{utils.get-elevation(8)};
 
     &.kirby-modal-compact {
       --border-radius: #{utils.$border-radius};
@@ -87,6 +69,7 @@ ion-modal.kirby-overlay {
     &.kirby-drawer {
       --min-height: #{utils.$drawer-default-height};
       --kirby-modal-padding-top: calc(var(--kirby-safe-area-top, 0px) + #{utils.size('m')});
+      --border-radius: #{utils.$border-radius} #{utils.$border-radius} 0px 0px;
 
       padding-top: var(--kirby-modal-padding-top);
       align-items: flex-end;
@@ -96,11 +79,6 @@ ion-modal.kirby-overlay {
           --kirby-modal-padding-top: 0;
         }
       }
-
-      .modal-wrapper {
-        border-top-left-radius: #{utils.$border-radius};
-        border-top-right-radius: #{utils.$border-radius};
-      }
     }
 
     @include utils.media('<medium') {
@@ -114,26 +92,14 @@ ion-modal.kirby-overlay {
     }
 
     &.modal-card:not(.kirby-drawer) {
-      .modal-wrapper {
-        @include utils.media('<medium') {
-          // Reset Ionic Card style height + top border radius:
-          --height: 100%;
-
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-        }
-
-        @include utils.media('>=medium') {
-          // Reset Ionic Card style border radius:
-          border-radius: utils.$border-radius;
-        }
+      @include utils.media('<medium') {
+        --height: 100%;
       }
     }
 
     @include utils.media('>=medium') {
       --width: #{utils.$modal-max-width};
       --border-radius: #{utils.$border-radius};
-      --box-shadow: #{utils.get-elevation(8)};
 
       &:not(.kirby-modal-compact) {
         --max-height: 100%;
@@ -159,8 +125,8 @@ ion-modal.kirby-overlay {
             --min-height: #{map.get(utils.$modal-heights, 'l')};
           }
 
-          &.kirby-modal-full-height .modal-wrapper,
-          .modal-wrapper.full-height {
+          &.kirby-modal-full-height::part(content),
+          &.full-height::part(content) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
           }
@@ -171,11 +137,6 @@ ion-modal.kirby-overlay {
         --kirby-modal-padding-top: calc(
           var(--kirby-modal-padding-top-base) + #{get-drawer-additional-padding-top()}
         );
-
-        .modal-wrapper {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
       }
     }
   }
@@ -184,28 +145,19 @@ ion-modal.kirby-overlay {
     --background: transparent;
     --width: 100%;
     --height: 100%;
+    --box-shadow: none;
 
-    .modal-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: flex-end;
+    &::part(content) {
       pointer-events: none;
-
-      --max-width: auto;
-      --max-height: auto;
     }
   }
 
   &.kirby-alert {
     --background: #{utils.get-color('background-color')};
     --border-radius: #{utils.$border-radius};
     --box-shadow: #{utils.get-elevation(8)};
-
-    .modal-wrapper {
-      max-width: utils.$alert-max-width;
-      height: auto;
-      text-align: center;
-    }
+    --max-width: #{utils.$alert-max-width};
+    --height: auto;
   }
 }
 

diff --git a/libs/designsystem/package.json b/libs/designsystem/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "@fontsource/roboto": "4.2.1",
-    "@ionic/angular": "5.5.2",
+    "@ionic/angular": "6.2.1",
     "@kirbydesign/core": "0.0.28",
     "chart.js": "3.3.2",
     "chartjs-adapter-date-fns": "^2.0.0",
@@ -16,11 +16,11 @@
     "inputmask": "5.0.5"
   },
   "peerDependencies": {
-    "@angular/common": ">=9.0.0",
-    "@angular/core": ">=9.0.0",
-    "@angular/forms": ">=9.0.0",
-    "@angular/router": ">=9.0.0",
-    "rxjs": ">=6.5.3",
+    "@angular/common": ">=12.0.0",
+    "@angular/core": ">=12.0.0",
+    "@angular/forms": ">=12.0.0",
+    "@angular/router": ">=12.0.0",
+    "rxjs": ">=6.5.5",
     "zone.js": ">=0.10.2"
   },
   "exports": {

diff --git a/libs/designsystem/src/lib/components/modal/footer/modal-footer.component.scss b/libs/designsystem/src/lib/components/modal/footer/modal-footer.component.scss
@@ -20,6 +20,10 @@ ion-footer {
   }
 }
 
+:host {
+  box-sizing: border-box;
+}
+
 :host(.snap-to-keyboard) {
   ion-footer {
     transition: transform utils.$soft-keyboard-transition-leave;

diff --git a/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.scss b/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.scss
@@ -44,20 +44,24 @@ $toolbar-padding-block: utils.size('xs');
   }
 }
 
-ion-header ion-toolbar {
-  --padding-start: #{$toolbar-padding-inline};
-  --padding-end: #{$toolbar-padding-inline};
-  --padding-bottom: #{$toolbar-padding-block};
-  --padding-top: #{$toolbar-padding-block};
-  --border-width: 0;
-  --background: transparent;
-  --color: var(--kirby-modal-color, #{utils.get-color('black')});
+ion-header {
+  box-sizing: border-box;
 
-  button {
-    color: var(--color);
-  }
+  ion-toolbar {
+    --padding-start: #{$toolbar-padding-inline};
+    --padding-end: #{$toolbar-padding-inline};
+    --padding-bottom: #{$toolbar-padding-block};
+    --padding-top: #{$toolbar-padding-block};
+    --border-width: 0;
+    --background: transparent;
+    --color: var(--kirby-modal-color, #{utils.get-color('black')});
+
+    button {
+      color: var(--color);
+    }
 
-  @include phablet-toolbar-padding;
+    @include phablet-toolbar-padding;
+  }
 }
 
 :host {

diff --git a/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.spec.ts
@@ -161,7 +161,7 @@ describe('ModalWrapperComponent', () => {
       spectator.component['ionModalDidPresent'].complete();
       await TestHelper.waitForTimeout();
 
-      const dummyWrapper = spectator.element.closest('.modal-wrapper');
+      const dummyWrapper = spectator.component['ionModalElement'];
       expect(observeSpy).toHaveBeenCalledWith(dummyWrapper);
     });
 

diff --git a/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.ts
@@ -275,14 +275,20 @@ export class ModalWrapperComponent
   }
 
   private observeModalFullHeight() {
-    const ionModalWrapper = this.elementRef.nativeElement.closest<HTMLElement>('.modal-wrapper');
+    const ionModalWrapper = this.getIonModalWrapperElement();
+
     if (!ionModalWrapper) return;
     // Start observing when modal has finished animating:
     this.didPresent.then(() => {
       this.intersectionObserver.observe(ionModalWrapper);
     });
   }
 
+  // Extracted into function for ease of testing
+  private getIonModalWrapperElement(): HTMLElement {
+    return this.ionModalElement.shadowRoot.querySelector('.modal-wrapper');
+  }
+
   ngAfterViewInit(): void {
     if (this.toolbarButtonsQuery) {
       this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement);
@@ -497,9 +503,9 @@ export class ModalWrapperComponent
       const entry = entries[0];
       const isTouchingViewport = entry.intersectionRatio < 1;
       if (isTouchingViewport) {
-        this.renderer.addClass(entry.target, 'full-height');
+        this.ionModalElement.classList.add('full-height');
       } else {
-        this.renderer.removeClass(entry.target, 'full-height');
+        this.ionModalElement.classList.remove('full-height');
       }
     };
 

diff --git a/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.testbuilder.ts b/libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.testbuilder.ts
@@ -82,11 +82,11 @@ export class ModalWrapperTestBuilder {
     const ionModalWrapper = document.createElement('div');
     const ionModal = document.createElement('div');
     ionModal['dismiss'] = jasmine.createSpy('dissmissSpy').and.resolveTo(true);
-    spyOn(spectator.element, 'closest')
-      .withArgs('.modal-wrapper')
-      .and.returnValue(ionModalWrapper)
-      .withArgs('ion-modal')
-      .and.returnValue(ionModal);
+    spyOn(spectator.element, 'closest').withArgs('ion-modal').and.returnValue(ionModal);
+
+    spectator.component['getIonModalWrapperElement'] = () => {
+      return ionModalWrapper;
+    };
 
     spectator.detectChanges();
 

diff --git a/libs/designsystem/src/lib/components/modal/services/action-sheet.helper.spec.ts b/libs/designsystem/src/lib/components/modal/services/action-sheet.helper.spec.ts
@@ -38,7 +38,7 @@ describe('ActionSheetHelper', () => {
       overlay = await actionSheetHelper.showActionSheet({ items: [{ text: 'Option 1', id: '1' }] });
       ionModal = await ionModalController.getTop();
       expect(ionModal).toBeTruthy();
-      backdrop = ionModal.querySelector('ion-backdrop');
+      backdrop = ionModal.shadowRoot.querySelector('ion-backdrop');
       expect(backdrop).toBeTruthy();
     });
 
@@ -47,13 +47,11 @@ describe('ActionSheetHelper', () => {
     });
 
     it('action-sheet should have correct backdrop style', () => {
-      const modalShadow = ionModal.querySelector<HTMLElement>(':scope > .modal-shadow');
-      expect(modalShadow).toHaveComputedStyle({ display: 'none' });
-      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+      expect(backdrop).toHaveComputedStyle({ '--backdrop-opacity': backdropOpacity });
     });
 
     it('modal wrapper should not have max width or height', () => {
-      const modalWrapper = ionModal.querySelector(':scope > .modal-wrapper');
+      const modalWrapper = ionModal.shadowRoot.querySelector('.modal-wrapper');
       expect(modalWrapper).toHaveComputedStyle({ 'max-width': 'none', 'max-height': 'none' });
     });
 
@@ -78,8 +76,8 @@ describe('ActionSheetHelper', () => {
 
       ionModal = await ionModalController.getTop();
       expect(ionModal).toBeTruthy();
-      backdrop = ionModal.querySelector('ion-backdrop');
-      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+      backdrop = ionModal.shadowRoot.querySelector('ion-backdrop');
+      expect(backdrop).toHaveComputedStyle({ '--backdrop-opacity': backdropOpacity });
       await ionModalElement.dismiss();
     });
   });

diff --git a/libs/designsystem/src/lib/components/modal/services/action-sheet.helper.ts b/libs/designsystem/src/lib/components/modal/services/action-sheet.helper.ts
@@ -27,6 +27,10 @@ export class ActionSheetHelper {
       backdropDismiss: true,
     });
 
+    // Remove 'modal-shadow' element as we are no longer able to hide it with CSS in Ionic 6.
+    // We need to remove it so it does not obstruct the backdrop-click to dismiss functionality.
+    ionModal.shadowRoot.querySelector('.modal-shadow').remove();
+
     const cancelSubscription: Subscription = cancel.subscribe(() => ionModal.dismiss());
     const itemSelectSubscription: Subscription = itemSelect.subscribe((item) =>
       ionModal.dismiss(item)

diff --git a/libs/designsystem/src/lib/components/modal/services/alert.helper.spec.ts b/libs/designsystem/src/lib/components/modal/services/alert.helper.spec.ts
@@ -47,7 +47,7 @@ describe('AlertHelper', () => {
       overlay = await alertHelper.showAlert({ title: 'Alert' });
       ionModal = await ionModalController.getTop();
       expect(ionModal).toBeTruthy();
-      backdrop = ionModal.querySelector('ion-backdrop');
+      backdrop = ionModal.shadowRoot.querySelector('ion-backdrop');
       expect(backdrop).toBeTruthy();
     });
 
@@ -56,13 +56,11 @@ describe('AlertHelper', () => {
     });
 
     it('alert should have correct backdrop style', () => {
-      const modalShadow = ionModal.querySelector<HTMLElement>(':scope > .modal-shadow');
-      expect(modalShadow).toHaveComputedStyle({ display: 'none' });
-      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+      expect(ionModal).toHaveComputedStyle({ '--backdrop-opacity': backdropOpacity });
     });
 
     it('modal wrapper should have correct max width', () => {
-      const modalWrapper = ionModal.querySelector(':scope > .modal-wrapper');
+      const modalWrapper = ionModal.shadowRoot.querySelector('.modal-wrapper');
       expect(modalWrapper).toHaveComputedStyle({
         'max-width': DesignTokenHelper.compactModalMaxWidth(),
       });
@@ -81,8 +79,8 @@ describe('AlertHelper', () => {
 
       ionModal = await ionModalController.getTop();
       expect(ionModal).toBeTruthy();
-      backdrop = ionModal.querySelector('ion-backdrop');
-      expect(backdrop).toHaveComputedStyle({ opacity: backdropOpacity });
+      backdrop = ionModal.shadowRoot.querySelector('ion-backdrop');
+      expect(backdrop).toHaveComputedStyle({ '--backdrop-opacity': backdropOpacity });
       await ionModalElement.dismiss();
     });
   });