From ae1325cee698066a71aae4e7deb953c4185c0926 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 16 Sep 2021 15:27:43 -0400 Subject: [PATCH] fix(label): only inherit color if color property is set on ion-item (#23944) resolves #20125 --- core/src/components/label/label.ios.scss | 3 +- core/src/components/label/label.md.scss | 2 +- core/src/components/label/label.tsx | 3 +- core/src/components/label/test/color/e2e.ts | 10 +++++++ .../components/label/test/color/index.html | 29 +++++++++++++++++++ 5 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 core/src/components/label/test/color/e2e.ts create mode 100644 core/src/components/label/test/color/index.html diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss index 97eb478cf7..4e4c23c05a 100644 --- 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 index 46ff3e2384..3c84179d39 100644 --- 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 index 3b08f6199c..c6cdde1482 100644 --- 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 { { + 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 new file mode 100644 index 0000000000..dc2e6e06c9 --- /dev/null +++ b/core/src/components/label/test/color/index.html @@ -0,0 +1,29 @@ + + + + + Label - Color + + + + + + + + + + + + + Label - Color + + + + + + Label Text

This paragraph should not inherit the color from content

 + + + + +