Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Parent: sync next with master
merged 1 commit into from
Aug 5, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down Expand Up @@ -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;
/**
Expand Down Expand Up @@ -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;
/**
Expand Down Expand Up @@ -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;
/**
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/toast/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand All @@ -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` |


Expand Down
6 changes: 4 additions & 2 deletions core/src/components/toast/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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')
});
Expand Down