Ionic-framework: 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: https://github.com/ionic-team/ionic/issues/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 ([email protected])
   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 https://github.com/ionic-team/ionic/pull/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?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.