feat(eui): align icons to the top #8610

weronikaolejniczak · 2025-04-22T13:54:57Z

Summary

This PR makes all icons in the form controls aligned to the top.

@acstll suggested a solution that works perfectly:

instead of calculating the top padding for the icons, we keep the icon wrapper on top and give it a max-block-size with the same size as the input, and then let flex do the actual centering, let me know what you think

We have to differentiate compressed / uncompressed, otherwise the implementation is much leaner.

Old PR for context: #8590

Additional information

Component overrides

Targeting .euiFormControlLayoutIcons class:

packages/eui/src/components/date_picker/date_picker_range.styles.ts:79
packages/eui/src/components/date_picker/date_picker.styles.ts:42
packages/eui/src/components/form/text_area/text_area.styles.ts:88
packages/eui-theme-common/src/global_styling/mixins/_form.scss:211

Component impact

Color Picker - eui/packages/eui/src/components/color_picker/color_picker.tsx
Combo Box Input - eui/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
Date Picker - eui/packages/eui/src/components/date_picker/date_picker.tsx
Date Picker Range - eui/packages/eui/src/components/date_picker/date_picker_range.styles.ts
Super Date Picker - eui/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
Filed Number - eui/packages/eui/src/components/form/field_number/field_number.tsx
Field Password - eui/packages/eui/src/components/form/field_password/field_password.tsx
Field Search - eui/packages/eui/src/components/form/field_search/field_search.tsx
Field Text - eui/packages/eui/src/components/form/field_text/field_text.tsx
Form Control Layout Delimited - eui/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
Select - eui/packages/eui/src/components/form/select/select.tsx
Super Select Control - eui/packages/eui/src/components/form/super_select/super_select_control.tsx
Text Area - eui/packages/eui/src/components/form/text_area/text_area.tsx

QA

Specific checklist

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)

elasticmachine · 2025-04-22T14:23:07Z

💚 Build Succeeded

cc @weronikaolejniczak

elasticmachine · 2025-04-22T14:40:28Z

💚 Build Succeeded

Buildkite Build
Commit: 56a5e06

History

💔 Build #3902 failed 1d8f42f

cc @weronikaolejniczak

acstll

LGTM 🟢 — thank you!

acstll · 2025-04-23T08:37:28Z

Note to self to remove the workaround in Kibana (elastic/kibana#217132)

`101.4.0` ⏩ `102.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 - Update severity colors 4c852f1 - Types fix regarding `euiTheme.colors` ddc8d2d, ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

`101.4.0` ⏩ `102.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 - Update severity colors elastic@4c852f1 - Types fix regarding `euiTheme.colors` elastic@ddc8d2d, elastic@ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([elastic#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([elastic#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([elastic#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([elastic#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([elastic#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit ec008b0)

`101.4.0` ⏩ `102.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) >[!IMPORTANT] This PR is a direct sibling to this [upgrade PR](#219482) to `main`. The difference is that it adds a standalone EUI package with the previous "Amsterdam" theme. Apart from the theme difference, **there are no further changes added**. ## Changes - ~~Update severity colors 4c852f13f98c33e83484540a1192f4e65a8cce05~~ (not needed in `8.19`) - Types fix regarding `euiTheme.colors` e15b9cd ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14`

`101.4.0` ⏩ `102.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 - Update severity colors 4c852f1 - Types fix regarding `euiTheme.colors` ddc8d2d, ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

`101.4.0` ⏩ `102.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 - Update severity colors elastic@4c852f1 - Types fix regarding `euiTheme.colors` elastic@ddc8d2d, elastic@ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([elastic#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([elastic#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([elastic#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([elastic#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([elastic#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

weronikaolejniczak added 2 commits April 22, 2025 15:46

chore(eui): add a VRT test for combobox many options

ba669a6

feat(eui): align icons to the top

1d8f42f

weronikaolejniczak changed the title ~~Fix/combobox icon position~~ feat(eui): align icons to the top Apr 22, 2025

weronikaolejniczak self-assigned this Apr 22, 2025

weronikaolejniczak marked this pull request as ready for review April 22, 2025 13:59

weronikaolejniczak requested a review from a team as a code owner April 22, 2025 13:59

weronikaolejniczak requested a review from acstll April 22, 2025 14:01

weronikaolejniczak force-pushed the fix/combobox-icon-position branch from 2c8a3db to 2b9064c Compare April 22, 2025 14:04

chore(eui): add changelog

c382e87

weronikaolejniczak force-pushed the fix/combobox-icon-position branch from 2b9064c to c382e87 Compare April 22, 2025 14:08

Merge branch 'main' into fix/combobox-icon-position

56a5e06

acstll approved these changes Apr 23, 2025

View reviewed changes

weronikaolejniczak merged commit 12490d7 into elastic:main Apr 23, 2025
5 checks passed

This was referenced Apr 28, 2025

Upgrade EUI to v102.0.0 elastic/kibana#219421

Closed

Update EUI to v102.0.0 elastic/kibana#219482

Merged

[8.19] Upgrade EUI to v102.0.0 elastic/kibana#219532

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(eui): align icons to the top #8610

feat(eui): align icons to the top #8610

Uh oh!

weronikaolejniczak commented Apr 22, 2025 •

edited by acstll

Loading

Uh oh!

elasticmachine commented Apr 22, 2025

Uh oh!

elasticmachine commented Apr 22, 2025

Uh oh!

acstll left a comment

Uh oh!

acstll commented Apr 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(eui): align icons to the top #8610

feat(eui): align icons to the top #8610

Uh oh!

Conversation

weronikaolejniczak commented Apr 22, 2025 • edited by acstll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Additional information

QA

Specific checklist

General checklist

Uh oh!

elasticmachine commented Apr 22, 2025

💚 Build Succeeded

Uh oh!

elasticmachine commented Apr 22, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

acstll commented Apr 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Apr 22, 2025 •

edited by acstll

Loading