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
elastic · Nov 21, 2023 · 184f1b7 · 184f1b7
1 parent 472161e
commit 184f1b7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 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
@@ -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
@@ -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