feat(toast): add header and additional custom toast buttons (#17147)

Adds a `header` and `buttons` property to toast. This allows for a toast header to be passed and multiple buttons including action buttons and icon only buttons which matches the Material Design spec. Adds hover states to the button to match the spec. Updates usage section to recommend the new way of passing a close button using the buttons array and `cancel` role. If a button is passed using the cancel role default the color to match the spec. Buttons will default to the `end` side but have the option of being placed on the `start` side.

Co-authored-by: Simon Hänisch <simonhaenisch@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>

closes #16791 closes #16237 closes #17611
This commit is contained in:
Zachary Keeton
2019-04-11 10:46:10 -05:00
committed by Brandy Carney
parent 52e5a8d3e3
commit 6e1a8f1df2
18 changed files with 844 additions and 232 deletions

View File

@ -68,6 +68,7 @@ import {
TabButtonLayout,
TextareaChangeEventDetail,
TextFieldTypes,
ToastButton,
ToastOptions,
ToggleChangeEventDetail,
TransitionDoneFn,
@ -4757,6 +4758,10 @@ export namespace Components {
*/
'animated': boolean;
/**
* An array of buttons for the toast.
*/
'buttons'?: (ToastButton | string)[];
/**
* Text to display in the close button.
*/
'closeButtonText'?: string;
@ -4781,6 +4786,10 @@ export namespace Components {
*/
'enterAnimation'?: AnimationBuilder;
/**
* Header to be shown in the toast.
*/
'header'?: string;
/**
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
*/
'keyboardClose': boolean;
@ -4828,6 +4837,10 @@ export namespace Components {
*/
'animated'?: boolean;
/**
* An array of buttons for the toast.
*/
'buttons'?: (ToastButton | string)[];
/**
* Text to display in the close button.
*/
'closeButtonText'?: string;
@ -4848,6 +4861,10 @@ export namespace Components {
*/
'enterAnimation'?: AnimationBuilder;
/**
* Header to be shown in the toast.
*/
'header'?: string;
/**
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
*/
'keyboardClose'?: boolean;