@ionic/react 5.0.0-beta.0

on Node.js NPM

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)