[Inputs] Implement form element `append`/`prepend` design updates by mgadewoll · Pull Request #9305 · elastic/eui

mgadewoll · 2026-01-09T14:08:15Z

Summary

Important

This PR merges into a feature branch.

closes https://github.com/elastic/eui-private/issues/496

Changes

Updated EuiFormAppend/EuiFormPrepend styling:
- Removed background color
- Changed the padding
- Changed the divider styling
- Changed the interactive variant style to match EuiButtonEmpty with variant primary
- Updated the gap value from xs to s
Updated EuiFormAppend/EuiFormPrepend to inherit isDisabled state from EuiFormControlLayout
Updated EuiFormControlLayout styling:
- Updated hover styling from the control element to the layout wrapper element
- Added disabled and autofill background color to the layout wrapper instead of only the form control
- Removed border radius overrides for child form control elements (rendering with euiTheme.border.radius.small instead of 0 now)
Updated EuiFormControlButton to inherit isDisabled, readOnly and isInvalid states from EuiFormControlLayout
Added iconSide prop on EuiDatePickerRange
Updated EuiSuperDatePicker styling:
- Added a checkCircle icon on valid input data
- Removed valid state background color
Removed background color transition on EuiButtonEmpty (other button variants don't have a transition anymore either)

Breaking changes

Removed components.superDatePickerBackgroundSuccees token

Why are we making this change?

✨ UI modernization: The design updates are part of the global UI modernization efforts.

Screenshots #

EuiFormControlLayout append/prepend - New API (using EuiFormAppend/EuiFormPrepend)

before (feature branch)	after

EuiFormControlLayout append/prepend - Custom (old) API (custom content)

production	feature branch	after

EuiFormControlLayoutDelimited

production	feature branch	after

EuiFormControlButton inside EuiFormControlLayout

light	dark

Autofill styles (Chrome)

before	after

EuiSuperDatePicker valid styles

before	after

EuiDatePickerRange iconSide="right" + iconType

Impact to users

⚠️ This PR contains breaking changes due to the removed components.superDatePickerBackgroundSuccees token

ℹ️ The token is not in use but e.g. Kibana requires snapshot updates:

x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap
x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap

QA

Review stories:

EuiFormAppend (PR, feature branch)
EuiFormPrepend (PR, feature branch)
EuiFormControlLayout append/prepend with old API to compare with current production (PR, production)
EuiFormControlLayout append/prepend with new API (PR, feature branch)
EuiFormControlLayout append/prepend with new & old API side by side (PR, feature branch)
EuiFormControlLayout with EuiFormControlButton (PR)
EuiFormControlLayoutDelimited (PR, feature branch, production)
EuiSuperDatePicker (PR, feature branch, production)

Review checks:

verify the updated design changes for form layout append/prepend and EuiFormAppend/EuiFormPrepend match design specs
verify form control layouts render as expected for:
- default state
- hover
- focus
- invalid
- disabled
- readonly
- autofill
verify there are no unexpected regressions for
- EuiFormControlLayout
- EuiFormControlLayoutDelimited
- single form controls like EuiFieldText and EuiFieldNumber
- EuiSuperDatePicker and EuiDatePickerRange
verify EuiSuperDatePicker renders an icon and no background when a valid time span is selected

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- updates append/prepend styling, border radius, background colors

…ton from the form layout context

… color on valid state & cleanup

- base and filled buttons don't have a transition anymore either, it seems logical to remove and align

- mainly due to the added wrapper element on append/prepend

- the entire layout wrapper has a background

- that's not the final proposal yet, just an update

…layouts

github-actions · 2026-01-13T11:36:03Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes:
- Search through Kibana for <EuiComponent usages (example search)
- In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
If this PR contains CSS changes:
- Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
- In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
- Using a pre-release release candidate to test Kibana CI ahead of time
- Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

- we'll use the custom style version going forward

…pend - there might be use cases where custom content purposefully looks different; we instead want to ensure expected usage through guidance and patterns

acstll · 2026-01-14T17:33:41Z

A couple of mid-review comments, mostly so you know I'm at it:

code is looking good, I want to have a second look at components/form/form_control_layout/form_control_layout.styles.ts where most of the meat is, I guess
(not a change in this PR though): the story for EuiFormAppend is being rendered as prepend and it looks weird, is that intended @mgadewoll? (link)
I will do a round of visual QA, as usual

mgadewoll · 2026-01-15T08:17:44Z

(not a change in this PR though): the story for EuiFormAppend is being rendered as prepend and it looks weird, is that intended @mgadewoll? (link)

@acstll Woops, that's a mistake, it should use append 😅 Thanks for the catch!
Fixed in cd52c39

acstll

Code-wise it looks correct, only a single comment which is a nit!

I followed the guide for the QA — thanks a lot for providing it!

I found 3 things design-wise worth pointing out (I left a brief comment in the code where I thought it might be related but it could be wrong 😛)

(1) padding in FormControlLayout's side

I think the 4px padding in the "side" in the FormControlLayout is not present in the spec when there's a label, only when there's a button

code	spec

(2) gap in prepend/append

this seems to be 8px and not 4px in the spec, otherwise items are too close to each other when there's no label

code	spec

(3) font size for buttons

in the spec, font size for buttons seems larger (~2px) than labels only, I wonder if that should be the case for element="button"

code	spec

packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts

...ges/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts

packages/eui/changelogs/upcoming/9305.md

packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts

- additionally adjusts the spacing around form labels for visual balance as those already have their own spacing

…xpectedly - prevents e.g. EuiCheckbox label from being displayed as disabled if the form layout is disabled but the checkbox is not

- we don't want the badge being automatically adjusted on parents disabled state

mgadewoll · 2026-01-19T10:15:35Z

(3) font size for buttons
in the spec, font size for buttons seems larger (~2px) than labels only, I wonder if that should be the case for element="button"

@acstll We aligned with @JoseLuisGJ that we keep the matching xs font size, meaning buttons are adjusted.
Effectively nothing to change here as it's already being applied.

- due to spacing changes

mgadewoll · 2026-01-19T11:22:41Z

@acstll I added a couple small additional updates to this PR that I noticed while checking Kibana usages:

ensure expected styling for EuiFieldPassword when readOnly (commit)

before	after

ensure that custom nested form element label text color is not adjusted when the layout is disabled (e.g. nested EuiCheckbox) (commit)

before	after

prevent EuiNotificationBadge text color inheriting automatically -webkit-text-fill-color (commit) - we'd rather want to adjust it where/if needed manually

acstll

Thanks for the updates @mgadewoll! I checked the ones from my comments and the other ones you described (#9305 (comment)).

All changes look good and the outcome is correct.

I was about to approve but there is this one suggestion about the label padding I think is worth sharing. Let me know what you think!

packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts

...ges/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts

acstll

🟢 Thanks a lot for that last one update!

elasticmachine · 2026-01-19T16:39:34Z

💚 Build Succeeded

History

💚 Build #2474 succeeded 8afc8f5
💚 Build #2465 succeeded aef8d36
💚 Build #2439 succeeded 56422e1
💚 Build #2435 succeeded cd52c39
💚 Build #2426 succeeded e12520c
💔 Build #2421 failed 43d3fc6

cc @mgadewoll

elasticmachine · 2026-01-19T16:54:05Z

💚 Build Succeeded

Buildkite Build
Commit: 9a55d71

History

💚 Build #5626 succeeded aef8d36
💚 Build #5607 succeeded 56422e1
💚 Build #5596 succeeded e12520c
💔 Build #5594 failed 43d3fc6
💚 Build #5588 succeeded 11ce2d7
💚 Build #5584 succeeded 794ca94

cc @mgadewoll

)

## Dependency updates - `@elastic/eui` - v112.3.0 ⏩ v113.0.0 - `@elastic/eui-theme-borealis` - v5.4.0 ⏩ v6.0.0 - `@elastic/eslint-plugin-eui` - v2.8.0 ⏩ v2.9.0 --- ## Changes 1. EUI component update: API and Design updates to form layout append/prepend by using the new components `EuiFormPrepend` and `EuiFormAppend` (EUI [#9308](elastic/eui#9308)) >[!important] ❗ This upgrade PR includes all changes previously made in the specific QA PR #248805. Please see the description in that PR for detailed information about the specific changes. 2. Additional changes related to the form layout changes >[!note] 🔗 Please see the [section "Additional changes"](#248805 (comment)) in #248805 for an overview of additional changes. 3. Removed token update: Replaced `ghost` and `ink` token usages with `textInk` or `plainDark` and `textGhost` or `plainLight` respectively (EUI [#9379](elastic/eui#9379)) ## Package updates ### `@elastic/eui` [v113.0.0](https://github.com/elastic/eui/releases/tag/v113.0.0) - Updated `EuiFlyout` manager to close all flyouts when a parent flyout is closed. ([#9378](elastic/eui#9378)) - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) - Added `EuiFormAppend` and `EuiFormPrepend` components ([#9014](elastic/eui#9014)) - Added support for `type="span"` on `EuiFormLabel` for visual-only form labels ([#9014](elastic/eui#9014)) - Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed ([#9014](elastic/eui#9014)) - Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiFormAppend`/`EuiFormPrepend` styling ([#9305](elastic/eui#9305)) - Updated `EuiFormAppend`/`EuiFormPrepend` to inherit `isDisabled` state from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Updated `EuiFormControlLayout` hover, disabled and readonly styling ([#9305](elastic/eui#9305)) - Updated `EuiFormControlButton` to inherit `isDisabled`, `readOnly` and `isInvalid` states from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Added `iconSide` prop on `EuiDatePickerRange` ([#9305](elastic/eui#9305)) - Updated `EuiSuperDatePicker` valid state styling ([#9305](elastic/eui#9305)) - Removed background color transition on `EuiButtonEmpty` (other button variants don't have a transition anymore either) ([#9305](elastic/eui#9305)) - Added `isLoading` prop on `EuiFormControlButton` ([#9328](elastic/eui#9328)) - Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton` ([#8948](elastic/eui#8948)) - Updated paddings for `append`/`prepend` on `EuiFormControlLayout` ([#8948](elastic/eui#8948)) - Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container. ([#9373](elastic/eui#9373)) **Bug fixes** - Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout` ([#9014](elastic/eui#9014)) **Breaking changes** - Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases. ([#9379](elastic/eui#9379)) - Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. ([#9014](elastic/eui#9014)) - Removed `components.superDatePickerBackgroundSuccees` token ([#9305](elastic/eui#9305)) ### `@elastic/eui-theme-borealis` v6.0.0 - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) ### `@elastic/eslint-plugin-eui` v2.9.0 - Prevented `badge-accessibility-rules` rule autofix from duplicating `aria-hidden` attributes. ([#9366](elastic/eui#9366)) - Skip `badge-accessibility-rules` rule validation when a spread operator is used in a component. ([#9366](elastic/eui#9366)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

mgadewoll self-assigned this Jan 9, 2026

mgadewoll force-pushed the inputs/496-append-prepend-design-update branch 3 times, most recently from ad10709 to 668534a Compare January 9, 2026 16:49

mgadewoll added 8 commits January 12, 2026 13:45

refactor: update form layout styles

939af31

- updates append/prepend styling, border radius, background colors

refactor: inherit props in EuiFormAppendPrepend and EuiFormControlBut…

39b403f

…ton from the form layout context

feat(EuiDatePickerRange): add iconSide

c253497

refactor(superDatePicker): add icon on valid state, remove background…

12f207a

… color on valid state & cleanup

refactor(buttonEmpty): remove background color transition

3770ed2

- base and filled buttons don't have a transition anymore either, it seems logical to remove and align

test: update snapshots

2672e28

- mainly due to the added wrapper element on append/prepend

docs(storybook): update form control layout stories

b33ca4c

test(vrt): update reference images

c275d28

mgadewoll force-pushed the inputs/496-append-prepend-design-update branch from 668534a to c275d28 Compare January 12, 2026 12:55

mgadewoll added 2 commits January 13, 2026 09:59

refactor: update form autofill styles

db77598

- the entire layout wrapper has a background

docs(storybook): update custom drag handle examples

a7bbf0d

- that's not the final proposal yet, just an update

mgadewoll force-pushed the inputs/496-append-prepend-design-update branch 2 times, most recently from 68418c9 to a7bbf0d Compare January 13, 2026 08:59

mgadewoll mentioned this pull request Jan 13, 2026

[Inputs] Append/Prepend API and design updates #9308

Merged

16 tasks

refactor: ensure correct HCM styles for EuiFormControlButton in form …

794ca94

…layouts

mgadewoll added breaking change PRs with breaking changes. (Don't delete - used for automation) visual refresh labels Jan 13, 2026

mgadewoll added 2 commits January 13, 2026 13:28

docs(storybook): remove obsolete drag example

dead8b2

- we'll use the custom style version going forward

chore: add changelogs

11ce2d7

mgadewoll requested review from JoseLuisGJ and acstll January 13, 2026 12:54

mgadewoll marked this pull request as ready for review January 13, 2026 13:10

mgadewoll requested a review from a team as a code owner January 13, 2026 13:10

mgadewoll added 2 commits January 14, 2026 16:15

refactor: revert strict button overrides of custom content append/pre…

09358e2

…pend - there might be use cases where custom content purposefully looks different; we instead want to ensure expected usage through guidance and patterns

chore: update changelog

43d3fc6

fix: prevent empty array content from rendering append/prepend

e12520c

docs(storybook): Ensure EuiFormAppend story renders append

cd52c39

refactor: add missing readOnly button styles

56422e1

acstll reviewed Jan 16, 2026

View reviewed changes

mgadewoll added 6 commits January 16, 2026 14:37

chore: rename selector variables

e810e66

chore: update changelog

ea23162

refactor: update append/prepend spacing to s

053c953

- additionally adjusts the spacing around form labels for visual balance as those already have their own spacing

refactor: ensure expected readOnly styling for password fields

e6c51e7

refactor: ensure custom content label text color is not overriden une…

de7eb74

…xpectedly - prevents e.g. EuiCheckbox label from being displayed as disabled if the form layout is disabled but the checkbox is not

refactor: prevent badge text color being overriden unexpectedly

8ff9754

- we don't want the badge being automatically adjusted on parents disabled state

test(vrt): udpate reference images

aef8d36

- due to spacing changes

acstll requested changes Jan 19, 2026

View reviewed changes

packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts Outdated Show resolved Hide resolved

...ges/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts Outdated Show resolved Hide resolved

mgadewoll added 2 commits January 19, 2026 16:26

refactor: apply conditional form label padding

8afc8f5

styles: remove TODO comment

9a55d71

mgadewoll force-pushed the inputs/496-append-prepend-design-update branch from 23bf918 to 9a55d71 Compare January 19, 2026 16:18

acstll approved these changes Jan 19, 2026

View reviewed changes

mgadewoll merged commit 6a2422c into elastic:feat/visual-refresh-append-prepend-updates Jan 19, 2026
4 checks passed

ElenaStoeva mentioned this pull request Jan 28, 2026

Visual Refresh - Form append/prepend elastic/kibana#250802

Closed

mgadewoll added a commit that referenced this pull request Feb 11, 2026

[Inputs] Implement form element append/prepend design updates (#9305

045db09

)

mgadewoll added a commit that referenced this pull request Feb 13, 2026

[Inputs] Implement form element append/prepend design updates (#9305

c8658a5

)

mgadewoll mentioned this pull request Feb 16, 2026

Upgrade EUI to v113.0.0 elastic/kibana#253286

Merged

Conversation

mgadewoll commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

github-actions bot commented Jan 13, 2026 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

acstll commented Jan 14, 2026

Uh oh!

mgadewoll commented Jan 15, 2026

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

(1) padding in FormControlLayout's side

(2) gap in prepend/append

(3) font size for buttons

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Jan 19, 2026

Uh oh!

mgadewoll commented Jan 19, 2026

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jan 19, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jan 19, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mgadewoll commented Jan 9, 2026 •

edited

Loading

github-actions bot commented Jan 13, 2026 •

edited by mgadewoll

Loading