refactor(toast): remove showCloseButton and closeButtonText (#18957)
* Remove close button * update tests * update tests * add build
This commit is contained in:
Liam DeBeasi
Brandy Carney
parent
f742dc5519
commit
d6c20a9dec
|
|
@ -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<boolean>
|
||||
ion-toast,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
|
||||
|
|
|
|||
|
|
@ -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<void>;
|
||||
/**
|
||||
* @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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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` | <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` |
|
||||
| `enterAnimation` | -- | Animation to use when the toast is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| 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<Animation>) \| 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` | <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` |
|
||||
| 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<Animation>) \| 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<Animation>) \| 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
|
||||
|
|
|
|||
|
|
@ -36,19 +36,19 @@
|
|||
Header Toast
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" onclick="presentToastWithOptions({header: 'Toast header', message: 'Really long message that should go all of the way to the button', showCloseButton: true, closeButtonText: 'Action'})">
|
||||
<ion-button expand="block" onclick="presentToastWithOptions({header: 'Toast header', message: 'Really long message that should go all of the way to the button', buttons: ['Action'] })">
|
||||
Header + Action Toast
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="two-line-toast" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', showCloseButton: true, closeButtonText: 'Action'})">
|
||||
<ion-button expand="block" id="two-line-toast" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', buttons: ['Action'] })">
|
||||
Long Message
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="close-button-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">
|
||||
<ion-button expand="block" id="close-button-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'] })">
|
||||
Close Button
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="custom-close-text-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">
|
||||
<ion-button expand="block" id="custom-close-text-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['closing time'] })">
|
||||
Custom Close Button
|
||||
</ion-button>
|
||||
|
||||
|
|
@ -56,23 +56,23 @@
|
|||
Custom Buttons
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="translucent-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">
|
||||
<ion-button expand="block" id="translucent-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], translucent: true})">
|
||||
Translucent Toast
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="color-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">
|
||||
<ion-button expand="block" id="color-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], color: 'danger'})">
|
||||
Color Toast
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="custom-class-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'my-custom-class'})">
|
||||
<ion-button expand="block" id="custom-class-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'my-custom-class'})">
|
||||
Custom Class
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="toast-start-and-end" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'toast-start-and-end'})">
|
||||
<ion-button expand="block" id="toast-start-and-end" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'toast-start-and-end'})">
|
||||
Show Toast with start-end position
|
||||
</ion-button>
|
||||
|
||||
<ion-button expand="block" id="toast-html" onclick="presentToastWithOptions({message: '<ion-button>Button in a Toast!</ion-button>', showCloseButton: true})">
|
||||
<ion-button expand="block" id="toast-html" onclick="presentToastWithOptions({message: '<ion-button>Button in a Toast!</ion-button>', buttons: ['Close'] })">
|
||||
Show HTML Toast
|
||||
</ion-button>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,10 +20,6 @@
|
|||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding" id="content">
|
||||
<!-- Old way using close button properties -->
|
||||
<ion-button id="closeProp" expand="block" onclick="presentClosePropToast()">
|
||||
Close Button Property
|
||||
</ion-button>
|
||||
|
||||
<!-- New way using array of buttons -->
|
||||
<ion-button id="closeArray" expand="block" onclick="presentCloseArrayToast()">
|
||||
|
|
@ -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?',
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@
|
|||
<button onclick="presentToast('top')">Show Toast Top</button>
|
||||
<button onclick="presentToast('middle')">Show Toast Middle</button>
|
||||
<button onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'custom'})">Show Toast with Custom Properties</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'] })">Show Toast with Close Button</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['closing time'] })">Show Toast with Custom Close Button Text</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], translucent: true})">Show Translucent Toast</button>
|
||||
<button onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'custom'})">Show Toast with Custom Properties</button>
|
||||
|
||||
<ion-toast-controller></ion-toast-controller>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue