ionic-framework

Bug Fixes

• react: adding change events to iontabs, fixes #19665 (#19711) (b7baf24)
• react: adding HashRouter to available ion routers, fixes #19621 (#19683) (fcdbb3c)
• react: checking if node is actually an element before treating it like one, fixes #19769 (#19783) (9d0caf6)
• react: checking isOpen again after async call before opening overlay, fixes #19755 (f70e71a)
• react: don't remove current view, provide a better method to determine showGoBack fixes #19731 and #19732 (31c754d)
• react: removing pages from DOM on nav, fixes #19701 (#19712) (ee21d3a)
• react: unmount leaving view when using browser back button, fixes #19749 (#19781) (2dc5540)

Bug Fixes

• animations: ensure all elements are cleaned up when calling .destroy() (#19654) (d97e167)
• header: collapsible header works in tabs (#19658) (4853909), closes #19640
• ios: hide leaving view after nav transition to avoid flicker (#19691) (70e0562), closes #19674
• menu: clamp out of bounds swipe value (#19684) (1535e95), closes #18927
• react: add IonPicker as controller component, fixes #19620 (#19643) (ed98d9e)
• react: adding change events to IonTabs, fixes #19665 (#19711) (b7baf24)
• react: adding HashRouter to available ion routers, fixes #19621 (#19683) (fcdbb3c)
• react: pages no longer hidden when navigating between tabs, fixes #19646 (#19647) (8776556)
• react: ensure views are removed from DOM after navigating back, fixes #19701 (#19712) (ee21d3a)

Bug Fixes

• animations: ensure all elements are cleaned up when calling .destroy() (#19654) (2f88237)
• css: update responsive display media queries (#18601) (5d6e077), closes #18600
• grid: remove padding on children columns when grid has ion-no-padding (#19592) (17119f5), closes #17459
• toast: inherit height in container to center align content (#19409) (250718a)

Features

• components: cascade mode from parent to child components (#19369) (3dd5f05), closes #18285
• menu: default to overlay for ios menu (#19063) (dbf6a44), closes #18662
• overlays: add global backdrop opacity variable for animations (#19533) (bd22926), closes #16446

Performance Improvements

• animations: do not create setTimeout if infinite iterations (#19632) (0d699fb), closes #19627
• animations: wrap loops in requestAnimationFrame call (#19630) (589e67e), closes #19629

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.

• all: mode is now cascaded from parent to child component. If this is not desired set a different mode on the child component. (#19369) (55462d7)

• anchor: remove ion-anchor, use ion-router-link instead. (#18935) (e7cd197)

• card: convert card to shadow. (#19395) (08bb60d)

• css: responsive display media queries in the display CSS file have been updated. Instead of using the maximum value of that breakpoint (for .ion-hide-{breakpoint}-down classes) the maximum of the media query will be the minimum of that breakpoint. (#18601) (40a8bff)

• css: remove all CSS utility attributes. Use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities (#18956) (04862df)

  BEFORE:

  <ion-header text-center></ion-header>
  <ion-content padding></ion-content>
  <ion-label text-wrap></ion-label>
  <ion-item wrap></ion-item>
  

  AFTER:

  <ion-header class="ion-text-center"></ion-header>
  <ion-content class="ion-padding"></ion-content>
  <ion-label class="ion-text-wrap"></ion-label>
  <ion-item class="ion-wrap"></ion-item>
  

• events: remove the Events service. (#19600) (8d4a721)

  • Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
  • Use "Redux" for advanced state management: https://ngrx.io

• header/footer: remove no-border attribute from header/footer, use ion-no-border class instead. (#18954) (d9f6119)

• menu: iOS menu now defaults to overlay, set type to "reveal" to get the old behavior. (#19063) (ccb54a1)

• menu-controller: remove swipeEnable(), use swipeGesture() instead. (#19526) (30bd8fd)

• nav: remove ion-nav-pop, ion-nav-push and ion-nav-set-root. Use ion-nav-link with routerDirection instead. (#19240) (e334d73)

• searchbar: remove boolean values from showCancelButton, use string values: "always", "focus", "never". (#18953) (508e186)

  BEFORE:

  <ion-searchbar show-cancel-button>
  <ion-searchbar show-cancel-button="true">
  <ion-searchbar show-cancel-button="false">
  

  AFTER:

  <ion-searchbar show-cancel-button="focus">
  <ion-searchbar show-cancel-button="focus">
  <ion-searchbar show-cancel-button="never">
  

• scss: remove scss files from dist/, use CSS variables to theme instead. (#19292) (6450aff)

• skeleton-text: remove width property. Use CSS instead. (#18936) (7c3db79)

• split-pane: remove main attribute. Use contentId instead. (#19511) (02d7841)

  BEFORE:

  <ion-split-pane>
    ...
    <div main>...</div>
  </ion-split-pane>
  

  AFTER:

  <ion-split-pane content-id="main-content">
    ...
    <div id="main-content">...</div>
  </ion-split-pane>
  

• theming: ionic default colors have been updated. (#19279) (7f4cf08)

• toast: remove showCloseButton and closeButtonText, add a button using the buttons property with role: 'cancel' instead. (#18957) (ad7f112)

Bug Fixes

• build: properly update peer dependencies (#19639) (b552daa)
• react: add IonPicker as controller component, fixes #19620 (#19643) (ed98d9e)
• react: handle tab back nav better, fixes #19646 (#19647) (8776556)
• react: moving tslint and friends to devDependencies (#19624) (7f4b77d)

Ionic React! Enjoy! 🧂 🌊 🐼

Bug Fixes

• content: set overscroll only on iOS (#19470) (63c2008), closes #19465
• searchbar: update alignment of chips and other elements in toolbar (#19596) (637f26b), closes #19495 #19502

Bug Fixes

• overlay: ensure lifecycle events fire properly (#19579) (a7b9642), closes #19576

Bug Fixes

• animation: animation timer fallback now accounts for iterations (#19527) (9f5ed23)
• css: update deprecations to remove wrap (#19535) (bfb704e), closes #19499
• header: fix collapsing iOS header when using with split pane (#19480) (dea1c26), closes #19541
• list: add bottom border for first item in inset list (#19525) (71b8853), closes #19507
• md: fix flicker when navigating back in MD mode on certain Android devices (#19553) (19ee21a), closes #19491
• searchbar: update padding and button alignment (#19532) (77658e6), closes #19502

Bug Fixes

• angular: add warning if initialized more than once (#19393) (e98769e)
• animation: set property defaults to avoid inconsistencies (#19321) (1cbb52c)
• animation: fallback to CSS Animations on older versions of Chrome (#19288) (2d39c07), closes #19272
• animation: animations of duration 0 now run in Safari (#19287) (4e544f1), closes #19285
• components: fix crash in IE11 when using classList add() or remove() (#19460) (b4d92c6)
• components: improve CSS Variable support in IE11 (#19473) (44ad074)
• content: remove pointer-events from iOS transition shadow (#19471) (8a52c7d), closes #19466
• menu: menus show proper drop shadows (#19454) (eab0865), closes #19387
• radio-group: get radios before caching value to avoid infinite loop (#19448) (cf223e4), closes #19277
• react: update events to use proper types (c79e74b)
• router-outlet: hide leaving view after transition finishes (#19335) (bfa17d1)

Features

• config: expose getMode() and deprecate Config.set() (#19104) (0f05ea4)
• docs: add VSCode docs support (#19309) (a3f345c)
• title: add support for small title (#19215) (e27962d), closes #18898
• title: add support for large title (experimental) (#19268) (923312e), closes #16885

Performance Improvements

• animation: avoid ngzone with requestAnimationFrame (#19457) (8ca97ce)

Bug Fixes

• platform: properly detect iPads running iPadOS (#19258) (4a90096)

Bug Fixes

• animation: add correct onFinish interface parameters (#19199) (a81653b)
• animation: improve Web Animation feature detection accuracy (#19212) (6eca5b0), closes #19205
• animation: properly clean up elements when using destroy (#19210) (93f2064)
• segment: do not emit ionChange until didLoad (#19218) (9751f14), closes #19204

Features

• nav-link: add nav-link and deprecate nav-push, nav-pop, and nav-set-root (#18909) (c3044f5)
• slides: expose full Swiper API (#19137) (e1fa461)

Bug Fixes

• animation: enable backwards compatibility for overlay animations (#19160) (fb70980)
• gesture: account for negative step values with Web Animations (#19196) (b3c7436)
• ios: clear opacity on toolbar background after iOS transition (#19169) (fa958a5)
• md: set fill mode on MD transition to both (#19161) (0e8ab49)

Bug Fixes

• alert: apply styling to disabled items (#18545) (67ed89d)
• platform: properly detect Electron platform (#19044) (e8cdda0), closes #19043
• toggle: change background to use CSS variable (#19012) (94e525c), closes #18940
• transition: enable iOS transition shadow by default (#19051) (a5d3c6b)

Features

• animation: add animation utility (experimental) (#18918) (30ca46a)
• gesture: add gesture utility (experimental) (#18918) (30ca46a)
• searchbar: add inputmode property (#18980) (1187dc2)
• spinner: add circular spinner for MD default (#19052) (e33cf85)

Bug Fixes

• core: remove extra semicolons being rendered (#19033) (39f0768)

Bug Fixes

• core: fix an issue with production builds of @ionic/core

Bug Fixes

• angular: hardware back button subscribeWithPriority triggers change detection (#18962) (3a22105), closes #18959
• angular: nested inputs no longer conflict with each other (#18976) (6bbdb80), closes #18248
• range: ion-range value now submitted with form (#19008) (8f7853c)
• reorder: only move item if reorder happens (#19007) (d237e80)
• router: partial swipe to go back gesture no longer breaks view(#18977) (713ea8a), closes #18462
• toast: allow loading ion-icon from asset path (#18969) (23f327e)
• vue: rename swipeEnable to swipeGesture (#17346) (c2348f7), closes #16002

Bug Fixes

• angular: ensure change detection fires properly (#18896) (962783b), closes #18894

Angular 8 Support

With this version comes support for Angular 8! Follow the below steps to update.

1. Update @ionic/angular and @ionic/angular-toolkit to the latest releases:

   $ npm install @ionic/[email protected]
   $ npm install @ionic/[email protected] -D
   

2. Update @angular/core and @angular/cli:

   $ npx ng update @angular/core @angular/cli
   

3. Update @angular-devkit dependencies:

   $ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest
   

View our Angular 8 Update Guide for tips on potential issues!

Bug Fixes

• angular: copy input form classes to parent ion-item (#18820) (53179c4), closes #18800
• angular: add the swipeGesture method for enabling or disabling the ability to swipe open a menu (#18806) (fbfc076), closes #16002
• angular: webview "pause", "resume", and "resize" events now trigger change detection (#18853) (544e550), closes #18831
• core: apply translucent if backdrop-filter is supported (#18832) (6b5a59d), closes ionic-team/ionic-docs#666
• datetime: allow AM/PM to be changed (#18684) (b7761fe), closes #18585
• datetime: properly apply disabled classes when updating columns (#18875) (7ba718c), closes #18793
• hardware-back-button: hardware back button no longer erroneously restarts app (#18794) (978cc39), closes #18792
• ripple-effect: ensure ripple is removed from components after pointer release (#18854) (71137a2), closes #18836
• searchbar: add aria and role for improved accessibility (#18797) (798103b), closes #18796
• ssr: avoid window reference (#18865) (23ce6fa)
• ssr: check for client runtime method (#18866) (c52b3b4)
• textarea: autogrow now resets textarea back to original number of rows when text is cleared (#18822) (26e6d6f), closes #18744
• theming: update components to use the proper colors for dark themes (#18735) (045bc59), closes #18713
• virtual-scroll: card rendering is no longer distorted (#18877) (3ef6ecf), closes #18870
• virtual-scroll: element dimensions are recalculated on resize (#18878) (c91819c)

Features

• core: add support for Stackblitz (#18846) (fb18f3b)
• ssr: add @ionic/core/hydrate app (#18867) (815fa2e)
• navigation: add experimental shadow to iOS page transitions (#18695) (9b075ef), closes #18661
• virtual-scroll: adds headerHeight and footerHeight to help prevent flickering (#18851) (0089111), closes #17540

Performance

• angular: attach entering view before first change detection and detach leaving page (#18821) (97fec92)

Bug Fixes

• menu-button: hide menu button when auto hide or split pane (#18702) (24840d4), closes #18666
• menu-button: move font-size to host for easier customization (#18699) (876ab41), closes #18667
• overlays: fallback to step color if overlay background variable is unset (#18709) (f16b118), closes #18658
• virtual-scroll: remove runOutsideAngular error (#18752) (8beeff2), closes #18746
• vue: update imports for types and ionicons (f56fea6), closes #18701

Performance Improvements

• all: minify better by using arrow functions (#18730) (03c1d19)

Bug Fixes

• app: add hydrated to hide white screen with multiple ionic dependencies (#18649)
• datetime: datetime no longer reports having a value if none is set (#18541) (92e0f98), closes #17979 #18540
• fab-button: set opacity on disabled fab button (#18685) (6042b39), closes #18682
• icon: load icons properly with baseHref (#18650), (#18637)
• icon: bind icon name properly (#18707)
• infinite-scroll: fix scroll listener (0d58101)
• item: do not disable entire item if there are multiple inputs (#18696) (dfa2b13), closes #18655 #18670
• router-link: add missing target prop (#18659) (1f51ab2), closes #18655
• router-outlet: fix swipe to go back (b69fb69)
• scss: copy all scss files (36a58df)
• searchbar: proper styling after navigating (#18642)
• slides: use correct order for pushing slides dynamically (#18633)
• tabs: select proper tab by default and do not emit tab change if selectedTab is undefined (03c834c)
• overlay: make create opts optional (44c88ad)

Performance Improvements

• angular: skip zone (e059fc8)