[DREAM-695] Input group with trailing action clipboard copy button + validation error = style broken

[HDinger]

What are you trying to accomplish?

Fix alignment of InputGroups with error messages

List the issues that this change affects.

https://community.openproject.org/wp/DREAM-695

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.

What approach did you choose and why?

Move the validation messahe out of the actual input similar to how it was done for the caption

[changeset-bot]

🦋 Changeset detected

Latest commit: b2fd360

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

This PR includes changesets to release 1 package

Name	Type
@openproject/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

[github-actions]

⚠️ Visual or ARIA snapshot differences found

Our visual and ARIA snapshot tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review differences

[bsatarnejad]

It looks good visually. this moves the visible validation message outside the TextField, but the input’s aria-describedby still points to the hidden inner validation element, whose message is empty. The newly rendered visible error has no id, so screen readers won’t get the actual error text from the invalid input.

[Copilot]

Pull request overview

Fixes a layout issue in Primer::OpenProject::InputGroup where showing a validation error message could break alignment of the trailing action (e.g., clipboard copy button) by moving the visible validation message outside the flex row (similar to the caption).

Changes:

• Extract validation_message from the text_input slot args and render it beneath the flex row.
• Add a new preview + Playwright snapshot for the error state.
• Add a component test to ensure the validation message is rendered outside the flex container.

Reviewed changes

Copilot reviewed 6 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
app/components/primer/open_project/input_group.rb	Extracts validation message from the text field args to enable rendering it outside the flex row.
app/components/primer/open_project/input_group.html.erb	Renders the extracted validation message below the flex row to avoid trailing-action misalignment.
test/components/primer/open_project/input_group_test.rb	Adds a regression test for validation-message placement (outside flex row).
previews/primer/open_project/input_group_preview.rb	Adds a Lookbook preview + snapshot for the “with error message” state.
.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/input_group/with_error_message/aria-snapshot.yml	Records the accessible tree snapshot for the new preview.
.changeset/many-sheep-yell.md	Adds a patch changeset for the InputGroup error-message alignment fix.