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

Disabled Indeterminate Checkbox Styling #14415

Closed
RussellAFisher opened this issue Dec 6, 2018 · 9 comments · Fixed by #14478
Closed

Disabled Indeterminate Checkbox Styling #14415

RussellAFisher opened this issue Dec 6, 2018 · 9 comments · Fixed by #14478
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@RussellAFisher
Copy link

Bug: Background-color styling for a disabled indeterminate checkbox doesn't match styling for disabled checked checkbox

What is the expected behavior?

Disabled checkboxes all have the same background-color: #b0b0b0 no matter their state

What is the current behavior?

Indeterminate checkboxes retain their themed color

What are the steps to reproduce?

https://stackblitz.com/edit/angular-iscw2w

  1. Expand top level
  2. Click on a secondary level checkbox so top level becomes indeterminate
  3. Click disable button at the bottom

What is the use-case or motivation for changing an existing behavior?

Regression from 6

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/core": "^7.1.1",
"@angular/material": "^7.1.1",
"typescript": "~3.1.6"
MacOS High Sierra 10.13.6
Chrome Version 70.0.3538.110

Is there anything else we should know?
@crisbeto
Copy link
Member

crisbeto commented Dec 6, 2018

This matches the Material Design spec. See:

spec

@RussellAFisher
Copy link
Author

@crisbeto Thank you, I'm curious why did this change from 6 to 7? And whats the purpose of keeping the background-color rather then going gray like disabled selected?

@jwdepetro
Copy link

@crisbeto Any reason why this changed from 6 to 7?

@crisbeto
Copy link
Member

The reason was that the Material Design spec changed and we are matching it. @RussellAFisher I'm not sure what the reasoning is, but it seems to be deliberate when looking at the spec.

@michelled66
Copy link

@crisbeto I think the question is why did the Material Design spec change? The "check" versus "minus" seems determinate enough to differentiate between "Selected" and "Indeterminate"
Now a UI will have a visual inconsistency that may confuse a user when the view is disabled. Meaning, a user might equate gray with disabled but then see a muted color for some options and become unsure if the option is enabled or disabled.

@crisbeto
Copy link
Member

I'm sorry, I just double-checked it with the people that are maintaining the design spec and according to them all disabled checkboxes are supposed to be greyed out. It looks like an incorrect design got uploaded to the site which we ended up implementing.

@crisbeto crisbeto reopened this Dec 11, 2018
@RussellAFisher
Copy link
Author

RussellAFisher commented Dec 11, 2018 •
edited
Loading

@crisbeto Thank you for looking into this, much appreciated.

crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 11, 2018
@crisbeto
fix(checkbox): incorrect color for disabled indeterminate checkbox
807a227 
When we were implementing the new Material Design spec, [we based our checkbox state off this design](https://camo.githubusercontent.com/293e382a98c90eb68f6e537a714379e843493dd0/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f737065632d686f73742d6261636b75702f6d696f2d64657369676e25324661737365747325324631374173385659376a4c4b4f53346e443170794e39343539667168386c65724b7525324673656c656374696f6e636f6e74726f6c732d636865636b626f7865732d7374617465732e706e67) which shows selected disabled checkboxes to be greyed out, whereas indeterminate disabled checkboxes having a slight opacity. After checking with the MDC team, the above-mentioned designs are incorrect and all disabled checkboxes are supposed to be grey.

Fixes angular#14415.
@crisbeto crisbeto self-assigned this Dec 11, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Dec 11, 2018
@crisbeto crisbeto mentioned this issue Dec 11, 2018
Merged
@michelled66
Copy link

@crisbeto Thank you!

crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 13, 2018
@crisbeto
fix(checkbox): incorrect color for disabled indeterminate checkbox
13b2343 
When we were implementing the new Material Design spec, [we based our checkbox state off this design](https://camo.githubusercontent.com/293e382a98c90eb68f6e537a714379e843493dd0/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f737065632d686f73742d6261636b75702f6d696f2d64657369676e25324661737365747325324631374173385659376a4c4b4f53346e443170794e39343539667168386c65724b7525324673656c656374696f6e636f6e74726f6c732d636865636b626f7865732d7374617465732e706e67) which shows selected disabled checkboxes to be greyed out, whereas indeterminate disabled checkboxes having a slight opacity. After checking with the MDC team, the above-mentioned designs are incorrect and all disabled checkboxes are supposed to be grey.

Fixes angular#14415.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 17, 2018
@crisbeto
fix(checkbox): incorrect color for disabled indeterminate checkbox
a4d2926 
When we were implementing the new Material Design spec, [we based our checkbox state off this design](https://camo.githubusercontent.com/293e382a98c90eb68f6e537a714379e843493dd0/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f737065632d686f73742d6261636b75702f6d696f2d64657369676e25324661737365747325324631374173385659376a4c4b4f53346e443170794e39343539667168386c65724b7525324673656c656374696f6e636f6e74726f6c732d636865636b626f7865732d7374617465732e706e67) which shows selected disabled checkboxes to be greyed out, whereas indeterminate disabled checkboxes having a slight opacity. After checking with the MDC team, the above-mentioned designs are incorrect and all disabled checkboxes are supposed to be grey.

Fixes angular#14415.
jelbourn pushed a commit that referenced this issue Dec 20, 2018
@crisbeto @jelbourn
fix(checkbox): incorrect color for disabled indeterminate checkbox (#…
0398d53 
…14478)

When we were implementing the new Material Design spec, [we based our checkbox state off this design](https://camo.githubusercontent.com/293e382a98c90eb68f6e537a714379e843493dd0/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f737065632d686f73742d6261636b75702f6d696f2d64657369676e25324661737365747325324631374173385659376a4c4b4f53346e443170794e39343539667168386c65724b7525324673656c656374696f6e636f6e74726f6c732d636865636b626f7865732d7374617465732e706e67) which shows selected disabled checkboxes to be greyed out, whereas indeterminate disabled checkboxes having a slight opacity. After checking with the MDC team, the above-mentioned designs are incorrect and all disabled checkboxes are supposed to be grey.

Fixes #14415.
josephperrott pushed a commit to josephperrott/components that referenced this issue Jan 14, 2019
@crisbeto @josephperrott
fix(checkbox): incorrect color for disabled indeterminate checkbox (a…
d46a7d5 
…ngular#14478)

When we were implementing the new Material Design spec, [we based our checkbox state off this design](https://camo.githubusercontent.com/293e382a98c90eb68f6e537a714379e843493dd0/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f737065632d686f73742d6261636b75702f6d696f2d64657369676e25324661737365747325324631374173385659376a4c4b4f53346e443170794e39343539667168386c65724b7525324673656c656374696f6e636f6e74726f6c732d636865636b626f7865732d7374617465732e706e67) which shows selected disabled checkboxes to be greyed out, whereas indeterminate disabled checkboxes having a slight opacity. After checking with the MDC team, the above-mentioned designs are incorrect and all disabled checkboxes are supposed to be grey.

Fixes angular#14415.
@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 Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
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(checkbox): incorrect color for disabled indeterminate checkbox crisbeto/material2
4 participants
@jwdepetro @crisbeto @RussellAFisher @michelled66