From ab146c96ec5cbc962eed629c30b2c5c446f3098d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20H=C3=A4nisch?= Date: Thu, 12 Mar 2020 16:01:42 +0100 Subject: [PATCH 01/28] fix(segment): scrollable segments only show scrollbar if they overflow (#20760) fixes #20758 --- core/src/components/segment/segment.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss index bdb520026d..47b231a05a 100644 --- a/core/src/components/segment/segment.scss +++ b/core/src/components/segment/segment.scss @@ -38,7 +38,7 @@ width: auto; - overflow-x: scroll; + overflow-x: auto; } :host(.segment-scrollable::-webkit-scrollbar) { From 2ece194a085742b919cc68f643b1b365f7d85594 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 12 Mar 2020 14:56:36 -0400 Subject: [PATCH 02/28] fix(angular): export Animation and Gesture related types (#20766) --- angular/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/angular/src/index.ts b/angular/src/index.ts index 7569db3501..bc1d2f0e8c 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -38,3 +38,6 @@ export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy'; // PACKAGE MODULE export { IonicModule } from './ionic-module'; + +// CORE TYPES +export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail } from '@ionic/core'; From f2dbe1ff3be44e6697b791de392a9ef46dbf27e8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 12 Mar 2020 15:26:24 -0400 Subject: [PATCH 03/28] fix(angular): respect animation property for ion-router-outlet (#20767) fixes #20764 --- angular/src/directives/navigation/ion-router-outlet.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts index 5d228d7e97..24002ada53 100644 --- a/angular/src/directives/navigation/ion-router-outlet.ts +++ b/angular/src/directives/navigation/ion-router-outlet.ts @@ -4,6 +4,7 @@ import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, import { BehaviorSubject, Observable } from 'rxjs'; import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators'; +import { AnimationBuilder } from '../../'; import { Config } from '../../providers/config'; import { NavController } from '../../providers/nav-controller'; @@ -13,7 +14,7 @@ import { RouteView, getUrl } from './stack-utils'; @Directive({ selector: 'ion-router-outlet', exportAs: 'outlet', - inputs: ['animated', 'swipeGesture'] + inputs: ['animated', 'animation', 'swipeGesture'] }) export class IonRouterOutlet implements OnDestroy, OnInit { nativeEl: HTMLIonRouterOutletElement; @@ -38,6 +39,10 @@ export class IonRouterOutlet implements OnDestroy, OnInit { @Output('activate') activateEvents = new EventEmitter(); @Output('deactivate') deactivateEvents = new EventEmitter(); + set animation(animation: AnimationBuilder) { + this.nativeEl.animation = animation; + } + set animated(animated: boolean) { this.nativeEl.animated = animated; } From 0897c3f9c2591442b3f80d28a25ec4471da3c9d7 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 13 Mar 2020 10:10:38 -0400 Subject: [PATCH 04/28] fix(react): expose correct type for CreateAnimation (#20775) fixes #20771 --- packages/react/src/components/CreateAnimation.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/CreateAnimation.tsx b/packages/react/src/components/CreateAnimation.tsx index 111ae6a619..1f78ff481a 100644 --- a/packages/react/src/components/CreateAnimation.tsx +++ b/packages/react/src/components/CreateAnimation.tsx @@ -30,9 +30,9 @@ export interface CreateAnimationProps { onFinish?: { callback: AnimationLifecycle; opts?: AnimationCallbackOptions; }; keyframes?: AnimationKeyFrames; - from?: PartialPropertyValue; - to?: PartialPropertyValue; - fromTo?: PropertyValue; + from?: PartialPropertyValue[] | PartialPropertyValue; + to?: PartialPropertyValue[] | PartialPropertyValue; + fromTo?: PropertyValue[] | PropertyValue; play?: boolean; pause?: boolean; From 0514b421eca7cd98784df8e6d341ce6f14563a4b Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 16 Mar 2020 09:51:13 -0400 Subject: [PATCH 05/28] docs(segment): clarify usage of scrollable segments (#20765) resolves #20692 --- core/src/components/segment/readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md index a9b00f48b7..d8dbf5a0bf 100644 --- a/core/src/components/segment/readme.md +++ b/core/src/components/segment/readme.md @@ -4,6 +4,9 @@ Segments display a group of related buttons, sometimes known as segmented contro Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages. +### Scrollable Segments + +Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width. From e24060ecd9d803ece4bbb9c6beae23e761d7fb5e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 16 Mar 2020 15:38:11 -0400 Subject: [PATCH 06/28] fix(): properly scroll to input with scroll assist (#20742) fixes #19589 --- .../utils/input-shims/hacks/scroll-assist.ts | 33 ++++++++++++++----- core/src/utils/input-shims/input-shims.ts | 8 +++-- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/core/src/utils/input-shims/hacks/scroll-assist.ts b/core/src/utils/input-shims/hacks/scroll-assist.ts index 88aaf52a9c..63a1983a76 100644 --- a/core/src/utils/input-shims/hacks/scroll-assist.ts +++ b/core/src/utils/input-shims/hacks/scroll-assist.ts @@ -61,15 +61,32 @@ const jsSetFocus = ( relocateInput(componentEl, inputEl, true, scrollData.inputSafeY); inputEl.focus(); - // scroll the input into place - contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration).then(() => { - // the scroll view is in the correct position now - // give the native text input focus - relocateInput(componentEl, inputEl, false, scrollData.inputSafeY); + /* tslint:disable-next-line */ + if (typeof window !== 'undefined') { + let scrollContentTimeout: any; + const scrollContent = async () => { + // clean up listeners and timeouts + if (scrollContentTimeout !== undefined) { + clearTimeout(scrollContentTimeout); + } + window.removeEventListener('resize', scrollContent); - // ensure this is the focused input - inputEl.focus(); - }); + // scroll the input into place + await contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration); + + // the scroll view is in the correct position now + // give the native text input focus + relocateInput(componentEl, inputEl, false, scrollData.inputSafeY); + + // ensure this is the focused input + inputEl.focus(); + }; + + window.addEventListener('resize', scrollContent); + + // fallback in case resize never fires + scrollContentTimeout = setTimeout(scrollContent, 1000); + } }; const hasPointerMoved = (threshold: number, startCoord: PointerCoordinates | undefined, endCoord: PointerCoordinates | undefined) => { diff --git a/core/src/utils/input-shims/input-shims.ts b/core/src/utils/input-shims/input-shims.ts index 860356dc9a..e811215724 100644 --- a/core/src/utils/input-shims/input-shims.ts +++ b/core/src/utils/input-shims/input-shims.ts @@ -23,8 +23,12 @@ export const startInputShims = (config: Config) => { const hideCaretMap = new WeakMap void>(); const scrollAssistMap = new WeakMap void>(); - const registerInput = (componentEl: HTMLElement) => { - const inputEl = (componentEl.shadowRoot || componentEl).querySelector('input') || (componentEl.shadowRoot || componentEl).querySelector('textarea'); + const registerInput = async (componentEl: HTMLElement) => { + if ((componentEl as any).componentOnReady) { + await (componentEl as any).componentOnReady(); + } + const inputRoot = componentEl.shadowRoot || componentEl; + const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea'); const scrollEl = componentEl.closest('ion-content'); if (!inputEl) { From 2d5d2515be86496a280d93847185ab332e5d47a2 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 16 Mar 2020 17:36:58 -0400 Subject: [PATCH 07/28] fix(slides): check that mutation observer is defined for ssr (#20791) --- core/src/components/slides/slides.tsx | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index 4159adfd19..d162c4371a 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -132,16 +132,19 @@ export class Slides implements ComponentInterface { @Event() ionSlideTouchEnd!: EventEmitter; connectedCallback() { - const mut = this.mutationO = new MutationObserver(() => { - if (this.swiperReady) { - this.update(); - } - }); - mut.observe(this.el, { - childList: true, - subtree: true - }); - this.el.componentOnReady().then(() => this.initSwiper()); + // tslint:disable-next-line: strict-type-predicates + if (typeof MutationObserver !== 'undefined') { + const mut = this.mutationO = new MutationObserver(() => { + if (this.swiperReady) { + this.update(); + } + }); + mut.observe(this.el, { + childList: true, + subtree: true + }); + this.el.componentOnReady().then(() => this.initSwiper()); + } } async disconnectedCallback() { From f23ac44c9a6646129762bb861cae6145690ca5a1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Mar 2020 11:00:38 -0400 Subject: [PATCH 08/28] fix(item-sliding): account for swipe to go back gesture when opening item-options (#20777) fixes #20773 --- core/src/components/item-sliding/item-sliding.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 6224ed6b19..9b58e089dd 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -73,7 +73,7 @@ export class ItemSliding implements ComponentInterface { gestureName: 'item-swipe', gesturePriority: 100, threshold: 5, - canStart: () => this.canStart(), + canStart: ev => this.canStart(ev), onStart: () => this.onStart(), onMove: ev => this.onMove(ev), onEnd: ev => this.onEnd(ev), @@ -225,7 +225,18 @@ export class ItemSliding implements ComponentInterface { this.sides = sides; } - private canStart(): boolean { + private canStart(gesture: GestureDetail): boolean { + /** + * If very close to start of the screen + * do not open left side so swipe to go + * back will still work. + */ + const rtl = document.dir === 'rtl'; + const atEdge = (rtl) ? (window.innerWidth - gesture.startX) < 15 : gesture.startX < 15; + if (atEdge) { + return false; + } + const selected = openSlidingItem; if (selected && selected !== this.el) { this.closeOpened(); From 12932dd20212bec7d780650166c70819d125f75a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 18 Mar 2020 13:20:14 -0400 Subject: [PATCH 09/28] fix(modal): backdrop is no longer tappable on card-style modal on smaller screens (#20802) fixes #20783 --- core/src/components/modal/modal.ios.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index 98f714a459..2697633f14 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -26,6 +26,10 @@ align-items: flex-end; } +:host(.modal-card) ion-backdrop { + pointer-events: none; +} + :host(.modal-card) .modal-wrapper { @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); height: calc(100% - 40px); From 253cd96164914a803f6bb42ff95ca74880c940d0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 18 Mar 2020 13:44:11 -0400 Subject: [PATCH 10/28] fix(modal): backdrop and box shadows no longer stack when opening multiple modals (#20801) fixes #20800 --- core/src/components/modal/modal.ios.scss | 2 +- core/src/components/modal/modal.md.scss | 5 ++++- core/src/components/modal/modal.scss | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index 2697633f14..32a45d89cc 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -4,7 +4,7 @@ // iOS Modals // -------------------------------------------------- -:host { +:host:first-of-type { --backdrop-opacity: var(--ion-backdrop-opacity, 0.4); } diff --git a/core/src/components/modal/modal.md.scss b/core/src/components/modal/modal.md.scss index 7288a831d0..d294ae4244 100644 --- a/core/src/components/modal/modal.md.scss +++ b/core/src/components/modal/modal.md.scss @@ -5,13 +5,16 @@ // Material Design Modals // -------------------------------------------------- -:host { +:host:first-of-type { --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); } @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { :host { --border-radius: 2px; + } + + :host:first-of-type { --box-shadow: #{$modal-inset-box-shadow}; } } diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss index 2399f8c529..747944e119 100644 --- a/core/src/components/modal/modal.scss +++ b/core/src/components/modal/modal.scss @@ -35,6 +35,7 @@ --border-color: transparent; --background: #{$background-color}; --box-shadow: none; + --backdrop-opacity: 0; @include position(0, 0, 0, 0); From 7bc51911f6c538be8b91d1e569675b19832cb000 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 18 Mar 2020 15:43:36 -0400 Subject: [PATCH 11/28] fix(list): show bottom border on last item in a list followed by a list (#20798) --- core/src/components/list/list.ios.scss | 2 +- core/src/components/list/list.ios.vars.scss | 8 +- .../src/components/list/test/icons/index.html | 134 +++++++++--------- 3 files changed, 75 insertions(+), 69 deletions(-) diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss index 23006439d6..b3a88c8bee 100644 --- a/core/src/components/list/list.ios.scss +++ b/core/src/components/list/list.ios.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- .list-ios { - @include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start); + @include margin($list-ios-margin-top, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start); background: $item-ios-background; } diff --git a/core/src/components/list/list.ios.vars.scss b/core/src/components/list/list.ios.vars.scss index 6aabd7ad48..161dec71af 100644 --- a/core/src/components/list/list.ios.vars.scss +++ b/core/src/components/list/list.ios.vars.scss @@ -5,16 +5,16 @@ // -------------------------------------------------- /// @prop - Margin top of the list -$list-ios-margin-top: 10px !default; +$list-ios-margin-top: null !default; /// @prop - Margin end of the list -$list-ios-margin-end: 0 !default; +$list-ios-margin-end: null !default; /// @prop - Margin bottom of the list -$list-ios-margin-bottom: 0 !default; +$list-ios-margin-bottom: null !default; /// @prop - Margin start of the list -$list-ios-margin-start: 0 !default; +$list-ios-margin-start: null !default; /// @prop - Border bottom of the item in a list $list-ios-item-border-bottom-width: $item-ios-border-bottom-width !default; diff --git a/core/src/components/list/test/icons/index.html b/core/src/components/list/test/icons/index.html index 761a5f1868..81f791e64c 100644 --- a/core/src/components/list/test/icons/index.html +++ b/core/src/components/list/test/icons/index.html @@ -4,21 +4,23 @@ List - Icons - - + + - + + - - Topics + + Trip - + @@ -27,83 +29,87 @@ - - - + + + + Categories + + + + Attractions - - + + Dining - - + + Education - - - - Health - - - - - - Family - - - - - - Office - - - - - - Promotions - - - - - - Radio - - - - - - Food - - - - - - Sports - - - - + + Travel + + + + + Information + + + + + + Attendees + + + 1 + 2 + 3 + + + + + + Round-trip + + + + + + + + + Contact + + + + + + Name + + + + + + + Phone Number + + + + - - From cdfd50b554d1d8f89c3d9948c7613ce75ede1e52 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 18 Mar 2020 16:14:06 -0400 Subject: [PATCH 12/28] fix(segment): automatically expand width for scrollable segment buttons (#20763) fixes #20566 --- .../segment-button/segment-button.md.scss | 4 +++ core/src/components/segment/segment.md.scss | 2 +- .../components/segment/test/spec/index.html | 29 +++++++++++++++++-- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss index f8fa1e2a51..1af4d5ca66 100644 --- a/core/src/components/segment-button/segment-button.md.scss +++ b/core/src/components/segment-button/segment-button.md.scss @@ -44,6 +44,10 @@ text-transform: uppercase; } +.button-native { + min-width: $segment-button-md-min-width; +} + // Segment Button: Disabled // -------------------------------------------------- diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss index ab60499cce..0f99d548a7 100644 --- a/core/src/components/segment/segment.md.scss +++ b/core/src/components/segment/segment.md.scss @@ -13,5 +13,5 @@ // -------------------------------------------------- :host(.segment-scrollable) ::slotted(ion-segment-button) { - min-width: $segment-button-md-min-width; + min-width: auto; } \ No newline at end of file diff --git a/core/src/components/segment/test/spec/index.html b/core/src/components/segment/test/spec/index.html index c94dc7a929..5bea6a39f0 100644 --- a/core/src/components/segment/test/spec/index.html +++ b/core/src/components/segment/test/spec/index.html @@ -45,7 +45,7 @@ Item Two - + Item Three @@ -184,6 +184,31 @@ + + + + This is some long text + + + Short text + + + This is some long text + + + Short text + + + Short text + + + Medium long text + + + Medium long text + + + + + diff --git a/core/src/components/item-group/item-group.ios.scss b/core/src/components/item-group/item-group.ios.scss index ff5819ec11..120b2e26f5 100644 --- a/core/src/components/item-group/item-group.ios.scss +++ b/core/src/components/item-group/item-group.ios.scss @@ -4,8 +4,3 @@ // iOS Item Group // -------------------------------------------------- - -.item-group-ios ion-item:last-child, -.item-group-ios ion-item-sliding:last-child .item { - --border-width: 0; -} diff --git a/core/src/components/item-group/item-group.md.scss b/core/src/components/item-group/item-group.md.scss index 0c3e16a2d9..92d35465d6 100644 --- a/core/src/components/item-group/item-group.md.scss +++ b/core/src/components/item-group/item-group.md.scss @@ -4,8 +4,3 @@ // Material Design Item Group // -------------------------------------------------- - -.item-group-md ion-item:last-child, -.item-group-md ion-item-sliding:last-child ion-item { - --border-width: 0; -} From 2707289b36883ae495f86cfb2f2b6c84e090551b Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Mar 2020 15:44:56 -0400 Subject: [PATCH 20/28] fix(content): apply --offset-top and --offset-bottom values correctly (#20790) fixes #20735 --- core/src/components/content/content.scss | 2 +- core/src/components/content/content.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss index f734c1c48a..c0d7285a3a 100644 --- a/core/src/components/content/content.scss +++ b/core/src/components/content/content.scss @@ -181,4 +181,4 @@ ::slotted([slot="fixed"]) { position: absolute; -} \ No newline at end of file +} diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index c4abc02e65..b9b366073b 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -106,7 +106,8 @@ export class Content implements ComponentInterface { this.onScrollEnd(); } - componentDidLoad() { + @Listen('appload', { target: 'window' }) + onAppLoad() { this.resize(); } @@ -128,7 +129,7 @@ export class Content implements ComponentInterface { private resize() { if (this.fullscreen) { - readTask(this.readDimensions.bind(this)); + readTask(() => this.readDimensions()); } else if (this.cTop !== 0 || this.cBottom !== 0) { this.cTop = this.cBottom = 0; forceUpdate(this); From 3bd6b5def2877f6a918c587de25a10ccc82f88f1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 24 Mar 2020 18:06:17 -0400 Subject: [PATCH 21/28] fix(title): improve reliability of large title ios nav transition (#20861) --- 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 9462fa09d6..4b62f77567 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -14,7 +14,7 @@ export const shadow = (el: T): ShadowRoot | T => { const getLargeTitle = (refEl: any) => { const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs'); - const query = 'ion-header:not(.header-collapse-condense-inactive) ion-title[size=large]'; + const query = 'ion-header:not(.header-collapse-condense-inactive) ion-title.title-large'; if (tabs != null) { const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)'); From dff3816c049a1c051f94d3176c8b903a69603912 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 25 Mar 2020 11:10:57 -0400 Subject: [PATCH 22/28] fix(modal): properly apply border radius on card-style modal (#20852) fixes #20851 --- core/src/css/core.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 02229bcd38..8298b54788 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -39,6 +39,14 @@ html.ios ion-modal.modal-card .ion-page > ion-header > ion-toolbar:first-of-type padding-top: 0px; } +// .ion-page needs to explicitly inherit +// the border radius in safari otherwise +// a card modal with ion-content[fullscreen=true] +// will not show border radius properly +html.ios ion-modal.modal-card .ion-page { + border-radius: inherit; +} + // Ionic Colors // -------------------------------------------------- // Generates the color classes and variables based on the From 43fbd9d2f27390a7e019ad526be1f3aa7a94b580 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 25 Mar 2020 11:43:02 -0400 Subject: [PATCH 23/28] chore(): properly export ionic page transition functions (#20860) --- angular/src/index.ts | 2 +- core/src/index.ts | 2 ++ packages/react/src/components/index.ts | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/angular/src/index.ts b/angular/src/index.ts index bc1d2f0e8c..7ba346de35 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -40,4 +40,4 @@ export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy'; export { IonicModule } from './ionic-module'; // CORE TYPES -export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail } from '@ionic/core'; +export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core'; diff --git a/core/src/index.ts b/core/src/index.ts index 139f129a95..235b76ff23 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -1,6 +1,8 @@ import 'ionicons'; export { createAnimation } from './utils/animation/animation'; +export { iosTransitionAnimation } from './utils/transition/ios.transition'; +export { mdTransitionAnimation } from './utils/transition/md.transition'; export { getTimeGivenProgression } from './utils/animation/cubic-bezier'; export { createGesture } from './utils/gesture'; export { isPlatform, Platforms, getPlatforms } from './utils/platform'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 9329789190..4e172a6b89 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -2,7 +2,7 @@ import { defineCustomElements } from '@ionic/core/loader'; import { addIcons } from 'ionicons'; import { arrowBackSharp, caretBackSharp, chevronBack, chevronForward, close, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons'; -export { createAnimation, createGesture, AlertButton, AlertInput, Gesture, GestureConfig, GestureDetail, setupConfig } from '@ionic/core'; +export { createAnimation, createGesture, AlertButton, AlertInput, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation, setupConfig } from '@ionic/core'; export * from './proxies'; // createControllerComponent From d3d7de121be7bc69e5bbf4667158e5c5f945a925 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 25 Mar 2020 11:45:56 -0400 Subject: [PATCH 24/28] fix(): scroll assists now recognizes inputs on inner pages and modals (#20864) fixes #20843 --- core/src/components/input/input.tsx | 14 +------------- core/src/components/textarea/textarea.tsx | 2 +- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 5a9fa4666a..9af046d98b 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -200,18 +200,6 @@ export class Input implements ComponentInterface { */ @Event() ionFocus!: EventEmitter; - /** - * Emitted when the input has been created. - * @internal - */ - @Event() ionInputDidLoad!: EventEmitter; - - /** - * Emitted when the input has been removed. - * @internal - */ - @Event() ionInputDidUnload!: EventEmitter; - /** * Emitted when the styles change. * @internal @@ -222,7 +210,7 @@ export class Input implements ComponentInterface { this.emitStyle(); this.debounceChanged(); if (Build.isBrowser) { - this.el.dispatchEvent(new CustomEvent('ionInputDidLoad', { + document.dispatchEvent(new CustomEvent('ionInputDidLoad', { detail: this.el })); } diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 68030b1bd3..6a747118a9 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -174,7 +174,7 @@ export class Textarea implements ComponentInterface { this.emitStyle(); this.debounceChanged(); if (Build.isBrowser) { - this.el.dispatchEvent(new CustomEvent('ionInputDidLoad', { + document.dispatchEvent(new CustomEvent('ionInputDidLoad', { detail: this.el })); } From 321140ff736b46d2631a9e87a7b070009c5e1b2c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 25 Mar 2020 12:14:26 -0400 Subject: [PATCH 25/28] fix(title): large title now inherits global color styling during nav transition (#20862) --- core/src/components/header/header.tsx | 3 ++- core/src/components/title/title.ios.scss | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 17376a2e56..bbdff3f2ce 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -126,7 +126,8 @@ export class Header implements ComponentInterface { this.scrollEl!.addEventListener('scroll', this.contentScrollCallback); writeTask(() => { - cloneElement('ion-title'); + const title = cloneElement('ion-title') as HTMLIonTitleElement; + title.size = 'large'; cloneElement('ion-back-button'); if (this.collapsibleMainHeader !== undefined) { diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss index f7285fdf5f..63897c6d76 100644 --- a/core/src/components/title/title.ios.scss +++ b/core/src/components/title/title.ios.scss @@ -55,3 +55,7 @@ text-align: start; } + +:host(.title-large.ion-cloned-element) { + --color: #{$text-color}; +} From 75bae403e917b20645675343734440ee95d31634 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 25 Mar 2020 13:36:54 -0400 Subject: [PATCH 26/28] fix(modal): respect card-style modal spec for iPadOS (#20750) fixes #20700 --- .../components/modal/animations/ios.enter.ts | 88 ++++++++++++++----- .../components/modal/animations/ios.leave.ts | 70 ++++++++++++--- core/src/components/modal/modal.ios.scss | 74 +++++++++++----- core/src/components/modal/modal.scss | 9 +- core/src/components/modal/modal.tsx | 2 + .../src/components/modal/test/spec/index.html | 4 +- 6 files changed, 186 insertions(+), 61 deletions(-) diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts index cc3295cfd1..4902da4dfc 100644 --- a/core/src/components/modal/animations/ios.enter.ts +++ b/core/src/components/modal/animations/ios.enter.ts @@ -9,7 +9,6 @@ export const iosEnterAnimation = ( baseEl: HTMLElement, presentingEl?: HTMLElement, ): Animation => { - // The top translate Y for the presenting element const backdropAnimation = createAnimation() .addElement(baseEl.querySelector('ion-backdrop')!) .fromTo('opacity', 0.01, 'var(--backdrop-opacity)') @@ -19,7 +18,7 @@ export const iosEnterAnimation = ( .afterClearStyles(['pointer-events']); const wrapperAnimation = createAnimation() - .addElement(baseEl.querySelector('.modal-wrapper')!) + .addElement(baseEl.querySelectorAll('.modal-wrapper, .modal-shadow')!) .beforeStyles({ 'opacity': 1 }) .fromTo('transform', 'translateY(100vh)', 'translateY(0vh)'); @@ -27,37 +26,78 @@ export const iosEnterAnimation = ( .addElement(baseEl) .easing('cubic-bezier(0.32,0.72,0,1)') .duration(500) - .addAnimation([backdropAnimation, wrapperAnimation]); + .addAnimation(wrapperAnimation); if (presentingEl) { - /** - * 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})`; + const isMobile = window.innerWidth < 768; + const hasCardModal = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined); const presentingAnimation = createAnimation() .beforeStyles({ 'transform': 'translateY(0)', 'transform-origin': 'top center', 'overflow': 'hidden' - }) - .afterStyles({ - 'transform': finalTransform - }) - .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black')) - .addElement(presentingEl) - .keyframes([ - { offset: 0, filter: 'contrast(1)', transform: 'translateY(0px) scale(1)', borderRadius: '0px' }, - { offset: 1, filter: 'contrast(0.85)', transform: finalTransform, borderRadius: '10px 10px 0 0' } - ]); + }); - baseAnimation.addAnimation(presentingAnimation); + const bodyEl = document.body; + + if (isMobile) { + /** + * Fallback for browsers that does not support `max()` (ex: Firefox) + * No need to worry 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 = hasCardModal ? '-10px' : transformOffset; + const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; + const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`; + + presentingAnimation + .afterStyles({ + 'transform': finalTransform + }) + .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black')) + .addElement(presentingEl) + .keyframes([ + { offset: 0, filter: 'contrast(1)', transform: 'translateY(0px) scale(1)', borderRadius: '0px' }, + { offset: 1, filter: 'contrast(0.85)', transform: finalTransform, borderRadius: '10px 10px 0 0' } + ]); + + baseAnimation.addAnimation(presentingAnimation); + } else { + baseAnimation.addAnimation(backdropAnimation); + + if (!hasCardModal) { + wrapperAnimation.fromTo('opacity', '0', '1'); + } else { + const toPresentingScale = (hasCardModal) ? SwipeToCloseDefaults.MIN_PRESENTING_SCALE : 1; + const finalTransform = `translateY(-10px) scale(${toPresentingScale})`; + + presentingAnimation + .afterStyles({ + 'transform': finalTransform + }) + .addElement(presentingEl.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, filter: 'contrast(1)', transform: 'translateY(0) scale(1)' }, + { offset: 1, filter: 'contrast(0.85)', transform: finalTransform } + ]); + + const shadowAnimation = createAnimation() + .afterStyles({ + 'transform': finalTransform + }) + .addElement(presentingEl.querySelector('.modal-shadow')!) + .keyframes([ + { offset: 0, opacity: '1', transform: 'translateY(0) scale(1)' }, + { offset: 1, opacity: '0', transform: finalTransform } + ]); + + baseAnimation.addAnimation([presentingAnimation, shadowAnimation]); + } + } + } else { + baseAnimation.addAnimation(backdropAnimation); } return baseAnimation; diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts index 1500f224bf..5d05c0f33c 100644 --- a/core/src/components/modal/animations/ios.leave.ts +++ b/core/src/components/modal/animations/ios.leave.ts @@ -10,13 +10,12 @@ export const iosLeaveAnimation = ( presentingEl?: HTMLElement, duration = 500 ): Animation => { - const backdropAnimation = createAnimation() .addElement(baseEl.querySelector('ion-backdrop')!) .fromTo('opacity', 'var(--backdrop-opacity)', 0.0); const wrapperAnimation = createAnimation() - .addElement(baseEl.querySelector('.modal-wrapper')!) + .addElement(baseEl.querySelectorAll('.modal-wrapper, .modal-shadow')!) .beforeStyles({ 'opacity': 1 }) .fromTo('transform', 'translateY(0vh)', 'translateY(100vh)'); @@ -24,15 +23,13 @@ export const iosLeaveAnimation = ( .addElement(baseEl) .easing('cubic-bezier(0.32,0.72,0,1)') .duration(duration) - .addAnimation([backdropAnimation, wrapperAnimation]); + .addAnimation(wrapperAnimation); if (presentingEl) { - 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 isMobile = window.innerWidth < 768; + const hasCardModal = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined); + const presentingAnimation = createAnimation() - .addElement(presentingEl) .beforeClearStyles(['transform']) .afterClearStyles(['transform']) .onFinish(currentStep => { @@ -45,13 +42,58 @@ export const iosLeaveAnimation = ( if (numModals <= 1) { bodyEl.style.setProperty('background-color', ''); } - }) - .keyframes([ - { offset: 0, filter: 'contrast(0.85)', transform: `translateY(${modalTransform}) scale(${currentPresentingScale})`, borderRadius: '10px 10px 0 0' }, - { offset: 1, filter: 'contrast(1)', transform: 'translateY(0px) scale(1)', borderRadius: '0px' } - ]); + }); - baseAnimation.addAnimation(presentingAnimation); + const bodyEl = document.body; + + if (isMobile) { + const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))'; + const modalTransform = hasCardModal ? '-10px' : transformOffset; + const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; + const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`; + + presentingAnimation + .addElement(presentingEl) + .keyframes([ + { offset: 0, filter: 'contrast(0.85)', transform: finalTransform, borderRadius: '10px 10px 0 0' }, + { offset: 1, filter: 'contrast(1)', transform: 'translateY(0px) scale(1)', borderRadius: '0px' } + ]); + + baseAnimation.addAnimation(presentingAnimation); + } else { + baseAnimation.addAnimation(backdropAnimation); + + if (!hasCardModal) { + wrapperAnimation.fromTo('opacity', '1', '0'); + } else { + const toPresentingScale = (hasCardModal) ? SwipeToCloseDefaults.MIN_PRESENTING_SCALE : 1; + const finalTransform = `translateY(-10px) scale(${toPresentingScale})`; + + presentingAnimation + .addElement(presentingEl.querySelector('.modal-wrapper')!) + .afterStyles({ + 'transform': 'translate3d(0, 0, 0)' + }) + .keyframes([ + { offset: 0, filter: 'contrast(0.85)', transform: finalTransform }, + { offset: 1, filter: 'contrast(1)', transform: 'translateY(0) scale(1)' } + ]); + + const shadowAnimation = createAnimation() + .addElement(presentingEl.querySelector('.modal-shadow')!) + .afterStyles({ + 'transform': 'translateY(0) scale(1)' + }) + .keyframes([ + { offset: 0, opacity: '0', transform: finalTransform }, + { offset: 1, opacity: '1', transform: 'translateY(0) scale(1)' } + ]); + + baseAnimation.addAnimation([presentingAnimation, shadowAnimation]); + } + } + } else { + baseAnimation.addAnimation(backdropAnimation); } return baseAnimation; diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index 32a45d89cc..4fa1a57c64 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -19,24 +19,58 @@ @include transform(translate3d(0, 100%, 0)); } -:host(.modal-card) { - --backdrop-opacity: 0; - --width: 100%; - - align-items: flex-end; -} - -:host(.modal-card) ion-backdrop { - pointer-events: none; -} - -:host(.modal-card) .modal-wrapper { - @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); - 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); +@media screen and (max-width: 767px) { + @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 + + @supports not (width: max(0px, 1px)) { + :host(.modal-card) .modal-wrapper { + height: calc(100% - 40px); + } + } + + :host(.modal-card) .modal-wrapper { + @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); + } + + :host(.modal-card) { + --backdrop-opacity: 0; + --width: 100%; + + align-items: flex-end; + } + + :host(.modal-card) .modal-shadow { + display: none; + } + + :host(.modal-card) ion-backdrop { + pointer-events: none; + } +} + +@media screen and (min-width: 768px) { + :host { + --width: calc(100% - 120px); + --height: calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom))); + --max-width: 720px; + --max-height: 1000px; + } + + :host(.modal-card) { + --backdrop-opacity: 0; + + transition: all 0.5s ease-in-out; + + &:first-of-type { + --backdrop-opacity: 0.18; + } + } + + :host(.modal-card) .modal-shadow { + box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1); + } +} diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss index 747944e119..581de3e0a4 100644 --- a/core/src/components/modal/modal.scss +++ b/core/src/components/modal/modal.scss @@ -52,7 +52,8 @@ display: none; } -.modal-wrapper { +.modal-wrapper, +.modal-shadow { @include border-radius(var(--border-radius)); width: var(--width); @@ -74,6 +75,12 @@ z-index: 10; } +.modal-shadow { + position: absolute; + + 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}; diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 04557f91de..cd5f7e8c1f 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -272,6 +272,8 @@ export class Modal implements ComponentInterface, OverlayInterface { onIonModalDidDismiss={this.onLifecycle} > + + {mode === 'ios' &&
} From 576da29ac6058d047606ce6611cd31ad32ed26c6 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 25 Mar 2020 14:57:31 -0400 Subject: [PATCH 28/28] 5.0.6 --- CHANGELOG.md | 31 ++++++++++++++++++++++++++++ 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, 44 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b43a3ecdb..9614c8e6e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,34 @@ +## [5.0.6](https://github.com/ionic-team/ionic/compare/v5.0.5...v5.0.6) (2020-03-25) + + +### Bug Fixes + + +* **all** only warn invalid mode if used on an ionic component ([#20828](https://github.com/ionic-team/ionic/issues/20828)) ([6ed1c51](https://github.com/ionic-team/ionic/commit/6ed1c51321d781ff92efbf623790af91cb16a5af)), closes [#20055](https://github.com/ionic-team/ionic/issues/20055) +* **all** properly scroll to input with scroll assist ([#20742](https://github.com/ionic-team/ionic/issues/20742)) ([e24060e](https://github.com/ionic-team/ionic/commit/e24060ecd9d803ece4bbb9c6beae23e761d7fb5e)), closes [#19589](https://github.com/ionic-team/ionic/issues/19589) +* **angular:** export Animation and Gesture related types ([#20766](https://github.com/ionic-team/ionic/issues/20766)) ([2ece194](https://github.com/ionic-team/ionic/commit/2ece194a085742b919cc68f643b1b365f7d85594)) +* **angular:** respect animation property for ion-router-outlet ([#20767](https://github.com/ionic-team/ionic/issues/20767)) ([f2dbe1f](https://github.com/ionic-team/ionic/commit/f2dbe1ff3be44e6697b791de392a9ef46dbf27e8)), closes [#20764](https://github.com/ionic-team/ionic/issues/20764) +* **content:** apply --offset-top and --offset-bottom values correctly ([#20790](https://github.com/ionic-team/ionic/issues/20790)) ([2707289](https://github.com/ionic-team/ionic/commit/2707289b36883ae495f86cfb2f2b6c84e090551b)), closes [#20735](https://github.com/ionic-team/ionic/issues/20735) +* **content:** set overscroll-behavior based on the scroll direction ([#20011](https://github.com/ionic-team/ionic/issues/20011)) ([a3fc77b](https://github.com/ionic-team/ionic/commit/a3fc77be91ead6edc3f07c6127879753a063bd18)), closes [#20010](https://github.com/ionic-team/ionic/issues/20010) +* **item-divider:** update design to match native iOS ([#20854](https://github.com/ionic-team/ionic/issues/20854)) ([d91e22d](https://github.com/ionic-team/ionic/commit/d91e22d820f170ecfdfad835ca56701ad70e6f3d)) +* **item-sliding:** account for swipe to go back gesture when opening item-options ([#20777](https://github.com/ionic-team/ionic/issues/20777)) ([f23ac44](https://github.com/ionic-team/ionic/commit/f23ac44c9a6646129762bb861cae6145690ca5a1)), closes [#20773](https://github.com/ionic-team/ionic/issues/20773) +* **list:** show bottom border on last item in a list followed by a list ([#20798](https://github.com/ionic-team/ionic/issues/20798)) ([7bc5191](https://github.com/ionic-team/ionic/commit/7bc51911f6c538be8b91d1e569675b19832cb000)) +* **modal:** backdrop and box shadows no longer stack when opening multiple modals ([#20801](https://github.com/ionic-team/ionic/issues/20801)) ([253cd96](https://github.com/ionic-team/ionic/commit/253cd96164914a803f6bb42ff95ca74880c940d0)), closes [#20800](https://github.com/ionic-team/ionic/issues/20800) +* **modal:** backdrop is no longer tappable on card-style modal on smaller screens ([#20802](https://github.com/ionic-team/ionic/issues/20802)) ([12932dd](https://github.com/ionic-team/ionic/commit/12932dd20212bec7d780650166c70819d125f75a)), closes [#20783](https://github.com/ionic-team/ionic/issues/20783) +* **modal:** properly apply border radius on card-style modal ([#20852](https://github.com/ionic-team/ionic/issues/20852)) ([dff3816](https://github.com/ionic-team/ionic/commit/dff3816c049a1c051f94d3176c8b903a69603912)), closes [#20851](https://github.com/ionic-team/ionic/issues/20851) +* **modal:** properly remove safe area padding on card-modal ([#20853](https://github.com/ionic-team/ionic/issues/20853)) ([71f1182](https://github.com/ionic-team/ionic/commit/71f118201b0918f60c1a078d55afd10b39f17e86)), closes [#20799](https://github.com/ionic-team/ionic/issues/20799) +* **modal:** respect card-style modal spec for iPadOS ([#20750](https://github.com/ionic-team/ionic/issues/20750)) ([75bae40](https://github.com/ionic-team/ionic/commit/75bae403e917b20645675343734440ee95d31634)), closes [#20700](https://github.com/ionic-team/ionic/issues/20700) +* **react:** expose correct type for CreateAnimation ([#20775](https://github.com/ionic-team/ionic/issues/20775)) ([0897c3f](https://github.com/ionic-team/ionic/commit/0897c3f9c2591442b3f80d28a25ec4471da3c9d7)), closes [#20771](https://github.com/ionic-team/ionic/issues/20771) +* **refresher:** properly dismiss refresher when completed synchronously ([#20815](https://github.com/ionic-team/ionic/issues/20815)) ([b1a87c8](https://github.com/ionic-team/ionic/commit/b1a87c88923201fd0b31bf55d81b97acc09ddf1c)), closes [#20803](https://github.com/ionic-team/ionic/issues/20803) +* **segment:** automatically expand width for scrollable segment buttons ([#20763](https://github.com/ionic-team/ionic/issues/20763)) ([cdfd50b](https://github.com/ionic-team/ionic/commit/cdfd50b554d1d8f89c3d9948c7613ce75ede1e52)), closes [#20566](https://github.com/ionic-team/ionic/issues/20566) +* **segment:** scrollable segments only show scrollbar if they overflow ([#20760](https://github.com/ionic-team/ionic/issues/20760)) ([ab146c9](https://github.com/ionic-team/ionic/commit/ab146c96ec5cbc962eed629c30b2c5c446f3098d)), closes [#20758](https://github.com/ionic-team/ionic/issues/20758) +* **slides:** check that mutation observer is defined for ssr ([#20791](https://github.com/ionic-team/ionic/issues/20791)) ([2d5d251](https://github.com/ionic-team/ionic/commit/2d5d2515be86496a280d93847185ab332e5d47a2)) +* **textarea:** properly adjust auto-grow textarea in scrolled content ([#19776](https://github.com/ionic-team/ionic/issues/19776)) ([8bd5bac](https://github.com/ionic-team/ionic/commit/8bd5bace73670dfe351b3734b51cbf3aa87517dc)), closes [#19193](https://github.com/ionic-team/ionic/issues/19193) +* **title:** improve reliability of large title ios nav transition ([#20861](https://github.com/ionic-team/ionic/issues/20861)) ([3bd6b5d](https://github.com/ionic-team/ionic/commit/3bd6b5def2877f6a918c587de25a10ccc82f88f1)) +* **title:** large title now inherits global color styling during nav transition ([#20862](https://github.com/ionic-team/ionic/issues/20862)) ([321140f](https://github.com/ionic-team/ionic/commit/321140ff736b46d2631a9e87a7b070009c5e1b2c)) + + + ## [5.0.5](https://github.com/ionic-team/ionic/compare/v5.0.4...v5.0.5) (2020-03-11) diff --git a/angular/package.json b/angular/package.json index 3efd5b9cd1..a50b4ea911 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "5.0.5", + "version": "5.0.6", "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.5", + "@ionic/core": "5.0.6", "tslib": "^1.9.3" }, "peerDependencies": { diff --git a/core/package.json b/core/package.json index 2ce1a63caa..dc8ba7612d 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "5.0.5", + "version": "5.0.6", "description": "Base components for Ionic", "keywords": [ "ionic", diff --git a/docs/package.json b/docs/package.json index 5302fadf5c..906c81e3f6 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "5.0.5", + "version": "5.0.6", "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 118c751262..29ddffd852 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "5.0.5", + "version": "5.0.6", "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.5", + "@ionic/core": "5.0.6", "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 988f8684b5..5fcaeb2462 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "5.0.5", + "version": "5.0.6", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -39,16 +39,16 @@ "tslib": "*" }, "peerDependencies": { - "@ionic/core": "5.0.5", - "@ionic/react": "5.0.5", + "@ionic/core": "5.0.6", + "@ionic/react": "5.0.6", "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.5", - "@ionic/react": "5.0.5", + "@ionic/core": "5.0.6", + "@ionic/react": "5.0.6", "@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 171b35518b..2e01187432 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "5.0.5", + "version": "5.0.6", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "5.0.5", + "@ionic/core": "5.0.6", "ionicons": "^5.0.1", "tslib": "*" },