From 184f1b776df36d15d764a274856a47f0c02472f4 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 21 Nov 2023 12:40:12 -0800
Subject: [PATCH] CSS fixes/className cleanups

- add styles for underlining text, but not the badge

- fix cursor on badge

- add `className` hooks to both text & badge nodes in case consumers want to customize their CSS

- misc/consistency - rename props (rest, classes, etc) to match other EUI components
---
 .../toolbar/render_custom_toolbar.tsx         |  2 +-
 .../controls/data_grid_toolbar_control.tsx    | 30 ++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx b/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx
index d3086fed78c..0657f7ff511 100644
--- a/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx
+++ b/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx
@@ -45,7 +45,7 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
   const mobileStyles =
     !hasRoomForGridControls &&
     css`
-      .euiDataGrid__controlBtn .euiButtonEmpty__text {
+      .euiDataGridToolbarControl__text {
         ${euiScreenReaderOnly()}
       }
     `;
diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx
index 38a26c38ace..69182e2fff7 100644
--- a/src/components/datagrid/controls/data_grid_toolbar_control.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx
@@ -8,6 +8,7 @@
 
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
+import { css } from '@emotion/react';
 
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button';
 import { EuiNotificationBadge } from '../../badge';
@@ -19,29 +20,38 @@ export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & {
 
 export const EuiDataGridToolbarControl: FunctionComponent<
   EuiDataGridToolbarControlProps
-> = ({ children, badgeContent, textProps, ...buttonProps }) => {
+> = ({ children, className, badgeContent, textProps, ...rest }) => {
+  const classes = classNames('euiDataGridToolbarControl', className);
+
   const badgeAriaLabel = useEuiI18n(
     'euiDataGridToolbarControl.badgeAriaLabel',
     'Active: {count}',
     { count: badgeContent }
   );
 
-  const controlBtnClasses = classNames(
-    'euiDataGrid__controlBtn',
-    buttonProps.className
-  );
-
   return (
     <EuiButtonEmpty
+      className={classes}
       size="xs"
       color="text"
       textProps={false}
-      {...buttonProps}
-      className={controlBtnClasses}
+      // Underline actual text, but not the badge
+      css={css`
+        &:focus,
+        &:hover:not(:disabled) {
+          text-decoration: none;
+
+          .euiDataGridToolbarControl__text {
+            text-decoration: underline;
+          }
+        }
+      `}
+      {...rest}
     >
       <span
         {...textProps}
         className={classNames(
+          'euiDataGridToolbarControl__text',
           'eui-textTruncate',
           textProps && textProps.className
         )}
@@ -51,6 +61,10 @@ export const EuiDataGridToolbarControl: FunctionComponent<
 
       {Boolean(badgeContent) && (
         <EuiNotificationBadge
+          className="euiDataGridToolbarControl__badge"
+          css={css`
+            cursor: inherit;
+          `}
           color="subdued"
           aria-label={badgeAriaLabel}
           role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role