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

Fix width of text fields and multi inputs #1897

Merged
merged 4 commits into from
Mar 23, 2023
Merged

Conversation

camertron
Copy link
Contributor

@camertron camertron commented Mar 23, 2023

Description

We have a few forms in dotcom right now that look kinda funky:

Screenshot of the billing upgrade form. Some fields look fine but the city, zip, state, and country fields are all unequal in width, which is jarring to the eye

Text inputs

A recent PR wrapped text inputs in the <primer-text-field> custom element, which has no styling. The framework expects all inputs to be wrapped with the FormControl class, which sets some necessary flex-* rules. This PR ensures this class is attached to <primer-text-field> and not one if its children.

Multi inputs

Multi inputs suffer from the same problem, although the <primer-multi-input> custom element has been around for a bit longer.

Integration

Does this change require any updates to code in production?

No

Merge checklist

  • Added/updated tests
    - [ ] Added/updated documentation
    - [ ] Added/updated previews

@changeset-bot
Copy link

changeset-bot bot commented Mar 23, 2023

🦋 Changeset detected

Latest commit: 66db473

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@camertron camertron changed the title Fix with of text fields Fix width of text fields Mar 23, 2023
@camertron camertron temporarily deployed to preview March 23, 2023 21:01 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages March 23, 2023 21:07 — with GitHub Actions Inactive
@camertron camertron changed the title Fix width of text fields Fix width of text fields and multi inputs Mar 23, 2023
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

Looks great 👍🏻

@camertron camertron merged commit eae7a7f into main Mar 23, 2023
@camertron camertron deleted the fix_text_field_input_width branch March 23, 2023 23:16
@primer-css primer-css mentioned this pull request Mar 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants