USWDS - Checkbox: Add styling for indeterminate checkboxes #5549
Conversation
|
Thanks for this contribution. We're going to take a look at it in the next sprint and try to determine any next steps. Stay tuned! |
There was a problem hiding this comment.
Hey there @lpsinger
Thanks for taking this on! This is looking good. Just a few ideas and suggestions for continuity.
There is also a forced-colors mode issue that needs to be addressed. Do you have experience with forced-colors or high-contrast modes?
Let us know if you have any questions!
packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
High contrast modes
There is a discrepancy with how the checkbox is displayed in high-contrast modes. I believe it's because it is still able to receive the checked status so it's changing the background color.
Do you have any experience with high contrast / forced-colors modes? Would you be able to try to resolve this?
Kapture.2023-10-23.at.13.16.41.mp4
There was a problem hiding this comment.
Do you have any experience with high contrast / forced-colors modes? Would you be able to try to resolve this?
No, I don't. Is it better if I try to do that or if a USWDS team member does it?
There was a problem hiding this comment.
Actually, I don't even know how to activate these settings in my browsers (Safari, Chrome, Firefox). I can't find anything that resembles the right panel of that screen capture.
There was a problem hiding this comment.
Missing story
Semi-related to this work, but this test template is not being imported into usa-checkbox-stories.js so it's not accessible via Storybook. We should consider importing properly or removing.
There was a problem hiding this comment.
I don't know how to fix that, myself, and it does sound unrelated. Perhaps that would work best as a separate PR?
|
Hello again @lpsinger We've decided we will take on the color contrast work needed to get this enhancement merged more quickly! I've updated the PR's target branch to a new feature integration branch we'll use to keep track of all related work. Do you have the bandwidth to address the other change requests outside of the color contrast work? Thank you again for your time and effort in this contribution! Excited to get it merged. |
Support [indeterminate checkboxes] through both the CSS `:indeterminate` selector and also the `data-indeterminate` attribute. Fixes uswds#918. [indeterminate checkboxes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
…io-colors.scss Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>
aea0f7e to
611d481
Compare
I think that I have addressed them now. |
There was a problem hiding this comment.
Is this a new asset? Could we replace with remove from USA Icons?
|
Removing release milestone because original issue is already included in 3.8.0. |
Summary
Support indeterminate checkboxes through both the CSS
:indeterminateselector and also thedata-indeterminateattribute.Fixes #918.
Breaking change
This is not a breaking change.
Related issue
Fixes #918.
Related pull requests
None
Preview link
We use these in https://gcn.nasa.gov/ for two-level lists of options. You would have to log in to see it, so here's a screen shot:
Also, I've updated Storybook in this PR and you can preview it there.
Problem statement
There are times when you have a nested list of on/off options and you want to show when a top-level category has some, but not all and not none, of its children selected. In the example above, it is email notification preferences for a number of topics which are organized into categories.
Solution
The browser platform provides built-in support for indeterminate checkboxes, with the JavaScript
input.indeterminateproperty mapped to the CSS:indeterminateselector.However, since there is no HTML attribute to control the
input.indeterminateproperty, I've also implemented adata-indeterminateattribute.Major changes
This seems like a minor change.
Testing and review
Check out the branch for this PR, launch Storybook, and navigate to the Checkbox page.