feat(toast): add header and custom toast buttons

[zakton5]

Short description of what this resolves:

Allows more complex toasts to be utilized by allowing a header and custom buttons as discussed here: #16791

With this new feature, is showCloseButton and closeButtonText needed? I would opt for removing these properties entirely in favor of

const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'end',
          text: 'Close',
          role: 'cancel'
        }
      ]
    });

Changes proposed in this pull request:

• Add header property to toast options
• Add buttons property to toast options

Ionic Version:

Fixes: #16791, possibly #16268, #16237

[paulstelzer]

Thanks a lot :) I have not checked it yet, but seems good!

[simonhaenisch]

With this new feature, is showCloseButton and closeButtonText needed? I would opt for removing these properties entirely

Now that v4 is officially out, I guess you should keep them, transform and push into the buttons array if set, and add a note that they are deprecated. Introducing a breaking change might not be the best choice at the moment. The props can be dropped once a v5 release is close I guess.

[zakton5]

@simonhaenisch @brandyscarney I've implemented your suggestion. Let me know what you think.

[zakton5]

@liamdebeasi I made those changes. Let me know if anything else needs to change.

[brandyscarney]

This is so great! Sorry it took me so long to look at this. I made some minor changes:

• Remove the classes that only added padding to the content based on the presence of buttons - this caused a bug where there was no padding on toast messages without buttons
• Default the side to "end" if one isn't provided
• Added a buttons test showing the old way (close props), new way (buttons array), and multiple button examples
• Updated the usage examples (some were still using slot, react didn't have usage for buttons)
• Adds the button role class to the button, so if the button is a cancel button it will default to the lighter (almost white) color

Unless there are any complaints, this looks good to merge to me. @liamdebeasi did you want to take another look at this?

Here are some screenshots of latest:

Two Buttons	Multiple Buttons

[liamdebeasi]

Great job! 🎉

[brandyscarney]

Okay pushed a few more changes:

• Added a background color to the button in MD on hover (this is a transparent version of the text color)
• Added opacity to the buttons in iOS on hover
• Added margin end for MD buttons on the end side, and margin start for the start side

The only other thing I can find is the icon-only buttons should be rounded on hover/ripple but it could possibly be pushed to a separate PR?

[brandyscarney]

Okay last change sorry. 😂 I updated the icon-only buttons so they have the 50% border-radius and will be rounded on hover. Good to go now!

[zakton5]

@brandyscarney Looks great! Nice changes. It'll be nice to finally use these haha

[brandyscarney]

Yay! Merged. 🎉

@simonhaenisch I tried adding us as co-authors but for some reason it didn't work. I actually sent a support message to GitHub about this as I've used the same syntax before without any issues and I'm curious why it didn't work.

[simonhaenisch]

Thanks @brandyscarney, looking forward to try this out soon.

I'm pretty sure you're supposed to have two blank lines before the Co-authored-by comment(s), but I think I also had a case where I did only one and it worked anyway.

[brandyscarney]

@simonhaenisch Yeah I'm not sure what's going on. The last time I did it was similar and it worked: a7f1f4d

Maybe adding the fixes after broke it? 🤷‍♀️

[simonhaenisch]

Hm actually I think the issue might be that the "closes ..." comments are below the Co-authored-by comments... might have to be the last line(s) of the message? BTW this is where I read about needing to have two blank lines: https://help.github.com/en/articles/creating-a-commit-with-multiple-authors.

Thanks for trying, however I didn't do all too much here anyway ;)

[brandyscarney]

Yeah, maybe. I didn't read it that well. 😂 I'm not upset to not be added either but I still want to know what I did wrong. 😭 Maybe they'll message me back, haha we'll see.

[rafalschmidt97]

Probably after this PR buttons always use primary colour (with icons and just closeButtonText). I didn't change anything in my project - just updated to the newest version. Should I add some variables into "/** Ionic CSS Variables **/" ?

Also please update docs to this pr 🚀

[paulstelzer]

@rafalschmidt97 this should be fixed with PR #18133 I am waiting for that PR merged, too ;)