Recently Ionic 7 upgrade was announced and the Ionic 8 release came into the picture. Naturally, you are curious about many aspects of this version including migration. As you would know Ionic said it wouldn't be Ionic if the migration process is complicated. Keeping in mind the challenges of breaking changes, in this version, they have kept it to a minimum.
Without wasting any time, let's get extensive details on how to migrate your Ionic 7 application to Ionic 8. With the detailed steps and being mindful of potential issues, you can successfully migrate your Ionic 7 project to benefit from the latest improvements and features offered by Ionic 8.
To prepare for the migration, you will need to follow the below steps.
Make sure you make a backup of your complete Ionic 7 project prior to initiating the migration. This will safeguard you in case you need to revert.
You will need to ensure that you have the newest Ionic CLI version to take maximum benefit from the latest migration tools. Use the below command:
Bash
npm install -g @ionic/cli@latestIt is suggested that you should have the most recent stable version of Ionic 7 before shifting to 8. Run the command:
Bash
ionic updateAlso, note the versions supported by Ionic 8. Following are the browser versions supported by Ionic 8.
The latest Ionic Framework has removed the backward support for CSS animations. This is to benefit the Web Animations API. All the above-mentioned browser versions support the Web Animations API.
Now let us start the migration of dark mode, global styles, haptics, and components.
In the previously used version, the dark palette was defined in the following example:
@media (prefers-color-scheme: dark) {
body {
/* global app variables */
}
.ios body {
/* global ios app variables */
}
.md body {
/* global md app variables */
}
}However, in Ionic Framework 8, the distribution of dark palettes is through CSS files and they can be imported. With the following example, developers can import dark palette files in Angular:
/* @import '@ionic/angular/css/palettes/dark.always.css'; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";By importing the dark.system.css file, the dark palette variables will be interpreted like below:
@media (prefers-color-scheme: dark) {
:root {
/* global app variables */
}
:root.ios {
/* global ios app variables */
}
:root.md {
/* global md app variables */
}
}Now the dark palette is applied :root selector instead of the body selector. The :root selector showcases the <html> element and is similar to the selector html, the only difference is that its specificity is higher.
This migration will also give access to the text color and the dynamic font from Ionic 7 applications to Ionic 8.
The core.css file has been altered to change the text color on the body element:
body {
+ color: var(--ion-text-color);
}This will permit components to take the color properly when utilized outside of the Ionic Framework. It is also used when required for custom themes to work adequately. But, it may have some unintentional downsides or drawbacks in the applications if the component or color is not expected to be inherited.
They have updated the core.css file to incorporate dynamic font scaling by default. The --ion-default-dynamic-font variable has been deleted and replaced with --ion-dynamic-font.
In the past, if developers have picked dynamic font scaling by activating it in their global stylesheets can return to the default setting by removing their custom CSS. The application will still continue to use dynamic font scaling as it did earlier. Developers should also understand that changing the font size of the HTML element will hinder the proper functionality of dynamic scaling.
In the latest version, support for the Cordova Haptics plugin has been retracted. Components that integrate with haptics, such as ion-picker and ion-toggle, will continue to operate but will no longer perform haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
This migration guides different components too. This includes checkbox, content, datetime, Nav, modal, picker, and many more. Let's see how:
Button text now wraps by default and if you don't need this behavior, you can just include the ion-text-nowrap class from the CSS Utilities.
The legacy property and support for the legacy syntax, that included placing an ion checkbox inside of an ion-item with an ion label, have been eliminated.
Content doesn't set the --background custom property when the .outer-content class is set on the host.
The month-year-button part of the CSS shadow has now been modified to target a button element instead of ion-item. Developers will need to confirm with their UI renders as they require for the month/year toggle button inside of ion-datetime.
Developers that employ CSS variables available on ion-item will need to migrate their CSS to use CSS properties.
Developers now need to use CSS to clarify the visible width of the input. Size and accept has been removed from the ion-input component.
This was earlier used in conjunction with the type="file". But, the file value for type is not a valid value in the Ionic Framework.
The legacy property and support for the legacy syntax, which involved placing an ion-input inside of an ion-item with an ion-label, is also removed.
The helper slot is removed. Developers will need to use the helperText property on ion-input and ion-textarea.
The error slot is also removed. Developers should use the errorText property on ion-input and ion-textarea instead.
Counter functionality has been removed. This also includes the counter and counterFormatter properties. Developers should use the properties of the same name on ion-input and ion-textarea.
The fill property has been removed. Developers should use the property of the same name on ion-input, ion-select, and ion-textarea.
The shape property has been removed. Developers should use the property of the same name on ion-input, ion-select, and ion-textarea.
Item now doesn't automatically incline focus to the first focusable element. The usability of ion-item with interactive elements such as form control should be analyzed to check that interaction works as per the expectations.
The deprecated CSS variables have been removed. These include: --highlight-height, --highlight-color-focused, --highlight-color-valid, and --highlight-color-invalid. These variables were initially used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was made simple in Ionic 7 so that inputs, selects, and textareas would not be required to be used inside an item.
It is now crucial to verify if the developers are using Capacitor 3 or the latest version when using the card modal presentation. This is because Detection for Capacitor <= 2 with applying status bar styles has been removed
getLength returns Promise<number> instead of <number>. This method was not available before in Nav's TypeScript interface, but developers could still approach it by casting Nav as any.
ion-picker and ion-picker-column have been given new names to ion-picker-legacy and ion-picker-legacy-column, respectively. This change was made to correspond with the new inline picker component while allowing developers to continue to use the legacy picker during this migration period. Rest everything is same.
Now you should Use --background instead as the --buffer-background CSS variable has been removed.
cssClass from the ToastButton interface that was earlier used to employ a custom class to the toast buttons is removed. You can use the "button" shadow part to style the buttons instead.
The legacy property and support for the legacy syntax, which included placing an ion-radio inside of an ion-item with an ion-label, have been removed.
The legacy property and support for the legacy syntax, that involved placing an ion-range inside of an ion-item with an ion-label, have been discarded. Developers should provide a label (either visible text or aria-label) directly to the form control.
The autocapitalize property now defaults to 'off'.
The legacy property and support for the legacy syntax, which involved placing an ion-textarea inside of an ion-item with an ion-label, have been withdrawn.
The legacy property and support for the legacy syntax, which included placing an ion-toggle inside of an ion-item with an ion-label, is removed.
Framework Specifics
For Angular, The IonBackButtonDelegate class has been removed as it favor the IonBackButton.
- import { IonBackButtonDelegate } from '@ionic/angular';
+ import { IonBackButton } from '@ionic/angular';Migration from Ionic 7 to Ionic 8 may look like a challenge but the performance improvements in the latest version makes it worth the effort. Ionic 8 is all set to make robust and performant hybrid apps with its primary focus on performance, web components, and tighter Angular integration. This migration guides a smooth migration process and we hope you get the insights you need to migrate your project from Ionic 7 to Ionic 8.
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.