bug: label inheriting color if any parent element has color prop

[JamieWritesCode]

#19711 Bug Report

Ionic version: 4.11.7

Current behavior:

<p> tags inside ion-labels receive an override class to set their color: inherit based on the existence of a parent element with the .ion-color class. I assume this is to support setting the color property of the ion-label or ion-item and having the p tag adjust accordingly, which is fine - however the CSS selector used to target this behaviour is a bit loose and causes the color: inherit property to be applied if ANY parent element has a color attribute set.

This doesn't seem like the intended behaviour. For example, if I set color="light" on my ion-content element in order to adjust the background colour of my content, any nested ion-labels will have their p tags adjusted - even if I intended to have the "default" styling on the list, item, and label elements.

Expected behavior:

I would think that the intended behaviour would be to limit the scope of the CSS selector to just parent ion-labels or ion-items?

Steps to reproduce:

See related code. I've created two tabs - one showing current behaviour and the other with it's component scss adjusted to illustrate expected behaviour.

Related code:

https://stackblitz.com/edit/ionic-v4-angular-tabs-gqkmdr

[JamieWritesCode]

For anyone looking for a temp fix, here is a scss solution that will scope color inheritance to the item level for both md and ios.

// restore default color on md
.ion-color .sc-ion-label-md-h.sc-ion-label-md-s > p {
  color: var(--ion-color-step-600, #666);
}

// restore default color on ios
.ion-color .sc-ion-label-ios-h.sc-ion-label-ios-s > p {
  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
}

// limit inheritance to item scope instead of any parent
.item.ion-color .sc-ion-label-md-h.sc-ion-label-md-s > p,
.item.ion-color .sc-ion-label-ios-h.sc-ion-label-ios-s > p {
  color: inherit;
}

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. Looks like the culprit is https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/label/label.ios.scss#L92-L94 (for MD mode as well). The slotted p element should only inherit the color if the color prop is set on the parent ion-item. Right now it is inheriting the color is any parent element has the color property set.

[liamdebeasi]

Thanks for the issue. This has been resolved via #23944, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.