Skip to content

[DO NOT MERGE][EUI] Form append/prepend updates#248805

Closed
mgadewoll wants to merge 24 commits intoelastic:mainfrom
mgadewoll:eui/input-append-prepend-updates
Closed

[DO NOT MERGE][EUI] Form append/prepend updates#248805
mgadewoll wants to merge 24 commits intoelastic:mainfrom
mgadewoll:eui/input-append-prepend-updates

Conversation

@mgadewoll
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll commented Jan 13, 2026

Important

DO NOT MERGE.
This PR is used as test and QA branch for upcoming changes to form layout append/prepend elements.

Changes

This PR introduces changes to overall form layout styles, mainly affecting how append and prepend content renders.
EUI introduced the new specific components EuiFormAppend and EuiFormPrepend to handle the expected output (EUI documentation).

There are 3 types of updates related to the append/prepend refactor:

  1. automatic replacement: string only content is automatically rendered as new EUI components under the hood (no code update needed)
  2. manual replacement: replacement of non-complex* custom content with the new EUI components (code updates done in this PR)
  3. no replacement:
    • usages with complex* custom content are kept as they are for now (requires further design alignment on acceptable usage patterns)
    • Potentially acceptable custom content (e.g. filled buttons) (requires further design alignment on acceptable usage patterns)

*: complex = contains unexpected content (e.g. multiple interactive elements or unexpected components like EuiCheckbox or EuiSelect)

Additional changes #

  1. This PR replaces usages of EuiFilterButton in the embeddable controls system (PR) with the EuiFormControlButton component that's expected as button for form context usages.

  2. Fixes visual misalignments of controls with different compressed states

  3. Updates StreamNameInput styles to preserve the current production styles (instead of applying the new input styles)

  4. Updated draggable controls to ensure the entire prepend element is draggable for defined content.

ℹ️ A large amount of snapshot updates is due to an underlying change on the Emotion styles of EuiButtonEmpty.

Screenshots #

Note

The following list of screenshots does not showcase all changes. It only highlights the manual updates but does not showcase all automatic updates.

feature element before after
Discover > create index > add field Screenshot 2026-01-20 at 09 37 13 Screenshot 2026-01-19 at 14 34 18 Screenshot 2026-01-19 at 14 37 20
Discover > Filter by field type Screenshot 2026-01-20 at 10 43 13 Screenshot 2026-01-20 at 09 29 05 Screenshot 2026-01-20 at 09 28 10
Dashboards > edit visualization > primary metric > icon decoration Screenshot 2026-01-20 at 09 42 49 Screenshot 2026-01-19 at 15 16 14 Screenshot 2026-01-19 at 15 15 19
Dashboards > Add > Visualization > Cell value > Color Screenshot 2026-01-20 at 10 07 39 Screenshot 2026-01-19 at 15 30 07 Screenshot 2026-01-19 at 15 29 45
Machine learning > Data Visualizer > ESQL Screenshot 2026-01-20 at 09 48 21 Screenshot 2026-01-19 at 15 18 30 Screenshot 2026-01-19 at 15 18 42
Machine learning > Change point detection > {data view} > {metric field} + {split field} > Attach charts > To dashboard Screenshot 2026-01-20 at 10 35 30 Screenshot 2026-01-19 at 15 55 08 Screenshot 2026-01-19 at 15 54 03
Visualize Library > Create visualization > Lens > Horizontal axis > Value Format: Number Screenshot 2026-01-20 at 09 53 13 Screenshot 2026-01-19 at 15 20 53 Screenshot 2026-01-19 at 15 21 10
Visualize Library > Create visualization > Lens > Style Screenshot 2026-01-20 at 09 56 44 Screenshot 2026-01-19 at 15 22 18 Screenshot 2026-01-19 at 15 22 09
Elasticsearch > Inference endpoints > Add endpoint > Additional settings Screenshot 2026-01-20 at 10 16 50 Screenshot 2026-01-19 at 15 39 50 Screenshot 2026-01-19 at 15 39 54
Observability > Infrastructure inventory Screenshot 2026-01-20 at 10 05 15 Screenshot 2026-01-19 at 15 28 34 Screenshot 2026-01-19 at 15 28 39
Observability > Service inventory > Settings > Agent explorer Screenshot 2026-01-20 at 10 33 02 Screenshot 2026-01-19 at 15 51 30 Screenshot 2026-01-19 at 15 51 34
Observability > Service inventory (APM) > Settings > Agent keys > Create APM agent key Screenshot 2026-01-20 at 10 30 33 Screenshot 2026-01-19 at 15 50 18 Screenshot 2026-01-19 at 15 50 46
Observability > Synthetics > Create monitor > Advanced options > Add label field Screenshot 2026-01-20 at 10 38 22 Screenshot 2026-01-19 at 15 56 26 Screenshot 2026-01-19 at 15 56 46
Security > Rules > Detection rules > Create new rule > Suppress alerts by Screenshot 2026-01-20 at 10 40 33 Screenshot 2026-01-19 at 15 59 01 Screenshot 2026-01-19 at 15 59 41
Integrations Screenshot 2026-01-20 at 09 50 58 Screenshot 2026-01-19 at 15 19 47 Screenshot 2026-01-19 at 15 19 36
Fleet > Add agent > Run standalone > Create API key Screenshot 2026-01-20 at 10 25 49 Screenshot 2026-01-19 at 15 47 57 Screenshot 2026-01-19 at 15 48 02
Streams > {index} > Processing > Create condition > In range condition Screenshot 2026-01-20 at 09 59 14 Screenshot 2026-01-19 at 15 23 43 Screenshot 2026-01-19 at 15 24 03
Streams > {index} (wired) > Partitioning > Create partition manually Screenshot 2026-01-20 at 10 02 09 Screenshot 2026-01-19 at 15 26 16 Screenshot 2026-01-19 at 15 27 11
Streams > Retention > Edit retention Screenshot 2026-01-20 at 10 28 22 Screenshot 2026-01-19 at 15 49 11 Screenshot 2026-01-19 at 15 48 54
Stack management > API keys > create API key Screenshot 2026-01-20 at 09 45 53 Screenshot 2026-01-19 at 15 17 21 Screenshot 2026-01-19 at 15 17 37
Stack management > Ingest pipeline > Create pipeline from CSV Screenshot 2026-01-20 at 10 11 57 Screenshot 2026-01-19 at 15 35 57 Screenshot 2026-01-19 at 15 36 29
Stack management > Data views > Create data view Screenshot 2026-01-20 at 10 13 48 Screenshot 2026-01-19 at 15 37 40 Screenshot 2026-01-19 at 15 37 51
Stack management > Index lifecycle policies > Create/Edit policy > Warm phase Screenshot 2026-01-20 at 10 19 27 Screenshot 2026-01-19 at 15 40 44 Screenshot 2026-01-19 at 15 40 55
Stack management > Transforms > Create transform > Aggregations > filter + range Screenshot 2026-01-20 at 10 21 56 Screenshot 2026-01-19 at 15 43 31 Screenshot 2026-01-19 at 15 44 13
Stack management > Data set quality Screenshot 2026-01-20 at 10 24 04 Screenshot 2026-01-19 at 15 45 59 Screenshot 2026-01-19 at 15 46 04
Streams > Create classic stream Screenshot 2026-02-16 at 16 07 21 Screenshot 2026-02-16 at 16 07 41 Screenshot 2026-02-16 at 16 09 15

Draggable controls

before after
Screen.Recording.2026-02-18.at.16.24.45.mov
Screen.Recording.2026-02-18.at.16.22.39.mov

@mgadewoll mgadewoll self-assigned this Jan 13, 2026
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jan 13, 2026

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

  • Click to trigger kibana-pull-request for this PR!
  • Click to trigger kibana-deploy-project-from-pr for this PR!
  • Click to trigger kibana-deploy-cloud-from-pr for this PR!
  • Click to trigger kibana-entity-store-performance-from-pr for this PR!

@mgadewoll mgadewoll force-pushed the eui/input-append-prepend-updates branch 13 times, most recently from ef04ce1 to 0c9cba2 Compare January 20, 2026 08:05
@mgadewoll mgadewoll added ci:cloud-deploy Create or update a Cloud deployment ci:project-persist-deployment Persist project deployment indefinitely labels Jan 20, 2026
@kibanamachine
Copy link
Copy Markdown
Contributor

Cloud deployment initiated, see credentials at: https://buildkite.com/elastic/kibana-deploy-cloud-from-pr/builds/655

@mgadewoll mgadewoll force-pushed the eui/input-append-prepend-updates branch from 0c9cba2 to a0965f1 Compare January 20, 2026 09:46
@mgadewoll mgadewoll added ci:project-deploy-elasticsearch Create an Elasticsearch Serverless project ci:project-deploy-observability Create an Observability project ci:project-deploy-security Create a Security Serverless Project labels Jan 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

  • /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
  • run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

@mgadewoll
Copy link
Copy Markdown
Contributor Author

/oblt-deploy

@mgadewoll mgadewoll added the ci:cloud-persist-deployment Persist cloud deployment indefinitely label Jan 21, 2026
@andreadelrio
Copy link
Copy Markdown
Contributor

CleanShot 2026-01-21 at 07 54 13@2x We'll need to remove the custom grey background on this button group in Unified Search. fyi @elastic/kibana-presentation

@weltenwort
Copy link
Copy Markdown
Member

/oblt-deploy

@peteharverson
Copy link
Copy Markdown
Contributor

@mgadewoll I've done a smoke test of the ml-ui owned form components and overall looks good, but I did find a couple of visual regressions. Do reach out if you need any help fixing these.

Before:
Screenshot 2026-01-28 at 16 35 50

After:
Screenshot 2026-01-28 at 12 43 54

  • Single Metric Viewer - the vertical alignment of the icon in the entity field button is off:
    Before:
Screenshot 2026-01-28 at 16 39 45

After:
Screenshot 2026-01-28 at 12 42 58

@mgadewoll mgadewoll force-pushed the eui/input-append-prepend-updates branch from 06df105 to 0eb68aa Compare February 13, 2026 12:11
@mgadewoll
Copy link
Copy Markdown
Contributor Author

ℹ️ Rebased with latest main and updated the eui package to include a small fix for append/prepend truncation (as mentioned here)

@mgadewoll
Copy link
Copy Markdown
Contributor Author

@damian-polewski There was a decision made from design side to align styles for the StreamNameInput component with existing production styles for now. 👍 The changes were added in 950175d.

Screenshot 2026-02-13 at 13 51 04

@paul-tavares
Copy link
Copy Markdown
Contributor

paul-tavares commented Feb 13, 2026

@mgadewoll ,

RE:

URL: /app/security/administration/endpoints
What steps are needed to setup endpoints locally to view this page?


To make the Security Solution Endpoint page visible you can run one of our data generator:

Ensure kibana is running with no URL prefix:

yarn start --no-base-path

Run the data generator

node x-pack/solutions/security/plugins/security_solution/scripts/endpoint/resolver_generator.js --auth elastic:changeme --kibana=http://elastic:changeme@127.0.0.1:5601/ --node=http://elastic:changeme@127.0.0.1:9200/ --delete --numHosts=1 --numDocs=1 --fleet --withNewUser=superSuperUser:changeme

(Adjust the argument values to match your local env. if necessary)

It may take a few minutes after running this for the page to show up - since the loaded data needs to run through some ES transforms. Reach out if you need any help.

@mgadewoll
Copy link
Copy Markdown
Contributor Author

@paul-tavares Thank you for sharing how to run the endpoints locally 🙏

The fix for truncated prepend is applied correctly ✅

Screenshot 2026-02-13 at 14 44 36

- after append/prepend truncation fix
- due to added data-test-subj on EuiFlyoutBody scroll container
@mgadewoll mgadewoll force-pushed the eui/input-append-prepend-updates branch from 950175d to 2dd5761 Compare February 13, 2026 15:17
@mgadewoll mgadewoll force-pushed the eui/input-append-prepend-updates branch from 2dd5761 to 4c69e25 Compare February 16, 2026 11:40
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Feb 16, 2026

💔 Build Failed

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #14 / Agent Builder converse Conversation Error Handling shows error message when there is an error and allows user to retry
  • [job] [logs] FTR Configs #14 / Agent Builder tools MCP tools creating MCP tools should create an MCP tool by selecting connector and tool

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
fleet 1410 1411 +1

Any counts in public APIs

Total count of every any typed public API. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats any for more detailed information.

id before after diff
@kbn/alerts-ui-shared 0 2 +2
@kbn/cloud-security-posture 0 2 +2
@kbn/content-management-favorites-public 0 1 +1
@kbn/core-chrome-app-menu-components 0 1 +1
@kbn/discover-utils 0 1 +1
@kbn/grok-ui 0 1 +1
@kbn/index-management-shared-types 3 4 +1
@kbn/ml-anomaly-utils 3 6 +3
@kbn/react-kibana-context-common 0 1 +1
triggersActionsUi 1 3 +2
total +15

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
aiops 524.0KB 524.1KB +91.0B
apm 3.2MB 3.2MB +253.0B
cloudSecurityPosture 606.7KB 606.7KB +41.0B
contentConnectors 467.3KB 467.3KB +13.0B
controls 527.2KB 528.1KB +944.0B
dashboard 819.9KB 820.4KB +581.0B
datasetQuality 596.9KB 596.8KB -84.0B
dataViewEditor 42.5KB 42.5KB +17.0B
dataVisualizer 600.5KB 600.5KB +21.0B
discover 1.6MB 1.6MB +307.0B
enterpriseSearch 952.0KB 952.0KB +13.0B
eventAnnotationListing 207.7KB 207.8KB +11.0B
fleet 2.2MB 2.2MB +110.0B
graph 373.2KB 373.1KB -23.0B
indexLifecycleManagement 146.5KB 146.5KB +3.0B
indexManagement 739.3KB 739.3KB -51.0B
infra 1.2MB 1.2MB +78.0B
kubernetesSecurity 227.9KB 228.0KB +150.0B
lens 2.0MB 2.0MB -51.0B
maintenanceWindows 88.0KB 88.0KB +23.0B
maps 3.2MB 3.2MB +614.0B
ml 5.8MB 5.8MB +123.0B
monitoring 634.7KB 634.6KB -45.0B
observability 2.0MB 2.0MB +385.0B
profiling 360.4KB 360.5KB +21.0B
reporting 144.6KB 144.6KB +23.0B
searchInferenceEndpoints 145.7KB 145.7KB -51.0B
security 491.4KB 491.4KB -26.0B
securitySolution 11.0MB 11.0MB +494.0B
serverlessSearch 174.2KB 174.2KB +2.0B
slo 1.1MB 1.1MB +339.0B
stackConnectors 1.2MB 1.2MB -51.0B
streamsApp 1.7MB 1.7MB +341.0B
synthetics 1.0MB 1.0MB -107.0B
transform 625.2KB 625.3KB +109.0B
triggersActionsUi 1.8MB 1.8MB +444.0B
unifiedDocViewer 398.1KB 398.0KB -135.0B
uptime 490.8KB 490.8KB +1.0B
visTypeVega 2.0MB 2.0MB +150.0B
watcher 158.8KB 158.8KB +3.0B
total +5.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
kbnUiSharedDeps-npmDll 6.5MB 6.5MB +32.8KB
kbnUiSharedDeps-srcJs 4.6MB 4.6MB +96.0B
kql 13.8KB 13.7KB -52.0B
visDefaultEditor 31.5KB 31.5KB +8.0B
total +32.9KB

History

cc @mgadewoll

@mgadewoll
Copy link
Copy Markdown
Contributor Author

ℹ️ The changes made in this QA PR will be merged to main via the EUI upgrade PR for v113.0.0.

mgadewoll added a commit 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>
@mgadewoll mgadewoll closed this Feb 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:cloud-deploy Create or update a Cloud deployment ci:cloud-persist-deployment Persist cloud deployment indefinitely ci:project-deploy-elasticsearch Create an Elasticsearch Serverless project ci:project-deploy-observability Create an Observability project ci:project-deploy-security Create a Security Serverless Project ci:project-persist-deployment Persist project deployment indefinitely

Projects

None yet

Development

Successfully merging this pull request may close these issues.