Skip to content

[EuiFormControlButton] Support isLoading state#9328

Merged
mgadewoll merged 3 commits intoelastic:feat/visual-refresh-append-prepend-updatesfrom
mgadewoll:form-control-button/support-loading-state
Jan 20, 2026
Merged

[EuiFormControlButton] Support isLoading state#9328
mgadewoll merged 3 commits intoelastic:feat/visual-refresh-append-prepend-updatesfrom
mgadewoll:form-control-button/support-loading-state

Conversation

@mgadewoll
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll commented Jan 19, 2026

Summary

Important

This PR merges into a feature branch

This PR updates EuiFormControlButton by adding support for a standalone isLoading state. The previous usage would require the EuiFormControlButton to be wrapped by EuiFormControlLayout to display a loading state.

ℹ️ To ensure expected form designs, the loading state is aligned with the output of form layouts instead of buttons.

Why are we making this change?

💪 Robustness & UI consistency: Supporting isLoading on EuiFormControlButton ensures that we can replace the usages of EuiFilterButton in the new Kibana embeddable controls where controls are rendered in different variants, with and without wrapping EuiFormControlLayout.

Screenshots #

  • EuiFormControlButton with standalone isLoading
Screenshot 2026-01-19 at 13 01 56
  • EuiFormControlButton wrapped by EuiFormControlLayout with isLoading
Screenshot 2026-01-19 at 13 02 03

Impact to users

🟢 No updates required. This is a new opt-in feature.

QA

  • review EuiFormControlButton (story) and verify the standalone isLoading state renders as expected

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 19, 2026
@mgadewoll mgadewoll force-pushed the form-control-button/support-loading-state branch from 8981a18 to a2e5589 Compare January 19, 2026 15:31
@mgadewoll mgadewoll force-pushed the form-control-button/support-loading-state branch from a2e5589 to 4911acf Compare January 19, 2026 17:19
@mgadewoll mgadewoll force-pushed the form-control-button/support-loading-state branch from 4911acf to 11d6c88 Compare January 19, 2026 17:26
@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @mgadewoll

@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review January 19, 2026 18:03
@mgadewoll mgadewoll requested a review from a team as a code owner January 19, 2026 18:03
@mgadewoll mgadewoll requested a review from acstll January 19, 2026 18:03
Copy link
Copy Markdown
Contributor

@acstll acstll left a comment

Choose a reason for hiding this comment

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

🟢 Code looks correct, the prop is working as expected, also visually.

@mgadewoll mgadewoll merged commit 418f797 into elastic:feat/visual-refresh-append-prepend-updates Jan 20, 2026
4 checks passed
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

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants