From 6f55efb28e21887c269771802d2d7a27d43edc87 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Aug 2019 10:03:18 -0400 Subject: [PATCH 01/17] 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 e35a256247c..6cbc97bd840 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 7df5c4f4087..4cb9bd5d23c 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 9b2766f8282539b3f0e6dee6de8505f5de15be30 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Tue, 27 Aug 2019 14:00:45 +0200 Subject: [PATCH 02/17] 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 0cac916ea39..c5474a06f62 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 8944e4214bf166a14683e225383e77e35fc86545 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 27 Sep 2019 17:28:46 -0400 Subject: [PATCH 04/17] refactor(scss): remove scss (#19292) BREAKING CHANGES Removes `scss` files from the distributed files. Please use CSS variables for theming instead. --- core/stencil.config.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/core/stencil.config.ts b/core/stencil.config.ts index eb9d6eb5628..3680fba9ec0 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -76,10 +76,7 @@ export const config: Config = { }, { type: 'dist', - esmLoaderPath: '../loader', - copy: [ - { src: '**/*.scss' } - ] + esmLoaderPath: '../loader' }, // { // type: 'experimental-dist-module', From 1401bb63da4fecd2069db04d3aac9cff3cea9f58 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 27 Sep 2019 17:41:44 -0400 Subject: [PATCH 05/17] refactor(themes): update to new ionic colors (#19279) BREAKING CHANGES The Ionic default colors have been updated to the following: primary: #3880ff secondary: #3dc2ff tertiary: #5260ff success: #2dd36f warning: #ffc409 danger: #eb445a light: #f4f5f8 medium: #92949c dark: #222428 `primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`. --- core/src/themes/ionic.theme.default.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index b4ddb246855..bdc004f61be 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/core/src/themes/ionic.theme.default.scss @@ -15,13 +15,13 @@ // - tint: 10% lighter version of the base color (mix with white) $primary: #3880ff !default; -$secondary: #0cd1e8 !default; -$tertiary: #7044ff !default; -$success: #10dc60 !default; -$warning: #ffce00 !default; -$danger: #f04141 !default; +$secondary: #3dc2ff !default; +$tertiary: #5260ff !default; +$success: #2dd36f !default; +$warning: #ffc409 !default; +$danger: #eb445a !default; $light: #f4f5f8 !default; -$medium: #989aa2 !default; +$medium: #92949c !default; $dark: #222428 !default; $colors: ( @@ -51,7 +51,7 @@ $colors: ( ), warning: ( base: $warning, - contrast: #fff, + contrast: #000, shade: get-color-shade($warning), tint: get-color-tint($warning) ), From afb8bf0c2197cdd6306b79831b52555b57a70f1b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 27 Sep 2019 17:54:03 -0400 Subject: [PATCH 06/17] refactor(css): remove CSS util attributes (#18956) BREAKING CHANGES Removes all CSS utility attributes. Please use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities --- .../src/directives/css-utils-deprecations.ts | 134 ------------------ angular/src/index.ts | 1 - angular/src/ionic-module.ts | 6 +- core/src/css/flex-utils.scss | 60 +++----- core/src/css/float-elements.scss | 12 +- core/src/css/padding.scss | 48 +++---- core/src/css/text-alignment.scss | 24 ++-- core/src/css/text-transformation.scss | 9 +- 8 files changed, 52 insertions(+), 242 deletions(-) delete mode 100644 angular/src/directives/css-utils-deprecations.ts diff --git a/angular/src/directives/css-utils-deprecations.ts b/angular/src/directives/css-utils-deprecations.ts deleted file mode 100644 index 5ae5c0e86b0..00000000000 --- a/angular/src/directives/css-utils-deprecations.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { Directive, ElementRef } from '@angular/core'; - -@Directive({ - selector: '[align-self-start], [align-self-end], [align-self-center], [align-self-stretch], [align-self-baseline], [align-self-auto], [wrap-reverse], [justify-content-start], [justify-content-center], [justify-content-end], [justify-content-around], [justify-content-between], [justify-content-evenly], [align-items-start], [align-items-center], [align-items-end], [align-items-stretch], [align-items-baseline], [float-left], [float-right], [float-start], [float-end], [float-sm-left], [float-sm-right], [float-sm-start], [float-sm-end], [float-md-left], [float-md-right], [float-md-start], [float-md-end], [float-lg-left], [float-lg-right], [float-lg-start], [float-lg-end], [float-xl-left], [float-xl-right], [float-xl-start], [float-xl-end], [text-center], [text-justify], [text-start], [text-end], [text-left], [text-right], [text-nowrap], [text-wrap], [text-sm-center], [text-sm-justify], [text-sm-start], [text-sm-end], [text-sm-left], [text-sm-right], [text-sm-nowrap], [text-sm-wrap], [text-md-center], [text-md-justify], [text-md-start], [text-md-end], [text-md-left], [text-md-right], [text-md-nowrap], [text-md-wrap], [text-lg-center], [text-lg-justify], [text-lg-start], [text-lg-end], [text-lg-left], [text-lg-right], [text-lg-nowrap], [text-lg-wrap], [text-xl-center], [text-xl-justify], [text-xl-start], [text-xl-end], [text-xl-left], [text-xl-right], [text-xl-nowrap], [text-xl-wrap], [text-uppercase], [text-lowercase], [text-capitalize], [text-sm-uppercase], [text-sm-lowercase], [text-sm-capitalize], [text-md-uppercase], [text-md-lowercase], [text-md-capitalize], [text-lg-uppercase], [text-lg-lowercase], [text-lg-capitalize], [text-xl-uppercase], [text-xl-lowercase], [text-xl-capitalize], [no-padding], [padding], [padding-top], [padding-bottom], [padding-start], [padding-end], [padding-vertical], [padding-horizontal], [no-margin], [margin], [margin-top], [margin-bottom], [margin-start], [margin-end], [margin-vertical], [margin-horizontal]', -}) -export class CssUtilsDeprecations { - constructor(ref: ElementRef) { - const el = (ref.nativeElement as HTMLElement); - const attributes = Array.from(el.attributes) - .map(a => a.name) - .filter(n => DEPRECATED_ATTRIBUTES.includes(n)); - - if (attributes.length > 0) { - console.warn(`[DEPRECATED][CSS] Ionic CSS attributes are deprecated. -Replace: -'<${el.tagName.toLowerCase()} ${attributes.map(n => `${n}`).join(' ')}>' - -With: -'<${el.tagName.toLowerCase()} class="${attributes.map(n => `ion-${n}`).join(' ')}">' - `); - } - } -} -const DEPRECATED_ATTRIBUTES = [ - 'align-self-start', - 'align-self-end', - 'align-self-center', - 'align-self-stretch', - 'align-self-baseline', - 'align-self-auto', - 'wrap-reverse', - 'justify-content-start', - 'justify-content-center', - 'justify-content-end', - 'justify-content-around', - 'justify-content-between', - 'justify-content-evenly', - 'align-items-start', - 'align-items-center', - 'align-items-end', - 'align-items-stretch', - 'align-items-baseline', - 'float-left', - 'float-right', - 'float-start', - 'float-end', - 'float-sm-left', - 'float-sm-right', - 'float-sm-start', - 'float-sm-end', - 'float-md-left', - 'float-md-right', - 'float-md-start', - 'float-md-end', - 'float-lg-left', - 'float-lg-right', - 'float-lg-start', - 'float-lg-end', - 'float-xl-left', - 'float-xl-right', - 'float-xl-start', - 'float-xl-end', - 'text-center', - 'text-justify', - 'text-start', - 'text-end', - 'text-left', - 'text-right', - 'text-nowrap', - 'text-wrap', - 'text-sm-center', - 'text-sm-justify', - 'text-sm-start', - 'text-sm-end', - 'text-sm-left', - 'text-sm-right', - 'text-sm-nowrap', - 'text-sm-wrap', - 'text-md-center', - 'text-md-justify', - 'text-md-start', - 'text-md-end', - 'text-md-left', - 'text-md-right', - 'text-md-nowrap', - 'text-md-wrap', - 'text-lg-center', - 'text-lg-justify', - 'text-lg-start', - 'text-lg-end', - 'text-lg-left', - 'text-lg-right', - 'text-lg-nowrap', - 'text-lg-wrap', - 'text-xl-center', - 'text-xl-justify', - 'text-xl-start', - 'text-xl-end', - 'text-xl-left', - 'text-xl-right', - 'text-xl-nowrap', - 'text-xl-wrap', - 'text-uppercase', - 'text-lowercase', - 'text-capitalize', - 'text-sm-uppercase', - 'text-sm-lowercase', - 'text-sm-capitalize', - 'text-md-uppercase', - 'text-md-lowercase', - 'text-md-capitalize', - 'text-lg-uppercase', - 'text-lg-lowercase', - 'text-lg-capitalize', - 'text-xl-uppercase', - 'text-xl-lowercase', - 'text-xl-capitalize', - 'no-padding', - 'padding', - 'padding-top', - 'padding-bottom', - 'padding-start', - 'padding-end', - 'padding-vertical', - 'padding-horizontal', - 'no-margin', - 'margin', - 'margin-top', - 'margin-bottom', - 'margin-start', - 'margin-end', - 'margin-vertical', - 'margin-horizontal' -]; diff --git a/angular/src/index.ts b/angular/src/index.ts index 0ca141a061c..023f554e4d6 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -14,7 +14,6 @@ export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll'; export { VirtualItem } from './directives/virtual-scroll/virtual-item'; export { VirtualHeader } from './directives/virtual-scroll/virtual-header'; export { VirtualFooter } from './directives/virtual-scroll/virtual-footer'; -export { CssUtilsDeprecations } from './directives/css-utils-deprecations'; export * from './directives/proxies'; // PROVIDERS diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts index 76663fd367a..04d1fd4eaef 100644 --- a/angular/src/ionic-module.ts +++ b/angular/src/ionic-module.ts @@ -8,7 +8,6 @@ import { NumericValueAccessor } from './directives/control-value-accessors/numer import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor'; import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor'; import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor'; -import { CssUtilsDeprecations } from './directives/css-utils-deprecations'; import { IonBackButtonDelegate } from './directives/navigation/ion-back-button'; import { IonRouterOutlet } from './directives/navigation/ion-router-outlet'; import { IonTabs } from './directives/navigation/ion-tabs'; @@ -117,10 +116,7 @@ const DECLARATIONS = [ VirtualFooter, VirtualHeader, VirtualItem, - IonVirtualScroll, - - // Deprecations - CssUtilsDeprecations + IonVirtualScroll ]; @NgModule({ diff --git a/core/src/css/flex-utils.scss b/core/src/css/flex-utils.scss index 06670474b00..41e9f3325c4 100644 --- a/core/src/css/flex-utils.scss +++ b/core/src/css/flex-utils.scss @@ -6,33 +6,27 @@ // Align Self // -------------------------------------------------- -.ion-align-self-start, -[align-self-start] { +.ion-align-self-start { align-self: flex-start !important; } -.ion-align-self-end, -[align-self-end] { +.ion-align-self-end { align-self: flex-end !important; } -.ion-align-self-center, -[align-self-center] { +.ion-align-self-center { align-self: center !important; } -.ion-align-self-stretch, -[align-self-stretch] { +.ion-align-self-stretch { align-self: stretch !important; } -.ion-align-self-baseline, -[align-self-baseline] { +.ion-align-self-baseline { align-self: baseline !important; } -.ion-align-self-auto, -[align-self-auto] { +.ion-align-self-auto { align-self: auto !important; } @@ -40,18 +34,15 @@ // Flex Wrap // -------------------------------------------------- -.ion-wrap, -[wrap] { +.ion-wrap { flex-wrap: wrap !important; } -.ion-nowrap, -[nowrap] { +.ion-nowrap { flex-wrap: nowrap !important; } -.ion-wrap-reverse, -[wrap-reverse] { +.ion-wrap-reverse { flex-wrap: wrap-reverse !important; } @@ -59,33 +50,27 @@ // Justify Content // -------------------------------------------------- -.ion-justify-content-start, -[justify-content-start] { +.ion-justify-content-start { justify-content: flex-start !important; } -.ion-justify-content-center, -[justify-content-center] { +.ion-justify-content-center { justify-content: center !important; } -.ion-justify-content-end, -[justify-content-end] { +.ion-justify-content-end { justify-content: flex-end !important; } -.ion-justify-content-around, -[justify-content-around] { +.ion-justify-content-around { justify-content: space-around !important; } -.ion-justify-content-between, -[justify-content-between] { +.ion-justify-content-between { justify-content: space-between !important; } -.ion-justify-content-evenly, -[justify-content-evenly] { +.ion-justify-content-evenly { justify-content: space-evenly !important; } @@ -93,27 +78,22 @@ // Align Items // -------------------------------------------------- -.ion-align-items-start, -[align-items-start] { +.ion-align-items-start { align-items: flex-start !important; } -.ion-align-items-center, -[align-items-center] { +.ion-align-items-center { align-items: center !important; } -.ion-align-items-end, -[align-items-end] { +.ion-align-items-end { align-items: flex-end !important; } -.ion-align-items-stretch, -[align-items-stretch] { +.ion-align-items-stretch { align-items: stretch !important; } -.ion-align-items-baseline, -[align-items-baseline] { +.ion-align-items-baseline { align-items: baseline !important; } diff --git a/core/src/css/float-elements.scss b/core/src/css/float-elements.scss index b6e2b93e5ba..45d73722c01 100644 --- a/core/src/css/float-elements.scss +++ b/core/src/css/float-elements.scss @@ -12,23 +12,19 @@ @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `.ion-float-{bp}-{side}` classes for floating the element based // on the breakpoint and side - .ion-float#{$infix}-left, - [float#{$infix}-left] { + .ion-float#{$infix}-left { @include float(left, !important); } - .ion-float#{$infix}-right, - [float#{$infix}-right] { + .ion-float#{$infix}-right { @include float(right, !important); } - .ion-float#{$infix}-start, - [float#{$infix}-start] { + .ion-float#{$infix}-start { @include float(start, !important); } - .ion-float#{$infix}-end, - [float#{$infix}-end] { + .ion-float#{$infix}-end { @include float(end, !important); } } diff --git a/core/src/css/padding.scss b/core/src/css/padding.scss index f4a869ec474..f441eddddc2 100644 --- a/core/src/css/padding.scss +++ b/core/src/css/padding.scss @@ -14,8 +14,7 @@ $margin: var(--ion-margin, 16px); // Padding // -------------------------------------------------- -.ion-no-padding, -[no-padding] { +.ion-no-padding { --padding-start: 0; --padding-end: 0; --padding-top: 0; @@ -24,8 +23,7 @@ $margin: var(--ion-margin, 16px); @include padding(0); } -.ion-padding, -[padding] { +.ion-padding { --padding-start: #{$padding}; --padding-end: #{$padding}; --padding-top: #{$padding}; @@ -34,44 +32,38 @@ $margin: var(--ion-margin, 16px); @include padding($padding); } -.ion-padding-top, -[padding-top] { +.ion-padding-top { --padding-top: #{$padding}; @include padding($padding, null, null, null); } -.ion-padding-start, -[padding-start] { +.ion-padding-start { --padding-start: #{$padding}; @include padding-horizontal($padding, null); } -.ion-padding-end, -[padding-end] { +.ion-padding-end { --padding-end: #{$padding}; @include padding-horizontal(null, $padding); } -.ion-padding-bottom, -[padding-bottom] { +.ion-padding-bottom { --padding-bottom: #{$padding}; @include padding(null, null, $padding, null); } -.ion-padding-vertical, -[padding-vertical] { +.ion-padding-vertical { --padding-top: #{$padding}; --padding-bottom: #{$padding}; @include padding($padding, null, $padding, null); } -.ion-padding-horizontal, -[padding-horizontal] { +.ion-padding-horizontal { --padding-start: #{$padding}; --padding-end: #{$padding}; @@ -82,8 +74,7 @@ $margin: var(--ion-margin, 16px); // Margin // -------------------------------------------------- -.ion-no-margin, -[no-margin] { +.ion-no-margin { --margin-start: 0; --margin-end: 0; --margin-top: 0; @@ -92,8 +83,7 @@ $margin: var(--ion-margin, 16px); @include margin(0); } -.ion-margin, -[margin] { +.ion-margin { --margin-start: #{$margin}; --margin-end: #{$margin}; --margin-top: #{$margin}; @@ -102,44 +92,38 @@ $margin: var(--ion-margin, 16px); @include margin($margin); } -.ion-margin-top, -[margin-top] { +.ion-margin-top { --margin-top: #{$margin}; @include margin($margin, null, null, null); } -.ion-margin-start, -[margin-start] { +.ion-margin-start { --margin-start: #{$margin}; @include margin-horizontal($margin, null); } -.ion-margin-end, -[margin-end] { +.ion-margin-end { --margin-end: #{$margin}; @include margin-horizontal(null, $margin); } -.ion-margin-bottom, -[margin-bottom] { +.ion-margin-bottom { --margin-bottom: #{$margin}; @include margin(null, null, $margin, null); } -.ion-margin-vertical, -[margin-vertical] { +.ion-margin-vertical { --margin-top: #{$margin}; --margin-bottom: #{$margin}; @include margin($margin, null, $margin, null); } -.ion-margin-horizontal, -[margin-horizontal] { +.ion-margin-horizontal { --margin-start: #{$margin}; --margin-end: #{$margin}; diff --git a/core/src/css/text-alignment.scss b/core/src/css/text-alignment.scss index 9b0eeb7dd56..a5c03acc606 100644 --- a/core/src/css/text-alignment.scss +++ b/core/src/css/text-alignment.scss @@ -12,43 +12,35 @@ @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `[text-{bp}]` attributes for aligning the text based // on the breakpoint - .ion-text#{$infix}-center, - [text#{$infix}-center] { + .ion-text#{$infix}-center { text-align: center !important; } - .ion-text#{$infix}-justify, - [text#{$infix}-justify] { + .ion-text#{$infix}-justify { text-align: justify !important; } - .ion-text#{$infix}-start, - [text#{$infix}-start] { + .ion-text#{$infix}-start { text-align: start !important; } - .ion-text#{$infix}-end, - [text#{$infix}-end] { + .ion-text#{$infix}-end { text-align: end !important; } - .ion-text#{$infix}-left, - [text#{$infix}-left] { + .ion-text#{$infix}-left { text-align: left !important; } - .ion-text#{$infix}-right, - [text#{$infix}-right] { + .ion-text#{$infix}-right { text-align: right !important; } - .ion-text#{$infix}-nowrap, - [text#{$infix}-nowrap] { + .ion-text#{$infix}-nowrap { white-space: nowrap !important; } - .ion-text#{$infix}-wrap, - [text#{$infix}-wrap] { + .ion-text#{$infix}-wrap { white-space: normal !important; } } diff --git a/core/src/css/text-transformation.scss b/core/src/css/text-transformation.scss index 7f2a0402252..9ae66e80939 100644 --- a/core/src/css/text-transformation.scss +++ b/core/src/css/text-transformation.scss @@ -12,20 +12,17 @@ @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `[text-{bp}]` attributes for transforming the text based // on the breakpoint - .ion-text#{$infix}-uppercase, - [text#{$infix}-uppercase] { + .ion-text#{$infix}-uppercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } - .ion-text#{$infix}-lowercase, - [text#{$infix}-lowercase] { + .ion-text#{$infix}-lowercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } - .ion-text#{$infix}-capitalize, - [text#{$infix}-capitalize] { + .ion-text#{$infix}-capitalize { /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; } From efc33bb22a39ff3670d53da494355ca8e63ce559 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 30 Sep 2019 10:27:04 -0400 Subject: [PATCH 07/17] refactor(skeleton-text): remove width property (#18936) BREAKING CHANGES Skeleton text's `width` property has been removed. Please use CSS instead to set the width. --- angular/src/directives/proxies.ts | 4 ++-- core/api.txt | 1 - core/src/components.d.ts | 8 ------- core/src/components/skeleton-text/readme.md | 7 +++---- .../skeleton-text/skeleton-text.tsx | 21 ------------------- .../skeleton-text/test/basic/index.html | 2 +- .../skeleton-text/test/custom/index.html | 9 +++----- 7 files changed, 9 insertions(+), 43 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index dc20dcccb07..d8d79475299 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -729,7 +729,7 @@ export class IonSelectOption { proxyInputs(IonSelectOption, ['disabled', 'selected', 'value']); export declare interface IonSkeletonText extends Components.IonSkeletonText {} -@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['animated', 'width'] }) +@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['animated'] }) export class IonSkeletonText { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { @@ -737,7 +737,7 @@ export class IonSkeletonText { this.el = r.nativeElement; } } -proxyInputs(IonSkeletonText, ['animated', 'width']); +proxyInputs(IonSkeletonText, ['animated']); export declare interface IonSlide extends Components.IonSlide {} @Component({ selector: 'ion-slide', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) diff --git a/core/api.txt b/core/api.txt index a5698b9207a..ef63297a7c8 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1047,7 +1047,6 @@ ion-select-option,prop,value,any,undefined,false,false ion-skeleton-text,shadow ion-skeleton-text,prop,animated,boolean,false,false,false -ion-skeleton-text,prop,width,string | undefined,undefined,false,false ion-skeleton-text,css-prop,--background ion-skeleton-text,css-prop,--background-rgb ion-skeleton-text,css-prop,--border-radius diff --git a/core/src/components.d.ts b/core/src/components.d.ts index d762d0d0d6b..8b101d27532 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2360,10 +2360,6 @@ export namespace Components { * If `true`, the skeleton text will animate. */ 'animated': boolean; - /** - * @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style. - */ - 'width'?: string; } interface IonSlide {} interface IonSlides { @@ -5649,10 +5645,6 @@ declare namespace LocalJSX { * If `true`, the skeleton text will animate. */ 'animated'?: boolean; - /** - * @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style. - */ - 'width'?: string; } interface IonSlide {} interface IonSlides { diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md index 18127b176ba..3f8da6f3966 100644 --- a/core/src/components/skeleton-text/readme.md +++ b/core/src/components/skeleton-text/readme.md @@ -631,10 +631,9 @@ export const SkeletonTextExample: React.FC = () => { ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `animated` | `animated` | If `true`, the skeleton text will animate. | `boolean` | `false` | -| `width` | `width` | **[DEPRECATED]** Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.

| `string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ------------------------------------------ | --------- | ------- | +| `animated` | `animated` | If `true`, the skeleton text will animate. | `boolean` | `false` | ## CSS Custom Properties diff --git a/core/src/components/skeleton-text/skeleton-text.tsx b/core/src/components/skeleton-text/skeleton-text.tsx index 9832f4ab167..b630e7daaa9 100644 --- a/core/src/components/skeleton-text/skeleton-text.tsx +++ b/core/src/components/skeleton-text/skeleton-text.tsx @@ -18,26 +18,6 @@ export class SkeletonText implements ComponentInterface { */ @Prop() animated = false; - /** - * @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style. - */ - @Prop() width?: string; - - calculateWidth() { - // If width was passed in to the property use that first - // tslint:disable-next-line: deprecation - if (this.width !== undefined) { - return { - style: { - // tslint:disable-next-line: deprecation - width: this.width - } - }; - } - - return; - } - render() { const animated = this.animated && config.getBoolean('animated', true); const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el); @@ -50,7 +30,6 @@ export class SkeletonText implements ComponentInterface { 'skeleton-text-animated': animated, 'in-media': inMedia }} - {...this.calculateWidth()} >   diff --git a/core/src/components/skeleton-text/test/basic/index.html b/core/src/components/skeleton-text/test/basic/index.html index 27e3e4e00ca..4cde2b91718 100644 --- a/core/src/components/skeleton-text/test/basic/index.html +++ b/core/src/components/skeleton-text/test/basic/index.html @@ -90,7 +90,7 @@

- + diff --git a/core/src/components/skeleton-text/test/custom/index.html b/core/src/components/skeleton-text/test/custom/index.html index 7eaac476504..51898fe1360 100644 --- a/core/src/components/skeleton-text/test/custom/index.html +++ b/core/src/components/skeleton-text/test/custom/index.html @@ -22,8 +22,7 @@
Default
- - + @@ -31,8 +30,7 @@
Custom RGB Background
- - + @@ -40,8 +38,7 @@
Global Text Color Dark Theme
- - + From f4bc70b44b6db80fb50ae1a1e60a93fb6bd70447 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 30 Sep 2019 11:00:48 -0400 Subject: [PATCH 08/17] refactor(anchor): remove anchor in favor of router-link (#18935) BREAKING CHANGES The deprecated `ion-anchor` component has been removed in favor using `ion-router-link`. It should still only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `` and `routerLink` with the Angular router. --- core/api.txt | 8 -- core/src/components.d.ts | 45 ----------- core/src/components/anchor/anchor.scss | 24 ------ core/src/components/anchor/anchor.tsx | 71 ---------------- core/src/components/anchor/readme.md | 28 ------- .../components/anchor/test/basic/index.html | 81 ------------------- .../anchor/test/standalone/index.html | 58 ------------- core/src/utils/test/modes/e2e.ts | 2 +- core/src/utils/test/modes/index.html | 2 +- core/stencil.config.ts | 2 - 10 files changed, 2 insertions(+), 319 deletions(-) delete mode 100644 core/src/components/anchor/anchor.scss delete mode 100644 core/src/components/anchor/anchor.tsx delete mode 100644 core/src/components/anchor/readme.md delete mode 100644 core/src/components/anchor/test/basic/index.html delete mode 100644 core/src/components/anchor/test/standalone/index.html diff --git a/core/api.txt b/core/api.txt index ef63297a7c8..41f321048a9 100644 --- a/core/api.txt +++ b/core/api.txt @@ -70,14 +70,6 @@ ion-alert-controller,method,create,create(options: AlertOptions) => Promise Promise ion-alert-controller,method,getTop,getTop() => Promise -ion-anchor,shadow -ion-anchor,prop,color,string | undefined,undefined,false,false -ion-anchor,prop,href,string | undefined,undefined,false,false -ion-anchor,prop,rel,string | undefined,undefined,false,false -ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false -ion-anchor,css-prop,--background -ion-anchor,css-prop,--color - ion-app,none ion-avatar,shadow diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8b101d27532..83586da3d7a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -253,24 +253,6 @@ export namespace Components { */ 'getTop': () => Promise; } - interface IonAnchor { - /** - * 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; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href': string | undefined; - /** - * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). - */ - 'rel': string | undefined; - /** - * When using a router, it specifies the transition direction when navigating to another page using `href`. - */ - 'routerDirection': RouterDirection; - } interface IonApp {} interface IonAvatar {} interface IonBackButton { @@ -2908,12 +2890,6 @@ declare global { new (): HTMLIonAlertControllerElement; }; - interface HTMLIonAnchorElement extends Components.IonAnchor, HTMLStencilElement {} - var HTMLIonAnchorElement: { - prototype: HTMLIonAnchorElement; - new (): HTMLIonAnchorElement; - }; - interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {} var HTMLIonAppElement: { prototype: HTMLIonAppElement; @@ -3464,7 +3440,6 @@ declare global { 'ion-action-sheet-controller': HTMLIonActionSheetControllerElement; 'ion-alert': HTMLIonAlertElement; 'ion-alert-controller': HTMLIonAlertControllerElement; - 'ion-anchor': HTMLIonAnchorElement; 'ion-app': HTMLIonAppElement; 'ion-avatar': HTMLIonAvatarElement; 'ion-back-button': HTMLIonBackButtonElement; @@ -3694,24 +3669,6 @@ declare namespace LocalJSX { 'translucent'?: boolean; } interface IonAlertController {} - interface IonAnchor { - /** - * 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; - /** - * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. - */ - 'href'?: string | undefined; - /** - * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). - */ - 'rel'?: string | undefined; - /** - * When using a router, it specifies the transition direction when navigating to another page using `href`. - */ - 'routerDirection'?: RouterDirection; - } interface IonApp {} interface IonAvatar {} interface IonBackButton { @@ -6135,7 +6092,6 @@ declare namespace LocalJSX { 'ion-action-sheet-controller': IonActionSheetController; 'ion-alert': IonAlert; 'ion-alert-controller': IonAlertController; - 'ion-anchor': IonAnchor; 'ion-app': IonApp; 'ion-avatar': IonAvatar; 'ion-back-button': IonBackButton; @@ -6240,7 +6196,6 @@ declare module "@stencil/core" { 'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes; 'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes; 'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes; - 'ion-anchor': LocalJSX.IonAnchor & JSXBase.HTMLAttributes; 'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes; 'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes; 'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes; diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss deleted file mode 100644 index 873e3b0ae16..00000000000 --- a/core/src/components/anchor/anchor.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Anchor -// -------------------------------------------------- - -:host { - /** - * @prop --background: Background of the anchor - * @prop --color: Text color of the anchor - */ - --background: transparent; - --color: #{ion-color(primary, base)}; - - background: var(--background); - color: var(--color); -} - -:host(.ion-color) { - color: current-color(base); -} - -a { - @include text-inherit(); -} diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx deleted file mode 100644 index d2f71cf85f9..00000000000 --- a/core/src/components/anchor/anchor.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core'; - -import { getIonMode } from '../../global/ionic-global'; -import { Color, RouterDirection } from '../../interface'; -import { createColorClasses, openURL } from '../../utils/theme'; - -/** - * @deprecated Use `ion-router-link` instead. - */ -@Component({ - tag: 'ion-anchor', - styleUrl: 'anchor.scss', - shadow: true -}) -export class Anchor implements ComponentInterface { - - /** - * 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). - */ - @Prop() color?: Color; - - /** - * Contains a URL or a URL fragment that the hyperlink points to. - * If this property is set, an anchor tag will be rendered. - */ - @Prop() href: string | undefined; - - /** - * Specifies the relationship of the target object to the link object. - * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). - */ - @Prop() rel: string | undefined; - - /** - * When using a router, it specifies the transition direction when navigating to - * another page using `href`. - */ - @Prop() routerDirection: RouterDirection = 'forward'; - - componentDidLoad() { - console.warn('[DEPRECATED][ion-anchor] The component has been deprecated. Please use an if you are using a vanilla JS or Stencil project or an with the Angular router.'); - } - - private onClick = (ev: Event) => { - openURL(this.href, ev, this.routerDirection); - } - - render() { - const mode = getIonMode(this); - const attrs = { - href: this.href, - rel: this.rel - }; - return ( - - - - - - ); - } -} diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md deleted file mode 100644 index debb8f436fe..00000000000 --- a/core/src/components/anchor/readme.md +++ /dev/null @@ -1,28 +0,0 @@ -# ion-anchor - - - - -> **[DEPRECATED]** Use `ion-router-link` instead. - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | -| `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` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | ------------------------ | -| `--background` | Background of the anchor | -| `--color` | Text color of the anchor | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/anchor/test/basic/index.html b/core/src/components/anchor/test/basic/index.html deleted file mode 100644 index 1292eed6bc1..00000000000 --- a/core/src/components/anchor/test/basic/index.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - Anchor - Basic - - - - - - - - - - - - - Anchor - Basic - - - - -

- A -

- -

- Anchor -

- -

- Underline Anchor -

- -

- Custom Anchor -

- -

- Dark Anchor -

- -

- Danger Anchor -

- -

- Dynamic Color -

- - Toggle Color - - - - - - - - - - - diff --git a/core/src/components/anchor/test/standalone/index.html b/core/src/components/anchor/test/standalone/index.html deleted file mode 100644 index 63887ff37b7..00000000000 --- a/core/src/components/anchor/test/standalone/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - Anchor - Standalone - - - - - - - - -

Default

- Anchor - -

Colors

- Primary Anchor - Secondary Anchor - Tertiary Anchor - Success Anchor - Warning Anchor - Danger Anchor - Light Anchor - Medium Anchor - Dark Anchor - -

Custom

- Underline Anchor - Cursive Anchor - Custom Anchor - Custom Secondary Anchor - - - - - diff --git a/core/src/utils/test/modes/e2e.ts b/core/src/utils/test/modes/e2e.ts index 48558429eea..7dde3dc6949 100644 --- a/core/src/utils/test/modes/e2e.ts +++ b/core/src/utils/test/modes/e2e.ts @@ -50,7 +50,7 @@ test('component: modes', async () => { // components that need to have the mode class // added for external / user styling // e.g. - tags = ['ion-action-sheet', 'ion-alert', 'ion-anchor', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar']; + tags = ['ion-action-sheet', 'ion-alert', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-router-link', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar']; const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); for (const tag of tags) { diff --git a/core/src/utils/test/modes/index.html b/core/src/utils/test/modes/index.html index 3a8af62fb23..81926813099 100644 --- a/core/src/utils/test/modes/index.html +++ b/core/src/utils/test/modes/index.html @@ -33,7 +33,6 @@ - @@ -85,6 +84,7 @@ + diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 3680fba9ec0..3b30b4f5ffa 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -53,7 +53,6 @@ export const config: Config = { // Deprecated { components: [ - 'ion-anchor', 'ion-action-sheet-controller', 'ion-alert-controller', 'ion-loading-controller', @@ -133,7 +132,6 @@ export const config: Config = { 'ion-route-redirect', 'ion-router-link', 'ion-router-outlet', - 'ion-anchor', // tabs 'ion-tabs', From 25a531b567ab7711abaed33c1d7af0946b619339 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 30 Sep 2019 11:17:32 -0400 Subject: [PATCH 09/17] refactor(searchbar): remove boolean values from showCancelButton (#18953) BREAKING CHANGES The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`. The following should change: ``` ``` becomes ``` ``` --- core/api.txt | 2 +- core/src/components.d.ts | 4 +- core/src/components/searchbar/readme.md | 2 +- core/src/components/searchbar/searchbar.tsx | 48 +++------------------ 4 files changed, 9 insertions(+), 47 deletions(-) diff --git a/core/api.txt b/core/api.txt index 41f321048a9..ca1eb1ea89a 100644 --- a/core/api.txt +++ b/core/api.txt @@ -946,7 +946,7 @@ ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" ion-searchbar,prop,mode,"ios" | "md",undefined,false,false ion-searchbar,prop,placeholder,string,'Search',false,false ion-searchbar,prop,searchIcon,string,'search',false,false -ion-searchbar,prop,showCancelButton,boolean | string,'never',false,false +ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false ion-searchbar,prop,spellcheck,boolean,false,false,false ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false ion-searchbar,prop,value,null | string | undefined,'',false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 83586da3d7a..0ea0da2563d 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2188,7 +2188,7 @@ export namespace Components { /** * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ - 'showCancelButton': boolean | string; + 'showCancelButton': 'never' | 'focus' | 'always'; /** * If `true`, enable spellcheck on the input. */ @@ -5429,7 +5429,7 @@ declare namespace LocalJSX { /** * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ - 'showCancelButton'?: boolean | string; + 'showCancelButton'?: 'never' | 'focus' | 'always'; /** * If `true`, enable spellcheck on the input. */ diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 1347c8edbac..ef4f6fd71c6 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -234,7 +234,7 @@ export const SearchbarExample: React.FC = () => ( | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | | `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` | -| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `boolean \| string` | `'never'` | +| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` | | `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` | | `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index e46bafce124..d4e2c0475bb 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -111,7 +111,7 @@ export class Searchbar implements ComponentInterface { * Setting to `"always"` shows the cancel button regardless * of focus state. */ - @Prop() showCancelButton: boolean | string = 'never'; + @Prop() showCancelButton: 'never' | 'focus' | 'always' = 'never'; /** * If `true`, enable spellcheck on the input. @@ -187,14 +187,6 @@ export class Searchbar implements ComponentInterface { } componentDidLoad() { - if (this.showCancelButton === 'false' || this.showCancelButton === false) { - console.warn('The boolean values of showCancelButton are deprecated. Please use "never" instead of "false".'); - } - - if (this.showCancelButton === '' || this.showCancelButton === 'true' || this.showCancelButton === true) { - console.warn('The boolean values of showCancelButton are deprecated. Please use "focus" instead of "true".'); - } - this.positionElements(); this.debounceChanged(); @@ -410,10 +402,9 @@ export class Searchbar implements ComponentInterface { * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused. */ private shouldShowCancelButton(): boolean { - if ( - isCancelButtonSetToNever(this.showCancelButton) || - (isCancelButtonSetToFocus(this.showCancelButton) && !this.focused) - ) { return false; } + if ((this.showCancelButton === 'never') || (this.showCancelButton === 'focus' && !this.focused)) { + return false; + } return true; } @@ -424,7 +415,7 @@ export class Searchbar implements ComponentInterface { const clearIcon = this.clearIcon || (mode === 'ios' ? 'ios-close-circle' : 'md-close'); const searchIcon = this.searchIcon; - const cancelButton = !isCancelButtonSetToNever(this.showCancelButton) && ( + const cancelButton = (this.showCancelButton !== 'never') && (