bug: ion-toast wrong wrapping when using <b> inside

[RafaelKr]

Bug Report

Ionic version:

[x] 4.x
[x] probably also 5.x

Current behavior:
I'm using an ion-toast. I'm using <b> tags in my toast message. The white-space: pre-wrap makes the toast wrapping behave wrong when the text wraps directly after the closing </b>.

As you can see the next line is indented by one space:

Expected behavior:
The correct behavior is achieved with either white-space: normal or white-space: pre-line:

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values

Related code:
The last change of this was here: #16360

Other information:
It would be great if this could be backported to 4.X
I can open a PR if you want. If there's something I have to know to get this backported, please tell me, thanks!

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/home/rafael/.nvm/versions/node/v13.7.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.19
   @angular-devkit/schematics    : 8.3.19
   @angular/cli                  : 8.3.19
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/opt/android-sdk-linux)
   NodeJS            : v13.7.0 (/home/rafael/.nvm/versions/node/v13.7.0/bin/node)
   npm               : 6.13.6
   OS                : Linux 5.3

[liamdebeasi]

Thanks for the issue! I can confirm that this should be pre-line. I have created a PR for this fix; however, Ionic Framework v4 is only receiving critical security fixes, so this fix will be available in Ionic Framework v5.

[liamdebeasi]

I discussed this more with the team and we decided the better approach was to a) add a CSS variable to let users customize white-space and b) expose certain internals of the toast via CSS Shadow Parts.

[liamdebeasi]

Thanks for the issue. This has been resolved via #20729 and will be available in an upcoming release of Ionic Framework.

[RafaelKr]

Thanks!

Also to discuss with @brandyscarney:
I think pre-wrap is still the wrong default behavior because most people won't even run into this and so they will never change the --white-space variable.
Of course this default should usually not be changed in a minor release. But is there any case where you really want it to be pre-line? Wouldn't it make sense to treat a change to normal as a bug-fix?

If you think this isn't a viable idea, could we open an issue which will be added to a 6.0.0 milestone, which requests changing it to a default behavior of --white-space: normal? Or do you track something like this on an internal list?