diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index dc20dcccb0..d8d7947529 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 a5698b9207..ef63297a7c 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 d762d0d0d6..8b101d2753 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 18127b176b..3f8da6f396 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 9832f4ab16..b630e7daaa 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 27e3e4e00c..4cde2b9171 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 7eaac47650..51898fe136 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
- - +