Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!
Let’s look at what’s new
HTML Attributes on Buttons in Alert, Action Sheet, and Toast
Overlay components such as Alerts, Action Sheets, and Toasts
allow developers to pass custom buttons to the components. However,
there was no way to set custom attributes on those buttons. This
meant that if developers wanted to set an icon-only button on
Toast, then they were unable to describe the button using an
“aria-label”. This new release of Ionic allows developers to set
custom attributes on the overlay buttons using the new
htmlAttributes
property on the button interface.
const toast = await toastController.create({
message: 'This is a toast',
buttons: [
{ text: 'Confirm' },
{
role: 'cancel',
icon: 'close',
htmlAttributes: {
'aria-label': 'Close Toast'
}
}
]
});
Alert Text Wrapping
In previous versions of Ionic, Alerts with long lines of text had their text truncated with ellipses. This resulted in accessibility issues since the full text could not be read. In Ionic 7.3, we updated the Alert component to wrap text to the next line instead of truncating so the full text can be read.
Toast Cancel Button Customization
Toast buttons can be styled using the button
Shadow
Part. However, there was no way to style just the cancel button.
Ionic 7.3 adds a new button cancel
Shadow Part so
developers can target only the cancel button in their
stylesheets.
/* The cancel button will have orange text, and all other buttons will have purple text */
ion-toast::part(button) {
color: purple;
}
ion-toast::part(button cancel) {
color: orange;
}
Thanks to @luisbytes for contributing this feature!
Thanks to everyone who made this release possible. We’re immensely grateful for the community’s continued contributions to improving Ionic. We’ll see you soon for the next release!
The post Announcing Ionic 7.3 appeared first on Ionic Blog.