Skip to content

Conversation

@llastflowers
Copy link
Contributor

@llastflowers llastflowers commented Sep 25, 2025

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

icon position with 1 line of text icon position with 2 lines of text icon position with 3 lines of text

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@llastflowers llastflowers self-assigned this Sep 25, 2025
@changeset-bot
Copy link

changeset-bot bot commented Sep 25, 2025

🦋 Changeset detected

Latest commit: 4cfc1a0

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

This PR includes changesets to release 2 packages
Name Type
@primer/react Patch
@primer/styled-react 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

@llastflowers llastflowers changed the title update FormControl ValidationIcon position Update FormControl ValidationIcon position Sep 25, 2025
@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 25, 2025
@github-actions
Copy link
Contributor

👋 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!

Copy link
Contributor

Copilot AI left a 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

@primer-integration
Copy link

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3405

@primer-integration
Copy link

🟢 ci completed with status success.

@github-actions github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 26, 2025
Copy link
Member

@francinelucca francinelucca left a 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?

@llastflowers
Copy link
Contributor Author

can we get a designer to take a look as well?

Yeah def! @mperrotti could you take a look?

@llastflowers llastflowers added this pull request to the merge queue Sep 26, 2025
Merged via the queue into main with commit af288e6 Sep 26, 2025
45 of 46 checks passed
@llastflowers llastflowers deleted the llastflowers/5910/update-FormControl-ValidationIcon-position branch September 26, 2025 21:06
@primer primer bot mentioned this pull request Sep 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants