fix(react): add class based APIs

fixes #16583
ionic-team · Dec 10, 2018 · c23d0b0 · c23d0b0
1 parent 9167fb4
commit c23d0b0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/core/src/css/normalize.scss b/core/src/css/normalize.scss
@@ -145,6 +145,7 @@ button div,
 button span,
 button ion-icon,
 button ion-label,
+.ion-tappable,
 [tappable],
 [tappable] div,
 [tappable] span,

diff --git a/core/src/css/padding.scss b/core/src/css/padding.scss
@@ -13,6 +13,7 @@ $margin: var(--ion-margin, 16px);
 // Padding
 // --------------------------------------------------
 
+.ion-no-padding,
 [no-padding] {
   --padding-start: 0;
   --padding-end: 0;
@@ -22,6 +23,7 @@ $margin: var(--ion-margin, 16px);
   @include padding(0);
 }
 
+.ion-padding,
 [padding] {
   --padding-start: #{$padding};
   --padding-end: #{$padding};
@@ -31,37 +33,43 @@ $margin: var(--ion-margin, 16px);
   @include padding($padding);
 }
 
+.ion-padding-top,
 [padding-top] {
   --padding-top: #{$padding};
 
   @include padding($padding, null, null, null);
 }
 
+.ion-padding-start,
 [padding-start] {
   --padding-start: #{$padding};
 
   @include padding-horizontal($padding, null);
 }
 
+.ion-padding-end,
 [padding-end] {
   --padding-end: #{$padding};
 
   @include padding-horizontal(null, $padding);
 }
 
+.ion-padding-bottom,
 [padding-bottom] {
   --padding-bottom: #{$padding};
 
   @include padding(null, null, $padding, null);
 }
 
+.ion-padding-vertical,
 [padding-vertical] {
   --padding-top: #{$padding};
   --padding-bottom: #{$padding};
 
   @include padding($padding, null, $padding, null);
 }
 
+.ion-padding-horizontal,
 [padding-horizontal] {
   --padding-start: #{$padding};
   --padding-end: #{$padding};
@@ -73,6 +81,7 @@ $margin: var(--ion-margin, 16px);
 // Margin
 // --------------------------------------------------
 
+.ion-no-margin,
 [no-margin] {
   --margin-start: 0;
   --margin-end: 0;
@@ -82,6 +91,7 @@ $margin: var(--ion-margin, 16px);
   @include margin(0);
 }
 
+.ion-margin,
 [margin] {
   --margin-start: #{$margin};
   --margin-end: #{$margin};
@@ -91,38 +101,43 @@ $margin: var(--ion-margin, 16px);
   @include margin($margin);
 }
 
+.ion-margin-top,
 [margin-top] {
   --margin-top: #{$margin};
 
   @include margin($margin, null, null, null);
 }
 
-
+.ion-margin-start,
 [margin-start] {
   --margin-start: #{$margin};
 
   @include margin-horizontal($margin, null);
 }
 
+.ion-margin-end,
 [margin-end] {
   --margin-end: #{$margin};
 
   @include margin-horizontal(null, $margin);
 }
 
+.ion-margin-bottom,
 [margin-bottom] {
   --margin-bottom: #{$margin};
 
   @include margin(null, null, $margin, null);
 }
 
+.ion-margin-vertical,
 [margin-vertical] {
   --margin-top: #{$margin};
   --margin-bottom: #{$margin};
 
   @include margin($margin, null, $margin, null);
 }
 
+.ion-margin-horizontal,
 [margin-horizontal] {
   --margin-start: #{$margin};
   --margin-end: #{$margin};

diff --git a/core/src/css/text-alignment.scss b/core/src/css/text-alignment.scss
@@ -11,34 +11,42 @@
   @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] {
       text-align: center !important;
     }
 
+    .ion-text#{$infix}-justify,
     [text#{$infix}-justify] {
       text-align: justify !important;
     }
 
+    .ion-text#{$infix}-start,
     [text#{$infix}-start] {
       text-align: start !important;
     }
 
+    .ion-text#{$infix}-end,
     [text#{$infix}-end] {
       text-align: end !important;
     }
 
+    .ion-text#{$infix}-left,
     [text#{$infix}-left] {
       text-align: left !important;
     }
 
+    .ion-text#{$infix}-right,
     [text#{$infix}-right] {
       text-align: right !important;
     }
 
+    .ion-text#{$infix}-nowrap,
     [text#{$infix}-nowrap] {
       white-space: nowrap !important;
     }
 
+    .ion-text#{$infix}-wrap,
     [text#{$infix}-wrap] {
       white-space: normal !important;
     }

diff --git a/core/src/css/text-transformation.scss b/core/src/css/text-transformation.scss
@@ -11,16 +11,19 @@
   @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] {
       /* stylelint-disable-next-line declaration-no-important */
       text-transform: uppercase !important;
     }
 
+    .ion-text#{$infix}-lowercase,
     [text#{$infix}-lowercase] {
       /* stylelint-disable-next-line declaration-no-important */
       text-transform: lowercase !important;
     }
 
+    .ion-text#{$infix}-capitalize,
     [text#{$infix}-capitalize] {
       /* stylelint-disable-next-line declaration-no-important */
       text-transform: capitalize !important;