[Emotion] Convert final EuiDataGrid cell styles (Part 5)

packages/eui/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap

@@ -29,19 +29,18 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
   >
     <button
       aria-label="Press the Enter key to view this column's actions"
-      class="euiDataGridHeaderCell__button css-wvewty"
+      class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text"
       data-euigrid-tab-managed="true"
       data-test-subj="dataGridHeaderCellActionButton-someColumn"
       tabindex="-1"
+      type="button"
     >
-      <div
-        class="euiDataGridHeaderCell__icon"
-      >
-        <span
-          color="text"
-          data-euiicon-type="boxesVertical"
-        />
-      </div>
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="boxesVertical"
+      />
     </button>
   </div>
 </div>

packages/eui/src/components/datagrid/body/header/_data_grid_header_row.scss

@@ -2,51 +2,17 @@
   // We only truncate if the cell is not a control column.
   &:not(.euiDataGridHeaderCell--controlColumn) {
     .euiDataGridHeaderCell__button {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: $euiSizeXS;
-      width: 100%;
-      border-radius: $euiBorderRadiusSmall;
-      font-weight: $euiFontWeightBold;
-      outline: none;
-
-      &:focus-visible {
-        outline: none;
-      }
-    }
-
-    [data-focus-lock-disabled='false'] .euiDataGridHeaderCell__button {
-      @include euiFocusRing;
-      color: $euiFocusRingColor;
-    }
-
-    .euiDataGridHeaderCell__icon {
-      flex: 0 0 auto; // Ensure icon doesn't shrink
-      margin-left: auto; // Aligns the icon to the right
-      // Center the icon
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 0;
-      height: $euiSize;
       overflow: hidden;
-      opacity: 0;
+
       transition: width $euiAnimSpeedFast ease-in, opacity $euiAnimSpeedSlow ease-in;
+      transform: none !important; // Unset EuiButtonIcon animations
+      animation: none;
     }
 
-    &:focus-within,
-    &:hover,
-    .euiPopover-isOpen {
+    &:not(:hover, :focus-within, .euiDataGridHeaderCell--isActionsPopoverOpen) {
       .euiDataGridHeaderCell__button {
-        padding: $euiSizeXS;
-        // balance out additional button target size in header height, prevents increased header cell height
-        margin-block: -$euiSizeXS;
-      }
-
-      .euiDataGridHeaderCell__icon {
-        width: $euiSize;
-        opacity: 1;
+        width: 0;
+        opacity: 0;
       }
     }
   }

packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx

@@ -27,13 +27,13 @@ import { EuiI18n, useEuiI18n } from '../../../i18n';
 import { EuiIcon } from '../../../icon';
 import { EuiListGroup } from '../../../list_group';
 import { EuiPopover } from '../../../popover';
-import { _emptyHoverStyles } from '../../../button/button_icon/button_icon.styles';
+import { EuiButtonIcon } from '../../../button';
+
 import { DataGridFocusContext } from '../../utils/focus';
 import {
   EuiDataGridHeaderCellProps,
   EuiDataGridSorting,
 } from '../../data_grid_types';
-
 import { getColumnActions } from './column_actions';
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
@@ -153,7 +153,6 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
           ? styles.right
           : styles.left,
       ];
-      const emptyHoverStyles = useEuiMemoizedStyles(_emptyHoverStyles);
 
       return (
         <EuiDataGridHeaderCellWrapper
@@ -201,13 +200,16 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
                   anchorPosition="downRight"
                   css={{ marginInlineStart: 'auto' }} // Align to right
                   button={
-                    <button
-                      ref={actionsButtonRef}
+                    <EuiButtonIcon
+                      iconType="boxesVertical"
+                      iconSize="s"
+                      color="text"
                       className="euiDataGridHeaderCell__button"
-                      css={emptyHoverStyles.text}
+                      buttonRef={actionsButtonRef}
                       onClick={togglePopover}
                       onFocus={() => setIsActionsButtonFocused(true)}
                       onBlur={() => setIsActionsButtonFocused(false)}
+                      tabIndex={0} // Override EuiButtonIcon's conditional tabindex based on aria-hidden
                       aria-hidden={
                         hasFocusTrap && !isActionsButtonFocused
                           ? 'true' // prevent the actions button from being read on cell focus
@@ -219,11 +221,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
                           : actionsEnterKeyInstructions
                       }
                       data-test-subj={`dataGridHeaderCellActionButton-${id}`}
-                    >
-                      <div className="euiDataGridHeaderCell__icon">
-                        <EuiIcon type="boxesVertical" size="s" color="text" />
-                      </div>
-                    </button>
+                    />
                   }
                   isOpen={isPopoverOpen}
                   closePopover={closePopover}

packages/eui/src/components/datagrid/data_grid.styles.ts

@@ -105,6 +105,10 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
           font-size: ${fontSize[size]};
           line-height: ${lineHeight[size]};
         }
+
+        .euiDataGridHeaderCell__button {
+          ${logicalSizeCSS(lineHeight[size])}
+        }
       `,
       get s() {
         return css(this.fontSize('s'));