-
Notifications
You must be signed in to change notification settings - Fork 645
Update FormControl ValidationIcon position #6908
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 FormControl ValidationIcon position #6908
Conversation
🦋 Changeset detectedLatest commit: 4cfc1a0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR updates the positioning of ValidationIcon in FormControl components to improve alignment with ValidationText. The icon now aligns vertically with single-line text but stays positioned at the top-left with multiple lines of text, maintaining alignment with the top line at all times.
Key changes:
- Modified CSS positioning for ValidationIcon to use top-left alignment instead of center alignment
- Added changeset documentation for patch release
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/react/src/internal/components/InputValidation.module.css | Updated ValidationIcon CSS to remove center alignment and add top margin for proper positioning |
| .changeset/pretty-emus-cover.md | Added changeset entry documenting the ValidationIcon position update |
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3405 |
|
🟢 ci completed with status |
francinelucca
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we get a designer to take a look as well?
Yeah def! @mperrotti could you take a look? |
Closes https://github.com/github/primer/issues/5910
Changelog
Changed
Change alignment of ValidationIcon relative to ValidationText so that the icon is vertically aligned with a single line of text, but positioned at the top-left with multiple lines of text (i.e.: it stays aligned with the top line of text at all times). Test here
Rollout strategy
Testing & Reviewing
Merge checklist