diff --git a/angular/src/directives/css-utils-deprecations.ts b/angular/src/directives/css-utils-deprecations.ts deleted file mode 100644 index 5ae5c0e86b..0000000000 --- a/angular/src/directives/css-utils-deprecations.ts +++ /dev/null @@ -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' -]; diff --git a/angular/src/index.ts b/angular/src/index.ts index 0ca141a061..023f554e4d 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -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 diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts index 76663fd367..04d1fd4eae 100644 --- a/angular/src/ionic-module.ts +++ b/angular/src/ionic-module.ts @@ -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({ diff --git a/core/src/css/flex-utils.scss b/core/src/css/flex-utils.scss index 06670474b0..41e9f3325c 100644 --- a/core/src/css/flex-utils.scss +++ b/core/src/css/flex-utils.scss @@ -6,33 +6,27 @@ // Align Self // -------------------------------------------------- -.ion-align-self-start, -[align-self-start] { +.ion-align-self-start { align-self: flex-start !important; } -.ion-align-self-end, -[align-self-end] { +.ion-align-self-end { align-self: flex-end !important; } -.ion-align-self-center, -[align-self-center] { +.ion-align-self-center { align-self: center !important; } -.ion-align-self-stretch, -[align-self-stretch] { +.ion-align-self-stretch { align-self: stretch !important; } -.ion-align-self-baseline, -[align-self-baseline] { +.ion-align-self-baseline { align-self: baseline !important; } -.ion-align-self-auto, -[align-self-auto] { +.ion-align-self-auto { align-self: auto !important; } @@ -40,18 +34,15 @@ // Flex Wrap // -------------------------------------------------- -.ion-wrap, -[wrap] { +.ion-wrap { flex-wrap: wrap !important; } -.ion-nowrap, -[nowrap] { +.ion-nowrap { flex-wrap: nowrap !important; } -.ion-wrap-reverse, -[wrap-reverse] { +.ion-wrap-reverse { flex-wrap: wrap-reverse !important; } @@ -59,33 +50,27 @@ // Justify Content // -------------------------------------------------- -.ion-justify-content-start, -[justify-content-start] { +.ion-justify-content-start { justify-content: flex-start !important; } -.ion-justify-content-center, -[justify-content-center] { +.ion-justify-content-center { justify-content: center !important; } -.ion-justify-content-end, -[justify-content-end] { +.ion-justify-content-end { justify-content: flex-end !important; } -.ion-justify-content-around, -[justify-content-around] { +.ion-justify-content-around { justify-content: space-around !important; } -.ion-justify-content-between, -[justify-content-between] { +.ion-justify-content-between { justify-content: space-between !important; } -.ion-justify-content-evenly, -[justify-content-evenly] { +.ion-justify-content-evenly { justify-content: space-evenly !important; } @@ -93,27 +78,22 @@ // Align Items // -------------------------------------------------- -.ion-align-items-start, -[align-items-start] { +.ion-align-items-start { align-items: flex-start !important; } -.ion-align-items-center, -[align-items-center] { +.ion-align-items-center { align-items: center !important; } -.ion-align-items-end, -[align-items-end] { +.ion-align-items-end { align-items: flex-end !important; } -.ion-align-items-stretch, -[align-items-stretch] { +.ion-align-items-stretch { align-items: stretch !important; } -.ion-align-items-baseline, -[align-items-baseline] { +.ion-align-items-baseline { align-items: baseline !important; } diff --git a/core/src/css/float-elements.scss b/core/src/css/float-elements.scss index b6e2b93e5b..45d73722c0 100644 --- a/core/src/css/float-elements.scss +++ b/core/src/css/float-elements.scss @@ -12,23 +12,19 @@ @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `.ion-float-{bp}-{side}` classes for floating the element based // on the breakpoint and side - .ion-float#{$infix}-left, - [float#{$infix}-left] { + .ion-float#{$infix}-left { @include float(left, !important); } - .ion-float#{$infix}-right, - [float#{$infix}-right] { + .ion-float#{$infix}-right { @include float(right, !important); } - .ion-float#{$infix}-start, - [float#{$infix}-start] { + .ion-float#{$infix}-start { @include float(start, !important); } - .ion-float#{$infix}-end, - [float#{$infix}-end] { + .ion-float#{$infix}-end { @include float(end, !important); } } diff --git a/core/src/css/padding.scss b/core/src/css/padding.scss index f4a869ec47..f441eddddc 100644 --- a/core/src/css/padding.scss +++ b/core/src/css/padding.scss @@ -14,8 +14,7 @@ $margin: var(--ion-margin, 16px); // Padding // -------------------------------------------------- -.ion-no-padding, -[no-padding] { +.ion-no-padding { --padding-start: 0; --padding-end: 0; --padding-top: 0; @@ -24,8 +23,7 @@ $margin: var(--ion-margin, 16px); @include padding(0); } -.ion-padding, -[padding] { +.ion-padding { --padding-start: #{$padding}; --padding-end: #{$padding}; --padding-top: #{$padding}; @@ -34,44 +32,38 @@ $margin: var(--ion-margin, 16px); @include padding($padding); } -.ion-padding-top, -[padding-top] { +.ion-padding-top { --padding-top: #{$padding}; @include padding($padding, null, null, null); } -.ion-padding-start, -[padding-start] { +.ion-padding-start { --padding-start: #{$padding}; @include padding-horizontal($padding, null); } -.ion-padding-end, -[padding-end] { +.ion-padding-end { --padding-end: #{$padding}; @include padding-horizontal(null, $padding); } -.ion-padding-bottom, -[padding-bottom] { +.ion-padding-bottom { --padding-bottom: #{$padding}; @include padding(null, null, $padding, null); } -.ion-padding-vertical, -[padding-vertical] { +.ion-padding-vertical { --padding-top: #{$padding}; --padding-bottom: #{$padding}; @include padding($padding, null, $padding, null); } -.ion-padding-horizontal, -[padding-horizontal] { +.ion-padding-horizontal { --padding-start: #{$padding}; --padding-end: #{$padding}; @@ -82,8 +74,7 @@ $margin: var(--ion-margin, 16px); // Margin // -------------------------------------------------- -.ion-no-margin, -[no-margin] { +.ion-no-margin { --margin-start: 0; --margin-end: 0; --margin-top: 0; @@ -92,8 +83,7 @@ $margin: var(--ion-margin, 16px); @include margin(0); } -.ion-margin, -[margin] { +.ion-margin { --margin-start: #{$margin}; --margin-end: #{$margin}; --margin-top: #{$margin}; @@ -102,44 +92,38 @@ $margin: var(--ion-margin, 16px); @include margin($margin); } -.ion-margin-top, -[margin-top] { +.ion-margin-top { --margin-top: #{$margin}; @include margin($margin, null, null, null); } -.ion-margin-start, -[margin-start] { +.ion-margin-start { --margin-start: #{$margin}; @include margin-horizontal($margin, null); } -.ion-margin-end, -[margin-end] { +.ion-margin-end { --margin-end: #{$margin}; @include margin-horizontal(null, $margin); } -.ion-margin-bottom, -[margin-bottom] { +.ion-margin-bottom { --margin-bottom: #{$margin}; @include margin(null, null, $margin, null); } -.ion-margin-vertical, -[margin-vertical] { +.ion-margin-vertical { --margin-top: #{$margin}; --margin-bottom: #{$margin}; @include margin($margin, null, $margin, null); } -.ion-margin-horizontal, -[margin-horizontal] { +.ion-margin-horizontal { --margin-start: #{$margin}; --margin-end: #{$margin}; diff --git a/core/src/css/text-alignment.scss b/core/src/css/text-alignment.scss index 9b0eeb7dd5..a5c03acc60 100644 --- a/core/src/css/text-alignment.scss +++ b/core/src/css/text-alignment.scss @@ -12,43 +12,35 @@ @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `[text-{bp}]` attributes for aligning the text based // on the breakpoint - .ion-text#{$infix}-center, - [text#{$infix}-center] { + .ion-text#{$infix}-center { text-align: center !important; } - .ion-text#{$infix}-justify, - [text#{$infix}-justify] { + .ion-text#{$infix}-justify { text-align: justify !important; } - .ion-text#{$infix}-start, - [text#{$infix}-start] { + .ion-text#{$infix}-start { text-align: start !important; } - .ion-text#{$infix}-end, - [text#{$infix}-end] { + .ion-text#{$infix}-end { text-align: end !important; } - .ion-text#{$infix}-left, - [text#{$infix}-left] { + .ion-text#{$infix}-left { text-align: left !important; } - .ion-text#{$infix}-right, - [text#{$infix}-right] { + .ion-text#{$infix}-right { text-align: right !important; } - .ion-text#{$infix}-nowrap, - [text#{$infix}-nowrap] { + .ion-text#{$infix}-nowrap { white-space: nowrap !important; } - .ion-text#{$infix}-wrap, - [text#{$infix}-wrap] { + .ion-text#{$infix}-wrap { white-space: normal !important; } } diff --git a/core/src/css/text-transformation.scss b/core/src/css/text-transformation.scss index 7f2a040225..9ae66e8093 100644 --- a/core/src/css/text-transformation.scss +++ b/core/src/css/text-transformation.scss @@ -12,20 +12,17 @@ @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `[text-{bp}]` attributes for transforming the text based // on the breakpoint - .ion-text#{$infix}-uppercase, - [text#{$infix}-uppercase] { + .ion-text#{$infix}-uppercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } - .ion-text#{$infix}-lowercase, - [text#{$infix}-lowercase] { + .ion-text#{$infix}-lowercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } - .ion-text#{$infix}-capitalize, - [text#{$infix}-capitalize] { + .ion-text#{$infix}-capitalize { /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; }