[Visual Refresh][EuiButton] Add Refresh design update #1 by mgadewoll · Pull Request #8595 · elastic/eui

mgadewoll · 2025-04-15T09:01:45Z

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)

Changes

adds theme flag buttonVariant to enable toggling between refresh and classic design variants
updates EuiProvider to support rebuilding the theme on theme flags change
adds utils isEuiThemeRefreshVariant and useEuiThemeRefreshVariant to enable in-code feature flagging
adds more button specific component tokens
updates backgroundLightText token value from shade130 to shade120
adds and updates transparent semantic color tokens (used for button hovers)
updates common (shared) button styles in _button.ts
- updated min-width
- updated hover and active states
- removed animation on focus
- updated color/border for base text button

Note

Focus style changes are not included. Those will be handled as standalone update (https://github.com/elastic/eui-private/issues/267).

Note

This PR only updates base button components. Related components like EuiButtonGroup or EuiFilterGroup etc will be updated in a separate PR.

Screenshots

ℹ️ Left: new; Right: previous

base EuiButton (primary)

Screen.Recording.2025-04-15.at.10.22.00.mov

base EuiButton (text)

Screen.Recording.2025-04-15.at.10.22.24.mov

filled EuiButton (primary)

Screen.Recording.2025-04-15.at.10.22.57.mov

EuiButtonEmpty

Screen.Recording.2025-04-15.at.10.24.27.mov

flush EuiButtonEmpty

Screen.Recording.2025-04-15.at.10.28.22.mov

empty EuiButtonIcon

Screen.Recording.2025-04-15.at.10.27.19.mov

base EuiButtonIcon

Screen.Recording.2025-04-15.at.10.27.44.mov

filled EuiButtonIcon

Screen.Recording.2025-04-15.at.10.27.33.mov

disabled

QA

ℹ️ Provided testing stories that display "refresh" and "classic" design variants next to each other:
EuiButton
EuiButtonEmpty
EuiButtonIcon

verify there is no visual regression for buttons in Amsterdam theme between staging and production
verify the refresh variant buttons look according to design specs
~~(ℹ️ provided test stories have both "refresh" and "classic" variants displayed for easier review)~~

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)

kibanamachine · 2025-04-15T13:25:57Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8595/
Storybook: https://eui.elastic.co/pr_8595/storybook
New docs: https://eui.elastic.co/pr_8595/new-docs

acstll

Only 1 nit-picky comment.

Other than everything looks as expected. I also tested locally with Amsterdam (I think there's no way to switch in Storybook?). Amazing work, thank you for the patience!

packages/eui/src/components/button/button_display/_button_display.styles.ts

weronikaolejniczak · 2025-04-28T09:52:40Z

@acstll not sure if that's what you mean but there's a toolbar theme switcher in Storybook:

acstll · 2025-04-28T09:54:22Z

@acstll not sure if that's what you mean but there's a toolbar theme switcher in Storybook:

that is exactly it, right in my face! 🤓

required after elastic#8601

mgadewoll · 2025-04-28T12:29:14Z

@ek-so @acstll I had to rebase the base feature branch and this PR branch.
This means that this PR has an additional commit now to align tokens for the new neutral and risk colors introduced in #8601.

elasticmachine · 2025-04-28T12:31:45Z

💚 Build Succeeded

History

💚 Build #172 succeeded 9c9418c
💚 Build #69 succeeded 075cc28
💚 Build #66 succeeded e213698
💚 Build #65 succeeded 452a7b0

cc @mgadewoll

elasticmachine · 2025-04-28T12:51:03Z

💚 Build Succeeded

Buildkite Build
Commit: 156fca7

History

💔 Build #3948 failed 9c9418c
💔 Build #3947 failed 9c9418c
💚 Build #3875 succeeded 075cc28
💚 Build #3872 succeeded e213698

cc @mgadewoll

JasonStoltz · 2025-04-28T13:23:47Z

@mgadewoll

Just double checking since I didn't see any documentation updates -- are there any new variants or API changes here that are important to highlight in a docs example?

adds theme flag buttonVariant to enable toggling between refresh and classic design variants

I assume this will be removed when we deprecate Amsterdam as a theme. Do we have a Meta issue for Amsterdam Deprecation where we can capture related tasks like this?

mgadewoll · 2025-04-28T13:30:06Z

Just double checking since I didn't see any documentation updates -- are there any new variants or API changes here that are important to highlight in a docs example?

@JasonStoltz No, there are no API changes in this PR. Everything is styling only.
The flags key on the theme is a migration API for us, nothing to be used long term.

I assume this will be removed when we deprecate Amsterdam as a theme. Do we have a Meta issue for Amsterdam Deprecation where we can capture related tasks like this?

Not so far, but I can add one 👍
Edit: We added this Meta issue for tracking: #8651

acstll · 2025-04-28T14:09:15Z

@ek-so @acstll I had to rebase the base feature branch and this PR branch. This means that this PR has an additional commit now to align tokens for the new neutral and risk colors introduced in #8601.

tested locally! 🟢

`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 self-assigned this Apr 15, 2025

mgadewoll force-pushed the button/280-visual-refresh-part-1 branch from 452a7b0 to e213698 Compare April 15, 2025 09:29

mgadewoll requested review from acstll and ek-so April 15, 2025 09:33

mgadewoll changed the title ~~[Visual Refresh][EuiButton] Add Refresh design update~~ [Visual Refresh][EuiButton] Add Refresh design update #1 Apr 15, 2025

mgadewoll marked this pull request as ready for review April 15, 2025 10:27

mgadewoll requested a review from a team as a code owner April 15, 2025 10:27

mgadewoll force-pushed the button/280-visual-refresh-part-1 branch from e213698 to 075cc28 Compare April 15, 2025 12:59

mgadewoll marked this pull request as draft April 22, 2025 09:31

mgadewoll marked this pull request as ready for review April 22, 2025 09:36

ek-so approved these changes Apr 22, 2025

View reviewed changes

acstll approved these changes Apr 28, 2025

View reviewed changes

packages/eui/src/components/button/button_display/_button_display.styles.ts Outdated Show resolved Hide resolved

mgadewoll force-pushed the button/280-visual-refresh-part-1 branch from 06c5771 to 9c9418c Compare April 28, 2025 10:06

mgadewoll added 10 commits April 28, 2025 13:03

feat: add support for flags.buttonVariant theme key

e12b028

feat: add new button tokens, update semantic tokens

6c7cba1

refactor(button) add refresh styles

9b19694

refactor(button-icon): ensure correct hover styles

31e8396

chore: cleanup unexpected accentSecondary usage for badges

58be634

test: update snapshots

85277d9

test(vrt) update reference images

1ae11c9

chore: add changelogs

d6c66e9

style: update conditional style syntax

d97023f

feat: add additional neutral and risk tokens

156fca7

required after elastic#8601

mgadewoll force-pushed the button/280-visual-refresh-part-1 branch from 9c9418c to 156fca7 Compare April 28, 2025 12:18

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

This was referenced Apr 28, 2025

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

Merged

[Visual Refresh] Implement button design changes #8671

Merged

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

[Visual Refresh][EuiButton] Add Refresh design update #1 (#8595)

8e2bbd4

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

[Visual Refresh][EuiButton] Add Refresh design update #1 (#8595)

e28a38f

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

[Visual Refresh][EuiButton] Add Refresh design update #1 (#8595)

b436d9e

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][EuiButton] Add Refresh design update #1#8595

[Visual Refresh][EuiButton] Add Refresh design update #1#8595
mgadewoll merged 10 commits intoelastic:feat/button-visual-refreshfrom
mgadewoll:button/280-visual-refresh-part-1

mgadewoll commented Apr 15, 2025 •

edited

Loading

Uh oh!

kibanamachine commented Apr 15, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

weronikaolejniczak commented Apr 28, 2025

Uh oh!

acstll commented Apr 28, 2025

Uh oh!

mgadewoll commented Apr 28, 2025

Uh oh!

elasticmachine commented Apr 28, 2025

Uh oh!

elasticmachine commented Apr 28, 2025

Uh oh!

JasonStoltz commented Apr 28, 2025

Uh oh!

mgadewoll commented Apr 28, 2025 •

edited

Loading

Uh oh!

acstll commented Apr 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

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

Uh oh!

Summary

Changes

QA

General checklist

Uh oh!

kibanamachine commented Apr 15, 2025

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

weronikaolejniczak commented Apr 28, 2025

Uh oh!

acstll commented Apr 28, 2025

Uh oh!

mgadewoll commented Apr 28, 2025

Uh oh!

elasticmachine commented Apr 28, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Apr 28, 2025

💚 Build Succeeded

History

Uh oh!

JasonStoltz commented Apr 28, 2025

Uh oh!

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

Uh oh!

Uh oh!

acstll commented Apr 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

mgadewoll commented Apr 15, 2025 •

edited

Loading

mgadewoll commented Apr 28, 2025 •

edited

Loading