feat(toast): add stacked buttons functionality

[liamdebeasi]

Docs PR: ionic-team/ionic-docs#2768

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: Internal ticket

The Material Design guidelines for snackbars/toasts allow for stacked buttons where buttons appear on a separate line: https://m2.material.io/components/snackbars#specs

Ionic does not have support for this.

What is the new behavior?

• Introduces the layout property to ion-toast that allows for content to be stacked.

Note: We investigated handling this automatically with CSS. Here is a sample of handling this with CSS: https://codepen.io/sean-perkins/pen/JjZyvoW. We decided against this approach because it does not allow the default behavior of the message/button appearing on the same line with the message wrapping within its own container. Handling this with CSS means that long message texts always push buttons onto the next line instead instead of having the message wrap within its own container.

Note 2: Using start and end buttons with the stacked layout is an anti-pattern, but I used both in my tests to avoid having duplicate screenshots.

Does this introduce a breaking change?

• Yes
• No

Other information

Note on naming: We opted to rename the values from inline and stacked to baseline and stacked to avoid confusion with the inline toast feature where devs can write <ion-toast> instead of using a controller. The "baseline" term is something MD uses in https://material-components.github.io/material-components-web-catalog/#/component/snackbar.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[amandaejohnston]

Nice work!

[sean-perkins]

Changes look good to me, nice work!

Be aware when we sync this with feature-7.0, we will need to rebuild and update the generated proxies for the Angular package. In v6.x we exclude generating proxies for ion-toast, but in v7 we generate a proxy for the inline usage/type support.