ionic-framework

Bug Fixes

• animation: typescript interface has correct return value for progress methods (#23536) (f3d6abb)
• ios, md: double tapping back button no longer causes app to go back 2 pages (#23526) (69be51d), closes #18455

Bug Fixes

• modal: add additional padding to toolbars in iOS modal (#23262) (a037b65), closes #22778
• searchbar: showClearButton now defaults to 'always' for improved usability with screen readers (#23475) (80f181d)
• toast: whitespace variable now defaults to normal (#22866) (9b78689)
• header: removed border from last toolbar when using collapsible large title (#22891) (c72bc5d), closes #22777
• ios: update toolbar and tabbar default background colors (#22852) (3d615cb), closes #22780

Code Refactoring

• all: update required browser, framework, and mobile platform versions for v6 (#23443) (c842dd8)
• angular: remove Config.set() method (#22918) (9e05891)
• vue: drop support for "on" prefixed overlay events and bump minimum required version of vue to 3.0.6 (#23229) (6fcb3a6)
• vue: remove support for child routes nested inside of tabs (#22919) (75458ac)

Features

• accordion: add accordion and accordion-group components (#22865) (073883a), closes #17094
• breadcrumbs: add breadcrumbs component (#22701) (2f6b1e4), closes #22770
• datetime: add calendar picker (#23416) (932d3ca), closes #19423
• item: add helper text, error text, counter, shape, and fill mode (#23354) (faefe97), closes #19619
• modal: modals can now be used inline (#23341) (3be1c3d), closes #20117 #20263
• popover: add desktop support (#23258) (a67a0fa), closes #21599
• popover: popover can now be used inline (#23231) (308fa1c)
• slides: add IonicSwiper modules, deprecate ion-slides, and add link to migration (#23447) (623c84a)
• spinner: add lines-sharp, lines-sharp-small, update styles for ios (#22397) (2a5b272)
• vue: add custom elements bundle (#23458) (dc48a9f)

Be on the lookout for additional features and bug fixes in future beta releases of Framework v6!

BREAKING CHANGES

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

• all: Browser, JS Framework, and mobile platform minimum required versions have been updated.
• angular: The Config.set() method has been removed. See https://ionicframework.com/docs/angular/config for examples on how to set config globally, per-component, and per-platform.
• datetime: The ion-datetime component has been revamped to use a new calendar style. As a result, some APIs have been removed. See https://github.com/ionic-team/ionic-framework/blob/master/BREAKING.md for more details.
• header: The last toolbar in the header with a collapsible large title no longer has a border.
• ios: The tab bar and toolbar default background colors have been updated to better reflect the latest iOS styles.
• popover: Converted ion-popover to use the Shadow DOM.
• searchbar: The showClearButton property on ion-searchbar now defaults to 'always'.
• toast: The --white-space CSS Variable now defaults to normal.
• vue: - Dropped support for prefixed overlay events in favor of non prefixed events (I.e. @onDidDismiss becomes @didDismiss).
• vue: Support for child routes nested inside of tabs has been removed to better conform to Vue Router's best practices. Additional routes should be written as sibling routes with the parent tab as the path prefix.

Please see the BREAKING.md file for a complete list of breaking changes in Framework v6.

Bug Fixes

• button: buttons using fill and color properties now account for hover and focused opacity variables (#23442) (68c0e71), closes #23441
• item: using multiple items with inputs no longer results in console warnings (#23429) (e27b5b6), closes #23427
• vue: IonTabs can now accept IonRouterOutlet, deprecated default router outlet in tabs (#23477) (a2a4cff), closes #23321

Bug Fixes

• modal: swipe to close modal is no longer swipeable on footer (#23401) (ae96563), closes #23398
• title: inherit padding for iOS title in a toolbar (#23343) (82cfa55), closes #23072
• vue: improve v-model integration for Vue 3.1.0+ (#23420) (f008628)
• vue: prevent error from being thrown when testing on certain jest runners (#23421) (60bedb5), closes #23397

Bug Fixes

• action-sheet: subheader no longer overlaps action sheet buttons (#23318) (d473a53), closes #23316
• all: reflect color property as an attribute for vue (#23345) (dc430af), closes #23323
• range: knob can now have an accessible name (#23338) (881dcff), closes #23295
• react: remove @ionic/core dependency in @ionic/react-router to resolve yarn install warning (#23351) (36bfa33), closes #23346
• react: support history@5 in preparation for react router 6 (#23297) (4da5216), closes #23294
• router: guards are now triggered on initial navigation (#23123) (56f6f56), closes #22936
• router: redirects now account for query string (#23337) (08a9f3a), closes #23136
• skeleton-text: animation no longer jumps on large skeleton text elements (#22697) (1a36922), closes #22694
• slides: resolve prototype pollution in swiper v5 (#23344) (a708c41), closes #23342
• title: large title scale animation is now correct in rtl mode (#23372) (3d474ec), closes #23371

Bug Fixes

• angular: warnings are no longer generated when running tests with ng test (#23292) (9cb6c80), closes #19926
• overlays: screen readers no longer read content behind overlays (#23284) (a9b12a5), closes #22714
• refresher: refresher now only activates when pulling down on MD (#23283) (1e1596f), closes #23245
• vue: use correct history mode when doing ssr to avoid errors (#23255) (2e00dab), closes #23254

Bug Fixes

• angular: back button goes back to proper tab on angular 11.2.10 (#23238) (e436439), closes #23230
• react: remove hardware back button event listener when NavManager is unmounted (#23224) (c501da7), closes #23170
• slides: undefined error is no longer thrown after destroying and quickly re-creating ion-slides (#23239) (2ccaabb), closes #22289
• vue: components inside of ion-nav are now unmounted properly (#23240) (f2f41e2), closes #23233
• vue: overlay events can now be listened for without the "on" prefix, deprecated "on" prefix event listeners (#23227) (dab927d)

Bug Fixes

• content: only render a main element when content is being used in primary view (#23160) (2d07d82)
• datetime, input, textarea: only add aria-labelledby if there is an adjacent label (#23211) (a31fb55)
• radio-group: pressing spacebar correctly unselects radio with allow-empty-selection (#23194) (7139b3f), closes #22734
• react: callback refs now work correctly with ionic components (#23152) (0dd189e), closes #23153
• segment, segment-button: use tablist and tab roles (#23145) (91ac340)
• vue: dynamic tabs are now correctly recognized (#23212) (004885b), closes #22847
• vue: update props when navigating to new parameterized route (#23189) (35c8802)

Bug Fixes

• angular: swiping back quickly no longer causes app to get stuck (#23125) (28c52fd), closes #15154
• input: inherit aria-label to input (#23159) (61f094d)
• react: overlays now correctly unmount any child components after dismissing (#23149) (dee6eb3), closes #23140
• react, vue: correct view now chosen when going back inside tabs (#23154) (7203190), closes #23087 #23101
• toggle: prevent click event from firing twice (#23146) (42e6c90), closes #23041
• vue: account for event name changes in vue 3.0.6+ for overlay components (#23100) (27318cf)
• vue: components now integrate properly with vee-validate (#23114) (ba51daf), closes #22886

Bug Fixes

• all: update tslib to resolve export errors (#23092) (0cdd326), closes #23090
• react: correctly show ion-back-button when going back (#23069) (1c93b75), closes #22692

Bug Fixes

• item: detail icon now respects rtl mode (#23081) (b04fb6e), closes #23078

Bug Fixes

• custom-elements: overlays now present correctly when using custom elements build (#23039) (e4bf052), closes #23029
• item: detail icon is no longer announced by screen readers (#23055) (c877061), closes #23054
• label: properly float labels for non-input items (#23060) (c8a3999)
• react: only pass tab event props from IonTabs to IonTabBar if defined (#23024) (f94e618), closes #23023
• refresher: progressEnd no longer errors when pulling quickly in MD native refresher (#23056) (67617fb)
• virtual-scroll: allow null in items property (#23047) (2a253a1)
• vue: passing params as props are correctly updated when switching pages (#23049) (2f54bc1), closes #23043

Bug Fixes

• all: improve support for ids with special characters when getting label element (#22680) (19d63f6), closes #22678
• header: collapsed toolbar is no longer incorrectly shown when using ion-refresher (#22937) (5300dcc), closes #22829
• label: only show placeholder with floating label when focused (#22958) (9282aa6), closes #17571
• progress-bar: use correct theme colors in dark mode (#22965) (b6b2714), closes #20098
• radio-group: pressing space no longer jumps screen to bottom of page (#22892) (3a0465e), closes #22716
• react: IonRouterOutlet now respects animated={false} prop (#22905) (da1b7a0), closes #22903
• react: onIonTabsWillChange and onIonTabsDidChange event handlers are now properly bound to IonTabs (#22233) (b064fde)
• react, vue: navigating using ion-back-button now selects correct page (#22974) (cd8ffd8), closes #22830
• react, vue: tab buttons no longer throw an error if href is undefined (#22998) (943e3f6), closes #22997
• refresher: add correct dark mode styles (#22639) (c05476b), closes #22637
• vue: correctly remove active state from tab button when navigating away from tab (#23000) (a2763af), closes #22597
• vue: prevent race conditions when opening overlays (#22883) (68a9b80), closes #22880

Features

• custom-elements: add experimental custom elements build (#22863) (0de75af)
• progress-bar: add parts for more design customization (#22938) (e256d3f), closes #20062 #21820
• react: add react hooks to control overlay components (#22484) (b83e009)
• searchbar: add showClearIcon property (#22759) (215eb5d), closes #22738
• vue: add composition API ionic lifecycle hooks (#22970) (dd1c8db), closes #22769

Bug Fixes

• vue: account for event name changes in vue 3.0.6+ (#22980) (7dd2e6d), closes #22977

Bug Fixes

• angular: update ngAdd schematic (#22858) (487349f)
• app: keyboard no longer hides when using contenteditable (#22857) (b6b2d34), closes #22856
• ios: scroll assist no longer prevents first click event from firing (#22845) (f7d4c21), closes #21871
• select: class on component now indicates when select is open (#22846) (1a5accc), closes #22801
• vue: ionChange events now propagate correctly (#22872) (ff0f1da), closes #22870

Bug Fixes

• react: do not unmount overlay inner component until overlay is dismissed (#22813) (ab1fc8f), closes #22761
• react: adding dynamic class to ion-page no longer hides component (#22666) (a01bdb8), closes #22631
• react: improve view matching logic (#22569) (f891f66)
• react, vue: do not show back button when replacing to root page (#22750) (9e9a372), closes #22528
• refresher: correctly detect spinner when using native refresher (#22800) (e2d8e5c), closes #22706
• title: only add large title transition when using collapsible header (#22762) (348c50b), closes #22760
• vue: all ionic vue components can now use router link (#22743) (3d6ac13)
• vue: correctly determine leaving view when transitioning to a new instance of a previous page (#22655) (e3a05bf), closes #22654 #22658
• vue: ensure v-model value is properly synced before ionChange event (#22749) (e1d6627), closes #22610
• vue: improve path matching with tabs, deprecated adding additional pages as children of tabs without a router outlet (#22807) (2a3ce9a), closes #22519
• vue: improve v-model binding sync between vue wrappers and web components (#22745) (64719f4), closes #22731
• vue: output commonjs format for node environments (#22766) (7ecae2e)
• vue: tab bar is now correctly hidden when keyboard is open (#22687) (5c27dd8)

Bug Fixes

• android: setting hardwareBackButton: false in config now disables default webview behavior (#22555) (dc9faa6), closes #18237
• button: allow aria-label to be inherited on inner button (#22632) (818e387), closes #22629
• react: hardware back button now navigates correctly (36939e1)
• react: setting a ref now allows other props to be passed in (31f45cd), closes #22609
• refresher: clean up old css if calling refresh method before native refresher is setup (#22640) (8d5ed47), closes #22636
• refresher: refresher correctly detects native refresher when shown asynchronously (#22623) (5ed73cd), closes #22616
• vue: adding non tab button elements inside ion-tab-bar no longer causes errors (#22643) (61cf0c5), closes #22642
• vue: correctly handle navigation failures (#22621) (216f51b), closes #22591
• vue: correctly remove old view when replacing route (#22566) (4f4f31b), closes #22492
• vue: pass in correct route to props function (#22605) (01afdc4), closes #22602
• vue: query strings are now correctly handled when navigating back (#22615) (a94e2a8), closes #22517
• vue: swipe back gesture is properly disabled when swipeBackEnabled config is false (#22568) (9d04c12), closes #22567

For Ionic Vue Developers

Vue Router 4 has been released! Be sure to update from the release candidate to the latest stable version of Vue Router.

For more information on the changes in Vue Router 4, see https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0.

npm install vue-router@4

Bug Fixes

• checkbox: click handler now fires properly (#22573) (0786835), closes #22557
• radio: properly announce radios on screen readers and resolve axe errors (#22507) (afcc46e)
• react: eliminate use of deprecated findDOMNode, resolves #20972 (5275332)
• router: navigation guards now fire when navigating to a page with params (#22521) (1956f98), closes #22516
• select: fix a11y issues with axe and screen readers (#22494) (04b874e), closes #21552 #21548
• select: improvements for announcing placeholder and value on screenreaders (#22556) (ea52db6)
• vue: onBeforeRouteLeave and onBeforeRouteUpdate hooks now fire properly (#22542) (8002114), closes #22540
• vue: tabs now correctly fire lifecycle events (#22479) (cdc2fb6), closes #22466
• vue: unit testing a routerLink-capable component no longer warns of missing router dependency (#22532) (4e23aad), closes #22506

For Ionic Vue Developers

When updating to Ionic Vue v5.5.1 make sure you are on the latest version of vue-router@next to take advantage of the bug fixes in this release:

npm install vue-router@next

Bug Fixes

• backdrop: nvda no longer incorrectly announces backdrop (#22481) (2d878fc), closes #22102
• checkbox: use a native input to fix a11y issues with axe and screen readers (#22402) (7214a84), closes #21644 #20517 #17796
• input: title attribute is now automatically inherited (#22493) (abad12f), closes #22055
• refresher: ios native refresher now works in side menu (#22449) (a4a6453)
• refresher: md native refresher now works in side menu (#22446) (6b817f2), closes #20832
• toggle: use a native input to fix a11y issues with axe and screen readers (#22477) (813611a), closes #22011 #21552
• vue: correctly pass route props to components (#22476) (0956f8b), closes #22472
• vue: tab bar now works with slot="top" (#22461) (e17c822), closes #22456

Features

• chip: add disabled property (#20658) (0a0cbd8), closes #19510
• segment: add swipeGesture property to allow for disabling of the swipe gesture (#22087) (65bc995), closes #22048
• vue: composition api lifecycle methods (#22241) (f5b0299)
• vue: vetur support (#22403) (e76f79d)
• vue: web-types support (#22428) (639314a), closes #19522

Performance Improvements

• ios: move content to stacking context while preserving position: fixed behavior (#22489) (d77a9d5), closes #22473

Bug Fixes

• build: add missing es5 output (228d349)