Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

bug(mat-checkbox): Inconsistent disabled styles #23081

Closed
JohnKis opened this issue Jun 28, 2021 · 3 comments · Fixed by #23083
Closed

bug(mat-checkbox): Inconsistent disabled styles #23081

JohnKis opened this issue Jun 28, 2021 · 3 comments · Fixed by #23083
Assignees
@crisbeto
Labels
area: material/checkbox P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@JohnKis
Copy link

JohnKis commented Jun 28, 2021 •
edited
Loading

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-svwzok?file=src%2Fapp%2Fexample-component.html

Steps to reproduce:

  1. Open the StackBlitz example above

Expected Behavior

The disabled styles of form controls should be consistent.

Actual Behavior

The disabled styles are inconsistent. The label of disabled checkboxes are rgba(0,0,0,.54) so as the frame if it's checked but the background colour is #b0b0b0. Radios use rgba(0,0,0,.38) both on the radio button and the label regardless whether they are checked or not. Disabled slide-toggles just have their opacity set as .38 resulting in yet another shade on the label.

Environment

  • Angular: 12.0.3
  • CDK/Material: 12.0.4
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
@JohnKis JohnKis added the needs triage This issue needs to be triaged by the team label Jun 28, 2021
@crisbeto
Copy link
Member

Is the Stackblitz link correct? It doesn't have any checkboxes.

@JohnKis
Copy link
Author

JohnKis commented Jun 28, 2021

Apparently it wasn't. Might have forgot to save it. I've updated the original message with the correct url.

@crisbeto crisbeto self-assigned this Jun 28, 2021
@crisbeto crisbeto added area: material/checkbox has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Jun 28, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 28, 2021
@crisbeto
fix(material/checkbox): inconsistent disabled color
95d5e41 
The checkbox was using `secondary` text when it's disabled which is inconsistent and incorrect, because all other components use `disabled`.

Fixes angular#23081.
@crisbeto crisbeto mentioned this issue Jun 28, 2021
Merged
andrewseguin pushed a commit that referenced this issue Feb 28, 2022
@crisbeto @andrewseguin
fix(material/checkbox): inconsistent disabled color (#23083)
e2d4eec 
The checkbox was using `secondary` text when it's disabled which is inconsistent and incorrect, because all other components use `disabled`.

Fixes #23081.

(cherry picked from commit 02e9ab0)
andrewseguin pushed a commit that referenced this issue Feb 28, 2022
@crisbeto
fix(material/checkbox): inconsistent disabled color (#23083)
02e9ab0 
The checkbox was using `secondary` text when it's disabled which is inconsistent and incorrect, because all other components use `disabled`.

Fixes #23081.
@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 Mar 31, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/checkbox): inconsistent disabled color (angular#23083)
10a481f 
The checkbox was using `secondary` text when it's disabled which is inconsistent and incorrect, because all other components use `disabled`.

Fixes angular#23081.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/checkbox P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/checkbox): inconsistent disabled color crisbeto/material2
2 participants
@JohnKis @crisbeto