February 1, 2023
  • Announcements
  • Product
  • Framework
  • Ionic

Announcing the Ionic 7 Beta

Liam DeBeasi

Today, we’re excited to announce the release of the Ionic 7 beta! This release improves the developer experience when working with overlays, forms, events, and more.

Here’s what you can expect with Ionic 7:

Inline Overlays

In Ionic 6 we introduced the ability to use the Modal and Popover components declaratively inside application templates. We’ve now added this functionality to the Action Sheet, Alert, Loading, Picker, and Toast components. This addition means developers can pass data as properties on the component instance without using a controller. We have also added isOpen and trigger properties to reduce the amount of code required to present and dismiss these overlays.

<ion-button id=”open-loading”>Open Loading</ion-button>
<ion-loading trigger=”open-loading” message=”Loading…”></ion-loading>

The playgrounds for each example have been updated to showcase this new usage:

Action Sheet
Alert
Loading
Picker
Toast

Consistent Events Emissions

In Ionic 6, the ionChange event fired every time the value property on components changed. This behavior caused the ionChange event to fire at unexpected times. We revised the ionChange event to only fire from user-generated interactions such as taps or clicks. This behavior aligns more closely with the behavior found in native <input> elements.

Developers can continue to use the ionInput event in components such as Input or Textarea to detect every keypress from the user.

Developers do not need to make any changes to get this improvement; however, we recommend that developers evaluate their applications when updating to Ionic 7.

Simplified Form Control Syntax

Ionic 7 introduces a streamlined way of working with form controls such as Toggle or Input. The Item and Label components are no longer required, and each form control handles the label content directly. Additionally, certain features such as helper text or input fill modes have moved from ion-item to the appropriate form controls such as ion-input, ion-textarea, and ion-select.

This change has several improvements:

  1. Reduces code boilerplate by removing the ion-item and ion-label requirements.
  2. Improves compatibility with assistive technologies by ensuring the form control is associated with a label.
  3. Enhances the developer experience by clarifying the intent of form component APIs.

Before:

<ion-item fill=”outline”>
  <ion-label>Email:</ion-label>
  <ion-input placeholder=”hi@ionic.io”></ion-input>
  <div slot=”helper”>Please enter a valid email address</div>
</ion-item>

After:

<ion-input
  label=”Email:” 
  placeholder=”hi@ionic.io” 
  fill=”outline” 
  helper-text=”Please enter a valid email address”
></ion-input>

These changes have been added in a backward-compatible way meaning developers do not need to migrate to this new syntax to upgrade to Ionic 7. Developers are also able to migrate these components one at a time. The documentation for each form component has been updated with new playgrounds and migration guides:

Checkbox
Input
Radio
Range
Select
Textarea

Performance Improvements

Ionic 7 significantly improves the performance of Tabs. In Ionic React and Ionic Vue, developers can expect a performance improvement of up to 70% when switching tabs.

Ionic Angular developers can expect improved Ionic component initialization times thanks to optimizations in Stencil!

Improved Vite Compatibility

Ionic 7 removes the Common JS entry points for Ionic React and Ionic Vue to make each package easier to use with Vite and Vitest.

ion-slides Removal

The ion-slides and ion-slide components have been removed in favor of using Swiper.js directly. This change gives developers access to the latest version of Swiper, including all the great features this library has to offer.

Migration guides are available for each supported JavaScript Framework:

Angular
React
Vue

ion-virtual-scroll Removal

The ion-virtual-scroll component has been removed in favor of using solutions provided by each JavaScript Framework. This change enables all Ionic developers to use virtual scrolling in their Ionic applications.

Migration guides are available for each supported JavaScript Framework:

Angular
React
Vue

What’s next?

Developers can get started with the Ionic 7 beta today by following the Ionic 7 Migration Guide. Developers should also consult the Ionic 7 Breaking Changes Guide. Please file any feedback on our GitHub repo. We look forward to shipping Ionic 7 soon!

Thank You!

We want to extend a huge thank you to the Ionic community. These changes wouldn’t be possible without the community’s active involvement in GitHub issues and our new Request For Comments (RFC) process. Stay tuned, as we have many more great improvements planned for Ionic in 2023!

Liam DeBeasi

Related Posts