javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(css): remove CSS util attributes (#18956)

Browse Source 
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
This commit is contained in:
Brandy Carney
2019-09-27 17:54:03 -04:00
parent 5f235307cd
commit e67f7e81f7
8 changed files with 52 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
angular/src/directives/css-utils-deprecations.ts
View File

@@ -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'
];

1
angular/src/index.ts
View File

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

6
angular/src/ionic-module.ts
View File

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