fix(label): only inherit color if color property is set on ion-item (#23944)

liamdebeasi · web-flow · commit ae1325cee698 · 2021-09-16T15:27:43.000-04:00
resolves #20125
diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss
@@ -89,11 +89,10 @@
   color: #{$item-ios-paragraph-text-color};
 }
 
-:host-context(.ion-color)::slotted(p) {
+:host(.in-item-color)::slotted(p) {
   color: inherit;
 }
 
-
 ::slotted(*) h2:last-child,
 ::slotted(*) h3:last-child,
 ::slotted(*) h4:last-child,
diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss
@@ -104,6 +104,6 @@
   color: $item-md-paragraph-text-color;
 }
 
-:host-context(.ion-color)::slotted(p) {
+:host(.in-item-color)::slotted(p) {
   color: inherit;
 }
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, StyleEventDetail } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -101,6 +101,7 @@ export class Label implements ComponentInterface {
       <Host
         class={createColorClasses(this.color, {
           [mode]: true,
+          'in-item-color': hostContext('ion-item.ion-color', this.el),
           [`label-${position}`]: position !== undefined,
           [`label-no-animate`]: (this.noAnimate)
         })}
diff --git a/core/src/components/label/test/color/e2e.ts b/core/src/components/label/test/color/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('label: color', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/label/test/color?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/label/test/color/index.html b/core/src/components/label/test/color/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Label - Color</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Label - Color</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content color="light">
+        <ion-item>
+          <ion-label>Label Text<p>This paragraph should not inherit the color from content</p></ion-label>
+        </ion-item>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -89,11 +89,10 @@`
`89`	`89`	`color: #{$item-ios-paragraph-text-color};`
`90`	`90`	`}`
`91`	`91`
`92`		`-:host-context(.ion-color)::slotted(p) {`
	`92`	`+:host(.in-item-color)::slotted(p) {`
`93`	`93`	`color: inherit;`
`94`	`94`	`}`
`95`	`95`
`96`		`-`
`97`	`96`	`::slotted(*) h2:last-child,`
`98`	`97`	`::slotted(*) h3:last-child,`
`99`	`98`	`::slotted(*) h4:last-child,`
Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,6 @@`
`104`	`104`	`color: $item-md-paragraph-text-color;`
`105`	`105`	`}`
`106`	`106`
`107`		`-:host-context(.ion-color)::slotted(p) {`
	`107`	`+:host(.in-item-color)::slotted(p) {`
`108`	`108`	`color: inherit;`
`109`	`109`	`}`