July 25, 2023
  • All
  • Announcements
  • Framework
  • Ionic

Announcing Ionic 7.2

Liam DeBeasi

Hot on the heels of Ionic 7.1 is another great feature release! This release brings updates to Button, Searchbar, and our Angular integration.

Here’s what’s new 👇

Button Wrapping

We made some important infrastructure improvements to Button ahead of a change we plan to make in Ionic 8. Buttons with long text currently get cut off, making the text impossible to read. Starting in Ionic 8, long text in Buttons will wrap to the next line instead of getting cut off to improve readability.

Why is button text going to wrap instead of truncate with ellipsis?

We collaborated with Todd Libby, a W3C Invited Expert on Accessibility, to develop a solution for this problem. During development, it was noted that truncating text with ellipsis is not an acceptable solution because the text that is truncated is still not readable even though the button layout may look nicer than it did before. Instead, wrapping the text to the next line fixes the original layout issue while ensuring that the text is readable.

Why is this behavior not enabled by default?

During development we identified some instances where this new behavior may cause unexpected layout changes in developer applications. In particular, buttons inside of list headers may wrap instead of displaying on the same line even if the text was never cut off. As a result, we have decided to enable this behavior in Ionic 8.0, so developers can make any necessary changes at their own pace.

How do I opt-in to this behavior now?

Ionic 7.2 lays the groundwork for this change with some internal fixes to Button. Developers can enable this wrapping behavior now by setting either the ion-text-wrap class on ion-button or white-space: normal in their CSS.

Using a Class

<ion-button class="ion-text-wrap">Some text with a really long label</ion-button>

Using CSS

ion-button {
  white-space: normal;
}

We have also launched a new accessibility guide on the Button documentation that shows how to opt-in to this behavior: https://ionicframework.com/docs/api/button#accessibility

Searchbar Name Property

Searchbar now has a “name” property to help identify search data when submitting a form.

<ion-searchbar placeholder="Search for an Artist" name="artist-search"></ion-searchbar>

Thanks to NicoDos for contributing this feature!

Angular Route Parameter Binding

Angular 16 introduced a new feature that lets developers bind route parameters as component inputs. This means that developers can access the parameter for /my-route/:id by using the @Input decorator in the associated component.

Ionic 7.2 adds support for this feature to our Router Outlet component. Developers can use this feature by updating their router configuration.

Opt-in with NgModules

RouterModule.forRoot(routes, {
  //... other features
  bindToComponentInputs: true
});

Opt-in with Standalone Components

provideRouter(appRoutes, withComponentInputBinding());

Thanks again to everyone who helped make this latest release possible. We’ll catch you soon for the next one!

Liam DeBeasi

Related Posts