Visitar URL original
Checkbox / Radio Button: Improve HTML whitespace sensitivity by aduth · Pull Request #239 · 18F/identity-design-system · GitHub
Skip to content

Checkbox / Radio Button: Improve HTML whitespace sensitivity - #239

Merged
aduth merged 5 commits into
mainfrom
aduth-tile-checkbox-label-size
Aug 18, 2021
Merged

aduth merged 5 commits into
mainfrom
aduth-tile-checkbox-label-size

Conversation

@aduth

@aduth aduth commented Aug 17, 2021

Copy link
Copy Markdown
Contributor

Related: uswds/uswds#4286
Context: 18F/identity-idp#5279 (comment)

This pull request seeks to maintain the existing visual appearance of the Checkbox and Radio Button components, while improving developer ergonomics regarding HTML whitespace sensitivity.

See additional details at uswds/uswds#4286 .

The expectation is that there should be no user-facing visual effect of these changes, hopefully demonstrated by a passing visual regression test.

This does not incorporate other design revisions proposed for the checkbox and radio component, which will be implemented separately.

@aduth

aduth commented Aug 17, 2021

Copy link
Copy Markdown
Contributor Author

The expectation is that there should be no user-facing visual effect of these changes, hopefully demonstrated by a passing visual regression test.

I lied... the horizontal offset of the checkboxes changes ever-so-slightly. Checking out the artifacts for the build (specifically -diff.png) gives a good overview of the changes. I might be able to get this back to its original styling, but in retrospect I feel this is a bit more faithful to the original Figma designs, as far as the checkboxes and radios appearing at the leftmost edge, with a consistent right margin of 0.5rem. It gives a slightly imbalanced appearance in the bordered and tile variations, but this exists in the Figma design as well. Curious @nickttng @anniehirshman-gsa @cdelivuk if you'd have thoughts here.

Live demo: https://federalist-2f194a10-945e-4413-be01-46ca6dae5358.app.cloud.gov/preview/18f/identity-style-guide/aduth-tile-checkbox-label-size/components/form-fields/#radio-buttons

@zachmargolis zachmargolis left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for highlighting the visual diff. If it's OK with UX team it's OK with me!

@anniehirshman-gsa anniehirshman-gsa left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change looks good to me as well... I hadn't noticed that the regular checkboxes and radio buttons were offset by 4px, but agree that flush left makes more sense. Thanks for catching!

@aduth

aduth commented Aug 18, 2021

Copy link
Copy Markdown
Contributor Author

Noting that the upstream uswds/uswds#4286 is now merged, we'll need to come back and revisit this in the future to reconcile redundancies.

@aduth
aduth merged commit 7865f64 into main Aug 18, 2021
@aduth
aduth deleted the aduth-tile-checkbox-label-size branch August 18, 2021 17:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants