bug: no way to set color for <ion-input label> - request for @labelColor

[trakhimenok]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Looks like the new implementation is a regression and we lose ability to customize label styling.

With new way of setting labels for inputs (ion-input, ion-select, etc) there is seems no way to set color for labels.

Previously:

<ion-item>
  <ion-label color=medium>My label<ion-label>
  <ionp input />
</ion-input>

Now

<ion-item>
  <ion-input label="My label"/>
</ion-input>

Expected Behavior

I believe an attribute labelColor should be provided to customize label.

This should be applied for all inputs that take label (ion-input, ion-select, ion-radio, etc)

Steps to Reproduce

Simply check new label vs old with color.

Code Reproduction URL

No response

Ionic Info

I'm using NX so for some reason ionic info is not very informative:

➜  src git:(main) ✗ ionic info
[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.4.16

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v18.2.0
   npm    : 8.9.0
   OS     : macOS Unknown

Additional Information

It would be good to know what is the reason for the change.

[liamdebeasi]

Thanks for the report. You can set the label color already in Ionic: https://codepen.io/liamdebeasi/pen/mdzwNJa

Is there something that is not working on your end?

[trakhimenok]

@liamdebeasi this would work.

I just have not found this way in documentation. Is .label-text class documented anywhere?

I also kinda liked the way to set colors through ionic's color attribute but I can live with a custom class.

I'll give it a try over the weekend.

[liamdebeasi]

The internal structure of our components are not documented currently, but you can interact with .label-text in your preferred browser development tools.

As for components where you pass the label text directly inside of the component (i.e. checkbox, toggle, radio, etc) you can definitely continue to use ion-label to get the color behavior as long as you are passing the label inside of the component:

<!-- Not Recommended -->
<ion-label color="danger">My Label</ion-label>
<ion-radio></ion-radio>

<!-- Recommended -->
<ion-radio>
  <ion-label color="danger">My Label</ion-label>
</ion-radio>

[trakhimenok]

The warning says should not be used at all:

[Ionic Warning]: ion-radio now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.

Example: <ion-radio>Option Label</ion-radio>
Example with aria-label: <ion-radio aria-label="Option Label"></ion-radio>

Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup. 

If we still can use ion-label inside controls probably should be changed.

Can I also pass ion-label inside ion-input & ion-textarea?

[liamdebeasi]

The warning says should not be used at all:

Yeah that warning is a bit confusing. I'll look into clarifying that.

Can I also pass ion-label inside ion-input & ion-textarea?

Not at the moment. See #27061.

[trakhimenok]

Liam, below worked for me:

.sneat-label-color-medium .label-text {
  color: #92949c;
}

<ion-input class="sneat-label-color-medium" [label]="labelText()" labelPlacement="fixed"

But I wonder how to account for themes (dark/light)? Below does NOT work for me.

.sneat-label-color-medium .label-text {
	color: var(--ion-color-medium);
}

Previously <ion-label color=medium> would handle theming.

[liamdebeasi]

Is --ion-color-medium defined?

[trakhimenok]

You right, the variables file was not added to the app I've tested.

The --ion-color-medium works fine with custom CSS class. Closing this.

[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.