Skip to content

fix: FormField error icon shrinks on multiline error messages#1104

Merged
ByronDWall merged 2 commits intomainfrom
claude/issue-1095-20260219-0831
Feb 19, 2026
Merged

fix: FormField error icon shrinks on multiline error messages#1104
ByronDWall merged 2 commits intomainfrom
claude/issue-1095-20260219-0831

Conversation

@misama-ct
Copy link
Collaborator

@misama-ct misama-ct commented Feb 19, 2026

image image

Fixes the bug where the error icon in <FormField.Error> gets smaller and centered when the error message spans multiple lines.

Changes:

  • Add alignItems: "flex-start" to the error slot in the recipe so the icon aligns to the top of multi-line text
  • Remove verticalAlign, mr, and alignSelf from the icon
  • Add flexShrink="0" to prevent the icon from shrinking
  • Add mt="50" (spacing.50) top margin for correct alignment with the first line of text

Fixes #1095

Generated with Claude Code

… messages

- Add `alignItems: "flex-start"` to the error slot recipe so the icon aligns to the top of multi-line text
- Replace `verticalAlign`, `mr`, and `alignSelf` on the icon with `flexShrink="0"` and `mt="50"` for correct top alignment with a small offset

Fixes #1095

Co-authored-by: Michael Salzmann <misama-ct@users.noreply.github.com>
@vercel
Copy link

vercel bot commented Feb 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nimbus-documentation Ready Ready Preview, Comment Feb 19, 2026 8:46am
nimbus-storybook Ready Ready Preview, Comment Feb 19, 2026 8:46am

Request Review

@changeset-bot
Copy link

changeset-bot bot commented Feb 19, 2026

🦋 Changeset detected

Latest commit: 4701add

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

This PR includes changesets to release 4 packages
Name Type
@commercetools/nimbus Patch
@commercetools/nimbus-tokens Patch
@commercetools/nimbus-icons Patch
@commercetools/nimbus-design-token-ts-plugin 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

@misama-ct
Copy link
Collaborator Author

@claude please add a changeset

@claude
Copy link

claude bot commented Feb 19, 2026

Claude finished @misama-ct's task in 51s —— View job


Changeset Added

  • Gather context and understand changeset format
  • Create changeset file
  • Commit and push

Added .changeset/fix-form-field-error-icon-multiline.md with a patch bump for @commercetools/nimbus.
| Branch

Co-authored-by: Michael Salzmann <misama-ct@users.noreply.github.com>
@misama-ct misama-ct self-assigned this Feb 19, 2026
@misama-ct misama-ct added bug Something isn't working trivial This pull request contains a very small and low-risk change. labels Feb 19, 2026
@ByronDWall ByronDWall merged commit 6566e21 into main Feb 19, 2026
10 checks passed
@ByronDWall ByronDWall deleted the claude/issue-1095-20260219-0831 branch February 19, 2026 13:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working trivial This pull request contains a very small and low-risk change.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: The info icon gets smaller when there are multiple lines in <FormField.Error>

3 participants

Comments