javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
resolves #20125
This commit is contained in:
Liam DeBeasi
2021-09-16 15:27:43 -04:00
committed by GitHub
parent 8108edd876
commit ae1325cee6
5 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/label/label.ios.scss
View File

@ -89,11 +89,10 @@
color: #{$item-ios-paragraph-text-color}; color: #{$item-ios-paragraph-text-color};
} }
:host-context(.ion-color)::slotted(p) { :host(.in-item-color)::slotted(p) {
color: inherit; color: inherit;
} }
::slotted(*) h2:last-child, ::slotted(*) h2:last-child,
::slotted(*) h3:last-child, ::slotted(*) h3:last-child,
::slotted(*) h4:last-child, ::slotted(*) h4:last-child,

2
core/src/components/label/label.md.scss
View File

@ -104,6 +104,6 @@
color: $item-md-paragraph-text-color; color: $item-md-paragraph-text-color;
} }
:host-context(.ion-color)::slotted(p) { :host(.in-item-color)::slotted(p) {
color: inherit; color: inherit;
} }

3
core/src/components/label/label.tsx
View File

@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { Color, StyleEventDetail } from '../../interface'; 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. * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -101,6 +101,7 @@ export class Label implements ComponentInterface {
<Host <Host
class={createColorClasses(this.color, { class={createColorClasses(this.color, {
[mode]: true, [mode]: true,
'in-item-color': hostContext('ion-item.ion-color', this.el),
[`label-${position}`]: position !== undefined, [`label-${position}`]: position !== undefined,
[`label-no-animate`]: (this.noAnimate) [`label-no-animate`]: (this.noAnimate)
})} })}

10
core/src/components/label/test/color/e2e.ts Normal file
View File

@ -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();
});

29
core/src/components/label/test/color/index.html Normal file
View File

@ -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>