[EuiFormControlButton] Fix alignment for icons when no label is passed

[mgadewoll]

Summary

This PR fixes a visual issue in EuiFormControlButton where a right aligned icon would not be placed on the right side if no button label is passed via value.

To track regression, this PR adds more technically possible usages to the Kitchensink story.

API Changes

🟢 No API changes.

Screenshots

Before	After

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None - 🟢 Low

Due to an added Emotion class, there could be snapshots that need updating.

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

💻 EuiFormControlButton storybook

• verify that the usage of only iconType and iconSide without value align as expected (iconSide="right" -> right aligned, iconSide="left" -> left aligned)
• verify there is no other unexpected regression with production

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[Copilot]

Pull request overview

This PR addresses a visual regression in EuiFormControlButton where icon-only buttons with iconSide="right" were not aligning the icon to the right when no label text (value/placeholder) is present, and expands the Storybook kitchensink cases + VRT references to prevent regressions.

Changes:

• Adds a hasText/iconSide-based conditional style to right-align icon-only content.
• Introduces a new Emotion style (alignEnd) for content alignment.
• Refactors/expands the kitchensink story and updates Loki reference screenshots; adds an upcoming changelog entry.

Reviewed changes

Copilot reviewed 4 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/eui/src/components/form/form_control_button/form_control_button.tsx	Adds conditional content alignment when there is no text and the icon is on the right.
packages/eui/src/components/form/form_control_button/form_control_button.styles.ts	Adds alignEnd style (justify-content: flex-end).
packages/eui/src/components/form/form_control_button/form_control_button.stories.tsx	Refactors kitchensink rendering and adds icon-only scenarios for VRT coverage.
packages/eui/changelogs/upcoming/9588.md	Documents the bug fix in upcoming changelog.
packages/eui/.loki/reference/*.png	Updates VRT reference images for the expanded kitchensink cases.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 6bf87b5
• Documentation website
• Storybook

History

• 💚 Build #3197 succeeded db22591

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 6bf87b5

History

• 💚 Build #6227 succeeded db22591

cc @mgadewoll

[weronikaolejniczak]

LGTM 🟢 Thanks for fixing it, Lene!