elastic · mgadewoll · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/...eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png b/...eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png
diff --git a/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
diff --git a/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png
diff --git a/.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
diff --git a/...loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/...loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png
diff --git a/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
diff --git a/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/...e_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png
diff --git a/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png
diff --git a/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/...i/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png
diff --git a/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
diff --git a/...eference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/...eference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
diff --git a/.../chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/.../chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
diff --git a/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/...reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
diff --git a/...erence/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/...erence/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
diff --git a/...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png
diff --git a/...op_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/...op_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png
diff --git a/...ontent_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/...ontent_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/...sktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png
diff --git a/...hrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/...hrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png
diff --git a/...ome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/...ome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png
diff --git a/...me_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/...me_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png
diff --git a/...ular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/...ular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png
diff --git a/..._desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/..._desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
diff --git a/...e_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/...e_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
diff --git a/...desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/...desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png
diff --git a/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/...sktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
diff --git a/...hrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/...hrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png
diff --git a/...op_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/...op_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
diff --git a/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
diff --git a/.../eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/.../eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png
diff --git a/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
diff --git a/...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png
diff --git a/...i/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/...i/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
diff --git a/....loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/....loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png
diff --git a/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
diff --git a/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/...me_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png
diff --git a/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png
diff --git a/...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png b/...ui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png
diff --git a/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
diff --git a/...reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/...reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
diff --git a/...e/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/...e/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
diff --git a/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/.../reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
diff --git a/...ference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/...ference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
diff --git a/...rence/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/...rence/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png
diff --git a/...le_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/...le_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png
diff --git a/...obile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/...obile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png
diff --git a/...ontent_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/...ontent_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png
diff --git a/...obile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/...obile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png
diff --git a/...chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/...chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png
diff --git a/...rome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/...rome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png
diff --git a/...ome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/...ome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png
diff --git a/...ular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/...ular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png
diff --git a/...e_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/...e_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
diff --git a/...me_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/...me_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
diff --git a/..._mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/..._mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
diff --git a/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png
diff --git a/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/...obile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
diff --git a/...le_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/...le_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
diff --git a/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/...bular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
diff --git a/packages/eui/changelogs/upcoming/8670.md b/packages/eui/changelogs/upcoming/8670.md
@@ -0,0 +1,2 @@
+- Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast
+
diff --git a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -475,7 +475,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -908,7 +908,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -1541,7 +1541,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -1973,7 +1973,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >

diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
       data-test-subj="dataGridColumnSelectorPopover"
     >
       <button
-        class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
+        class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles"
         data-test-subj="dataGridColumnSelectorButton"
         type="button"
       >

diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users
       data-test-subj="dataGridColumnSortingPopover"
     >
       <button
-        class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
+        class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles"
         data-test-subj="dataGridColumnSortingButton"
         type="button"
       >

diff --git a/...ui/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap b/...ui/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`euiDataGridToolbarControl passes props to the underlying EuiButtonEmpty 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonEmpty euiDataGridToolbarControl testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles-euiTestCss"
+  class="euiButtonEmpty euiDataGridToolbarControl testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles-euiTestCss"
   data-test-subj="test subject string"
   type="button"
 >
@@ -25,7 +25,7 @@ exports[`euiDataGridToolbarControl passes props to the underlying EuiButtonEmpty
 
 exports[`euiDataGridToolbarControl renders with a badge 1`] = `
 <button
-  class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-underlineStyles"
+  class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-interactiveStyles"
   type="button"
 >
   <span

diff --git a/packages/eui/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/packages/eui/src/components/datagrid/controls/data_grid_toolbar_control.tsx
@@ -9,7 +9,9 @@
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { css } from '@emotion/react';
+import { UseEuiTheme } from '@elastic/eui-theme-common';
 
+import { useEuiTheme, useEuiThemeRefreshVariant } from '../../../services';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button';
 import { EuiNotificationBadge } from '../../badge';
 import { useEuiI18n } from '../../i18n';
@@ -21,8 +23,15 @@ export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & {
 export const EuiDataGridToolbarControl: FunctionComponent<
   EuiDataGridToolbarControlProps
 > = ({ children, className, badgeContent, textProps, ...rest }) => {
+  const euiThemeContext = useEuiTheme();
+  const isRefreshVariant = useEuiThemeRefreshVariant('buttonVariant');
   const classes = classNames('euiDataGridToolbarControl', className);
 
+  const cssStyles = isRefreshVariant
+    ? // passes euiThemeContext here instead via `css` to ensure legacy Enzyme tests work
+      interactiveStyles(euiThemeContext)
+    : underlineStyles;
+
   const badgeAriaLabel = useEuiI18n(
     'euiDataGridToolbarControl.badgeAriaLabel',
     'Active: {count}',
@@ -40,7 +49,7 @@ export const EuiDataGridToolbarControl: FunctionComponent<
       size="xs"
       color="text"
       textProps={false}
-      css={underlineStyles}
+      css={cssStyles}
       {...rest}
     >
       <span
@@ -85,6 +94,16 @@ const underlineStyles = css`
     }
   }
 `;
+
+const interactiveStyles = ({ euiTheme }: UseEuiTheme) => css`
+  &:focus,
+  &:hover:not(:disabled) {
+    .euiDataGridToolbarControl__badge {
+      background-color: ${euiTheme.components.filterButtonBadgeBackgroundHover};
+    }
+  }
+`;
+
 const badgeStyles = css`
   cursor: inherit;
 `;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		- Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast