ionic-team / ionic

Bug Fixes

• all: only warn invalid mode if used on an ionic component (#20828) (6ed1c51), closes #20055
• all: properly scroll to input with scroll assist (#20742) (e24060e), closes #19589
• angular: export Animation and Gesture related types (#20766) (2ece194)
• angular: respect animation property for ion-router-outlet (#20767) (f2dbe1f), closes #20764
• content: apply --offset-top and --offset-bottom values correctly (#20790) (2707289), closes #20735
• content: set overscroll-behavior based on the scroll direction (#20011) (a3fc77b), closes #20010
• item-divider: update design to match native iOS (#20854) (d91e22d)
• item-sliding: account for swipe to go back gesture when opening item-options (#20777) (f23ac44), closes #20773
• list: show bottom border on last item in a list followed by a list (#20798) (7bc5191)
• modal: backdrop and box shadows no longer stack when opening multiple modals (#20801) (253cd96), closes #20800
• modal: backdrop is no longer tappable on card-style modal on smaller screens (#20802) (12932dd), closes #20783
• modal: properly apply border radius on card-style modal (#20852) (dff3816), closes #20851
• modal: properly remove safe area padding on card-modal (#20853) (71f1182), closes #20799
• modal: respect card-style modal spec for iPadOS (#20750) (75bae40), closes #20700
• react: expose correct type for CreateAnimation (#20775) (0897c3f), closes #20771
• refresher: properly dismiss refresher when completed synchronously (#20815) (b1a87c8), closes #20803
• segment: automatically expand width for scrollable segment buttons (#20763) (cdfd50b), closes #20566
• segment: scrollable segments only show scrollbar if they overflow (#20760) (ab146c9), closes #20758
• slides: check that mutation observer is defined for ssr (#20791) (2d5d251)
• textarea: properly adjust auto-grow textarea in scrolled content (#19776) (8bd5bac), closes #19193
• title: improve reliability of large title ios nav transition (#20861) (3bd6b5d)
• title: large title now inherits global color styling during nav transition (#20862) (321140f)

Bug Fixes

• button: allow overflow to be overridden by the CSS variable (#20738) (7ecde36), closes #20726
• datetime: account for max property when hour, minute, or second is set to 0 (#20665) (2177461), closes #20652
• header: collapsable header should default to using content background (#20736) (f6c3ba7), closes #20691
• header: resolve undefined error on collapsible header when navigating quickly (#20728) (87a2721), closes #20725
• ios: large title animation now works properly in a modal (#20703) (ec4878a), closes #20696
• item: apply proper margin left for slotted icon in RTL (#20684) (d53595e), closes #20653
• label: text overflow for slotted headings (#20690) (4d34ce6), closes #17087
• modal: leave animation transitions modal completely out of viewport on ipad (#20702) (22d5256), closes #20697
• angular exclude components from ssr (#20674) (f64b142)
• modal: swipeable modal now works in firefox (#20714) (7d260b9), closes #20706
• overlays: prevent accidental dismiss of overlays when tapping screen twice (#20683) (b6c2a77), closes #20608
• segment: allow routerLink to work on segment buttons (#20682) (314dbb1), closes #20678
• segment: iOS mode segment now works on older Android devices (#20673) (44993b7), closes #20648

Bug Fixes

• animation: reset all temporary flags when interrupting an animation (#20627) (0e0e401), closes #20602
• buttons: use proper button colors based on CSS variables when inside of a toolbar (#20633) (c1d7bf2)

Bug Fixes

• menu: allow ssr to work properly with hardware back button updates (#20629) (fe8d74d)

Bug Fixes

• ios: large title transition works properly in tabbed applications (#20555) (7187541), closes #20482
• menu: hardware back button now dismisses side menu if open in Cordova/Capacitor app (#20558) (6b2a929), closes #20559
• modal: allow swipe to close animation to be overridden (#20585) (8d3ce8d), closes #20577
• modal: card style modal now adds appropriate contrast (#20604) (b5310ef)
• modal: allow swipeable modal background to be overridden (#20584) (ad6fac8), closes #20572
• modal: swipeable modal styles only apply to ios (#20571) (3a2d828), closes #20569
• refresher: ensure that translate is cleaned up to avoid stacking context (#20621) (e3e5c69), closes #17949
• segment: segment functions properly on older versions of Android (#20554) (0224bed), closes #20466
• select: properly align text, add icon-inner and placeholder part (#20605) (926ac3f)
• slides: set height to 100% for vertical slides (#20603) (20af652), closes #17341

Bug Fixes

• button: reduce font size of icon only button in toolbar on iOS (#20547) (59fa340)
• card: inherit background in inner button (#20461) (c16de96), closes #20458
• fab: add close icon to internal icons for react (#20490) (c4fb314), closes #20489
• fab: show close icon on hover, focused, activated (#20497) (e42c85d)
• input: do not clear input if "Enter" key pressed (#20462) (89bf08b), closes #20442
• ios: clamp out of bounds values for swipe to go back (#20540) (dd32a5e), closes #20505
• menu: swipe gesture should not open menu when a modal is displayed (#20546) (3252c2f), closes #20467
• modal: presenting multiple card-style modals now adds border radius properly (#20476) (abf594a), closes #20475
• modal: prevent card style modal styles from being overridden (#20470) (86ab77a), closes #20469
• react: do a better job matching up route to sync (#20446) (c0aadd6), closes #20363
• react: do not remove pages when navigating between tabs (#20431) (b6fbe98), closes #20398
• react: icons with MD set should work in browser (#20463) (82670fe)
• react: update paths of tab buttons when href changes in ion buttons (#20480) (45d03ba), closes #20321
• searchbar: properly align placeholder (#20460) (4d6e15a), closes #20456
• segment: border radius applies to indicator on ios (#20541) (9b5854d), closes #20539
• segment: do not show ripple effect if disabled via config (#20542) (7a461c5), closes #20533
• segment: inner div no longer interferes with click events (#20522) (06b828b), closes #20381
• segment: only emit ionChange when user releases pointer from screen (#20495) (4d50064), closes #20500 #20257
• tab-bar: update ios icon and label design to match native (#20548) (34f8576)

Enjoy! 🔥

We recommend updating to version 4.11.10 before updating to this version in order to see deprecation warnings related to your app in the developer console.

Run the following commands based on your project type:

# for an angular app
npm i @ionic/angular@latest --save

# for a react app
npm i @ionic/react@latest --save
npm i @ionic/react-router@latest --save
npm i ionicons@latest --save

# for a stencil / vanilla JS app
npm i @ionic/core@latest --save

Then take a look at the Breaking Changes file for API changes.

Features

• alert: add support for textarea inputs (#16851) (b28cf02), closes #14153
• angular: expose Ionic Animations via AnimationController (#19745) (67a7e23)
• angular: expose Ionic Gestures via GestureController (#19864) (48a7662)
• angular: angular 9 support (#19515) (2344d0b)
• animation: animation identifiers (#19771) (7d41715), closes #19550
• animation: cubic-bezier easing conversion utility (experimental) (#19788) (96a5e60), closes #19789
• checkbox: add --checkmark-width variable (#19933) (c32a7bc), closes #16803
• components: improve button states and add new css properties (#19440) (9415929), closes #20213 #19965
• datetime: add custom timezone display property (#19519) (7b032c5), closes #19401
• modal: add card-style presentation with swipe to close gesture (#19428) (b3b3312), closes #18660
• radio: add --border-radius and --inner-border-radius variables (#20140) (a01c102)
• refresher: add iOS native refresher (#20037) (04e7c03), closes #18664
• refresher: add MD native refresher (#20096) (5b81bdf), closes #17316
• react: add Ionic Animations wrapper (experimental) (#20273) (b59d764)
• searchbar: add --box-shadow variable to style searchbar input (#19838) (1ab7066)
• segment-button: add --indicator-height property to segment button (#19653) (d76a503)
• segment: update design for iOS and MD spec (#19036) (dc66ce4), closes #18663
• select: add --placeholder-opacity and --placeholder-color, expose shadow parts (#19893) (bef0f53), closes #17446
• split-pane: convert to shadow component, add width, max-width, and min-width vars (#19754) (d80f455), closes #17088
• toast: expose shadow parts (#20146) (3b4988a)
• toggle: add --border-radius and --handle-border-radius variables (#20141) (02a46a1)

Bug Fixes

• action-sheet: allow scrollable action sheet with many options (#20145) (53fad97), closes #17311
• angular: correct path for angular projects (#20436) (fd9c7a9), closes #20435
• animation: add property conversions for CSS Animations (#20252), fixes #20251 (32a7401)
• animation: support css animation on older devices (#20020) (49c394c), closes #20017
• animation: track correctly when updating CSS Animation (#19813) (7bd4412)
• card: update background to use the same as item (#19602) (1a8b7a4)
• card: remove top padding of content in iOS if under header (#20223) (9232f16)
• components: use proper colors for button states and add back input highlight (#20278) (628db18), closes #20276
• components: inherit text indent in all components with text inherit (#20300) (767b005), closes #17786
• content: set fixed content to position absolute (#19867) (fce3e24), closes #17754
• content: resolve height inheritance issues (#20309) (09bef71), closes #20305
• content: only emit scroll events if enabled (#20401) (fd1b44a)
• gesture: release gesture when disabling (#19855) (21484f1), closes #19848
• header: avoid flicker on collapsible header load (#19682) (0a7aae2)
• header: avoid flicker when collapsing (#19850) (a3666dd), closes #19839
• header: support collapsible header with multiple toolbars (#19909) (fc4bb2d)
• header: translucent toolbars now work with collapsible header (#19774) (b642b53), closes #19773
• header: header opacity properly resets on collapsible titles (#20202) (8e11f79)
• header: fix race condition in collapsible header (#20334) (215d55f)
• header: backdrop filter no longer distorts content with collapsible header (#20388) (11d3945), closes #20385
• icons: fix the ellipsis fill in ionicons (#20137) (9318d24)
• item: remove unneeded box-shadow CSS variable (#20412) (a6764c4), closes #20392
• ios: translucent toolbar blur no longer obscures entering page toolbar content (#20314) (e580b88), closes #19158
• label: remove subpixel font-size to prevent visual glitches (#20415) (3d6f287), closes #20407
• modal: prevent double dismiss via gesture and backdrop tap on card-style modal (#20203) (5b0400d)
• modal: card-style modal now opens at full width on larger devices (#20256), fixes #20255 (443cbd9)
• modal: account for safe area on devices with a notch (#20072) (1cabb53)
• nav-params: set generic type on navigation parameters get() (#19195) (504051d)
• picker: pass selected value to handler on dismiss (#20042) (6e0b9c4), closes #20036
• picker: pass data and role to dismiss (#19787) (7988720), closes #18454
• picker: include showBackdrop in interface (#20301) (33186ba), closes #18893
• picker: pick correct option at low velocities (#19660) (39d1262), closes #19659
• radio: do not clear radio group value from radio (#20343) (ff78e6e), closes #20323
• radio: set default radio value if undefined (#20329) (eb57723)
• react: export proper types of animations and gestures (#20311) (0034088)
• react: fire lifecycle events on initial render, fixes #20071 (2dcf3ee)
• react: updating icon type and add caret to internal icons (#20216) (dc78f98)
• searchbar: set inputmode default to undefined (#20080) (6612604), closes #20074
• searchbar: use back button config value for cancel icon (#19353) (3d6f3b9)
• segment: add activated class directly to segment button (#20400) (e8886e9)
• segment: clicking disabled button no longer adds ripple to active button (#20254), fixes #20253 (f896821)
• segment: allow background to be set on iOS segment in a toolbar (#20350) (0f31624)
• ssr: add reflect content-id attribute to applicable properties (#20169) (3aa47e6)
• tabs: preserve route navigation extras when changing tabs (#18493) (4c8f32f), closes #18717
• textarea: remove padding from textarea placeholder (#19694) (f63d37a), closes #19616
• title: only animate large title if back button is in start slot (#19846) (cace1b3), closes #19840
• title: add correct safe area to large title nav transition (#20029) (300d543), closes #20028
• toast: inherit color in cancel button for a toast with color (#20299) (7b44ae2), closes #20139
• toast: call button handler on cancel (#19793) (420aa66), closes #19791

Code Refactoring

• removed checked/selected properties in favor of setting value on parent (#19449) (a5229d9)