[DO NOT MERGE][Visual Refresh] Button updates by mgadewoll · Pull Request #220093 · elastic/kibana

mgadewoll · 2025-05-05T14:03:46Z

Summary

Important

This PR is for QA purposes only (until further notice). This PR will not be merged. Instead the changes will be added to Kibana as part of this weeks EUI upgrade PR.

Changes

EUI changes: Adds all Visual Refresh related EUI changes on button components:

EuiButton
EuiButtonEmpty
EuiButtonIcon
EuiButtonGroup
EuiFilterGroup/EuiFilterButton

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.

Examples of new toggle filter buttons

before	after

Custom styling updates: Updates custom styling overrides on EUI button components in selected high-visibility places 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)

Updated custom button styling

Solution/Area	After
Discover(classic)
Discover(ES/QL)
Dashboard(Create Visualization)
Maps: Aligned map toolbar button hover

elasticmachine · 2025-05-05T14:04:05Z

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

Click to trigger kibana-pull-request for this PR!
Click to trigger kibana-deploy-project-from-pr for this PR!
Click to trigger kibana-deploy-cloud-from-pr for this PR!

github-actions · 2025-05-05T14:05:14Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

kibanamachine · 2025-05-06T11:15:49Z

Project deployed, see credentials at: https://buildkite.com/elastic/kibana-deploy-project-from-pr/builds/452

jeramysoucy · 2025-05-20T10:29:40Z

src/platform/packages/shared/kbn-user-profile-components/src/user_profiles_selectable.tsx

-                        onClick={() => onChange?.([])}
-                        style={{ height: '1rem' }}
-                      >
+                      <EuiButtonEmpty size="xs" flush="right" onClick={() => onChange?.([])}>


Removed '1rem' height - no difference in render.

jeramysoucy · 2025-05-20T10:30:42Z

...latform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx

          },
        })}
-        style={{
+        css={{


Replaced style with preferred css property. minWidth is required to properly render the feature access level options (all, read, none) in the feature table.

jeramysoucy · 2025-05-20T10:31:50Z

x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx

      })}
      value={value}
-      style={{
+      css={{


Replaced style with preferred css property. Removed backgroundColor: 'transparent' - no difference in render.

jeramysoucy · 2025-05-20T10:32:54Z

x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx

                    size="xs"
                    flush="right"
-                    style={{ height: euiTheme.base }}
+                    css={{ height: euiTheme.base }}


Replaced style with prefered css property. height: euiTheme.base required to properly render the color picker without misaligning the row.

jeramysoucy · 2025-05-20T10:33:55Z

x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx

+      css={
+        fullWidth
+          ? { width: `100%` }
+          : css`
+              margin: ${euiTheme.size.m};
+              width: calc(100% - ${euiTheme.size.m} * 2);
+            `
+      }


Removed the redundant style property and changed component property to pass explicit "fullWidth" flag instead of full style.

jeramysoucy · 2025-05-20T10:34:39Z

x-pack/platform/plugins/shared/spaces/public/space_list/space_list_internal.tsx

-          onClick={() => setIsExpanded(false)}
-          style={{ alignSelf: 'center' }}
-        >
+        <EuiButtonEmpty size="xs" onClick={() => setIsExpanded(false)}>


Removed style - no difference in render.

jeramysoucy · 2025-05-20T10:34:45Z

x-pack/platform/plugins/shared/spaces/public/space_list/space_list_internal.tsx

-          onClick={() => setIsExpanded(true)}
-          style={{ alignSelf: 'center' }}
-        >
+        <EuiButtonEmpty size="xs" onClick={() => setIsExpanded(true)}>


Removed style - no difference in render.

jeramysoucy · 2025-05-20T10:37:05Z

@mgadewoll I addressed the Kibana Security custom button style overrides in 9f178b4.

cc @SiddharthMantri for review

mgadewoll · 2025-05-27T09:53:19Z

@mgadewoll I addressed the Kibana Security custom button style overrides in 9f178b4.

@jeramysoucy Awesome, thanks a lot for checking and the updates! 🎉

- adds isToggle and Selected for toggle buttons; adds missing isSelected on expander buttons

…tton updates

- reverts previous changes from primary to text color - updates border styles from box-shadow to border

jughosta · 2025-05-30T09:56:24Z

src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx

unrelated file

@l-suarez The "Try ES|QL" button got changed a little. Instead of light grey, it's transparent. There might be not enough contrast now. Wdyt?

@l-suarez Also, the "+" button for adding filters might be too dark now and steals the attention from other elements on the page.

Also, the "+" button for adding filters might be too dark now and steals the attention from other elements on the page.

@jughosta There were discussion around this specific button group and for now the decision is that the styles were reverted to be blue again (commit) I just need to get the CI back up to deploy the changes 😄

Nice! Thanks, @mgadewoll!

kibanamachine · 2025-05-30T15:32:08Z

PR Cloud deployment started at: https://buildkite.com/elastic/kibana-deploy-cloud-from-pr/builds/220

elasticmachine · 2025-05-30T18:18:49Z

💔 Build Failed

Buildkite Build
Commit: 434e333
Storybooks Preview
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-220093-434e3336150d
Security Deployment
Elasticsearch Serverless Deployment

Failed CI Steps

Test Failures

[job] [logs] Scout: [ platform / streams_app ] plugin / serverless-oblt - Classic Streams - full flow
[job] [logs] Scout: [ platform / streams_app ] plugin / serverless-oblt - Wired Streams - full flow
[job] [logs] Scout: [ platform / streams_app ] plugin / stateful - Classic Streams - full flow
[job] [logs] Scout: [ platform / streams_app ] plugin / stateful - Wired Streams - full flow

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`controls`	379	380	+1
`dashboard`	681	682	+1
`maps`	1277	1278	+1
`ml`	2403	2404	+1
`visTypeVega`	578	579	+1
total			+5

Async chunks

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

id	before	after	diff
`alerting`	91.2KB	91.2KB	+13.0B
`canvas`	1.1MB	1.1MB	+172.0B
`cases`	1.3MB	1.3MB	+96.0B
`cloudSecurityPosture`	540.8KB	540.3KB	-524.0B
`controls`	479.1KB	483.8KB	+4.7KB
`dashboard`	613.5KB	618.2KB	+4.7KB
`datasetQuality`	254.8KB	254.9KB	+144.0B
`dataVisualizer`	670.8KB	670.8KB	+13.0B
`discover`	1.1MB	1.1MB	-129.0B
`esql`	247.4KB	247.4KB	+13.0B
`esqlDataGrid`	159.4KB	158.8KB	-598.0B
`eventAnnotationListing`	204.1KB	204.2KB	+32.0B
`exploratoryView`	141.0KB	141.0KB	+26.0B
`filesManagement`	102.9KB	102.9KB	+32.0B
`fleet`	1.7MB	1.7MB	+32.0B
`graph`	370.2KB	370.2KB	+32.0B
`indexManagement`	684.3KB	684.3KB	+53.0B
`lens`	1.5MB	1.5MB	+479.0B
`maps`	3.0MB	3.0MB	+4.6KB
`ml`	5.4MB	5.4MB	+4.2KB
`observabilityShared`	37.6KB	37.6KB	+16.0B
`presentationUtil`	66.8KB	67.2KB	+423.0B
`security`	516.2KB	516.6KB	+325.0B
`securitySolution`	9.2MB	9.2MB	+232.0B
`serverlessSearch`	347.1KB	347.0KB	-53.0B
`slo`	985.6KB	985.4KB	-129.0B
`spaces`	210.1KB	210.1KB	+13.0B
`streamsApp`	548.1KB	548.1KB	+32.0B
`synthetics`	1.0MB	1.0MB	+34.0B
`triggersActionsUi`	1.5MB	1.5MB	+169.0B
`unifiedDocViewer`	219.8KB	220.1KB	+303.0B
`unifiedSearch`	352.4KB	352.8KB	+365.0B
`uptime`	490.8KB	490.9KB	+62.0B
`visTypeVega`	2.1MB	2.1MB	+4.2KB
`visualizations`	372.0KB	372.0KB	+32.0B
total			+24.0KB

Page load bundle

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

id	before	after	diff
`kbnUiSharedDeps-npmDll`	6.3MB	6.3MB	+28.1KB

History

cc @mgadewoll

mgadewoll · 2025-06-02T11:16:20Z

ℹ️ This PR will be added to Kibana as part of this weeks EUI upgrade PR.

`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

mgadewoll · 2025-06-09T11:18:12Z

The changes of this PR were merged as part of this EUI upgrade PR.

`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 May 5, 2025

mgadewoll force-pushed the eui/visual-refresh-button-updates branch 4 times, most recently from ae36761 to 7b5ca85 Compare May 6, 2025 11:14

jeramysoucy self-requested a review May 8, 2025 13:21

albertoblaz mentioned this pull request May 8, 2025

Review style overrides in EUI button instances within Security solution #220516

Closed

jeramysoucy reviewed May 20, 2025

View reviewed changes

SoniaSanzV mentioned this pull request May 20, 2025

[Index Management] Fix style in Filter List Button #220645

Closed

MiriamAparicio mentioned this pull request May 26, 2025

[ObsUX] Remove background for dropdown button, visual refresh bug #221366

Merged

mgadewoll added 3 commits May 30, 2025 10:55

chore: upgrade eui packages

a436880

refactor: update filterButton usages

3e59697

- adds isToggle and Selected for toggle buttons; adds missing isSelected on expander buttons

refactor: update custom button styles to align with Visual Refresh bu…

39351e5

…tton updates

mgadewoll and others added 4 commits May 30, 2025 10:56

test: update tests and snapshots

0f5884b

test: update selector

401f503

Updates Kibana security custom style components

b9b759a

refactor: update unified search filter button group styles

d3fe6ca

- reverts previous changes from primary to text color - updates border styles from box-shadow to border

mgadewoll force-pushed the eui/visual-refresh-button-updates branch from 9f178b4 to d3fe6ca Compare May 30, 2025 09:11

jughosta reviewed May 30, 2025

View reviewed changes

chore: update eui package versions

dce2cff

mgadewoll force-pushed the eui/visual-refresh-button-updates branch from a553e49 to dce2cff Compare May 30, 2025 12:37

Merge branch 'main' into eui/visual-refresh-button-updates

434e333

mgadewoll mentioned this pull request Jun 2, 2025

Upgrade EUI to v102.3.0 #222149

Merged

mgadewoll closed this Jun 9, 2025

Conversation

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

Uh oh!

Summary

Changes

Uh oh!

elasticmachine commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 5, 2025

🤖 GitHub comments

Uh oh!

kibanamachine commented May 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeramysoucy May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeramysoucy commented May 20, 2025

Uh oh!

mgadewoll commented May 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jughosta May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented May 30, 2025

Uh oh!

elasticmachine commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💔 Build Failed

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

mgadewoll commented Jun 2, 2025

Uh oh!

mgadewoll commented Jun 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mgadewoll commented May 5, 2025 •

edited

Loading

elasticmachine commented May 5, 2025 •

edited

Loading

jeramysoucy May 20, 2025 •

edited

Loading

jughosta May 30, 2025 •

edited

Loading

mgadewoll May 30, 2025 •

edited

Loading

elasticmachine commented May 30, 2025 •

edited

Loading