[Visual Refresh] Add EuiFormControlButton component #9006

mgadewoll · 2025-09-11T10:37:34Z

Summary

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

This PR adds a new EUI component: EuiFormControlButton.
This component is meant to be used in form layouts (within EuiFormControlLayout) when a button element is needed that maintains the visual relation to form elements.

EuiFormControlButton combines a base set of props from EuiButtonEmpty with form related props to ensure it behaves like an input element within EuiFormControlLayout.

Changes

Adds EuiFormControlButton (component, tests, stories and documentation)
Updates EuiSuperDatePicker to use EuiFormControlButton when showPrettyDuration

Ideation

Initially, the idea was to provide EuiFormControlButton and a specific EuiFormFilterButton component which would have inherited functionality from EuiFilterButton and styling from EuiFormControlButton. EuiFormFilterButton would have been a direct replacement for the existing usage of EuiFilterButton inside EuiFormControlLayout but creating a component for a single use case seemed excessive.

Instead, the expected usage now is to use the more generic EuiFormControlButton and handle the filter badge output manually by passing the EuiBadgeNotification as content (usage, example). It's slightly less convenient but seems more reasonable for the time being. If more use cases may appear, we could reconsider adding a dedicated component.

Why are we making this change?

💅 UI consistency: Adding this component solves a design and usage requirement on consumer side. Currently consumers are using regular buttons inside form layouts which results in unwanted visual output.

Screenshots #

EuiFormControlButton

LIGHT	DARK

EuiFormControlButton within EuiFormControlLayout

LIGHT	DARK

Kibana Dashboard control

before	after

EuiSuperDatePicker

before	after

Impact to users

🟢 There are no updates required by consumers.

ℹ️ ⚠️ We want to update the existing use case on Kibana. The update was prepared here

QA

💻 The changes have additionally been added and deployed in Kibana (instance, credentials)

compare EuiFormControlButton (Storybook) and e.g. EuiFieldText (Storybook) and verify that they look alike (in terms of colors, text, border, states etc)
verify that the usage of EuiFormControlButton inside EuiFormControlLayout (Storybook) works as expected (form layout props render correctly)
review the added documentation and verify it's complete and comprehensible

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)~~
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)

JoseLuisGJ · 2025-09-12T11:05:59Z

LGTM 🚀

acstll

A few minor things (mostly questions) — personally knowing the issue, I think the solution/execution are spot on ✨

packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx

packages/website/docs/components/forms/layouts/form_control_buttons.mdx

packages/eui/src/components/form/form_control_button/form_control_button.test.tsx

mgadewoll · 2025-09-17T08:25:13Z

ℹ️ Moving this PR back to draft for now, as there have been some discussions around ongoing updates in Kibana Dashboards that might have an effect on the need/requirement. Once we know more, we can update/proceed.

mgadewoll · 2025-09-17T13:53:05Z

ℹ️ Moving this PR back to draft for now, as there have been some discussions around ongoing updates in Kibana Dashboards that might have an effect on the need/requirement. Once we know more, we can update/proceed.

ℹ️ Dashboards confirmed that our update can proceed and the adjustments needed for the new project would be done on Kibana side.

- difference is 1px due to flex centering instead of content centering

acstll

I went through full QA again and checked the code. Not approving yet because of a question regarding a possible fullWidth prop. But it's definitely 🟢

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

packages/website/docs/components/forms/layouts/form_control_buttons.mdx

acstll

🟢 Thanks for the updates! (I'm looking forward to using this 😎)

elasticmachine · 2025-10-02T11:37:05Z

💚 Build Succeeded

History

💚 Build #1406 succeeded ba522fc
💚 Build #1208 succeeded 45c37cd
💚 Build #1206 succeeded 703f629

cc @mgadewoll

elasticmachine · 2025-10-02T11:49:29Z

💚 Build Succeeded

Buildkite Build
Commit: a85332e

History

💚 Build #4830 succeeded ba522fc
💚 Build #4690 succeeded 45c37cd
💚 Build #4688 succeeded 703f629

cc @mgadewoll

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [elastic#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([elastic#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([elastic#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([elastic#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([elastic#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([elastic#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([elastic#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([elastic#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([elastic#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([elastic#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([elastic#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([elastic#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([elastic#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([elastic#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([elastic#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([elastic#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

mgadewoll self-assigned this Sep 11, 2025

mgadewoll added the visual refresh label Sep 11, 2025

mgadewoll requested a review from ek-so September 11, 2025 10:51

mgadewoll force-pushed the forms/270-input-buttons branch from 703f629 to 45c37cd Compare September 11, 2025 13:09

mgadewoll marked this pull request as ready for review September 11, 2025 17:43

mgadewoll requested a review from a team as a code owner September 11, 2025 17:43

mgadewoll requested review from JoseLuisGJ and removed request for ek-so September 12, 2025 08:12

JoseLuisGJ approved these changes Sep 12, 2025

View reviewed changes

acstll self-requested a review September 15, 2025 10:48

acstll reviewed Sep 15, 2025

View reviewed changes

mgadewoll marked this pull request as draft September 17, 2025 08:23

mgadewoll added 7 commits September 30, 2025 13:26

feat: add EuiFormControlButton

53ec205

test: add tests

1408fa9

refactor: use EuiFormControlButton in EuiSuperDatePicker

9d0004e

test(vrt): add/update reference images

33823bf

test(vrt): udpate EuiSuperDatePicker reference images

e329c43

- difference is 1px due to flex centering instead of content centering

chore: add changelog

b577324

refactor: pass value prop for button variant

ba522fc

mgadewoll force-pushed the forms/270-input-buttons branch from 45c37cd to ba522fc Compare September 30, 2025 11:34

mgadewoll requested a review from acstll September 30, 2025 11:35

mgadewoll marked this pull request as ready for review September 30, 2025 13:41

acstll reviewed Oct 2, 2025

View reviewed changes

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

packages/website/docs/components/forms/layouts/form_control_buttons.mdx Outdated Show resolved Hide resolved

mgadewoll added 3 commits October 2, 2025 13:11

refactor: remove render of empty content tag

0de5861

refactor: align width behavior with inputs, adding fullWidth prop

0b7f875

docs: copy feedback

a85332e

mgadewoll force-pushed the forms/270-input-buttons branch from bec2864 to a85332e Compare October 2, 2025 11:19

acstll approved these changes Oct 2, 2025

View reviewed changes

mgadewoll merged commit 492d256 into elastic:main Oct 2, 2025
5 checks passed

acstll mentioned this pull request Oct 6, 2025

Upgrade EUI to v106.7.0 elastic/kibana#237661

Merged

tsullivan pushed a commit that referenced this pull request Oct 15, 2025

[Visual Refresh] Add EuiFormControlButton component (#9006)

941451c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Visual Refresh] Add EuiFormControlButton component #9006

[Visual Refresh] Add EuiFormControlButton component #9006

Uh oh!

mgadewoll commented Sep 11, 2025 •

edited

Loading

Uh oh!

JoseLuisGJ commented Sep 12, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Sep 17, 2025 •

edited

Loading

Uh oh!

mgadewoll commented Sep 17, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Uh oh!

elasticmachine commented Oct 2, 2025

Uh oh!

elasticmachine commented Oct 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[Visual Refresh] Add EuiFormControlButton component #9006

[Visual Refresh] Add EuiFormControlButton component #9006

Uh oh!

Conversation

mgadewoll commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Ideation

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

JoseLuisGJ commented Sep 12, 2025

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll commented Sep 17, 2025

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 Oct 2, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Oct 2, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Sep 11, 2025 •

edited

Loading

mgadewoll commented Sep 17, 2025 •

edited

Loading