javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(skeleton-text): remove width property (#18936)

Browse Source 
BREAKING CHANGES

Skeleton text's `width` property has been removed. Please use CSS instead to set the width.
This commit is contained in:
Brandy Carney
2019-09-30 10:27:04 -04:00
parent e67f7e81f7
commit 13974c1047
7 changed files with 9 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@ -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>' })

1
core/api.txt
View File

@ -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

8
core/src/components.d.ts vendored
View File

@ -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 {

3
core/src/components/skeleton-text/readme.md
View File

@ -632,9 +632,8 @@ export const SkeletonTextExample: React.FC = () => {
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| ---------- | ---------- | ------------------------------------------ | --------- | ------- |
| `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

21
core/src/components/skeleton-text/skeleton-text.tsx
View File

@ -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>

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

@ -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">

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

@ -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 width="88%"></ion-skeleton-text>
<ion-skeleton-text style="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 width="88%"></ion-skeleton-text>
<ion-skeleton-text style="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 width="88%"></ion-skeleton-text>
<ion-skeleton-text style="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>