From f9579bcd1d47704aaad2a0730bec17b8873e5ef1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 5 Aug 2019 09:01:19 -0400 Subject: [PATCH] refactor(toast): add deprecation warnings for showCloseButton and closeButtonText (#18955) --- core/src/components.d.ts | 8 ++++---- core/src/components/toast/readme.md | 4 ++-- core/src/components/toast/toast.tsx | 6 ++++-- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index fbd8db1c06..c05b2cc449 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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; /** - * 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; /** diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index fe6ea56ed3..7310deafe7 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -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` | **[DEPRECATED]** Use `buttons` instead. Text to display in the close button.

| `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` | **[DEPRECATED]** Use `buttons` instead. If `true`, the close button will be displayed.

| `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` | diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 9d95183223..c1f46bc036 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -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') });