[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design update #2 #8652

mgadewoll · 2025-04-28T16:02:07Z

Summary

Implements https://github.com/elastic/eui-private/issues/280

Important

This PR merges into a feature branch.
This is to allow for a more scoped review on parts of the updates as well as providing time for visual reviews before merging to main.

This PR adds the first part to implement the new button design. (figma, figma)

This PR is the second part to the Visual Refresh button updates (part 1). It updates EuiButtonGroup and EuiFilterGroup (+ respective subcomponents).

Note

This PR updates the API of EuiFilterButton to enable a proper semantic (as well as visual for Borealis) distinction between regular and toggle button usages.
It is expected that the API change and subsequent DOM output for Amsterdam is slightly updated - while the visual styling is preserved - as the functional update is beneficial in general, not just for Borealis.

Changes

adds isToggle prop on EuiFilterButton (default value: false)
updates EuiFilterButton to use EuiButtonGroupButton under the hood as toggle button variant (regular EuiButtonEmpty stays as is for the !isToggle usage
limits usage of hasActiveFilters to highlighting filters (previously this added a sort of "selected" styling but not every filter button has filters and we already had a isSelected prop that makes more sense to use)
extends the usage for isSelected to semantically and visually select a filter button
updates styles for EuiButtonGroup and EuiFilterGroup (+ subcomponents) according to design requests
aligns border-radius for EuiNotificationBadge
updates EuiBreadcrumbs text color to ensure expected output
adds components.filterButtonBadgeBackgroundHover token
updates values for components.buttonGroupFocusColor and components.buttonGroupBackgroundDisabledSelected

Screenshots

component	light	dark
EuiButtonGroup
EuiButtonGroup (compressed)
EuiButtonGroup (selected)
EuiFilterGroup
EuiFilterGroup (selected)
EuiFilterGroup (mobile)

QA

verify that there are no unexpected regressions in Amsterdam for:
- EuiButtonGroup and EuiButtonGroupButton
- EuiFilterGroup and EuiFilterButton
- EuiSearchBar and EuiSearchBarFilters
verify that the component updates align with design

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)

- aligns expected usages semantically by providing isToggle prop to switch between semantic button output variants

- adds new prop isToggle where expected as it's opt-in

- aligns border-radius and text color bsaed on design

ek-so · 2025-04-29T08:31:57Z

Thank you @mgadewoll! Two things I noticed:

When 2 buttons stay together within the same outlined container, for the filter group they look fine, but for the regular button group the spacing between them is too big visually. I'd make it the same as for the edge of the outlined container:
When hovering over a filter group item with a grey badge, we made a badge slightly darker to remain visible (that's fine). But I would remove transition on hover for the badge entirely tbh, so that it's just 2 colors before and after, no animation. Because the animation there emphasizes the difference additionally, and we don't want to catch attention there

… on EuiFilterButton badge

- based on EuiButtonGroupButton gap update

ek-so

Thank you! Great, it's not even visible for now that the color changes on hover. Lgtm 🙌

acstll

Couldn't find anything that would need addressing in the code, I appreciate the comments in the styles! Works and looks great.

I found one small thing visually… everything else LGTM 💅

packages/eui/src/components/filter_group/filter_button.tsx

packages/eui/src/components/filter_group/filter_button.styles.ts

- caused by updated padding between filter buttons

elasticmachine · 2025-04-30T08:36:38Z

💚 Build Succeeded

History

💚 Build #201 succeeded 8f41749
💚 Build #181 succeeded ee7992d
💚 Build #179 succeeded cbefcdf

cc @mgadewoll

elasticmachine · 2025-04-30T08:52:29Z

💚 Build Succeeded

Buildkite Build
Commit: 7a0f135

History

💚 Build #3968 succeeded 8f41749
💚 Build #3955 succeeded ee7992d
💔 Build #3954 failed cbefcdf

cc @mgadewoll

acstll

LGTM 🟢

…pdate #2 (#8652)

`102.2.0` ⏩ `102.3.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 >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([#8595](elastic/eui#8595)) - Added new button background component tokens: ([#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`102.2.0` ⏩ `102.3.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 >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](elastic#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([elastic#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([elastic#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([elastic#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([elastic#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([elastic#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([elastic#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([elastic#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([elastic#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([elastic#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([elastic#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([elastic#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([elastic#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([elastic#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([elastic#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit b2d1075) # Conflicts: # src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx # src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx # src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_grouped/field_list_grouped.test.tsx # src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx # src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx # src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx # x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap # x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx # x-pack/platform/plugins/shared/lens/public/shared_components/dataview_picker/toolbar_button.tsx # x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/processor_outcome_preview.tsx

`102.2.0` ⏩ `102.3.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 >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](elastic#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([elastic#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([elastic#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([elastic#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([elastic#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([elastic#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([elastic#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([elastic#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([elastic#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([elastic#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([elastic#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([elastic#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([elastic#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([elastic#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([elastic#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit b2d1075) # Conflicts: # package.json # src/dev/license_checker/config.ts # src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx # src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts # src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx # src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap # src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx # x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx # x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap # x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx # x-pack/platform/plugins/shared/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap # x-pack/platform/plugins/shared/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap # x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx # yarn.lock

`102.2.0` ⏩ `102.3.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 >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](elastic#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([elastic#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([elastic#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([elastic#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([elastic#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([elastic#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([elastic#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([elastic#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([elastic#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([elastic#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([elastic#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([elastic#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([elastic#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([elastic#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([elastic#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

mgadewoll added 5 commits April 28, 2025 17:42

refactor(buttonGroup): update styles

203d582

refactor(filterGroup): enable isToggle FitlerButton, update styles

91f8fa5

- aligns expected usages semantically by providing isToggle prop to switch between semantic button output variants

refactor: update EuiFilterButton usages

47e0c47

- adds new prop isToggle where expected as it's opt-in

test: update snapshots

b8eb8b3

refactor(badge, breadcrumb): update styles

0784a55

- aligns border-radius and text color bsaed on design

mgadewoll added the visual refresh label Apr 28, 2025

mgadewoll self-assigned this Apr 28, 2025

mgadewoll requested review from acstll and ek-so April 28, 2025 16:30

mgadewoll marked this pull request as ready for review April 28, 2025 16:31

mgadewoll requested a review from a team as a code owner April 28, 2025 16:31

mgadewoll added 3 commits April 28, 2025 20:33

test: fix test selectors

c10b4c7

test(vrt) add/update reference images

c8974e0

chore: add changelogs

ee7992d

mgadewoll force-pushed the button/280-visual-refresh-part-2 branch from cbefcdf to ee7992d Compare April 28, 2025 18:33

mgadewoll added 2 commits April 29, 2025 14:00

refactor: reduce gap for ButtonGroup buttons, remove hover transition…

0065889

… on EuiFilterButton badge

test(vrt): update reference images

8f41749

- based on EuiButtonGroupButton gap update

ek-so approved these changes Apr 29, 2025

View reviewed changes

acstll reviewed Apr 30, 2025

View reviewed changes

packages/eui/src/components/filter_group/filter_button.tsx Show resolved Hide resolved

packages/eui/src/components/filter_group/filter_button.styles.ts Outdated Show resolved Hide resolved

mgadewoll added 3 commits April 30, 2025 10:21

refactor(filterButton): ensure constant padding between filter buttons

73e69f8

test: update snapshots

376240f

test(vrt): update reference images

7a0f135

- caused by updated padding between filter buttons

mgadewoll requested a review from acstll April 30, 2025 10:14

acstll approved these changes Apr 30, 2025

View reviewed changes

mgadewoll merged commit a2f7496 into elastic:feat/button-visual-refresh Apr 30, 2025
4 checks passed

This was referenced Apr 30, 2025

[Visual refresh][EuiDataGridToolbarControl] Add Refresh design changes #8670

Merged

[Visual Refresh] Implement button design changes #8671

Merged

mgadewoll added a commit that referenced this pull request Apr 30, 2025

[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design u…

0c18d71

…pdate #2 (#8652)

mgadewoll added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) and removed skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) labels Apr 30, 2025

mgadewoll added a commit that referenced this pull request May 5, 2025

[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design u…

dff260c

…pdate #2 (#8652)

mgadewoll added a commit that referenced this pull request May 30, 2025

[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design u…

904d66a

…pdate #2 (#8652)

mgadewoll mentioned this pull request Jun 2, 2025

Upgrade EUI to v102.3.0 elastic/kibana#222149

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design update #2 #8652

[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design update #2 #8652

Uh oh!

mgadewoll commented Apr 28, 2025 •

edited

Loading

Uh oh!

ek-so commented Apr 29, 2025

Uh oh!

ek-so left a comment

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Apr 30, 2025

Uh oh!

elasticmachine commented Apr 30, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design update #2 #8652

[Visual Refresh][EuiButtonGroup, EuiFilterGroup] Add Refresh design update #2 #8652

Uh oh!

Conversation

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

Uh oh!

Summary

Changes

QA

General checklist

Uh oh!

ek-so commented Apr 29, 2025

Uh oh!

ek-so left a comment

Choose a reason for hiding this comment

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Apr 30, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Apr 30, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Apr 28, 2025 •

edited

Loading