From 21774612d8d70ab7eda3eab0e6e9ac039b5c87d8 Mon Sep 17 00:00:00 2001 From: Ni Tianzhen Date: Tue, 3 Mar 2020 00:23:43 +0800 Subject: [PATCH 01/16] fix(datetime): max property now works when hour, minute, or second set to 0 (#20665) fixes #20652 --- core/src/components/datetime/datetime.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 1d1cc91fa8..3300fbee5d 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -501,11 +501,11 @@ export class Datetime implements ComponentInterface { min.day = min.day || 1; max.day = max.day || 31; min.hour = min.hour || 0; - max.hour = max.hour || 23; + max.hour = max.hour === undefined ? 23 : max.hour; min.minute = min.minute || 0; - max.minute = max.minute || 59; + max.minute = max.minute === undefined ? 59 : max.minute; min.second = min.second || 0; - max.second = max.second || 59; + max.second = max.second === undefined ? 59 : max.second; // Ensure min/max constraints if (min.year > max.year) { From f64b1420aead39b9056dc25cfdbcf95bc4f6f621 Mon Sep 17 00:00:00 2001 From: Mike Hartington Date: Mon, 2 Mar 2020 14:46:03 -0500 Subject: [PATCH 02/16] fix(): exclude components from ssr (#20674) --- .../angular-server/src/ionic-server-module.ts | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/angular-server/src/ionic-server-module.ts b/packages/angular-server/src/ionic-server-module.ts index f334a57606..212abcaf33 100644 --- a/packages/angular-server/src/ionic-server-module.ts +++ b/packages/angular-server/src/ionic-server-module.ts @@ -21,7 +21,33 @@ export class IonicServerModule {} export function hydrateIonicComponents(doc: any, appId: any) { return () => { return hydrateDocument(doc, { - clientHydrateAnnotations: false + clientHydrateAnnotations: false, + excludeComponents: [ + // overlays + 'ion-action-sheet', + 'ion-alert', + 'ion-loading', + 'ion-modal', + 'ion-picker', + 'ion-popover', + 'ion-toast', + 'ion-toast', + + // navigation + 'ion-router', + 'ion-route', + 'ion-route-redirect', + 'ion-router-link', + 'ion-router-outlet', + + // tabs + 'ion-tabs', + 'ion-tab', + + // auxiliar + 'ion-picker-column', + 'ion-virtual-scroll' + ] }) .then(hydrateResults => { hydrateResults.diagnostics.forEach(d => { From 44993b7987031b6618409675fdbb1f15ec4ea343 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 5 Mar 2020 11:56:54 -0500 Subject: [PATCH 03/16] fix(segment): iOS mode segment now works on older Android devices (#20673) fixes #20648 --- core/src/components/segment-button/segment-button.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss index 824e621c3d..2c6d1a1ef2 100644 --- a/core/src/components/segment-button/segment-button.scss +++ b/core/src/components/segment-button/segment-button.scss @@ -271,6 +271,8 @@ ion-ripple-effect { box-sizing: border-box; will-change: transform, opacity; + + pointer-events: none; } .segment-button-indicator-background { @@ -280,6 +282,8 @@ ion-ripple-effect { transform: var(--indicator-transform); box-shadow: var(--indicator-box-shadow); + + pointer-events: none; } .segment-button-indicator-animated { From 314dbb1a4d970327fcbb2f3fbdec0627c626fe4d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 5 Mar 2020 12:38:51 -0500 Subject: [PATCH 04/16] fix(segment): allow routerLink to work on segment buttons (#20682) fixes #20678 --- core/src/components/segment/segment.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index 6526ad3fd0..72464ad9d8 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -143,7 +143,6 @@ export class Segment implements ComponentInterface { const checkedValidButton = this.setNextIndex(detail, true); - detail.event.preventDefault(); detail.event.stopImmediatePropagation(); if (checkedValidButton) { From ec4878ac085d8ff92cb8b2ea0852523f174ab01b Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 6 Mar 2020 10:09:39 -0500 Subject: [PATCH 05/16] fix(ios): large title animation now works properly in a modal (#20703) fixes #20696 --- core/src/utils/transition/ios.transition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index 422abc0d21..9462fa09d6 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -157,7 +157,7 @@ const animateBackButton = (rootAnimation: Animation, rtl: boolean, backDirection }; const animateLargeTitle = (rootAnimation: Animation, rtl: boolean, backDirection: boolean, largeTitleEl: any, largeTitleBox: DOMRect, backButtonBox: DOMRect) => { - const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleEl.right}px)` : `${largeTitleEl.left}px`; + const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`; const START_TRANSLATE = (rtl) ? '-18px' : '18px'; const ORIGIN_X = (rtl) ? 'right' : 'left'; From b6c2a77deb1c09eb1fd414f7737794e208ab5081 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 6 Mar 2020 10:11:20 -0500 Subject: [PATCH 06/16] fix(overlays): prevent accidental dismiss of overlays when tapping screen twice (#20683) fixes #20608 --- core/src/components/action-sheet/animations/ios.enter.ts | 6 +++++- core/src/components/action-sheet/animations/md.enter.ts | 6 +++++- core/src/components/alert/animations/ios.enter.ts | 6 +++++- core/src/components/alert/animations/md.enter.ts | 6 +++++- core/src/components/loading/animations/ios.enter.ts | 6 +++++- core/src/components/loading/animations/md.enter.ts | 6 +++++- core/src/components/modal/animations/ios.enter.ts | 6 +++++- core/src/components/modal/animations/md.enter.ts | 6 +++++- core/src/components/picker/animations/ios.enter.ts | 6 +++++- core/src/components/popover/animations/ios.enter.ts | 6 +++++- core/src/components/popover/animations/md.enter.ts | 6 +++++- 11 files changed, 55 insertions(+), 11 deletions(-) diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts index faef96ff8f..0fb7754959 100644 --- a/core/src/components/action-sheet/animations/ios.enter.ts +++ b/core/src/components/action-sheet/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.action-sheet-wrapper')!) diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts index 6d69774407..9f03de8ec5 100644 --- a/core/src/components/action-sheet/animations/md.enter.ts +++ b/core/src/components/action-sheet/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.action-sheet-wrapper')!) diff --git a/core/src/components/alert/animations/ios.enter.ts b/core/src/components/alert/animations/ios.enter.ts index 3abd5cf619..2aac5ac227 100644 --- a/core/src/components/alert/animations/ios.enter.ts +++ b/core/src/components/alert/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.alert-wrapper')!) diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts index 0e4e6eb612..2a98adbc9a 100644 --- a/core/src/components/alert/animations/md.enter.ts +++ b/core/src/components/alert/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.alert-wrapper')!) diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts index e5d3c335f5..962c588857 100644 --- a/core/src/components/loading/animations/ios.enter.ts +++ b/core/src/components/loading/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.loading-wrapper')!) diff --git a/core/src/components/loading/animations/md.enter.ts b/core/src/components/loading/animations/md.enter.ts index 9a6f45db21..dfba8b39cb 100644 --- a/core/src/components/loading/animations/md.enter.ts +++ b/core/src/components/loading/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.loading-wrapper')!) diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts index 884c0d4858..2d6c78b5b4 100644 --- a/core/src/components/modal/animations/ios.enter.ts +++ b/core/src/components/modal/animations/ios.enter.ts @@ -12,7 +12,11 @@ export const iosEnterAnimation = ( // The top translate Y for the presenting element const backdropAnimation = createAnimation() .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); const wrapperAnimation = createAnimation() .addElement(baseEl.querySelector('.modal-wrapper')!) diff --git a/core/src/components/modal/animations/md.enter.ts b/core/src/components/modal/animations/md.enter.ts index 0f0b2b767d..750d72d2d5 100644 --- a/core/src/components/modal/animations/md.enter.ts +++ b/core/src/components/modal/animations/md.enter.ts @@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.modal-wrapper')!) diff --git a/core/src/components/picker/animations/ios.enter.ts b/core/src/components/picker/animations/ios.enter.ts index d79166f6e1..c6a2c6ac1b 100644 --- a/core/src/components/picker/animations/ios.enter.ts +++ b/core/src/components/picker/animations/ios.enter.ts @@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => { backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.picker-wrapper')!) diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts index 3c94cc3072..0c3655ef32 100644 --- a/core/src/components/popover/animations/ios.enter.ts +++ b/core/src/components/popover/animations/ios.enter.ts @@ -104,7 +104,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation => backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.popover-wrapper')!) diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts index b553316e1b..30cc2dbdce 100644 --- a/core/src/components/popover/animations/md.enter.ts +++ b/core/src/components/popover/animations/md.enter.ts @@ -86,7 +86,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation => backdropAnimation .addElement(baseEl.querySelector('ion-backdrop')!) - .fromTo('opacity', 0.01, 'var(--backdrop-opacity)'); + .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') + .beforeStyles({ + 'pointer-events': 'none' + }) + .afterClearStyles(['pointer-events']); wrapperAnimation .addElement(baseEl.querySelector('.popover-wrapper')!) From 22d52568100d8096ee36e3a61a19614f0d63d45f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 6 Mar 2020 10:12:21 -0500 Subject: [PATCH 07/16] fix(modal): leave animation transitions modal completely out of viewport on ipad (#20702) fixes #20697 --- core/src/components/modal/animations/ios.enter.ts | 2 +- core/src/components/modal/animations/ios.leave.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts index 2d6c78b5b4..608fb04b31 100644 --- a/core/src/components/modal/animations/ios.enter.ts +++ b/core/src/components/modal/animations/ios.enter.ts @@ -21,7 +21,7 @@ export const iosEnterAnimation = ( const wrapperAnimation = createAnimation() .addElement(baseEl.querySelector('.modal-wrapper')!) .beforeStyles({ 'opacity': 1 }) - .fromTo('transform', 'translateY(100%)', 'translateY(0%)'); + .fromTo('transform', 'translateY(100vh)', 'translateY(0vh)'); const baseAnimation = createAnimation() .addElement(baseEl) diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts index 09056d3d03..dc220e8165 100644 --- a/core/src/components/modal/animations/ios.leave.ts +++ b/core/src/components/modal/animations/ios.leave.ts @@ -18,7 +18,7 @@ export const iosLeaveAnimation = ( const wrapperAnimation = createAnimation() .addElement(baseEl.querySelector('.modal-wrapper')!) .beforeStyles({ 'opacity': 1 }) - .fromTo('transform', 'translateY(0%)', 'translateY(100%)'); + .fromTo('transform', 'translateY(0vh)', 'translateY(100vh)'); const baseAnimation = createAnimation() .addElement(baseEl) From 7d260b96a73958709fa93a4fe58f816a445471ee Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 6 Mar 2020 13:19:48 -0500 Subject: [PATCH 08/16] fix(modal): swipeable modal now works in firefox (#20714) fixes #20706 --- core/src/components/modal/animations/ios.enter.ts | 8 +++++++- core/src/components/modal/animations/ios.leave.ts | 3 ++- core/src/components/modal/modal.ios.scss | 8 +++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts index 608fb04b31..b21f237cf0 100644 --- a/core/src/components/modal/animations/ios.enter.ts +++ b/core/src/components/modal/animations/ios.enter.ts @@ -31,7 +31,13 @@ export const iosEnterAnimation = ( .addAnimation([backdropAnimation, wrapperAnimation]); if (presentingEl) { - const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))'; + /** + * Fallback for browsers that does not support `max()` (ex: Firefox) + * No need to wrry about statusbar padding since engines like Gecko + * are not used as the engine for standlone Cordova/Capacitor apps + */ + const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))'; + const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset; const bodyEl = document.body; const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`; diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts index dc220e8165..1500f224bf 100644 --- a/core/src/components/modal/animations/ios.leave.ts +++ b/core/src/components/modal/animations/ios.leave.ts @@ -27,7 +27,8 @@ export const iosLeaveAnimation = ( .addAnimation([backdropAnimation, wrapperAnimation]); if (presentingEl) { - const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))'; + const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))'; + const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset; const bodyEl = document.body; const currentPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; const presentingAnimation = createAnimation() diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index a92867c32b..98f714a459 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -28,5 +28,11 @@ :host(.modal-card) .modal-wrapper { @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); - height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px); + height: calc(100% - 40px); +} + +@supports (width: max(0px, 1px)) { + :host(.modal-card) .modal-wrapper { + height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px); + } } \ No newline at end of file From f796074f33bc7165452fb30fcf1d2289eb5598a2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 10 Mar 2020 11:22:36 -0400 Subject: [PATCH 09/16] chore(): set @nguniversal/builders dependency to exact version (#20734) --- angular/test/test-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular/test/test-app/package.json b/angular/test/test-app/package.json index 84c79db167..5299f995b7 100644 --- a/angular/test/test-app/package.json +++ b/angular/test/test-app/package.json @@ -41,7 +41,7 @@ "@angular/cli": "^9.0.0-rc.2", "@angular/compiler-cli": "^9.0.0-rc.2", "@angular/language-service": "^9.0.0-rc.2", - "@nguniversal/builders": "^9.0.0-next.9", + "@nguniversal/builders": "9.0.0-next.9", "@types/express": "^4.17.0", "@types/jasmine": "3.4.1", "@types/node": "^12.11.1", From f6c3ba7e5af2af9e32f75306cde7704509e82263 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 11 Mar 2020 10:52:33 -0400 Subject: [PATCH 10/16] fix(header): collapsable header should default to using content background (#20736) fixes #20691 --- core/src/components/header/header.ios.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index e401c1bef9..d722f67c74 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -50,7 +50,13 @@ z-index: 1; } +/** + * Large title toolbar should just use the content background + * since it needs to blend in with the header above it. + */ .header-collapse-condense ion-toolbar { + --background: var(--ion-background-color, #fff); + z-index: 0; } @@ -81,4 +87,4 @@ .header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title, .header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse { visibility: hidden; -} \ No newline at end of file +} From 87a27216d011f1d02ac0fc0aeb3ae0400ecfbd8c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 11 Mar 2020 10:58:26 -0400 Subject: [PATCH 11/16] fix(header): collapsible header now works when navigating quickly (#20728) fixes #20725 --- core/src/components/header/header.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index f9f59a4862..17376a2e56 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -129,7 +129,9 @@ export class Header implements ComponentInterface { cloneElement('ion-title'); cloneElement('ion-back-button'); - this.collapsibleMainHeader!.classList.add('header-collapse-main'); + if (this.collapsibleMainHeader !== undefined) { + this.collapsibleMainHeader.classList.add('header-collapse-main'); + } }); this.collapsibleHeaderInitialized = true; From 7ecde36f9d31327a45f7b5023ed533edbb9cc709 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 11 Mar 2020 11:35:26 -0400 Subject: [PATCH 12/16] fix(button): allow overflow to be overridden by the CSS variable (#20738) fixes #20726 --- core/src/components/button/button.scss | 4 ++-- core/src/components/button/test/states/index.html | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 7fef42e6a6..44b2288767 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -179,13 +179,13 @@ line-height: 1; box-shadow: var(--box-shadow); + contain: layout style; cursor: pointer; + opacity: var(--opacity); overflow: var(--overflow); - overflow: hidden; - z-index: 0; box-sizing: border-box; appearance: none; diff --git a/core/src/components/button/test/states/index.html b/core/src/components/button/test/states/index.html index b804cd495e..19c8d48a3f 100644 --- a/core/src/components/button/test/states/index.html +++ b/core/src/components/button/test/states/index.html @@ -23,7 +23,7 @@ Clear Default - Round + Round Outline Clear

@@ -37,7 +37,7 @@ Clear Default - Round + Round Outline Clear

@@ -51,7 +51,7 @@ Clear Default - Round + Round Outline Clear

@@ -65,7 +65,7 @@ Clear Default - Round + Round Outline Clear Default @@ -75,7 +75,7 @@ Clear Default - Round + Round Outline Clear Default @@ -85,7 +85,7 @@ Clear Default - Round + Round Outline Clear

From a1bf2f5b8f47182152c1c434f4bb47607334d35f Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 11 Mar 2020 10:36:04 -0500 Subject: [PATCH 13/16] chore(ionicons): bump ionicons version (#20704) --- core/package.json | 2 +- packages/react/package.json | 2 +- vue/package-lock.json | 6 +++--- vue/package.json | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/core/package.json b/core/package.json index a28d78077e..36e014af96 100644 --- a/core/package.json +++ b/core/package.json @@ -30,7 +30,7 @@ "loader/" ], "dependencies": { - "ionicons": "^5.0.0", + "ionicons": "^5.0.1", "tslib": "^1.10.0" }, "devDependencies": { diff --git a/packages/react/package.json b/packages/react/package.json index 4251df4383..c26051c7d7 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -40,7 +40,7 @@ ], "dependencies": { "@ionic/core": "5.0.4", - "ionicons": "^5.0.0", + "ionicons": "^5.0.1", "tslib": "*" }, "peerDependencies": { diff --git a/vue/package-lock.json b/vue/package-lock.json index d8a758966e..e8bc51665c 100644 --- a/vue/package-lock.json +++ b/vue/package-lock.json @@ -571,9 +571,9 @@ "dev": true }, "ionicons": { - "version": "5.0.0-13", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.0.0-13.tgz", - "integrity": "sha512-CG9tZRWm4S3abz8ie7JsoO4ZvY5JeNYG6UEIHjCNNns0m/XVNhEK50CTVSAkc+ybPmSnbMh3r0ELVRyordshpg==" + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.0.1.tgz", + "integrity": "sha512-P9GHr7pgCJcG211W0wute49NZ9AvJZvFJf4OwYybakjX6j7tu0q5t5HNWn9bcb9YjI7SxBblJg8iqQ1Yb59DXw==" }, "is-buffer": { "version": "1.1.6", diff --git a/vue/package.json b/vue/package.json index dd6ad3bbaf..b8de75ec21 100644 --- a/vue/package.json +++ b/vue/package.json @@ -46,7 +46,7 @@ }, "dependencies": { "@ionic/core": "^4.6.0", - "ionicons": "^5.0.0-13" + "ionicons": "^5.0.1" }, "devDependencies": { "rollup": "^0.62.0", From d53595eb1629e0d60f7e832414e84c544e184346 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 11 Mar 2020 11:52:01 -0400 Subject: [PATCH 14/16] fix(item): apply proper margin left for slotted icon in RTL (#20684) fixes #20653 --- core/src/components/item/item.ios.vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index d8a8fb053a..a798da6317 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -113,7 +113,7 @@ $item-ios-icon-slot-margin-end: null !default; $item-ios-icon-slot-margin-bottom: 7px !default; /// @prop - Margin start for an icon in the start/end slot -$item-ios-icon-slot-margin-start: 0 !default; +$item-ios-icon-slot-margin-start: null !default; /// @prop - Margin top for the end slot inside of a floating/stacked label $item-ios-label-slot-end-margin-top: 7px !default; From 4d34ce6a31eaa19859699646cc614f5be6239e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20H=C3=A4nisch?= Date: Wed, 11 Mar 2020 17:42:46 +0100 Subject: [PATCH 15/16] fix(label): text overflow for slotted headings (#20690) fixes #17087 --- core/src/components/label/label.scss | 14 ++++ .../src/components/label/test/headings/e2e.ts | 10 +++ .../components/label/test/headings/index.html | 70 +++++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 core/src/components/label/test/headings/e2e.ts create mode 100644 core/src/components/label/test/headings/index.html diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss index 394281aaa2..f2041041e4 100644 --- a/core/src/components/label/label.scss +++ b/core/src/components/label/label.scss @@ -79,3 +79,17 @@ :host(.label-no-animate.label-floating) { transition: none; } + +// Headings +// -------------------------------------------------- + +::slotted(*) h1, +::slotted(*) h2, +::slotted(*) h3, +::slotted(*) h4, +::slotted(*) h5, +::slotted(*) h6 { + text-overflow: inherit; + + overflow: inherit; +} diff --git a/core/src/components/label/test/headings/e2e.ts b/core/src/components/label/test/headings/e2e.ts new file mode 100644 index 0000000000..cdbb7726a9 --- /dev/null +++ b/core/src/components/label/test/headings/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('label: headings', async () => { + const page = await newE2EPage({ + url: '/src/components/label/test/headings?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/label/test/headings/index.html b/core/src/components/label/test/headings/index.html new file mode 100644 index 0000000000..e0a1fdada0 --- /dev/null +++ b/core/src/components/label/test/headings/index.html @@ -0,0 +1,70 @@ + + + + + + Label - Headings + + + + + + + + + + + + + Label - Headings + + + + + + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro? + + + + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+
+
+ + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

+
+
+ + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

+
+
+ + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+
+
+ + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+
+
+ + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+
+
+ + +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?

+
+
+
+
+
+ + + From 572f7b6934609527a7982ea7fb953672ff625785 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 11 Mar 2020 13:07:09 -0400 Subject: [PATCH 16/16] 5.0.5 --- CHANGELOG.md | 21 +++++++++++++++++++++ angular/package.json | 4 ++-- core/package.json | 2 +- docs/package.json | 2 +- packages/angular-server/package.json | 4 ++-- packages/react-router/package.json | 10 +++++----- packages/react/package.json | 4 ++-- 7 files changed, 34 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2ca1d94a0..8b43a3ecdb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,24 @@ +## [5.0.5](https://github.com/ionic-team/ionic/compare/v5.0.4...v5.0.5) (2020-03-11) + + +### Bug Fixes + +* **button:** allow overflow to be overridden by the CSS variable ([#20738](https://github.com/ionic-team/ionic/issues/20738)) ([7ecde36](https://github.com/ionic-team/ionic/commit/7ecde36f9d31327a45f7b5023ed533edbb9cc709)), closes [#20726](https://github.com/ionic-team/ionic/issues/20726) +* **datetime:** account for max property when hour, minute, or second is set to 0 ([#20665](https://github.com/ionic-team/ionic/issues/20665)) ([2177461](https://github.com/ionic-team/ionic/commit/21774612d8d70ab7eda3eab0e6e9ac039b5c87d8)), closes [#20652](https://github.com/ionic-team/ionic/issues/20652) +* **header:** collapsable header should default to using content background ([#20736](https://github.com/ionic-team/ionic/issues/20736)) ([f6c3ba7](https://github.com/ionic-team/ionic/commit/f6c3ba7e5af2af9e32f75306cde7704509e82263)), closes [#20691](https://github.com/ionic-team/ionic/issues/20691) +* **header:** resolve undefined error on collapsible header when navigating quickly ([#20728](https://github.com/ionic-team/ionic/issues/20728)) ([87a2721](https://github.com/ionic-team/ionic/commit/87a27216d011f1d02ac0fc0aeb3ae0400ecfbd8c)), closes [#20725](https://github.com/ionic-team/ionic/issues/20725) +* **ios:** large title animation now works properly in a modal ([#20703](https://github.com/ionic-team/ionic/issues/20703)) ([ec4878a](https://github.com/ionic-team/ionic/commit/ec4878ac085d8ff92cb8b2ea0852523f174ab01b)), closes [#20696](https://github.com/ionic-team/ionic/issues/20696) +* **item:** apply proper margin left for slotted icon in RTL ([#20684](https://github.com/ionic-team/ionic/issues/20684)) ([d53595e](https://github.com/ionic-team/ionic/commit/d53595eb1629e0d60f7e832414e84c544e184346)), closes [#20653](https://github.com/ionic-team/ionic/issues/20653) +* **label:** text overflow for slotted headings ([#20690](https://github.com/ionic-team/ionic/issues/20690)) ([4d34ce6](https://github.com/ionic-team/ionic/commit/4d34ce6a31eaa19859699646cc614f5be6239e10)), closes [#17087](https://github.com/ionic-team/ionic/issues/17087) +* **modal:** leave animation transitions modal completely out of viewport on ipad ([#20702](https://github.com/ionic-team/ionic/issues/20702)) ([22d5256](https://github.com/ionic-team/ionic/commit/22d52568100d8096ee36e3a61a19614f0d63d45f)), closes [#20697](https://github.com/ionic-team/ionic/issues/20697) +* **angular** exclude components from ssr ([#20674](https://github.com/ionic-team/ionic/issues/20674)) ([f64b142](https://github.com/ionic-team/ionic/commit/f64b1420aead39b9056dc25cfdbcf95bc4f6f621)) +* **modal:** swipeable modal now works in firefox ([#20714](https://github.com/ionic-team/ionic/issues/20714)) ([7d260b9](https://github.com/ionic-team/ionic/commit/7d260b96a73958709fa93a4fe58f816a445471ee)), closes [#20706](https://github.com/ionic-team/ionic/issues/20706) +* **overlays:** prevent accidental dismiss of overlays when tapping screen twice ([#20683](https://github.com/ionic-team/ionic/issues/20683)) ([b6c2a77](https://github.com/ionic-team/ionic/commit/b6c2a77deb1c09eb1fd414f7737794e208ab5081)), closes [#20608](https://github.com/ionic-team/ionic/issues/20608) +* **segment:** allow routerLink to work on segment buttons ([#20682](https://github.com/ionic-team/ionic/issues/20682)) ([314dbb1](https://github.com/ionic-team/ionic/commit/314dbb1a4d970327fcbb2f3fbdec0627c626fe4d)), closes [#20678](https://github.com/ionic-team/ionic/issues/20678) +* **segment:** iOS mode segment now works on older Android devices ([#20673](https://github.com/ionic-team/ionic/issues/20673)) ([44993b7](https://github.com/ionic-team/ionic/commit/44993b7987031b6618409675fdbb1f15ec4ea343)), closes [#20648](https://github.com/ionic-team/ionic/issues/20648) + + + ## [5.0.4](https://github.com/ionic-team/ionic/compare/v5.0.3...v5.0.4) (2020-02-27) diff --git a/angular/package.json b/angular/package.json index ead605b588..3efd5b9cd1 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "5.0.4", + "version": "5.0.5", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -42,7 +42,7 @@ "validate": "npm i && npm run lint && npm run test && npm run build" }, "dependencies": { - "@ionic/core": "5.0.4", + "@ionic/core": "5.0.5", "tslib": "^1.9.3" }, "peerDependencies": { diff --git a/core/package.json b/core/package.json index 36e014af96..b7a17f1d02 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "5.0.4", + "version": "5.0.5", "description": "Base components for Ionic", "keywords": [ "ionic", diff --git a/docs/package.json b/docs/package.json index f3cf0085e1..5302fadf5c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "5.0.4", + "version": "5.0.5", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index dcd90d8a70..118c751262 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "5.0.4", + "version": "5.0.5", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -49,7 +49,7 @@ "@angular/core": "8.2.13", "@angular/platform-browser": "8.2.13", "@angular/platform-server": "8.2.13", - "@ionic/core": "5.0.4", + "@ionic/core": "5.0.5", "ng-packagr": "5.7.1", "tslint": "^5.12.1", "tslint-ionic-rules": "0.0.21", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 7f20378ebf..f01ba09448 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "5.0.4", + "version": "5.0.5", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -39,16 +39,16 @@ "tslib": "*" }, "peerDependencies": { - "@ionic/core": "5.0.4", - "@ionic/react": "5.0.4", + "@ionic/core": "5.0.5", + "@ionic/react": "5.0.5", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router": "^5.0.1", "react-router-dom": "^5.0.1" }, "devDependencies": { - "@ionic/core": "5.0.4", - "@ionic/react": "5.0.4", + "@ionic/core": "5.0.5", + "@ionic/react": "5.0.5", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/packages/react/package.json b/packages/react/package.json index c26051c7d7..2d9b8f1b04 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "5.0.4", + "version": "5.0.5", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "5.0.4", + "@ionic/core": "5.0.5", "ionicons": "^5.0.1", "tslib": "*" },