From bf0173cab25d2c4cf82b8d05d1959f39615b2d76 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Aug 2019 10:03:18 -0400 Subject: [PATCH 1/8] refactor(toast): remove showCloseButton and closeButtonText (#18957) * Remove close button * update tests * update tests * add build --- core/api.txt | 2 -- core/src/components.d.ts | 16 ---------- .../components/app/test/safe-area/index.html | 4 ++- core/src/components/toast/readme.md | 32 +++++++++---------- .../components/toast/test/basic/index.html | 18 +++++------ .../components/toast/test/buttons/index.html | 16 ---------- .../toast/test/standalone/index.html | 8 ++--- core/src/components/toast/toast-interface.ts | 2 -- core/src/components/toast/toast.tsx | 19 ----------- vue/cookbook/ionic-controllers.html | 3 +- 10 files changed, 32 insertions(+), 88 deletions(-) diff --git a/core/api.txt b/core/api.txt index 89ff60efdf6..14b72241d50 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1211,7 +1211,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 @@ -1222,7 +1221,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 d6c1d09d49c..2d1c8bbcde9 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 f88bea2e0d5..bd4ac475448 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 34e434cfb0b..44043085d47 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 20f812e63c8..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/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..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/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 378f45d35ec..cd15330b325 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 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 296300aba5da77e378e36d170c913ccc3e9645ea Mon Sep 17 00:00:00 2001 From: Manu MA Date: Tue, 27 Aug 2019 14:00:45 +0200 Subject: [PATCH 2/8] refactor(): deprecate web component controllers (#19109) --- core/src/components/menu/test/basic/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index d8a249a7f5c..5e7ee5434b2 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -93,7 +93,7 @@ } - - - - - - - - - - - - - - diff --git a/core/src/components/nav-push/nav-push.tsx b/core/src/components/nav-push/nav-push.tsx deleted file mode 100644 index 6a9489385cc..00000000000 --- a/core/src/components/nav-push/nav-push.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core'; - -import { ComponentProps, NavComponent } from '../../interface'; -import { navLink } from '../nav-link/nav-link-utils'; - -/** - * @deprecated Use `` instead. - */ -@Component({ - tag: 'ion-nav-push' -}) -export class NavPush implements ComponentInterface { - @Element() el!: HTMLElement; - - /** - * Component to navigate to - */ - @Prop() component?: NavComponent; - - /** - * Data you want to pass to the component as props - */ - @Prop() componentProps?: ComponentProps; - - componentDidLoad() { - console.warn('[DEPRECATED][ion-nav-push] `` is deprecated. Use `` instead.'); - } - - private push = () => { - return navLink(this.el, 'forward', this.component, this.componentProps); - } - - render() { - return ( - - ); - } -} diff --git a/core/src/components/nav-push/readme.md b/core/src/components/nav-push/readme.md deleted file mode 100644 index 7fc7ad24641..00000000000 --- a/core/src/components/nav-push/readme.md +++ /dev/null @@ -1,23 +0,0 @@ -# ion-nav-push - -Nav Push is a component used to navigate to the specified component. - -It is the component form of `NavController.push()` - - - - - -> **[DEPRECATED]** Use `` instead. - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------- | ----------------------------------------------- | -------------------------------------------------------------------------- | ----------- | -| `component` | `component` | Component to navigate to | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | -| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/nav-push/test/basic/index.html b/core/src/components/nav-push/test/basic/index.html deleted file mode 100644 index 5b8c6d88f14..00000000000 --- a/core/src/components/nav-push/test/basic/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - Nav Push - - - - - - - - - - - - - - - - - diff --git a/core/src/components/nav-set-root/nav-set-root.tsx b/core/src/components/nav-set-root/nav-set-root.tsx deleted file mode 100644 index 3ebf21f0c3a..00000000000 --- a/core/src/components/nav-set-root/nav-set-root.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core'; - -import { ComponentProps, NavComponent } from '../../interface'; -import { navLink } from '../nav-link/nav-link-utils'; - -/** - * @deprecated Use `` instead. - */ -@Component({ - tag: 'ion-nav-set-root' -}) -export class NavSetRoot implements ComponentInterface { - @Element() el!: HTMLElement; - - /** - * Component you want to make root for the navigation stack - * - */ - @Prop() component?: NavComponent; - - /** - * Data you want to pass to the component as props - */ - @Prop() componentProps?: ComponentProps; - - componentDidLoad() { - console.warn('[DEPRECATED][ion-nav-set-root] `` is deprecated. Use `` instead.'); - } - - private setRoot = () => { - return navLink(this.el, 'root', this.component, this.componentProps); - } - - render() { - return ( - - ); - } -} diff --git a/core/src/components/nav-set-root/readme.md b/core/src/components/nav-set-root/readme.md deleted file mode 100644 index bbc4e6583f8..00000000000 --- a/core/src/components/nav-set-root/readme.md +++ /dev/null @@ -1,22 +0,0 @@ -# ion-nav-set-root - -`NavSetRoot` is a component that allows you to set the root of the current navigation stack. -It is the component form of calling `NavController.setRoot()` - - - - - -> **[DEPRECATED]** Use `` instead. - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------- | -------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | -| `component` | `component` | Component you want to make root for the navigation stack | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | -| `componentProps` | -- | Data you want to pass to the component as props | `undefined \| { [key: string]: any; }` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/nav-set-root/test/basic/index.html b/core/src/components/nav-set-root/test/basic/index.html deleted file mode 100644 index adf876efae3..00000000000 --- a/core/src/components/nav-set-root/test/basic/index.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - Nav Set Root - - - - - - - - - - - - - - - - diff --git a/core/src/components/nav/test/basic/index.html b/core/src/components/nav/test/basic/index.html index 6f8c61be419..87606c37692 100644 --- a/core/src/components/nav/test/basic/index.html +++ b/core/src/components/nav/test/basic/index.html @@ -55,9 +55,9 @@

Page One

- + Go to Page Two - + `; } @@ -89,9 +89,9 @@

Page One

Page Two

- + Go to Page Three - +
diff --git a/core/src/components/nav/test/nested/index.html b/core/src/components/nav/test/nested/index.html index 5db0829a123..ec7ec3ddeec 100644 --- a/core/src/components/nav/test/nested/index.html +++ b/core/src/components/nav/test/nested/index.html @@ -20,9 +20,9 @@

Page 1

- + Go to Page 2 - + `; } @@ -50,9 +50,9 @@

Page 1

Page 2.1

- + Go to Page 2.2 - +
`; @@ -74,9 +74,9 @@

Page 2.1

Page 2.2

- + Go to Page 3 - +
`; diff --git a/core/src/components/nav/test/routing/index.html b/core/src/components/nav/test/routing/index.html index 594a6e0d73e..b6fa0439ce5 100644 --- a/core/src/components/nav/test/routing/index.html +++ b/core/src/components/nav/test/routing/index.html @@ -21,9 +21,9 @@

Root

- + Go to Page One - +
`; @@ -42,9 +42,9 @@

Root

Page One

- + Go to Page Two - + `; } @@ -63,9 +63,9 @@

Page One

Page Two

- + Go to Page Three - +
`; diff --git a/core/src/components/router-outlet/test/basic/index.html b/core/src/components/router-outlet/test/basic/index.html index e8c6d44b359..b773f4e3628 100644 --- a/core/src/components/router-outlet/test/basic/index.html +++ b/core/src/components/router-outlet/test/basic/index.html @@ -39,9 +39,9 @@

Page One

Page Two

- + Go to Page Two - +
`; diff --git a/core/src/utils/animation/test/animationbuilder/index.html b/core/src/utils/animation/test/animationbuilder/index.html index 6d01be60192..75a40176e8a 100644 --- a/core/src/utils/animation/test/animationbuilder/index.html +++ b/core/src/utils/animation/test/animationbuilder/index.html @@ -14,7 +14,7 @@ if (forceCSSAnimations) { Element.prototype.animate = null; } - + class PageRoot extends HTMLElement { connectedCallback() { this.innerHTML = ` @@ -29,9 +29,9 @@

Root

- + Go to Page One - +
`; @@ -50,9 +50,9 @@

Root

Page One

- + Go to Page Two - + `; } @@ -71,9 +71,9 @@

Page One

Page Two

- + Go to Page Three - +
`; @@ -100,31 +100,31 @@

Page Three

customElements.define('page-one', PageOne); customElements.define('page-two', PageTwo); customElements.define('page-three', PageThree); - + const forceAnimationBuilder = new URLSearchParams(window.location.search).get('ionic:_forceAnimationBuilder'); if (forceAnimationBuilder) { window.Ionic.config.navAnimation = (AnimationC, navEl, opts) => { const TRANSLATEY = 'translateY'; const OFF_BOTTOM = '40px'; const CENTER = '0px'; - + const backDirection = (opts.direction === 'back'); const enteringEl = opts.enteringEl; const leavingEl = opts.leavingEl; const ionPageElement = getIonPageElement(enteringEl); const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar'); const rootTransition = new AnimationC(); - + rootTransition .addElement(ionPageElement) .beforeRemoveClass('ion-page-invisible'); - + // animate the component itself if (backDirection) { rootTransition .duration(opts.duration || 200) .easing('cubic-bezier(0.47,0,0.745,0.715)'); - + } else { rootTransition .duration(opts.duration || 280) @@ -132,39 +132,39 @@

Page Three

.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true) .fromTo('opacity', 0.01, 1, true); } - + // Animate toolbar if it's there if (enteringToolbarEle) { const enteringToolBar = new AnimationC(); enteringToolBar.addElement(enteringToolbarEle); rootTransition.add(enteringToolBar); } - + // setup leaving view if (leavingEl && backDirection) { // leaving content rootTransition .duration(opts.duration || 200) .easing('cubic-bezier(0.47,0,0.745,0.715)'); - + const leavingPage = new AnimationC(); leavingPage .addElement(getIonPageElement(leavingEl)) .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM) .fromTo('opacity', 1, 0); - + rootTransition.add(leavingPage); } - + return Promise.resolve(rootTransition); }; } - + const getIonPageElement = (element) => { if (element.classList.contains('ion-page')) { return element; } - + const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'); if (ionPage) { return ionPage; diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 39425c6f069..eb9d6eb5628 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -28,7 +28,7 @@ export const config: Config = { { components: ['ion-loading'] }, { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] }, { components: ['ion-modal'] }, - { components: ['ion-nav', 'ion-nav-link', 'ion-nav-pop', 'ion-nav-push', 'ion-nav-set-root'] }, + { components: ['ion-nav', 'ion-nav-link'] }, { components: ['ion-img'] }, { components: ['ion-popover'] }, { components: ['ion-progress-bar'] }, From 45704971c7a685a05c514d95cc97be9d471fe828 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 5 Sep 2019 11:57:21 -0400 Subject: [PATCH 4/8] chore(build): remove the angular APIs --- angular/src/ionic-module.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts index 8260c3b861e..76663fd367a 100644 --- a/angular/src/ionic-module.ts +++ b/angular/src/ionic-module.ts @@ -14,7 +14,7 @@ import { IonRouterOutlet } from './directives/navigation/ion-router-outlet'; import { IonTabs } from './directives/navigation/ion-tabs'; import { NavDelegate } from './directives/navigation/nav-delegate'; import { RouterLinkDelegate } from './directives/navigation/router-link-delegate'; -import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies'; +import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies'; import { VirtualFooter } from './directives/virtual-scroll/virtual-footer'; import { VirtualHeader } from './directives/virtual-scroll/virtual-header'; import { VirtualItem } from './directives/virtual-scroll/virtual-item'; @@ -68,9 +68,6 @@ const DECLARATIONS = [ IonMenuToggle, IonNav, IonNavLink, - IonNavPop, - IonNavPush, - IonNavSetRoot, IonNote, IonProgressBar, IonRadio, From bc324c46c6ed5ed9a01c7fa38526a794b007054d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Aug 2019 10:03:18 -0400 Subject: [PATCH 5/8] refactor(toast): remove showCloseButton and closeButtonText (#18957) * Remove close button * update tests * update tests * add build --- core/api.txt | 2 -- core/src/components.d.ts | 16 ---------- .../components/app/test/safe-area/index.html | 4 ++- core/src/components/toast/readme.md | 32 +++++++++---------- .../components/toast/test/basic/index.html | 18 +++++------ .../components/toast/test/buttons/index.html | 16 ---------- .../toast/test/standalone/index.html | 8 ++--- core/src/components/toast/toast-interface.ts | 2 -- core/src/components/toast/toast.tsx | 19 ----------- vue/cookbook/ionic-controllers.html | 3 +- 10 files changed, 32 insertions(+), 88 deletions(-) diff --git a/core/api.txt b/core/api.txt index 89ff60efdf6..14b72241d50 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1211,7 +1211,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 @@ -1222,7 +1221,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 d6c1d09d49c..2d1c8bbcde9 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 f88bea2e0d5..bd4ac475448 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 34e434cfb0b..44043085d47 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 20f812e63c8..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/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..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/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 378f45d35ec..cd15330b325 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 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 bc99f4e97819a53579425fd69c1b80ec81420781 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Tue, 27 Aug 2019 14:00:45 +0200 Subject: [PATCH 6/8] refactor(): deprecate web component controllers (#19109) --- core/src/components/menu/test/basic/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index d8a249a7f5c..5e7ee5434b2 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -93,7 +93,7 @@ } -