Skip to content

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

Merged
mgadewoll merged 14 commits intomainfrom
feat/visual-refresh-append-prepend-updates
Feb 16, 2026
Merged

[Inputs] Append/Prepend API and design updates#9308
mgadewoll merged 14 commits intomainfrom
feat/visual-refresh-append-prepend-updates

Conversation

@mgadewoll
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll commented Jan 12, 2026

Summary

Implements https://github.com/elastic/eui-private/issues/351

Note

This PR merges a feature branch.

This PR contains changes from:

Additional changes

  • adds a custom style override for EuiPaginationButton to remove the newly added button label padding to ensure pagination buttons remain as they were on production
  • added a max-width on the append/prepend wrapper to ensure truncation works as expected
  • updated VRT images

Why are we making this change?

✨ UI modernization and consistency: This PR implements UI updates as part of the ongoing initiative to make the UI more modern and consistent.

Screenshots #

Impact to users

Important

The changes have been tested and peer reviewed on Kibana in elastic/kibana#248805.
‼️ All changes of this PR should be included with the respective release upgrade.

⚠️ Two of the included feature PRs have breaking changes:

  • The update to quickSelectButtonProps on EuiSuperDatePicker maybe cause breaking changes as it reflects a more restricted prop type for EuiFormPrepend instead of EuiButtonEmpty.
    • 🟢 There are no usages of quickSelectButtonProps on EuiSuperDatePicker or EuiQuickSelectPopover directly in Kibana or CloudUI
  • removed components.superDatePickerBackgroundSuccees token
    • The token is not used in Kibana or CloudUI but requires snapshot updates in Kibana - the changes are included in this PR

QA

ℹ️ most changes have been reviewed separately as part of the included PRs. Only the above mentioned additional changes are new.

  • verify that EuiPagination has no regression with production
  • verify that EuiFormPrepend/Append truncate properly in narrow layouts (Story)

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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)

@mgadewoll mgadewoll self-assigned this Jan 12, 2026
@mgadewoll
Copy link
Copy Markdown
Contributor Author

ℹ️ Merged main on tag 111.1.0 into this feature branch (commit) to enable testing on Kibana.

@mgadewoll mgadewoll added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jan 13, 2026
@mgadewoll mgadewoll force-pushed the feat/visual-refresh-append-prepend-updates branch from 418f797 to f830fb5 Compare February 11, 2026 09:18

/* manually remove additional label padding to reduce empty space */
.euiButtonEmpty__text {
padding: 0;
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ This ensures that pagination buttons remain as they were. We don't want the new button label padding being applied here as it would add too much empty space on these elements.

Screen.Recording.2026-02-10.at.17.31.24.mov

@mgadewoll
Copy link
Copy Markdown
Contributor Author

ℹ️ Rebased with main on latest state (version 112.3.0).

@mgadewoll mgadewoll marked this pull request as ready for review February 12, 2026 08:57
@mgadewoll mgadewoll requested a review from a team as a code owner February 12, 2026 08:57
@mgadewoll mgadewoll force-pushed the feat/visual-refresh-append-prepend-updates branch from f830fb5 to 3cdf101 Compare February 13, 2026 07:54
@mgadewoll
Copy link
Copy Markdown
Contributor Author

ℹ️ Rebased with latest main. And added an additional small fix to ensure proper truncation on append/prepend elements (commit).

Copy link
Copy Markdown
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Tested EuiPagination staging vs prod, no regression
✅ Tested EuiFormAppend / EuiFormPrepend truncation, works as expected
✅ All updated VRT referenced are as expected, I also ran VRT locally, all tests passed (except the icon tip and popover panel padding)

I only left some nits after going through the code. After reviewing I even ran an AI agent on main..HEAD and it didn't find these, not sure how to feel about that 😅

Fantastic work, Lene! 🚀

@mgadewoll
Copy link
Copy Markdown
Contributor Author

After reviewing I even ran an AI agent on main..HEAD and it didn't find these, not sure how to feel about that 😅

Maybe AI won't quite just yet take our jobs after all 😅

@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @mgadewoll

@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @mgadewoll

@mgadewoll mgadewoll merged commit 501a646 into main Feb 16, 2026
5 checks passed
@mgadewoll mgadewoll deleted the feat/visual-refresh-append-prepend-updates branch February 16, 2026 08:18
mgadewoll added a commit to elastic/kibana that referenced this pull request Feb 23, 2026
## 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) visual refresh

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants