Migrating from ionic 3 to ionic 5 : Undocumented breaking changes

Hello everyone :slight_smile:

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 Like

Another example of what’s irritating:

You can see on this image: on the left buttons with ionic3, on the right buttons with ionic5

And the generated html and computed font attributes:

The font attributes are the same, but the font does not look the same… why?

If you are upgrading from 3 -> 5, it may be the case that some of the breaking changes occured from 3 -> 4, and whats listed in the docs are only what were breaking changes from 4 -> 5

Breaking changes 3 -> 4

Breaking changes 4 -> 5

A lot of it may also have to do with the overhaul to web components and using the shadow DOM. many of the scss variables were replaced in favor of css variables

I know that most of the changes come from Ionic 4, that’s what I said. I even quoted the ionic 4 breaking changes document in my post and specifically said what was missing…

I read the whole “Breaking changes in Ionic v4” document. My point is exactly what I said : There are a lot of things that are not documented in the breaking changes v3 -> v4. The SCSS variables are not the only thing that is breaking my app.

According to the Ionic changelog for updating to v5 it says

We recommend updating to version 4.11.10 before updating to this version in order to see deprecation warnings related to your app in the developer console.

v5.0.0 changelog

Perhaps in a 2 step migration/upgrade, the older features and their replacements would become more clear?

  • It might help to see some of your more specific code examples, as far as pointing you in the right direction. I think by switching to <ion-button> from <button> takes care of those classesIt is difficult to see what the selector you listed does/affects

  • Could you document what you are describing for the ion-button padding? i have not run into that issue so far with v5

  • As far as font weight, I am not sure if that is just an iOS/android UI styling change but that seems like a pretty easy fix if you do not like the default

  • For the custom colors, there is a helpful link here. it has to be --ion-color-myCustomButtonColor

I hope this is more helpful