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

@@ -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: '<ng-content></ng-content>', inputs: ['animated', 'width'] })
+@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', 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: '<ng-content></ng-content>' })

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

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 {

core/src/components/skeleton-text/readme.md

@@ -631,10 +631,9 @@ export const SkeletonTextExample: React.FC = () => {
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                                             | Type                  | Default     |
+| Property   | Attribute  | Description                                | Type      | Default |
-| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| ---------- | ---------- | ------------------------------------------ | --------- | ------- |
-| `animated` | `animated` | If `true`, the skeleton text will animate.                                                                                                              | `boolean`             | `false`     |
+| `animated` | `animated` | If `true`, the skeleton text will animate. | `boolean` | `false` |
-| `width`    | `width`    | <span style="color:red">**[DEPRECATED]**</span> Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.<br/><br/> | `string \| undefined` | `undefined` |
 
 
 ## CSS Custom Properties

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()}
       >
         <span>&nbsp;</span>
       </Host>

core/src/components/skeleton-text/test/basic/index.html

@@ -90,7 +90,7 @@
 
         <ion-list>
           <ion-list-header>
-            <ion-skeleton-text width="20%"></ion-skeleton-text>
+            <ion-skeleton-text style="width: 20%"></ion-skeleton-text>
           </ion-list-header>
           <ion-item>
             <ion-avatar slot="start">

core/src/components/skeleton-text/test/custom/index.html

@@ -22,8 +22,7 @@
     <ion-content>
       <header>Default</header>
       <div class="ion-padding">
-        <!-- width should not be used a prop but make sure it works for backwards compatibility -->
+        <ion-skeleton-text style="width: 88%"></ion-skeleton-text>
-        <ion-skeleton-text width="88%"></ion-skeleton-text>
         <ion-skeleton-text class="tiny"></ion-skeleton-text>
         <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
         <ion-skeleton-text animated class="tiny"></ion-skeleton-text>
@@ -31,8 +30,7 @@
       </div>
       <header>Custom RGB Background</header>
       <div class="ion-padding custom-skeleton-color">
-        <!-- width should not be used a prop but make sure it works for backwards compatibility -->
+        <ion-skeleton-text style="width: 88%"></ion-skeleton-text>
-        <ion-skeleton-text width="88%"></ion-skeleton-text>
         <ion-skeleton-text class="tiny"></ion-skeleton-text>
         <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
         <ion-skeleton-text animated class="tiny"></ion-skeleton-text>
@@ -40,8 +38,7 @@
       </div>
       <header>Global Text Color Dark Theme</header>
       <div class="ion-padding custom-skeleton-dark">
-        <!-- width should not be used a prop but make sure it works for backwards compatibility -->
+        <ion-skeleton-text style="width: 88%"></ion-skeleton-text>
-        <ion-skeleton-text width="88%"></ion-skeleton-text>
         <ion-skeleton-text class="tiny"></ion-skeleton-text>
         <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
         <ion-skeleton-text animated class="tiny"></ion-skeleton-text>