Migrating from ionic 3 to ionic 5 : Undocumented breaking changes

Hello everyone

I am in the process of trying to migrate an app from ionic 3.9.9 to the latest version of ionic 5
I had a look at the Migration Guide, at the Ioniv 4 Breaking Changes list, and at the Ionic 5 breaking changes list, and made a list of what I had in my app that could potentially break.

After reading and looking at all of it, I decided to try to just get one page, the login page, displayed as it was when I used ionic v3.

So, I created a new blank app, and started importing the page, the global scss and so on. I removed a lot of the intelligence from the login page to have my imported code volume at a minimum.

I ended up recreating the login page through ionic generate page login2 and copying the login page code and html into that one because the translate pipe of ngx-translate did not work.

So far so good with the documentation I had…

Problems arise when I try to have the login page display and look as it did before: a lot of breaking changes has not been documented in those pages. Take for instance the buttons: I had a panel with buttons from 0 to 9 on two lines, and scss to have them look as I wanted.
On buttons, the ionic 4 breaking changes says :

• Markup changed ( should be written )
• Attribute names changed (icon-left => slot=“start” and so on)
• That’s it

Well yes but actually no. The breaking changes are a lot worse than that:

• css classes are not the same anymore, so the selector I had .button.button-md.button-default.button-default-md.button-md-light does not work. It has to be replaced by .button.md.button-default.ion-color-light because a lot of these classes are no longer applied.
• the padding on the ion-button is not properly applied, even though it’s a box-sizing: border-box the padding somehow is outside the button’s display and so I have to add a sub-css to set the padding specifically on the inner tag of the to prevent the padding to become a secondary margin instead
• the text of the button is no longer in font-weight:500 so i guess I’ll have to add this myself
• custom color through color="myCustomButtonColor" no longer works apparently, even though I changed the sass variable $myCustomButtonColor to a --myCustomButtonColor in a :root { }
• maybe a lot more that I haven’t found out yet

My question is : Is there a full list of all the breaking changes? Because I can’t go through all of my app pixel by pixel to see what has changed and what’s not supposed to…

1 post - 1 participant

Read full topic