From b85b884e3a4e3971292b9e806e158bd189a6e753 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 30 Jul 2019 15:42:33 -0400 Subject: [PATCH 1/4] Remove close button --- core/api.txt | 2 -- core/src/components.d.ts | 16 --------------- core/src/components/toast/readme.md | 32 ++++++++++++++--------------- core/src/components/toast/toast.tsx | 17 --------------- 4 files changed, 15 insertions(+), 52 deletions(-) diff --git a/core/api.txt b/core/api.txt index c056c9383cf..c0052db0d63 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1202,7 +1202,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 @@ -1213,7 +1212,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 fbd8db1c06a..1579a304df3 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2685,10 +2685,6 @@ export namespace Components { */ 'buttons'?: (ToastButton | string)[]; /** - * 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; @@ -2748,10 +2744,6 @@ export namespace Components { */ 'present': () => Promise; /** - * 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; @@ -5976,10 +5968,6 @@ declare namespace LocalJSX { */ 'buttons'?: (ToastButton | string)[]; /** - * 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; @@ -6036,10 +6024,6 @@ declare namespace LocalJSX { */ 'position'?: 'top' | 'bottom' | 'middle'; /** - * 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/toast/readme.md b/core/src/components/toast/readme.md index fe6ea56ed32..eded2df097a 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -168,23 +168,21 @@ export const ToastExample: React.FunctionComponent = () => { ## 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` | 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` | 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/toast.tsx b/core/src/components/toast/toast.tsx index 04698baf96c..70aa6de0ee6 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'; - /** - * If `true`, the close button will be displayed. - */ - @Prop() showCloseButton = false; - - /** - * Text to display in the close button. - */ - @Prop() closeButtonText?: string; - /** * An array of buttons for the toast. */ @@ -187,13 +177,6 @@ export class Toast implements ComponentInterface, OverlayInterface { }) : []; - if (this.showCloseButton) { - buttons.push({ - text: this.closeButtonText || 'Close', - handler: () => this.dismiss(undefined, 'cancel') - }); - } - return buttons; } From 67cb757a20514b688788c5a757324d31e86c5ffa Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 30 Jul 2019 15:49:40 -0400 Subject: [PATCH 2/4] update tests --- .../src/components/toast/test/basic/index.html | 18 +++++++++--------- .../components/toast/test/buttons/index.html | 16 ---------------- .../toast/test/standalone/index.html | 8 ++++---- 3 files changed, 13 insertions(+), 29 deletions(-) diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index 20f812e63c8..1da4dff3d2f 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 e88ab615f18..b8ce75cdac5 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 738568f9b15..174c398dcd0 100644 --- a/core/src/components/toast/test/standalone/index.html +++ b/core/src/components/toast/test/standalone/index.html @@ -16,10 +16,10 @@ - - - - + + + + From aea6f9870b24ab82ceb0ef52c62482d29b175dcc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 30 Jul 2019 16:04:53 -0400 Subject: [PATCH 3/4] update tests --- .../components/app/test/safe-area/index.html | 4 +++- .../src/components/toast/test/basic/index.html | 18 +++++++++--------- .../toast/test/standalone/index.html | 8 ++++---- core/src/components/toast/toast-interface.ts | 2 -- vue/cookbook/ionic-controllers.html | 3 +-- 5 files changed, 17 insertions(+), 18 deletions(-) diff --git a/core/src/components/app/test/safe-area/index.html b/core/src/components/app/test/safe-area/index.html index 19b14466274..47e4b70452e 100644 --- a/core/src/components/app/test/safe-area/index.html +++ b/core/src/components/app/test/safe-area/index.html @@ -60,7 +60,9 @@ const toast = await document.querySelector('ion-toast-controller') .create({ message: 'Hello world!', - showCloseButton: true + buttons: [ + { text: 'Close', role: 'close' } + ] }); await toast.present(); } diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index 1da4dff3d2f..43ab86fb147 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/standalone/index.html b/core/src/components/toast/test/standalone/index.html index 174c398dcd0..f22bdb44904 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 585b66e37fa..ba2ad7c33e5 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/vue/cookbook/ionic-controllers.html b/vue/cookbook/ionic-controllers.html index 51427006078..204c6fa2733 100644 --- a/vue/cookbook/ionic-controllers.html +++ b/vue/cookbook/ionic-controllers.html @@ -112,9 +112,8 @@

Howdy!

toast() { this.$ionic.toastController.create({ message: 'Here\'s to IonicVue!', - showCloseButton: true, + buttons: ['Done'], position: 'top', - closeButtonText: 'Done' }) .then(t => t.present()) }, From 30e48dff603885de17972acbb9dbb07245483290 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 19 Aug 2019 16:11:00 -0400 Subject: [PATCH 4/4] add build --- core/src/components.d.ts | 28 ---------------------------- core/src/components/toast/readme.md | 20 -------------------- 2 files changed, 48 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 83cee74a7ca..80ce16e707e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2691,13 +2691,6 @@ export namespace Components { */ 'buttons'?: (ToastButton | string)[]; /** -<<<<<<< HEAD -======= - * @deprecated Use `buttons` instead. Text to display in the close button. - */ - 'closeButtonText'?: string; - /** ->>>>>>> origin/next * 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; @@ -2757,13 +2750,6 @@ export namespace Components { */ 'present': () => Promise; /** -<<<<<<< HEAD -======= - * @deprecated Use `buttons` instead. If `true`, the close button will be displayed. - */ - 'showCloseButton': boolean; - /** ->>>>>>> origin/next * 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; @@ -5992,13 +5978,6 @@ declare namespace LocalJSX { */ 'buttons'?: (ToastButton | string)[]; /** -<<<<<<< HEAD -======= - * @deprecated Use `buttons` instead. Text to display in the close button. - */ - 'closeButtonText'?: string; - /** ->>>>>>> origin/next * 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; @@ -6055,13 +6034,6 @@ declare namespace LocalJSX { */ 'position'?: 'top' | 'bottom' | 'middle'; /** -<<<<<<< HEAD -======= - * @deprecated Use `buttons` instead. If `true`, the close button will be displayed. - */ - 'showCloseButton'?: boolean; - /** ->>>>>>> origin/next * 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/toast/readme.md b/core/src/components/toast/readme.md index 3d8cdff06e3..eded2df097a 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -168,7 +168,6 @@ export const ToastExample: React.FunctionComponent = () => { ## Properties -<<<<<<< HEAD | Property | Attribute | Description | Type | Default | | ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | | `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | @@ -184,25 +183,6 @@ export const ToastExample: React.FunctionComponent = () => { | `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` | -======= -| 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` | ->>>>>>> origin/next ## Events