changelog: improvements, add style and markdown for checked and disab… #313
Conversation
…led radios and checkboxes, LG-6230
src/scss/components/_inputs.scss
Outdated
|
|
||
| .usa-checkbox__image { | ||
| filter: invert(45%) sepia(1%) saturate(0%) hue-rotate(232deg) brightness(100%) contrast(80%); | ||
| } |
There was a problem hiding this comment.
Are these styles necessary, since it appears they're the same as what would be applied below on lines 144-150?
There was a problem hiding this comment.
Not necessary, removing now. Thanks for catching.
|
Is there a way that the checkmark could be more visible? The checkmark from the current example is barely visible (white foreground on light gray background, so, likely, the users won't be able to perceive what it represents. In Mostyn's example, the checkbox has a darker background so that the white checkmark is more prominent. |
Co-authored-by: Andrew Duthie <[email protected]>
…ty-style-guide into checkbox-disabled-and-checked
Good catch, change incoming to fix. |
src/scss/components/_inputs.scss
Outdated
| background-color: color('disabled'); | ||
| background-size: units(1) auto; | ||
| box-shadow: inset 0 0 0 units($border-width) color('disabled'); |
There was a problem hiding this comment.
The background color and box shadow styling here should be limited to disabled fields. Currently, it's applying to all:
src/scss/components/_inputs.scss
Outdated
| background-color: color('disabled'); | ||
| background-size: units(1) auto; | ||
| box-shadow: inset 0 0 0 units($border-width) color('disabled'); |
There was a problem hiding this comment.
Also, these are currently only applying to checkboxes. Radio fields look significantly lighter in the current version of the branch. Is that intended?
| @@ -76,15 +76,19 @@ $input-select-margin-right: 1; | |||
| border-radius: 50%; | |||
| } | |||
|
|
|||
| .usa-radio__input:disabled + .usa-radio__label::before, | |||
There was a problem hiding this comment.
Should we want this to apply to radio buttons as well? As implemented, the border of the unselected, disabled radio is thicker than the unselected, enabled radio and lighter than the disabled checkbox.
Keeping this selector makes it look a bit more expected:
There was a problem hiding this comment.
Good catch. I added that back in. Ty
Co-authored-by: Andrew Duthie <[email protected]>
…led radios and checkboxes, LG-6230
What
Adding styles and markdown content for displaying variations on radios and checkboxes that are both checked and disabled.
Why
Needed for LG-6230 when users see a form they previously submitted and can select more options but not unselect the one they previously selected. Those options are checked but they must also be disabled.
Example:
