ionic-framework

Bug Fixes

• menu: add console error for incorrect usage of contentId (#23871) (879ab8e), closes #23810
• modal: add sheet modal properties for angular (#23899) (d1763fc)
• modal: expose breakpoint props in ModalOptions interface (#23867) (5fd80fd), closes #23866
• modal: handle on sheet modal can now be turned off (#23900) (e2d2ad6)
• modal: modal displays in middle of screen on desktop (#23911) (9d87028)
• modal: sheet animation works correctly if breakpoints value does not include 1 (#23927) (414f246)
• modal: sheet modal handle is now positioned correctly (#23901) (58a4ba2)
• modal: sheet modal now accounts for safe area (#23884) (195d817), closes #23874

Features

• datetime: add ability to select only month, year, or month and year (#23913) (4ae44b7)
• datetime: add clear button (#23920) (18765e7), closes #17482
• platform: add ability to override platform detection methods (#23915) (45cabae), closes #19737
• react: add custom elements bundle (#23896) (c50d895)

Bug Fixes

• angular: nested tabs now go to correct page (#23902) (1ed9f07), closes #23897
• header: role attribute can now be customized (#23888) (8888e2b), closes #21327
• react: modal now mounts child component independently of other modals (#23903) (1e13429), closes #23904
• tab-bar: safe area padding now added when slot="top" (#23895) (4782969), closes #23893

Features

• action-sheet, loading, modal, picker, popover: pass HTML attributes to host element (#23929) (bd96a81)
• alert, toast: pass arbitrary HTML attributes to host element (#23891) (73a1daf), closes #23825

Bug Fixes

• angular: overlay interfaces are now properly exported (#23847) (c925274), closes #23846
• datetime: prevent vertical page scroll on interaction (#23780) (950350a), closes #23554
• item: form validation states are now properly shown (#23853) (5ca2ce9), closes #23733 #23850
• overlays: thrown errors are no longer suppressed (#23831) (a212eb5), closes #22724

Features

• modal: add bottom sheet functionality (#23828) (12216d3), closes #21039
• popover: add ability to pass event to present method (#23827) (1d2ee92), closes #23813

Bug Fixes

• alert: AlertButton role now has correct types (#23791) (864212b)
• label: label now only takes up as much space as needed when slotted (#23807) (9932e26), closes #23806
• reorder-group: dragging reorder item to bottom no longer gives out of bounds index (#23797) (02409f2), closes #23796
• vue: router guards are now fire correctly when written in a component (#23821) (3c44222), closes #23820

Features

• slides: add IonicSlides module for Swiper migration, deprecate ion-slides (#23844) (11fda41), closes #23447

Code Refactoring

• virtual-scroll: deprecated virtual scroll in favor of solutions provided by JS frameworks (#23854) (a0229bc)

Bug Fixes

• datetime: reduce time presentation min height (#23771) (bc4e826), closes #23690
• datetime: text color on ios mode now accounts for color contrast (#23729) (5980db4), closes #23723
• item: highlight now appears above helper/error text (#23763) (2995e33), closes #23510
• toast: ToastOptions interface now contains icon prop (#23737) (fbd32ff), closes #23736
• vue: custom element internal properties are no longer overridden in vue 3.1.0 (#23738) (ea39c70), closes #23539
• vue: modal and popover components now correctly pass properties (#23761) (578b906), closes #23698

Features

• action-sheet: add data property to ActionSheetButton (#23744) (30f8508), closes #23700
• datetime: add firstDayOfWeek property (#23692) (ea348f0), closes #23556
• datetime: add hourCycle property (#23686) (6342fde), closes #23661

Bug Fixes

• back-button: MD ripple now accounts for --ripple-color (#23749) (6b18a89), closes #23748
• img: correctly determine when to load image when scrolling quickly on slower devices (#23704) (067e621), closes #23703
• item-sliding: prevent scrolling during slide gesture (#23774) (e0c4ad3), closes #19564
• nav: custom animation is now used correctly (#23779) (f9415ef), closes #23777
• vue: using router.go now shows correct view (#23773) (621f4fa), closes #22563

Bug Fixes

• list: change inset border radius to match iOS 15 (#23711) (fe2810b)
• popover: fix keyboard arrow navigation (#23709) (f2e7a26), closes #23512
• vue: popover positioning is now correct with custom elements build (#23680) (3a1a9cb)

Features

• toast: add icon property to show icon at start of toast content (#23596) (df24c8c), closes #23524

Bug Fixes

• checkbox, radio: change event interfaces correctly use TypeScript generics for value (#23044) (8a941fd)
• gesture: onEnd now correctly fires even if the event target was removed from the DOM (#23713) (4edb5e2), closes #22819
• item-sliding: opening item while other items are open no longer requires multiple swipes (#23683) (792864f), closes #21579
• react: IonTabs no longer causes SSR to fail (#23696) (f2a05be), closes #23651
• vue: improve accuracy of ion-page dev warning (#23677) (fb260a9), closes #23675
• vue: tabs warning about user-provided router outlet change is now correctly logged (#23724) (4a64e97), closes #23719

Bug Fixes

• accordion: value can now be set as string when using multiple is true (#23581) (8f172de), closes #23550
• angular: modal and popover now have correct props defined on angular component (#23565) (e5a7b34)
• datetime: keyboard can now be used to navigate between years (#23585) (55bd1f7), closes #21553 #18122
• datetime: selecting time now works correctly on firefox (#23583) (4188964), closes #23545
• datetime: years displayed now more consistent with v5 datetime, max and min are now accounted for in MD mode (#23616) (be219a2), closes #23615

Features

• breadcrumbs: ionCollapsedClick event payload now contains references to collapsed breadcrumb elements (#23611) (9ce57d2), closes #23552
• datetime: add showDefaultTimeLabel property and time-label slot (#23577) (7ac0109), closes #23555
• datetime: add size property (#23649) (321341d), closes #23518
• range: add support for customizing pin format (#22972) (8f2c4f7)
• segment: add keyboard navigation, add selectOnFocus property to control selection follow focus behavior (#23590) (b6c53e5), closes #23520
• select: update popover interface to match MD spec on desktop, allow multiple values in popover interface (#23474) (2c07a15), closes #23657 #15500 #12310

Performance Improvements

• remove shims for legacy browsers no longer supported in v6 (#23592) (259b135)

Bug Fixes

• action-sheet: header, subheader, and icon alignment better matches native ios (#23322) (39315bc), closes #23317
• button: buttons are now disabled during page transitions (#23589) (3b803eb), closes #23588
• item: mirror disabled prop to aria attribute (#23544) (9021e7c), closes #23513
• menu-button: custom aria-label can now be set (#23608) (c08345d), closes #23604
• overlays: overlay interfaces are now exported from framework packages and documented (#23619) (773bbcb), closes #22790
• router-outlet: improve reliability of swipe back gesture when quickly swiping back (#23527) (fa06942), closes #22895

Bug Fixes

• accordion: improved reliability of accordion animations (#23531) (6fbd60b), closes #23504
• content: add touch-action manipulation for zoom and pan (#23534) (6ca1780), closes #22805
• datetime: scroll position no longer gets reset when using datetime in overlay (#23543) (b735b58)
• input, select, textarea: change type of placeholder prop to string only (#23500) (f3ae431), closes #22976
• popover: size property now works when providing only event (#23532) (bdc1f23), closes #23528
• popover: update animation to better match MD spec (#23541) (bdb95b7)
• react: export accordion and accordion group components (#23497) (a664d42)
• vue: navigating between parameterized pages now results in page transition (#23525) (e30b17c), closes #22662

Features

• accordion-group: add animated property to disable animations (#23530) (9a60dd0)
• action-sheet, alert: add id to AlertButton and ActionSheetButton (#18992) (9e24a0b), closes #22959
• vue: extend useIonRouter hook for programmatic navigation with animation control (#23499) (fc9e1b4), closes #23450

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.

• input, select, textarea: Updated the placeholder property on ion-input, ion-textarea, and ion-select to have a type of string | undefined.
• vue: The IonRouter type for useIonRouter has been renamed to UseIonRouterResult, and the IonKeyboardRef type for useKeyboard has been renamed to UseKeyboardResult.

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

Looking to test out the Framework v6 beta? Check out our v6 Beta Getting Started Guide.

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