feat: extend ion-toast css shadow parts

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Extend ion-toast CSS shadow parts(https://ionicframework.com/docs/api/toast#css-shadow-parts) with content so that html element with class “toast-content” can be stylized.

Describe the Use Case

.toast-content element would be stylizeable, which is not not an option. In our case, it helps with making message part overflowing text displayed as ellipsis, but I could easily believe other users will find more uses to it.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

async showToastError(opts: ToastOptions): Promise<HTMLIonToastElement> {
   opts.duration = 3000;

   opts.color = 'danger';

   this.addErrorDetailsButton(opts);

   const toast = await this.toastController.create(opts);

   await toast.present();

   return toast;
 }

private async addErrorDetailsButton(opts: ToastOptions): Promise<void> {
    opts.cssClass = 'snap-error-toast';

    const errorDetailsButton: ToastButton = {
      side: 'end',
      text: 'More details',
      handler: () => this.presentModal(opts.message)
    };
    opts.buttons = [errorDetailsButton];
  }

in scss file we have this part:

.snap-error-toast::part(message) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

in order for ellipsis to work as we need it to, min-width: 0 should be added to html element that currently contains ‘toast-content’ class.

Additional Information

Screenshots with results of the code above:

What is currently the case:

What we want to achieve:

[vladimirSnapAddy]

Sure! I will do it as soon as possible.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!