diff --git a/core/api.txt b/core/api.txt index e35a256247..6cbc97bd84 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1213,7 +1213,6 @@ ion-title,css-prop,--color ion-toast,shadow ion-toast,prop,animated,boolean,true,false,false ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false -ion-toast,prop,closeButtonText,string | undefined,undefined,false,false ion-toast,prop,color,string | undefined,undefined,false,false ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false ion-toast,prop,duration,number,0,false,false @@ -1224,7 +1223,6 @@ ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) = ion-toast,prop,message,string | undefined,undefined,false,false ion-toast,prop,mode,"ios" | "md",undefined,false,false ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false -ion-toast,prop,showCloseButton,boolean,false,false,false ion-toast,prop,translucent,boolean,false,false,false ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise ion-toast,method,onDidDismiss,onDidDismiss() => Promise> diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 7df5c4f408..4cb9bd5d23 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2720,10 +2720,6 @@ export namespace Components { */ 'buttons'?: (ToastButton | string)[]; /** - * @deprecated Use `buttons` instead. Text to display in the close button. - */ - 'closeButtonText'?: string; - /** * 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). */ 'color'?: Color; @@ -2783,10 +2779,6 @@ export namespace Components { */ 'present': () => Promise; /** - * @deprecated Use `buttons` instead. If `true`, the close button will be displayed. - */ - 'showCloseButton': boolean; - /** * 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). */ 'translucent': boolean; @@ -6045,10 +6037,6 @@ declare namespace LocalJSX { */ 'buttons'?: (ToastButton | string)[]; /** - * @deprecated Use `buttons` instead. Text to display in the close button. - */ - 'closeButtonText'?: string; - /** * 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). */ 'color'?: Color; @@ -6105,10 +6093,6 @@ declare namespace LocalJSX { */ 'position'?: 'top' | 'bottom' | 'middle'; /** - * @deprecated Use `buttons` instead. If `true`, the close button will be displayed. - */ - 'showCloseButton'?: boolean; - /** * 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). */ 'translucent'?: boolean; diff --git a/core/src/components/app/test/safe-area/index.html b/core/src/components/app/test/safe-area/index.html index f88bea2e0d..bd4ac47544 100644 --- a/core/src/components/app/test/safe-area/index.html +++ b/core/src/components/app/test/safe-area/index.html @@ -59,7 +59,9 @@ async function showToast() { const toast = Object.assign(document.createElement('ion-toast'), { message: 'Hello world!', - showCloseButton: true + buttons: [ + { text: 'Close', role: 'close' } + ] }); document.body.appendChild(toast); await toast.present(); diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 34e434cfb0..44043085d4 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -165,23 +165,21 @@ export const ToastExample: React.FC = () => { ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | -| `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` | **[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` | -| `enterAnimation` | -- | Animation to use when the toast is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | -| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `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` | **[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` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | +| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| 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` | +| `enterAnimation` | -- | Animation to use when the toast is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | +| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `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'` | +| `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` | ## Events diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index 20f812e63c..43ab86fb14 100644 --- a/core/src/components/toast/test/basic/index.html +++ b/core/src/components/toast/test/basic/index.html @@ -36,19 +36,19 @@ Header Toast - + Header + Action Toast - + Long Message - + Close Button - + Custom Close Button @@ -56,23 +56,23 @@ Custom Buttons - + Translucent Toast - + Color Toast - + Custom Class - + Show Toast with start-end position - + Show HTML Toast diff --git a/core/src/components/toast/test/buttons/index.html b/core/src/components/toast/test/buttons/index.html index e88ab615f1..b8ce75cdac 100644 --- a/core/src/components/toast/test/buttons/index.html +++ b/core/src/components/toast/test/buttons/index.html @@ -20,10 +20,6 @@ - - - Close Button Property - @@ -51,18 +47,6 @@ window.addEventListener('ionToastDidDismiss', function (e) { console.log('didDismiss', e) }) window.addEventListener('ionToastWillDismiss', function (e) { console.log('willDismiss', e) }) - // Deprecated properties, use buttons array instead - async function presentClosePropToast() { - const opts = { - message: 'Are you sure you want to delete this?', - showCloseButton: true, - closeButtonText: 'Delete' - }; - - return await presentToastWithOptions(opts); - } - - // New way to do the above in presentClosePropToast() async function presentCloseArrayToast() { const opts = { message: 'Are you sure you want to delete this?', diff --git a/core/src/components/toast/test/standalone/index.html b/core/src/components/toast/test/standalone/index.html index 738568f9b1..f22bdb4490 100644 --- a/core/src/components/toast/test/standalone/index.html +++ b/core/src/components/toast/test/standalone/index.html @@ -16,10 +16,10 @@ - - - - + + + + diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 585b66e37f..ba2ad7c33e 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -6,8 +6,6 @@ export interface ToastOptions { cssClass?: string | string[]; duration?: number; buttons?: (ToastButton | string)[]; - showCloseButton?: boolean; - closeButtonText?: string; position?: 'top' | 'bottom' | 'middle'; translucent?: boolean; animated?: boolean; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 378f45d35e..cd15330b32 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -86,16 +86,6 @@ export class Toast implements ComponentInterface, OverlayInterface { */ @Prop() position: 'top' | 'bottom' | 'middle' = 'bottom'; - /** - * @deprecated Use `buttons` instead. If `true`, the close button will be displayed. - */ - @Prop() showCloseButton = false; - - /** - * @deprecated Use `buttons` instead. Text to display in the close button. - */ - @Prop() closeButtonText?: string; - /** * An array of buttons for the toast. */ @@ -191,15 +181,6 @@ 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') - }); - } - return buttons; } diff --git a/vue/cookbook/ionic-controllers.html b/vue/cookbook/ionic-controllers.html index 5142700607..204c6fa273 100644 --- a/vue/cookbook/ionic-controllers.html +++ b/vue/cookbook/ionic-controllers.html @@ -112,9 +112,8 @@ toast() { this.$ionic.toastController.create({ message: 'Here\'s to IonicVue!', - showCloseButton: true, + buttons: ['Done'], position: 'top', - closeButtonText: 'Done' }) .then(t => t.present()) },