Skip to content

Upgrade EUI to v106.0.0#227945

Merged
mgadewoll merged 6 commits intoelastic:mainfrom
mgadewoll:eui/v106.0.0
Jul 21, 2025
Merged

Upgrade EUI to v106.0.0#227945
mgadewoll merged 6 commits intoelastic:mainfrom
mgadewoll:eui/v106.0.0

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Jul 15, 2025

105.0.0106.0.0

Questions? Please see our Kibana upgrade FAQ.

Changes

Visual Refresh: Input updates

Important

This PR includes visual changes on input elements as part of the Visual Refresh project. These changes have been open for QA ahead of time on this draft PR.

Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778. Additionally this PR adds the following changes related to Visual Refresh input updates:

What changes visibly?

🔗 See a more detailed overview of changes here.

The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline.

before after
Screenshot 2025-06-24 at 10 11 54 Screenshot 2025-06-24 at 10 11 46
Screenshot 2025-06-24 at 10 12 47 Screenshot 2025-06-24 at 10 12 54
  1. General form layout and input element updates
    • updated text and border colors
    • visible hover states
    • updated state indicators (e.g. focus and invalid)
    • updated disabled, readonly, drag etc states
    • slightly updated paddings
    • increased icon size in compressed forms
    • added border between form control layout append/prepend elements and main form element
  2. EuiSelectableTemplateSitewide
    • added prop colorModes to handle color modes for search and popover elements separately

Which EUI components are affected?

  • EuiFieldText
  • EuiFieldNumber
  • EuiFielPassword
  • EuiFieldSearch
  • EuiTextarea
  • EuiSelect
  • EuiSuperSelect
  • EuiFilePicker
  • EuiDatePicker
  • EuiSuperDatePicker
  • EuiComboBox
  • EuiFormLabel
  • EuiFormErrorText
  • EuiFormControlLayout
  • EuiFormControlLayoutDelimited
  • EuiFormControlLayoutIcons
  • EuiSelectableTemplateSitewide

Screenshots

View comparison screenshots
LIGHT DARK
Kapture 2025-06-23 at 15 35 36 Kapture 2025-06-23 at 15 40 44
Kapture 2025-06-23 at 14 54 52 Kapture 2025-06-23 at 14 53 26
Kapture 2025-06-23 at 14 58 11 Kapture 2025-06-23 at 15 31 53
Kapture 2025-06-23 at 15 33 09 Kapture 2025-06-23 at 15 32 41
Kapture 2025-06-23 at 15 49 14 Kapture 2025-06-23 at 15 48 47

Additional changes

  • fixes missing border due to wrong token usage in filter_button_group.tsx (change)
  • updates JSON token import paths (change)
  • updates color values in tests/snapshots

Note

Color value changes in tests/snapshots are expected due to a previously missed change in the default initial colors for eui palettes to ensure Borealis colors for static usages. This surfaces specifically in tests as they are not connected to component renders.

Package updates

@elastic/eui

v106.0.0

  • Added colorModes prop to EuiSelectableTemplateSitewide to support granular control over the applied colorMode for the search and popover components (#8806)
  • Added high contrast mode specific color values for colors.vis and colors.severity tokens in light color mode (#8800)
  • Added new refresh design for input styles on form picker components: (#8778)
    • EuiComboBox
    • EuiFilePicker
    • EuiDatePicker
    • EuiSuperDatePicker
  • Updated the font size of xs size EuiButtonEmpty to 14px (#8778)
  • Added a new backgroundStyle prop to the EuiFlyoutChild component. (#8847)
  • Updates to EuiFlyoutSessionProvider (#8846)
    • Remove the onUnmount callbacks from various flyout configurations
    • Consolidate unmount behavior with a single onUnmount prop at the provider level.
    • Removed onCloseFlyout and onCloseChildFlyout from the flyout render context.
    • Fixed the canGoBack logic in packages/eui/src/components/flyout/sessions/use_eui_flyout.ts.
  • Added new refresh design for input styles and form layout components: (#8767)
    • EuiFieldText
    • EuiFieldNumber
    • EuiFieldPassword
    • EuiFieldSearch
    • EuiTextarea
    • EuiSelect
    • EuiSuperSelect
    • EuiFormControlLayout
    • EuiFormControlLayoutDelimited
    • EuiFormControlLayoutIcons
    • EuiFormLabel
    • EuiFormErrorText
  • Added semantic tokens: (#8767)
    • colors.borderInteractiveFormsHoverPlain
    • colors.borderInteractiveFormsHoverDanger
  • Added component tokens: (#8767)
    • components.forms.backgroundDropping
    • components.forms.borderFocused
    • components.forms.borderInvalid
    • components.forms.borderHovered
    • components.forms.borderInvalidHovered
    • components.forms.borderAutofilledHovered
    • components.forms.clearButtonBackground
  • Updated values for tokens: (#8767)
    • colors.textWarning
    • colors.borderStrongPrimary
    • colors.borderStrongAccent
    • colors.borderStrongAccentSecondary
    • colors.borderStrongNeutral
    • colors.borderStrongSuccess
    • colors.borderStrongWarning
    • colors.borderStrongRisk
    • colors.borderStrongDanger
    • components.forms.backgroundReadOnly

Bug fixes

  • Fixed the screen reader output in EuiProgress when a node is passed in the label prop (#8856)
  • Removed unnecessary title attributes for label and valueText in EuiProgress (#8856)
  • Fixed wrong initialization options on EUI_VIS_COLOR_STORE which resulted in partially wrong initial color values for static euiPalette{name} functions (e.g. euiPaletteForTemperature) (#8844)

Breaking changes

  • Removed custom style overrides for EuiSelectableTemplateSitewide search inside EuiHeader - Use the colorModes prop on EuiSelectableTemplateSitewide instead to control the color mode output. (#8806)

@elastic/eui-theme-borealis

v3.3.0

  • Added high contrast mode specific color values for colors.vis and colors.severity tokens in light color mode (#8800)

  • Added semantic tokens: (#8767)

    • colors.borderInteractiveFormsHoverPlain
    • colors.borderInteractiveFormsHoverDanger
  • Added component tokens: (#8767)

    • components.forms.backgroundDropping
    • components.forms.borderFocused
    • components.forms.borderInvalid
    • components.forms.borderHovered
    • components.forms.borderInvalidHovered
    • components.forms.borderAutofilledHovered
    • components.forms.clearButtonBackground
  • Updated values for tokens: (#8767)

    • colors.textWarning
    • colors.borderStrongPrimary
    • colors.borderStrongAccent
    • colors.borderStrongAccentSecondary
    • colors.borderStrongNeutral
    • colors.borderStrongSuccess
    • colors.borderStrongWarning
    • colors.borderStrongRisk
    • colors.borderStrongDanger
    • components.forms.backgroundReadOnly

    @elastic/eui-theme-common

v3.0.0

  • Added semantic tokens: (#8767)
    • colors.borderInteractiveFormsHoverPlain
    • colors.borderInteractiveFormsHoverDanger
  • Added component tokens: (#8767)
    • components.forms.backgroundDropping
    • components.forms.borderFocused
    • components.forms.borderInvalid
    • components.forms.borderHovered
    • components.forms.borderInvalidHovered
    • components.forms.borderAutofilledHovered
    • components.forms.clearButtonBackground

Breaking changes

  • Updated _EuiThemeColors type to include _EuiThemeVisColors and _EuiThemeSeverityColors as StrictColorModeSwitch instead of static colors. This requires vis and severity keys to be defined as part of LIGHT and DARK color mode objects. (#8800)

@mgadewoll mgadewoll self-assigned this Jul 15, 2025
@mgadewoll mgadewoll added review release_note:skip Skip the PR/issue when compiling release notes EUI backport:skip This PR does not require backporting EUI Visual Refresh labels Jul 15, 2025
@mgadewoll mgadewoll marked this pull request as ready for review July 15, 2025 13:35
@mgadewoll mgadewoll requested review from a team as code owners July 15, 2025 13:35
@elasticmachine
Copy link
Contributor

Pinging @elastic/eui-team (EUI)

@mgadewoll mgadewoll requested review from a team as code owners July 15, 2025 13:35
Copy link
Member

@sabarasaba sabarasaba left a comment

Choose a reason for hiding this comment

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

kibana management changes lgtm

Copy link
Contributor

@yngrdyn yngrdyn left a comment

Choose a reason for hiding this comment

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

obs-ux-logs changes LGTM

Copy link
Member

@afharo afharo left a comment

Choose a reason for hiding this comment

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

Core changes (translations) LGTM

@mgadewoll
Copy link
Contributor Author

@elasticmachine merge upstream

Copy link
Member

@maryam-saeidi maryam-saeidi left a comment

Choose a reason for hiding this comment

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

legacy_uptime/components/monitor/ml/snapshots/ml_integerations.test.tsx.snap change LGTM

Copy link
Contributor

@mbondyra mbondyra left a comment

Choose a reason for hiding this comment

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

Presentation changes look good, didn't notice anything not looking like it should! 🙌🏼

Copy link
Contributor

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

LGTM, code review + quick forms testing

steps: [
{ ...commonStep, colorIndex: 8 },
{ touched: false, type: 'colorCode' as const, colorCode: '#ebeff5' },
{ touched: false, type: 'colorCode' as const, colorCode: '#f6f9fc' },
Copy link
Contributor

Choose a reason for hiding this comment

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

This was just a test, doesn't influence the current color logic. The Complementary palette is already using the euiPaletteComplementary function so is aligned with that

Copy link
Member

@pickypg pickypg left a comment

Choose a reason for hiding this comment

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

LGT Stack Monitoring

Copy link
Member

@jgowdyelastic jgowdyelastic left a comment

Choose a reason for hiding this comment

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

ML changes LGTM

Copy link
Contributor

@paulinashakirova paulinashakirova left a comment

Choose a reason for hiding this comment

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

SharedUX code review only LGTM, thank you 😊

@mgadewoll mgadewoll enabled auto-merge (squash) July 21, 2025 07:42
@mgadewoll mgadewoll merged commit d54f539 into elastic:main Jul 21, 2025
14 checks passed
@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #78 / Rule execution logic API - Basic License/Essentials Tier @ess @serverless @serverlessQA timestamp tests alerts generated from events with a timestamp in seconds is converted correctly into the forced ISO8601 format when copying KQL query should convert the @timestamp which is epoch_seconds into the correct ISO format
  • [job] [logs] FTR Configs #92 / Serverless Common UI - Dev Tools Search Profiler Editor With a test index profiles a simple query
  • [job] [logs] FTR Configs #91 / Serverless Observability - Deployment-agnostic Synthetics API integration tests SyntheticsAPITests EditMonitorsPublicAPI - Public location "before all" hook for "adds test monitor"

Metrics [docs]

Async chunks

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

id before after diff
cloudSecurityPosture 555.5KB 555.6KB +56.0B
controls 483.2KB 484.7KB +1.5KB
dashboard 620.9KB 621.0KB +99.0B
discover 1.1MB 1.1MB +56.0B
esqlDataGrid 158.1KB 158.2KB +56.0B
maps 3.1MB 3.1MB +99.0B
ml 5.4MB 5.4MB +99.0B
securitySolution 9.8MB 9.8MB +56.0B
slo 975.3KB 975.4KB +56.0B
unifiedSearch 338.9KB 338.9KB +6.0B
visTypeVega 2.1MB 2.1MB +99.0B
total +2.1KB

Page load bundle

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

id before after diff
core 475.4KB 475.8KB +454.0B
globalSearchBar 24.0KB 24.0KB +65.0B
kbnUiSharedDeps-npmDll 6.4MB 6.5MB +24.1KB
kbnUiSharedDeps-srcJs 3.8MB 3.8MB +24.5KB
total +49.1KB

History

cc @mgadewoll

Bluefinger pushed a commit to Bluefinger/kibana that referenced this pull request Jul 22, 2025
`105.0.0` ⏩ `106.0.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

### Visual Refresh: Input updates

>[!IMPORTANT]
This PR includes visual changes on input elements as part of the Visual
Refresh project. These changes have been open for QA ahead of time on
[this draft PR](elastic#224382).

Almost all changes were done on EUI side. The changes to form elements
were done in elastic/eui#8767 and
elastic/eui#8778. Additionally this PR adds the
following changes related to Visual Refresh input updates:

- adds newly introduced prop `colorModes` on
**EuiSelectableTemplateSitewide**
(elastic/eui#8806) to ensure expected output
- updates styles for `in_table_search_control.tsx` to ensure correct
visual output
([conversation](elastic#224382 (comment)))
- updates color values in tests/snapshots

### What changes visibly?

🔗 See a more detailed overview of changes
[here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing).

The visually most noticeable change is the update of state indicators
for focus and invalid. The indicator underline was changed to a full
outline.

| before | after |
|---|---|
| ![Screenshot 2025-06-24 at 10 11
54](https://github.com/user-attachments/assets/7773bc67-8a8a-4099-93b7-5ac3d3a84515)
| ![Screenshot 2025-06-24 at 10 11
46](https://github.com/user-attachments/assets/8ceb9cfc-b3dc-4f35-b2ba-3b879cf14ba3)
|
| ![Screenshot 2025-06-24 at 10 12
47](https://github.com/user-attachments/assets/95e7a20c-af0e-4015-a2cd-a63662d9f8b8)
| ![Screenshot 2025-06-24 at 10 12
54](https://github.com/user-attachments/assets/0038c48b-853f-401e-a753-663c18806c4a)
|

1. General form layout and input element updates
    - updated text and border colors
    - visible hover states
    - updated state indicators (e.g. focus and invalid)
    - updated disabled, readonly, drag etc states
    - slightly updated paddings
    - increased icon size in compressed forms
- added border between form control layout append/prepend elements and
main form element
2. **EuiSelectableTemplateSitewide**
- added prop `colorModes` to handle color modes for search and popover
elements separately

### Which EUI components are affected?

- EuiFieldText
- EuiFieldNumber
- EuiFielPassword
- EuiFieldSearch
- EuiTextarea
- EuiSelect
- EuiSuperSelect
- EuiFilePicker
- EuiDatePicker
- EuiSuperDatePicker
- EuiComboBox
- EuiFormLabel
- EuiFormErrorText
- EuiFormControlLayout
- EuiFormControlLayoutDelimited
- EuiFormControlLayoutIcons
- EuiSelectableTemplateSitewide

## Screenshots

<details>
<summary>View comparison screenshots</summary>

| LIGHT | DARK |
|---|---|
| ![Kapture 2025-06-23 at 15 35
36](https://github.com/user-attachments/assets/a8133fc8-950d-4544-be30-2f8406054690)
| ![Kapture 2025-06-23 at 15 40
44](https://github.com/user-attachments/assets/92b323fa-c237-4089-98db-1eb893fe4bfe)
|
| ![Kapture 2025-06-23 at 14 54
52](https://github.com/user-attachments/assets/2ff4c719-13f9-43f3-b325-45d15994c379)
| ![Kapture 2025-06-23 at 14 53
26](https://github.com/user-attachments/assets/39a414b9-615b-48b1-b7f3-d6f81979b214)
|
| ![Kapture 2025-06-23 at 14 58
11](https://github.com/user-attachments/assets/66885b1d-e71a-46b7-95dc-4864779d7528)
| ![Kapture 2025-06-23 at 15 31
53](https://github.com/user-attachments/assets/6475d86d-0da6-4e49-8f94-9281ba764554)
|
| ![Kapture 2025-06-23 at 15 33
09](https://github.com/user-attachments/assets/43aa099d-348c-4e48-a276-9f76379d7beb)
| ![Kapture 2025-06-23 at 15 32
41](https://github.com/user-attachments/assets/bd20d6f0-7614-44b9-9a3d-4187b870e3cf)
|
| ![Kapture 2025-06-23 at 15 49
14](https://github.com/user-attachments/assets/7cdbc44d-7d1c-4978-9473-c886b64994d5)
| ![Kapture 2025-06-23 at 15 48
47](https://github.com/user-attachments/assets/a074b827-e786-4696-ac54-21287ef053fd)
|

</details>

## Additional changes

- fixes missing border due to wrong token usage in
`filter_button_group.tsx`
([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63))
- updates JSON token import paths
([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13))
- updates color values in tests/snapshots 

>[!NOTE]
Color value changes in tests/snapshots are expected due to a previously
missed change in the default initial colors for eui palettes to ensure
Borealis colors for static usages. This surfaces specifically in tests
as they are not connected to component renders.

## Package updates

### `@elastic/eui`

#### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0)

- Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support
granular control over the applied `colorMode` for the search and popover
components ([elastic#8806](elastic/eui#8806))
- Added high contrast mode specific color values for `colors.vis` and
`colors.severity` tokens in light color mode
([elastic#8800](elastic/eui#8800))
- Added new `refresh` design for input styles on form picker components:
([elastic#8778](elastic/eui#8778))
  - `EuiComboBox`
  - `EuiFilePicker`
  - `EuiDatePicker`
  - `EuiSuperDatePicker`
- Updated the font size of `xs` size `EuiButtonEmpty` to `14px`
([elastic#8778](elastic/eui#8778))
- Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component.
([elastic#8847](elastic/eui#8847))
- Updates to `EuiFlyoutSessionProvider`
([elastic#8846](elastic/eui#8846))
  * Remove the onUnmount callbacks from various flyout configurations
* Consolidate unmount behavior with a single onUnmount prop at the
provider level.
* Removed onCloseFlyout and onCloseChildFlyout from the flyout render
context.
* Fixed the canGoBack logic in
packages/eui/src/components/flyout/sessions/use_eui_flyout.ts.
- Added new `refresh` design for input styles and form layout
components: ([elastic#8767](elastic/eui#8767))
  - `EuiFieldText`
  - `EuiFieldNumber`
  - `EuiFieldPassword`
  - `EuiFieldSearch`
  - `EuiTextarea`
  - `EuiSelect`
  - `EuiSuperSelect`
  - `EuiFormControlLayout`
  - `EuiFormControlLayoutDelimited`
  - `EuiFormControlLayoutIcons`
  - `EuiFormLabel`
  - `EuiFormErrorText`
- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`
- Updated values for tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.textWarning`
  - `colors.borderStrongPrimary`
  - `colors.borderStrongAccent`
  - `colors.borderStrongAccentSecondary`
  - `colors.borderStrongNeutral`
  - `colors.borderStrongSuccess`
  - `colors.borderStrongWarning`
  - `colors.borderStrongRisk`
  - `colors.borderStrongDanger`
  - `components.forms.backgroundReadOnly`

**Bug fixes**

- Fixed the screen reader output in `EuiProgress` when a node is passed
in the `label` prop ([elastic#8856](elastic/eui#8856))
- Removed unnecessary `title` attributes for `label` and `valueText` in
`EuiProgress` ([elastic#8856](elastic/eui#8856))
- Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which
resulted in partially wrong initial color values for static
`euiPalette{name}` functions (e.g. `euiPaletteForTemperature`)
([elastic#8844](elastic/eui#8844))

**Breaking changes**

- Removed custom style overrides for `EuiSelectableTemplateSitewide`
search inside `EuiHeader` - Use the `colorModes` prop on
`EuiSelectableTemplateSitewide` instead to control the color mode
output. ([elastic#8806](elastic/eui#8806))

### `@elastic/eui-theme-borealis`

####
[`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1)

- Added high contrast mode specific color values for `colors.vis` and
`colors.severity` tokens in light color mode
([elastic#8800](elastic/eui#8800))
- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`
- Updated values for tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.textWarning`
  - `colors.borderStrongPrimary`
  - `colors.borderStrongAccent`
  - `colors.borderStrongAccentSecondary`
  - `colors.borderStrongNeutral`
  - `colors.borderStrongSuccess`
  - `colors.borderStrongWarning`
  - `colors.borderStrongRisk`
  - `colors.borderStrongDanger`
  - `components.forms.backgroundReadOnly`
  
  ### `@elastic/eui-theme-common`

##
[`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1)

- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`

**Breaking changes**

- Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and
`_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static
colors. This requires `vis` and `severity` keys to be defined as part of
`LIGHT` and `DARK` color mode objects.
([elastic#8800](elastic/eui#8800))
kertal pushed a commit to kertal/kibana that referenced this pull request Jul 25, 2025
`105.0.0` ⏩ `106.0.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

### Visual Refresh: Input updates

>[!IMPORTANT]
This PR includes visual changes on input elements as part of the Visual
Refresh project. These changes have been open for QA ahead of time on
[this draft PR](elastic#224382).

Almost all changes were done on EUI side. The changes to form elements
were done in elastic/eui#8767 and
elastic/eui#8778. Additionally this PR adds the
following changes related to Visual Refresh input updates:

- adds newly introduced prop `colorModes` on
**EuiSelectableTemplateSitewide**
(elastic/eui#8806) to ensure expected output
- updates styles for `in_table_search_control.tsx` to ensure correct
visual output
([conversation](elastic#224382 (comment)))
- updates color values in tests/snapshots

### What changes visibly?

🔗 See a more detailed overview of changes
[here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing).

The visually most noticeable change is the update of state indicators
for focus and invalid. The indicator underline was changed to a full
outline.

| before | after |
|---|---|
| ![Screenshot 2025-06-24 at 10 11
54](https://github.com/user-attachments/assets/7773bc67-8a8a-4099-93b7-5ac3d3a84515)
| ![Screenshot 2025-06-24 at 10 11
46](https://github.com/user-attachments/assets/8ceb9cfc-b3dc-4f35-b2ba-3b879cf14ba3)
|
| ![Screenshot 2025-06-24 at 10 12
47](https://github.com/user-attachments/assets/95e7a20c-af0e-4015-a2cd-a63662d9f8b8)
| ![Screenshot 2025-06-24 at 10 12
54](https://github.com/user-attachments/assets/0038c48b-853f-401e-a753-663c18806c4a)
|

1. General form layout and input element updates
    - updated text and border colors
    - visible hover states
    - updated state indicators (e.g. focus and invalid)
    - updated disabled, readonly, drag etc states
    - slightly updated paddings
    - increased icon size in compressed forms
- added border between form control layout append/prepend elements and
main form element
2. **EuiSelectableTemplateSitewide**
- added prop `colorModes` to handle color modes for search and popover
elements separately

### Which EUI components are affected?

- EuiFieldText
- EuiFieldNumber
- EuiFielPassword
- EuiFieldSearch
- EuiTextarea
- EuiSelect
- EuiSuperSelect
- EuiFilePicker
- EuiDatePicker
- EuiSuperDatePicker
- EuiComboBox
- EuiFormLabel
- EuiFormErrorText
- EuiFormControlLayout
- EuiFormControlLayoutDelimited
- EuiFormControlLayoutIcons
- EuiSelectableTemplateSitewide

## Screenshots

<details>
<summary>View comparison screenshots</summary>

| LIGHT | DARK |
|---|---|
| ![Kapture 2025-06-23 at 15 35
36](https://github.com/user-attachments/assets/a8133fc8-950d-4544-be30-2f8406054690)
| ![Kapture 2025-06-23 at 15 40
44](https://github.com/user-attachments/assets/92b323fa-c237-4089-98db-1eb893fe4bfe)
|
| ![Kapture 2025-06-23 at 14 54
52](https://github.com/user-attachments/assets/2ff4c719-13f9-43f3-b325-45d15994c379)
| ![Kapture 2025-06-23 at 14 53
26](https://github.com/user-attachments/assets/39a414b9-615b-48b1-b7f3-d6f81979b214)
|
| ![Kapture 2025-06-23 at 14 58
11](https://github.com/user-attachments/assets/66885b1d-e71a-46b7-95dc-4864779d7528)
| ![Kapture 2025-06-23 at 15 31
53](https://github.com/user-attachments/assets/6475d86d-0da6-4e49-8f94-9281ba764554)
|
| ![Kapture 2025-06-23 at 15 33
09](https://github.com/user-attachments/assets/43aa099d-348c-4e48-a276-9f76379d7beb)
| ![Kapture 2025-06-23 at 15 32
41](https://github.com/user-attachments/assets/bd20d6f0-7614-44b9-9a3d-4187b870e3cf)
|
| ![Kapture 2025-06-23 at 15 49
14](https://github.com/user-attachments/assets/7cdbc44d-7d1c-4978-9473-c886b64994d5)
| ![Kapture 2025-06-23 at 15 48
47](https://github.com/user-attachments/assets/a074b827-e786-4696-ac54-21287ef053fd)
|

</details>

## Additional changes

- fixes missing border due to wrong token usage in
`filter_button_group.tsx`
([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63))
- updates JSON token import paths
([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13))
- updates color values in tests/snapshots 

>[!NOTE]
Color value changes in tests/snapshots are expected due to a previously
missed change in the default initial colors for eui palettes to ensure
Borealis colors for static usages. This surfaces specifically in tests
as they are not connected to component renders.

## Package updates

### `@elastic/eui`

#### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0)

- Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support
granular control over the applied `colorMode` for the search and popover
components ([elastic#8806](elastic/eui#8806))
- Added high contrast mode specific color values for `colors.vis` and
`colors.severity` tokens in light color mode
([elastic#8800](elastic/eui#8800))
- Added new `refresh` design for input styles on form picker components:
([elastic#8778](elastic/eui#8778))
  - `EuiComboBox`
  - `EuiFilePicker`
  - `EuiDatePicker`
  - `EuiSuperDatePicker`
- Updated the font size of `xs` size `EuiButtonEmpty` to `14px`
([elastic#8778](elastic/eui#8778))
- Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component.
([elastic#8847](elastic/eui#8847))
- Updates to `EuiFlyoutSessionProvider`
([elastic#8846](elastic/eui#8846))
  * Remove the onUnmount callbacks from various flyout configurations
* Consolidate unmount behavior with a single onUnmount prop at the
provider level.
* Removed onCloseFlyout and onCloseChildFlyout from the flyout render
context.
* Fixed the canGoBack logic in
packages/eui/src/components/flyout/sessions/use_eui_flyout.ts.
- Added new `refresh` design for input styles and form layout
components: ([elastic#8767](elastic/eui#8767))
  - `EuiFieldText`
  - `EuiFieldNumber`
  - `EuiFieldPassword`
  - `EuiFieldSearch`
  - `EuiTextarea`
  - `EuiSelect`
  - `EuiSuperSelect`
  - `EuiFormControlLayout`
  - `EuiFormControlLayoutDelimited`
  - `EuiFormControlLayoutIcons`
  - `EuiFormLabel`
  - `EuiFormErrorText`
- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`
- Updated values for tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.textWarning`
  - `colors.borderStrongPrimary`
  - `colors.borderStrongAccent`
  - `colors.borderStrongAccentSecondary`
  - `colors.borderStrongNeutral`
  - `colors.borderStrongSuccess`
  - `colors.borderStrongWarning`
  - `colors.borderStrongRisk`
  - `colors.borderStrongDanger`
  - `components.forms.backgroundReadOnly`

**Bug fixes**

- Fixed the screen reader output in `EuiProgress` when a node is passed
in the `label` prop ([elastic#8856](elastic/eui#8856))
- Removed unnecessary `title` attributes for `label` and `valueText` in
`EuiProgress` ([elastic#8856](elastic/eui#8856))
- Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which
resulted in partially wrong initial color values for static
`euiPalette{name}` functions (e.g. `euiPaletteForTemperature`)
([elastic#8844](elastic/eui#8844))

**Breaking changes**

- Removed custom style overrides for `EuiSelectableTemplateSitewide`
search inside `EuiHeader` - Use the `colorModes` prop on
`EuiSelectableTemplateSitewide` instead to control the color mode
output. ([elastic#8806](elastic/eui#8806))

### `@elastic/eui-theme-borealis`

####
[`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1)

- Added high contrast mode specific color values for `colors.vis` and
`colors.severity` tokens in light color mode
([elastic#8800](elastic/eui#8800))
- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`
- Updated values for tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.textWarning`
  - `colors.borderStrongPrimary`
  - `colors.borderStrongAccent`
  - `colors.borderStrongAccentSecondary`
  - `colors.borderStrongNeutral`
  - `colors.borderStrongSuccess`
  - `colors.borderStrongWarning`
  - `colors.borderStrongRisk`
  - `colors.borderStrongDanger`
  - `components.forms.backgroundReadOnly`
  
  ### `@elastic/eui-theme-common`

##
[`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1)

- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`

**Breaking changes**

- Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and
`_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static
colors. This requires `vis` and `severity` keys to be defined as part of
`LIGHT` and `DARK` color mode objects.
([elastic#8800](elastic/eui#8800))
crespocarlos pushed a commit to crespocarlos/kibana that referenced this pull request Jul 25, 2025
`105.0.0` ⏩ `106.0.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

### Visual Refresh: Input updates

>[!IMPORTANT]
This PR includes visual changes on input elements as part of the Visual
Refresh project. These changes have been open for QA ahead of time on
[this draft PR](elastic#224382).

Almost all changes were done on EUI side. The changes to form elements
were done in elastic/eui#8767 and
elastic/eui#8778. Additionally this PR adds the
following changes related to Visual Refresh input updates:

- adds newly introduced prop `colorModes` on
**EuiSelectableTemplateSitewide**
(elastic/eui#8806) to ensure expected output
- updates styles for `in_table_search_control.tsx` to ensure correct
visual output
([conversation](elastic#224382 (comment)))
- updates color values in tests/snapshots

### What changes visibly?

🔗 See a more detailed overview of changes
[here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing).

The visually most noticeable change is the update of state indicators
for focus and invalid. The indicator underline was changed to a full
outline.

| before | after |
|---|---|
| ![Screenshot 2025-06-24 at 10 11
54](https://github.com/user-attachments/assets/7773bc67-8a8a-4099-93b7-5ac3d3a84515)
| ![Screenshot 2025-06-24 at 10 11
46](https://github.com/user-attachments/assets/8ceb9cfc-b3dc-4f35-b2ba-3b879cf14ba3)
|
| ![Screenshot 2025-06-24 at 10 12
47](https://github.com/user-attachments/assets/95e7a20c-af0e-4015-a2cd-a63662d9f8b8)
| ![Screenshot 2025-06-24 at 10 12
54](https://github.com/user-attachments/assets/0038c48b-853f-401e-a753-663c18806c4a)
|

1. General form layout and input element updates
    - updated text and border colors
    - visible hover states
    - updated state indicators (e.g. focus and invalid)
    - updated disabled, readonly, drag etc states
    - slightly updated paddings
    - increased icon size in compressed forms
- added border between form control layout append/prepend elements and
main form element
2. **EuiSelectableTemplateSitewide**
- added prop `colorModes` to handle color modes for search and popover
elements separately

### Which EUI components are affected?

- EuiFieldText
- EuiFieldNumber
- EuiFielPassword
- EuiFieldSearch
- EuiTextarea
- EuiSelect
- EuiSuperSelect
- EuiFilePicker
- EuiDatePicker
- EuiSuperDatePicker
- EuiComboBox
- EuiFormLabel
- EuiFormErrorText
- EuiFormControlLayout
- EuiFormControlLayoutDelimited
- EuiFormControlLayoutIcons
- EuiSelectableTemplateSitewide

## Screenshots

<details>
<summary>View comparison screenshots</summary>

| LIGHT | DARK |
|---|---|
| ![Kapture 2025-06-23 at 15 35
36](https://github.com/user-attachments/assets/a8133fc8-950d-4544-be30-2f8406054690)
| ![Kapture 2025-06-23 at 15 40
44](https://github.com/user-attachments/assets/92b323fa-c237-4089-98db-1eb893fe4bfe)
|
| ![Kapture 2025-06-23 at 14 54
52](https://github.com/user-attachments/assets/2ff4c719-13f9-43f3-b325-45d15994c379)
| ![Kapture 2025-06-23 at 14 53
26](https://github.com/user-attachments/assets/39a414b9-615b-48b1-b7f3-d6f81979b214)
|
| ![Kapture 2025-06-23 at 14 58
11](https://github.com/user-attachments/assets/66885b1d-e71a-46b7-95dc-4864779d7528)
| ![Kapture 2025-06-23 at 15 31
53](https://github.com/user-attachments/assets/6475d86d-0da6-4e49-8f94-9281ba764554)
|
| ![Kapture 2025-06-23 at 15 33
09](https://github.com/user-attachments/assets/43aa099d-348c-4e48-a276-9f76379d7beb)
| ![Kapture 2025-06-23 at 15 32
41](https://github.com/user-attachments/assets/bd20d6f0-7614-44b9-9a3d-4187b870e3cf)
|
| ![Kapture 2025-06-23 at 15 49
14](https://github.com/user-attachments/assets/7cdbc44d-7d1c-4978-9473-c886b64994d5)
| ![Kapture 2025-06-23 at 15 48
47](https://github.com/user-attachments/assets/a074b827-e786-4696-ac54-21287ef053fd)
|

</details>

## Additional changes

- fixes missing border due to wrong token usage in
`filter_button_group.tsx`
([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63))
- updates JSON token import paths
([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13))
- updates color values in tests/snapshots 

>[!NOTE]
Color value changes in tests/snapshots are expected due to a previously
missed change in the default initial colors for eui palettes to ensure
Borealis colors for static usages. This surfaces specifically in tests
as they are not connected to component renders.

## Package updates

### `@elastic/eui`

#### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0)

- Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support
granular control over the applied `colorMode` for the search and popover
components ([elastic#8806](elastic/eui#8806))
- Added high contrast mode specific color values for `colors.vis` and
`colors.severity` tokens in light color mode
([elastic#8800](elastic/eui#8800))
- Added new `refresh` design for input styles on form picker components:
([elastic#8778](elastic/eui#8778))
  - `EuiComboBox`
  - `EuiFilePicker`
  - `EuiDatePicker`
  - `EuiSuperDatePicker`
- Updated the font size of `xs` size `EuiButtonEmpty` to `14px`
([elastic#8778](elastic/eui#8778))
- Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component.
([elastic#8847](elastic/eui#8847))
- Updates to `EuiFlyoutSessionProvider`
([elastic#8846](elastic/eui#8846))
  * Remove the onUnmount callbacks from various flyout configurations
* Consolidate unmount behavior with a single onUnmount prop at the
provider level.
* Removed onCloseFlyout and onCloseChildFlyout from the flyout render
context.
* Fixed the canGoBack logic in
packages/eui/src/components/flyout/sessions/use_eui_flyout.ts.
- Added new `refresh` design for input styles and form layout
components: ([elastic#8767](elastic/eui#8767))
  - `EuiFieldText`
  - `EuiFieldNumber`
  - `EuiFieldPassword`
  - `EuiFieldSearch`
  - `EuiTextarea`
  - `EuiSelect`
  - `EuiSuperSelect`
  - `EuiFormControlLayout`
  - `EuiFormControlLayoutDelimited`
  - `EuiFormControlLayoutIcons`
  - `EuiFormLabel`
  - `EuiFormErrorText`
- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`
- Updated values for tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.textWarning`
  - `colors.borderStrongPrimary`
  - `colors.borderStrongAccent`
  - `colors.borderStrongAccentSecondary`
  - `colors.borderStrongNeutral`
  - `colors.borderStrongSuccess`
  - `colors.borderStrongWarning`
  - `colors.borderStrongRisk`
  - `colors.borderStrongDanger`
  - `components.forms.backgroundReadOnly`

**Bug fixes**

- Fixed the screen reader output in `EuiProgress` when a node is passed
in the `label` prop ([elastic#8856](elastic/eui#8856))
- Removed unnecessary `title` attributes for `label` and `valueText` in
`EuiProgress` ([elastic#8856](elastic/eui#8856))
- Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which
resulted in partially wrong initial color values for static
`euiPalette{name}` functions (e.g. `euiPaletteForTemperature`)
([elastic#8844](elastic/eui#8844))

**Breaking changes**

- Removed custom style overrides for `EuiSelectableTemplateSitewide`
search inside `EuiHeader` - Use the `colorModes` prop on
`EuiSelectableTemplateSitewide` instead to control the color mode
output. ([elastic#8806](elastic/eui#8806))

### `@elastic/eui-theme-borealis`

####
[`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1)

- Added high contrast mode specific color values for `colors.vis` and
`colors.severity` tokens in light color mode
([elastic#8800](elastic/eui#8800))
- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`
- Updated values for tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.textWarning`
  - `colors.borderStrongPrimary`
  - `colors.borderStrongAccent`
  - `colors.borderStrongAccentSecondary`
  - `colors.borderStrongNeutral`
  - `colors.borderStrongSuccess`
  - `colors.borderStrongWarning`
  - `colors.borderStrongRisk`
  - `colors.borderStrongDanger`
  - `components.forms.backgroundReadOnly`
  
  ### `@elastic/eui-theme-common`

##
[`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1)

- Added semantic tokens:
([elastic#8767](elastic/eui#8767))
  - `colors.borderInteractiveFormsHoverPlain`
  - `colors.borderInteractiveFormsHoverDanger`
- Added component tokens:
([elastic#8767](elastic/eui#8767))
  - `components.forms.backgroundDropping`
  - `components.forms.borderFocused`
  - `components.forms.borderInvalid`
  - `components.forms.borderHovered`
  - `components.forms.borderInvalidHovered`
  - `components.forms.borderAutofilledHovered`
  - `components.forms.clearButtonBackground`

**Breaking changes**

- Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and
`_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static
colors. This requires `vis` and `severity` keys to be defined as part of
`LIGHT` and `DARK` color mode objects.
([elastic#8800](elastic/eui#8800))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting EUI Visual Refresh EUI release_note:skip Skip the PR/issue when compiling release notes review v9.2.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.