ionic-framework

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)

Bug Fixes

• angular: correct path for angular projects (#20436) (fd9c7a9), closes #20435

Bug Fixes

• content: only emit scroll events if enabled (#20401) (fd1b44a)
• header: backdrop filter no longer distorts content with collapsible header (#20388) (11d3945), closes #20385
• item: remove unneeded box-shadow CSS variable (#20412) (a6764c4), closes #20392
• label: remove subpixel font-size to prevent visual glitches (#20415) (3d6f287), closes #20407
• segment: add activated class directly to segment button (#20400) (e8886e9)

Bug Fixes

• refresher: ensure gesture does not interfere with item-sliding (#20380) (8983c70), closes #20379
• refresher: translate background content when refreshing (#20378) (cf70916), closes #20377
• segment: allow background to be set on iOS segment in a toolbar (#20350) (0f31624)
• toolbar: properly apply safe area and border (#20375) (4971499), closes #20354

Bug Fixes

• header: fix race condition in collapsible header (#20334) (215d55f)
• ios: translucent toolbar blur no longer obscures entering page toolbar content (#20314) (e580b88), closes #19158
• radio: do not clear radio group value from radio (#20343) (ff78e6e), closes #20323
• radio: set default radio value if undefined (#20329) (eb57723)
• refresher: add correct fallbacks for native refreshers (#20333) (fd55427)
• refresher: resolve undefined issues when updating component (#20322) (59d8687), closes #20320

Bug Fixes

• 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: resolve height inheritance issues (#20309) (09bef71), closes #20305
• picker: include showBackdrop in interface (#20301) (33186ba), closes #18893
• react: export proper types of animations and gestures (#20311) (0034088)
• refresher: update animation for dashed property values (#20310) (44211c1)
• toast: inherit color in cancel button for a toast with color (#20299) (7b44ae2), closes #20139

Bug Fixes

• input: revert previous type change (db1fd1d)

Release Candidate is here! 🎉

Bug Fixes

• animation: add property conversions for CSS Animations (#20252), fixes #20251 (32a7401)
• content: set min-height to allow for sticky headers (#20265), fixes #20258 (e613f63)
• modal: card-style modal now opens at full width on larger devices (#20256), fixes #20255 (443cbd9)
• segment: clicking disabled button no longer adds ripple to active button (#20254), fixes #20253 (f896821)

Features

• components: improve button states and add new css properties (#19440) (9415929), closes #20213 #19965
• react: add Ionic Animations wrapper (experimental) (#20273) (b59d764)
• segment-button: add --indicator-height property to segment button (#19653) (d76a503)

BREAKING CHANGES

We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.

Activated Class

The activated class that is automatically added to buttons on press has been renamed to ion-activated. This will be more consistent with our ion-focused class we add and also will reduce conflicts with users' CSS.

CSS Variables

The --background-hover, --background-focused and --background-activated CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:

--background-hover: rgba(44, 44, 44, 0.08);

You will likely not see a hover state anymore. It should be updated to only set the desired color:

--background-hover: rgba(44, 44, 44);

If the opacity desired is something other than what the spec asks for, use:

--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;

Bug Fixes

• core: updating type of input value to accept numbers, fixes #20173 (#20267) (7080205)
• react: adding missing overlay component events, fixes #19923 (#20266) (ec6a8dd)
• react: Don't render overlay children if isOpen is false, fixes #20225 (#20226) (aff9612)
• react: re attach props on update, fixes 20192 (#20228) (9e35ebe)
• react: remove leaving view when routerdirection is back, fixes #20124 (#20268) (63d4e87)
• react: support routes without a path for notfound routes, fixes #20259 (#20261) (2f8c13b)
• react: update icon types to be a string as well, fixes #20229 (#20230) (1411d8a)

Bug Fixes

• action-sheet: allow scrollable action sheet with many options (#20145) (53fad97), closes #17311
• card: remove top padding of content in iOS if under header (#20223) (9232f16)
• content: scroll-content div now takes up full height of container (#20194) (9d63b41), closes #20185
• header: header opacity properly resets on collapsible titles (#20202) (8e11f79)
• modal: prevent double dismiss via gesture and backdrop tap on card-style modal (#20203) (5b0400d)
• picker: pick correct option at low velocities (#19660) (39d1262), closes #19659
• react: updating icon type and add caret to internal icons (#20216) (dc78f98)
• ssr: add reflect content-id attribute to applicable properties (#20169) (3aa47e6)

Code Refactoring

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

Features

• datetime: add custom timezone display property (#19519) (7b032c5), closes #19401
• segment: update design for iOS and MD spec (#19036) (dc66ce4), closes #18663
• toast: expose shadow parts (#20146) (3b4988a)

BREAKING CHANGES

We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.

• The following components have been updated to remove the checked or selected properties:

• Radio
• Segment Button
• Select

Developers should set the value property on the respective parent components in order to managed checked/selected status. See the Breaking Changes document for updated usage examples.

• Controller components have been removed. Developers should user their respective imports instead. This only affects vanilla JS applications.

Before:

<ion-modal-controller></ion-modal-controller>

After:

import { modalController } from '@ionic/core';

Bug Fixes

• react: add missing react memory router (8a5aba2)
• react: fixing type of icon in ToastOptions, ActionSheetOptions, fixes #20100 (857bab6)
• react: supporting ios and md props on icons (#20170) (676cc19)

Features

• refresher: add MD native refresher (#20096) (5b81bdf), closes #17316

Bug Fixes

• animation: support css animation on older devices (#20020) (49c394c), closes #20017
• icons: fix the ellipsis fill in ionicons (#20137) (9318d24)
• modal: account for safe area on devices with a notch (#20072) (1cabb53)
• react: fire lifecycle events on initial render, fixes #20071 (2dcf3ee)

Code Refactoring

• searchbar: set inputmode default to undefined (#20080) (6612604), closes #20074

Features

• angular: angular 9 support (#19515) (2344d0b)
• checkbox: add --checkmark-width variable (#19933) (c32a7bc), closes #16803
• radio: add --border-radius and --inner-border-radius variables (#20140) (a01c102)
• refresher: add iOS native refresher (#20037) (04e7c03), closes #18664
• toggle: add --border-radius and --handle-border-radius variables (#20141) (02a46a1)

BREAKING CHANGES

We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.

• searchbar: The inputmode property for ion-searchbar now defaults to undefined. To get the old behavior, set the inputmode property to "search".

Bug Fixes

• react: fire lifecycle events on initial render, fixes #20071 (9ea75eb)

Bug Fixes

• animation: convert hyphenated properties to camel case when using Web Animations (#20059) (56f67bd), closes #20058
• animation: properly update Web Animation object (#19964) (e766194)
• picker: pass selected value to handler on dismiss (#20042) (6e0b9c4), closes #20036
• tabs: preserve route navigation extras when changing tabs (#18493) (4c8f32f), closes #18717
• title: add correct safe area to large title nav transition (#20029) (300d543), closes #20028

Features

• modal: add card-style presentation with swipe to close gesture (#19428) (b3b3312), closes #18660

Bug Fixes

• react: don't show back button when not appropriate (684293d)
• react: first render performance improvements (1c7d1e5)
• react: fix refs for controllers, overlays, ionpage, and ionrouteroutlet, fixes #19924 (#20012) (eef55bb)
• react: support for 'root' router direction, fixes #19982 (#20052) (e116712)
• react: support navigating to same page and route updates in IonRouterOutlet, fixes #19891, #19892, #19986 (f9bf8db)

Upgrade Note

If you run into a "Property 'translate' is missing in type" error building after updating to 4.11.6, update your React Typings library to the latest:

npm i @types/react@latest @types/react-dom@latest

Bug Fixes

• animation: track correctly when updating CSS Animation (#19813) (7bd4412)
• card: update background to use the same as item (#19602) (1a8b7a4)
• content: set fixed content to position absolute (#19867) (fce3e24), closes #17754
• 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
• title: only animate large title if back button is in start slot (#19846) (cace1b3), closes #19840
• nav-params: set generic type on navigation parameters get() (#19195) (504051d)
• picker: pass data and role to dismiss (#19787) (7988720), closes #18454
• searchbar: use back button config value for cancel icon (#19353) (3d6f3b9)
• textarea: remove padding from textarea placeholder (#19694) (f63d37a), closes #19616
• toast: call button handler on cancel (#19793) (420aa66), closes #19791

Features

• animation: animation identifiers (#19771) (7d41715), closes #19550
• animation: cubic-bezier easing conversion utility (experimental) (#19788) (96a5e60), closes #19789
• 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)
• searchbar: add --box-shadow variable to style searchbar input (#19838) (1ab7066)
• 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

Breaking Changes

We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.

• back-button: convert back button to shadow (#19411) (0d40d3f)
• ionicons: update to Ionicons v5. See https://ionicons.com for more information. (#19670) (69e10de)
• list-header: redesign list header to match latest iOS spec (#19915) (5bbb95f)
• split-pane: convert split-pane to shadow (#19754) (d80f455)

Bug Fixes

• react: improved lifecycle hooks to deal with stale closures, fixes #19873 (#19874) (5ff786a)

Bug Fixes

• react: check for component unmount, fixes #19859 (7356c40)
• react: adding multiple subscriptions to lifecycle events, fixes #19792 (#19858) (0a3014d)
• react: add check to warn if no ionpage is found, fixes #19832 (#19857) (628e766)
• react: expand the location stack to better support back button, fixes #19748 (#19856) (d89508b)
• react: adding hardware back button support, fixes(#19819) (#19851) (fd9745d)
• react: adding swipe back functionality and routerOutlet ready improvements, fixes #19818 (#19849) (bcc40c8)
• react: create a new overlay each time component is presented, fixes #19841, #19823 (#19842) (9fad416)