Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

bug(optgroup): Overriding label-text-color has no effect #30081

Closed
1 task
martinboue opened this issue Nov 25, 2024 · 1 comment · Fixed by #30085
Closed
1 task

bug(optgroup): Overriding label-text-color has no effect #30081

martinboue opened this issue Nov 25, 2024 · 1 comment · Fixed by #30085
Assignees
Labels
area: material/core P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@martinboue
Copy link

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Using Angular and Material v19, I am trying to change the optgroup text color using the new mat.optgroup-overrides with label-text-color token mixins documented here but it has no effect.

Note: This is not a regression, same issue with v18.

Reproduction

My scss file:

html {
  @include mat.optgroup-overrides((
     label-text-color: red
  ));
}

and html:

<mat-form-field>
   <mat-label>My label</mat-label>
   <mat-select [formControl]="form.controls.myControl">
      <mat-optgroup label="Category 1">
         <mat-option [value]="1">Value 1</mat-option>
         <mat-option [value]="2">Value 2</mat-option>
      </mat-optgroup>
      <mat-optgroup label="Category 2">
         <mat-option [value]="3">Value 3</mat-option>
      </mat-optgroup>
   </mat-select>
</mat-form-field>

But it has no effect, the color stays to its default value --mat-sys-on-surface.

Image

Inspecting CSS

I can see the red color being applied to the mat-optgroup host element.

But it is overriden in the inner child that contains the text: <span class="mdc-list-item__primary-text">Category 1</span> which has the following CSS:

.mdc-list-item__primary-text {
   ...
   color: var(--mdc-list-list-item-label-text-color, var(--mat-sys-on-surface))
}

Workaround

You could use mat.list-overrides but it will affect every list not just optgroup so I'm overriding the list CSS variable only for optgroups.

mat-optgroup .mat-mdc-optgroup-label {
   --mdc-list-list-item-label-text-color: red;
}

Note that this is not recommended by the documentation on "Direct Style Overrides" but that's the only way I know.

After that it works fine:
Image

Expected Behavior

Optgroup text should be red.

Actual Behavior

Optgroup text stays grey.

Environment

  • Angular v19.0.0
  • Material v19.0.0
@martinboue martinboue added the needs triage This issue needs to be triaged by the team label Nov 25, 2024
@crisbeto crisbeto self-assigned this Nov 26, 2024
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/core and removed needs triage This issue needs to be triaged by the team labels Nov 26, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 26, 2024
Fixes that we weren't setting the color of the `mat-optgroup` label correctly, resulting in it being taken from `mat-list`.

Fixes angular#30081.
crisbeto added a commit that referenced this issue Nov 27, 2024
Fixes that we weren't setting the color of the `mat-optgroup` label correctly, resulting in it being taken from `mat-list`.

Fixes #30081.
crisbeto added a commit that referenced this issue Nov 27, 2024
Fixes that we weren't setting the color of the `mat-optgroup` label correctly, resulting in it being taken from `mat-list`.

Fixes #30081.

(cherry picked from commit 6962c85)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 28, 2024
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
area: material/core P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants