fix(label): move default flex and margin to item (#16461)

This moves item-specific margin and flex values out of label and into item as a slotted style to prevent those styles from leaking into labels further down the tree. closes #15393
ionic-team · Nov 27, 2018 · 723d17b · 723d17b
1 parent 09d69b9
commit 723d17b
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 12 deletions.
diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss
@@ -38,6 +38,14 @@
 }
 
 
+// Material Design Slotted Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  @include margin(10px, 8px, 10px, 0);
+}
+
+
 // iOS Item Divider Content
 // --------------------------------------------------
 

diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss
@@ -31,6 +31,14 @@
 }
 
 
+// Material Design Slotted Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  @include margin(13px, 0, 10px, 0);
+}
+
+
 // Material Design Slotted Icon
 // --------------------------------------------------
 

diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
@@ -140,6 +140,14 @@
 }
 
 
+// iOS Slotted Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  @include margin(10px, 8px, 10px, 0);
+}
+
+
 // iOS Stacked & Floating Inputs
 // --------------------------------------------------
 

diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
@@ -177,6 +177,15 @@
 }
 
 
+// Material Design Slotted Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  @include margin(13px, 0, 10px, 0);
+}
+
+
+
 // Material Design Floating/Stacked Label
 // --------------------------------------------------
 

diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
@@ -213,6 +213,10 @@ button, a {
   z-index: 1;
 }
 
+::slotted(ion-label) {
+  flex: 1;
+}
+
 
 // Item Input
 // -----------------------------------------

diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss
@@ -4,10 +4,6 @@
 // iOS Label
 // --------------------------------------------------
 
-:host-context(.item) {
-  @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start);
-}
-
 :host([text-wrap]) {
   font-size: $label-ios-text-wrap-font-size;
 

diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss
@@ -4,10 +4,6 @@
 // Material Design Label
 // --------------------------------------------------
 
-:host-context(.item) {
-  @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);
-}
-
 :host([text-wrap]) {
   line-height: $label-md-text-wrap-line-height;
 }

diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
@@ -10,12 +10,8 @@
    */
   --color: initial;
 
-  @include margin(0);
-
   display: block;
 
-  flex: 1;
-
   color: var(--color);
 
   font-family: $font-family-base;