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.