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

Update Text Input styling to adhere to design specification #325

Merged
merged 2 commits into from
Dec 14, 2022

Conversation

aduth
Copy link
Member

@aduth aduth commented Dec 12, 2022

In implementing LG-8066, I noticed that text inputs and hints were not spaced correctly per the Figma Design System reference. The changes here eliminate all margins around the hint, and reduces the top margin of text fields from 0.5rem to 0.25rem.

Variant Before After
Default image image
With Hint image image

Live preview: https://federalist-2f194a10-945e-4413-be01-46ca6dae5358.sites.pages.cloud.gov/preview/18f/identity-style-guide/aduth-hint-spec/components/form-fields/

@aduth aduth requested a review from nickttng December 12, 2022 14:09
@aduth
Copy link
Member Author

aduth commented Dec 12, 2022

Visual regression failures are expecting since we're adjusting vertical spacing of form fields.

Example:

image

Copy link
Member

@nickttng nickttng left a comment

Choose a reason for hiding this comment

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

LGTM. Do we want to apply the same to the dropdowns?

@aduth
Copy link
Member Author

aduth commented Dec 13, 2022

LGTM. Do we want to apply the same to the dropdowns?

Hm, yeah, these styles are applied in USWDS via the %block-input-styles Sass placeholder, which is (a) not directly customizable and (b) shared by many different types of inputs. If we want to effectively update the margin across the board, I can try to track down each place those styles are used and update them individually.

@nickttng
Copy link
Member

Got it. If it's a light lift to update across the board, I think it'd be good to have spacing consistency between any label and input field.

@aduth
Copy link
Member Author

aduth commented Dec 13, 2022

the %block-input-styles Sass placeholder, which is (a) not directly customizable

Actually, I take that back. Apparently in Sass, if you define a placeholder which already exists, it doesn't necessarily "override" what existed previously, but it does output an additional set of styles which would effectively take precedence over the initial definition, which should give us the effect we want.

Example: https://www.sassmeister.com/gist/d12223c9afc58b44c411146e54053df4

@aduth
Copy link
Member Author

aduth commented Dec 13, 2022

Ok, the changes in 2871d86 should get us what we want. The updated preview should be available shortly.

@aduth
Copy link
Member Author

aduth commented Dec 14, 2022

I'm going to go ahead and merge this since I want to start implementing "Big" inputs, but let me know if you spot any issues @nickttng and I'll be happy to follow-up on them.

@aduth aduth merged commit 2731dbd into main Dec 14, 2022
@aduth aduth deleted the aduth-hint-spec branch December 14, 2022 18:30
@nickttng
Copy link
Member

Thank you, Andrew. I'll keep an eye out for the "Big" inputs.

@aduth aduth mentioned this pull request Dec 22, 2022
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.

None yet

2 participants