From b981ad6f7878378297e1427f6f71eea1ef1df10d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 16 Sep 2021 15:06:40 -0400 Subject: [PATCH 1/2] fix(label): only inherit color if color property is set on ion-item --- core/src/components/label/label.ios.scss | 3 +-- core/src/components/label/label.md.scss | 2 +- core/src/components/label/label.tsx | 3 ++- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss index 97eb478cf72..4e4c23c05aa 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 46ff3e23847..3c84179d398 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 3b08f6199c3..c6cdde1482f 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 { Date: Thu, 16 Sep 2021 15:11:00 -0400 Subject: [PATCH 2/2] test(label): add test --- core/src/components/label/test/color/e2e.ts | 10 +++++++ .../components/label/test/color/index.html | 29 +++++++++++++++++++ 2 files changed, 39 insertions(+) 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/test/color/e2e.ts b/core/src/components/label/test/color/e2e.ts new file mode 100644 index 00000000000..3fc4aa27c47 --- /dev/null +++ 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 new file mode 100644 index 00000000000..dc2e6e06c9e --- /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

 + + + + +