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.

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

Reduce border width on default outline button #205

Merged
merged 2 commits into from
Mar 29, 2021

Conversation

aduth
Copy link
Member

@aduth aduth commented Mar 29, 2021

Why: Per Figma design reference, the outline button should only have a border width of 1px, not 2px. The "Big" outline button should still have a 2px border.

Live Preview: https://federalist-2f194a10-945e-4413-be01-46ca6dae5358.app.cloud.gov/preview/18f/identity-style-guide/aduth-outline-button-border-width/components/buttons/

Screenshot:

Design System:

Before After
before after

IdP:

Before After
before after

Implementation Notes:

USWDS allows customization of the stroke width of an outline button, but does not allow for different values between default and big versions of the button. Implementing this requires duplicating the base styles with a custom "big" stroke width, computed here as double the value of the new default stroke width of 1px.

**Why**: Per Figma design reference, the outline button should only have a border width of 1px, not 2px. The "Big" outline button should still have a 2px border.
@aduth aduth requested a review from anniehirshman-gsa March 29, 2021 14:31
Copy link
Contributor

@anniehirshman-gsa anniehirshman-gsa left a comment

Choose a reason for hiding this comment

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

LGTM 👍

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

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

LGTM

CHANGELOG.md Outdated Show resolved Hide resolved
@aduth aduth merged commit 85851f8 into main Mar 29, 2021
@aduth aduth deleted the aduth-outline-button-border-width branch March 29, 2021 16:05
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