refactor(toast): add deprecation warnings for showCloseButton and closeButtonText (#18955)

This commit is contained in:
Liam DeBeasi
2019-08-05 09:01:19 -04:00
committed by GitHub
parent 23f327ecb6
commit f9579bcd1d
3 changed files with 10 additions and 8 deletions

View File

@ -2685,7 +2685,7 @@ export namespace Components {
*/
'buttons'?: (ToastButton | string)[];
/**
* Text to display in the close button.
* @deprecated Use `buttons` instead. Text to display in the close button.
*/
'closeButtonText'?: string;
/**
@ -2748,7 +2748,7 @@ export namespace Components {
*/
'present': () => Promise<void>;
/**
* If `true`, the close button will be displayed.
* @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
*/
'showCloseButton': boolean;
/**
@ -5976,7 +5976,7 @@ declare namespace LocalJSX {
*/
'buttons'?: (ToastButton | string)[];
/**
* Text to display in the close button.
* @deprecated Use `buttons` instead. Text to display in the close button.
*/
'closeButtonText'?: string;
/**
@ -6036,7 +6036,7 @@ declare namespace LocalJSX {
*/
'position'?: 'top' | 'bottom' | 'middle';
/**
* If `true`, the close button will be displayed.
* @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
*/
'showCloseButton'?: boolean;
/**

View File

@ -172,7 +172,7 @@ export const ToastExample: React.FunctionComponent = () => {
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` |
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` | `undefined` |
| `closeButtonText` | `close-button-text` | <span style="color:red">**[DEPRECATED]**</span> Use `buttons` instead. Text to display in the close button.<br/><br/> | `string \| undefined` | `undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` |
@ -183,7 +183,7 @@ export const ToastExample: React.FunctionComponent = () => {
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. | `boolean` | `false` |
| `showCloseButton` | `show-close-button` | <span style="color:red">**[DEPRECATED]**</span> Use `buttons` instead. If `true`, the close button will be displayed.<br/><br/> | `boolean` | `false` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |

View File

@ -87,12 +87,12 @@ export class Toast implements ComponentInterface, OverlayInterface {
@Prop() position: 'top' | 'bottom' | 'middle' = 'bottom';
/**
* If `true`, the close button will be displayed.
* @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
*/
@Prop() showCloseButton = false;
/**
* Text to display in the close button.
* @deprecated Use `buttons` instead. Text to display in the close button.
*/
@Prop() closeButtonText?: string;
@ -187,8 +187,10 @@ export class Toast implements ComponentInterface, OverlayInterface {
})
: [];
// tslint:disable-next-line: deprecation
if (this.showCloseButton) {
buttons.push({
// tslint:disable-next-line: deprecation
text: this.closeButtonText || 'Close',
handler: () => this.dismiss(undefined, 'cancel')
});