From b11d74ea7f7c1a927f070a11360a84d28f1f0133 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 29 Jul 2019 16:03:08 -0400 Subject: [PATCH 1/2] refactor(skeleton-text): remove width property use CSS instead --- .../skeleton-text/skeleton-text.tsx | 21 ------------------- .../skeleton-text/test/basic/index.html | 2 +- .../skeleton-text/test/custom/index.html | 9 +++----- 3 files changed, 4 insertions(+), 28 deletions(-) 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 e7b5fef81ff0dd70d0d777c82bfc8049286c6e88 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 29 Jul 2019 16:06:39 -0400 Subject: [PATCH 2/2] chore(build): run build --- angular/src/directives/proxies.ts | 4 ++-- core/api.txt | 1 - core/src/components.d.ts | 8 -------- core/src/components/skeleton-text/readme.md | 7 +++---- 4 files changed, 5 insertions(+), 15 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index f0fef6c7486..7500a03ed6d 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -750,7 +750,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) { @@ -758,7 +758,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 c056c9383cf..aa602351279 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1048,7 +1048,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 fbd8db1c06a..6bbab717f00 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2354,10 +2354,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 { @@ -5655,10 +5651,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 extends JSXBase.HTMLAttributes {} interface IonSlides extends JSXBase.HTMLAttributes { diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md index 286ef477869..cd859609b56 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.FunctionComponent = () => { ## 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