[EuiDataGrid] Badges in grid toolbar (#7369)

Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: Cee Chen <[email protected]>

changelogs/upcoming/7369.md

@@ -0,0 +1,3 @@
+- Added a new `EuiDataGridToolbarControl` subcomponent, which is useful for rendering your own custom `EuiDataGrid` toolbar buttons while matching the look of the default controls
+- Updated `EuiDataGrid`'s toolbar controls to show active/current counts in badges, and updated the Columns button icon
+- Updated `EuiButtonEmpty` to allow passing `false` to `textProps`, which allows rendering custom button content without an extra text wrapper

src-docs/src/views/datagrid/toolbar/additional_controls.tsx

@@ -3,6 +3,7 @@ import { faker } from '@faker-js/faker';
 
 import {
   EuiDataGrid,
+  EuiDataGridToolbarControl,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiLink,
@@ -149,13 +150,12 @@ export default () => {
                 <EuiPopover
                   id={popoverId}
                   button={
-                    <EuiButtonEmpty
-                      size="xs"
+                    <EuiDataGridToolbarControl
                       iconType="download"
                       onClick={() => setPopover((open) => !open)}
                     >
                       Download
-                    </EuiButtonEmpty>
+                    </EuiDataGridToolbarControl>
                   }
                   isOpen={isPopoverOpen}
                   closePopover={() => setPopover(false)}

src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js

@@ -1,7 +1,11 @@
 import React, { Fragment } from 'react';
 
 import { GuideSectionTypes } from '../../../components';
-import { EuiCode } from '../../../../../src';
+import {
+  EuiDataGridToolbarControl,
+  EuiCode,
+  EuiCallOut,
+} from '../../../../../src';
 
 import DataGridToolbarVisibility from './visibility';
 const dataGridToolbarVisibilitySource = require('!!raw-loader!./_grid');
@@ -174,7 +178,7 @@ export const DataGridToolbarExample = {
           </ul>
           <p>
             Although any node is allowed, the recommendation is to use{' '}
-            <EuiCode>{'<EuiButtonEmpty size="xs" />'}</EuiCode> for the
+            <EuiCode>{'<EuiDataGridToolbarControl />'}</EuiCode> for the
             left-side of the toolbar and{' '}
             <EuiCode>{'<EuiButtonIcon size="xs" />'}</EuiCode> for the
             right-side of the toolbar.
@@ -186,6 +190,7 @@ export const DataGridToolbarExample = {
         EuiDataGridToolBarVisibilityOptions,
         EuiDataGridToolBarAdditionalControlsOptions,
         EuiDataGridToolBarAdditionalControlsLeftOptions,
+        EuiDataGridToolbarControl,
       },
       demo: <DataGridControls />,
     },
@@ -211,18 +216,27 @@ export const DataGridToolbarExample = {
             <EuiCode>renderCustomToolbar</EuiCode> should only be used when a
             very custom layout (e.g. moving default buttons between sides,
             interspering custom controls between default controls, custom
-            responsive behavior, etc.) is required. We would caution you to keep
-            consistency in mind also when customizing the toolbar: if using
-            multiple datagrid instances across your app, users will typically
-            want to reach for the same controls for each grid. Changing the
-            available controls inconsistently across your app may result in user
-            frustration.
+            responsive behavior, etc.) is required. For consistent visuals, we
+            recommend using the{' '}
+            <EuiCode>{'<EuiDataGridToolbarControl />'}</EuiCode> subcomponent
+            when rendering custom controls.
           </p>
+          <EuiCallOut
+            color="warning"
+            iconType="alert"
+            title="Keep consistency in mind when customizing the toolbar"
+          >
+            If using multiple datagrid instances across your app, users will
+            typically want to reach for the same controls for each grid.
+            Changing the available controls inconsistently across your app may
+            result in user frustration.
+          </EuiCallOut>
         </>
       ),
       demo: <DataGridCustomToolbar />,
       props: {
         EuiDataGridCustomToolbarProps,
+        EuiDataGridToolbarControl,
       },
       snippet: `<EuiDataGrid
   aria-label="Data grid with a custom toolbar and additional content in the display settings popover "

src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx

@@ -7,7 +7,7 @@ import {
   EuiDataGridSorting,
   EuiDataGridColumnSortingConfig,
   EuiDataGridToolbarProps,
-  EuiButtonEmpty,
+  EuiDataGridToolbarControl,
   EuiFormRow,
   EuiRange,
   EuiFlexGroup,
@@ -45,7 +45,7 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
   const mobileStyles =
     !hasRoomForGridControls &&
     css`
-      .euiDataGrid__controlBtn .euiButtonEmpty__text {
+      .euiDataGridToolbarControl__text {
         ${euiScreenReaderOnly()}
       }
     `;
@@ -59,9 +59,13 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
     >
       <EuiFlexItem grow={false}>
         {hasRoomForGridControls && (
-          <EuiButtonEmpty size="xs" color="primary">
+          <EuiDataGridToolbarControl
+            iconType="brush"
+            badgeContent={10}
+            onClick={() => {}}
+          >
             Custom left side
-          </EuiButtonEmpty>
+          </EuiDataGridToolbarControl>
         )}
       </EuiFlexItem>
 

src/components/button/button_display/_button_display_content.test.tsx

@@ -98,6 +98,16 @@ describe('EuiButtonDisplayContent', () => {
       expect(container.querySelector('.eui-textTruncate')).toBeTruthy();
     });
 
+    it('does not render a text span wrapper if textProps is explicitly set to false', () => {
+      const { container } = render(
+        <EuiButtonDisplayContent textProps={false}>
+          Text
+        </EuiButtonDisplayContent>
+      );
+
+      expect(container.querySelector('.eui-textTruncate')).toBeFalsy();
+    });
+
     it('does not render a text span wrapper if custom child with no textProps are passed', () => {
       const { getByTestSubject, container } = render(
         <EuiButtonDisplayContent>

src/components/button/button_display/_button_display_content.tsx

@@ -37,13 +37,17 @@ export interface EuiButtonDisplayContentProps extends CommonProps {
   iconSide?: ButtonContentIconSide;
   isLoading?: boolean;
   /**
-   * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+   * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
+   *
+   * This span wrapper can be removed by passing `textProps={false}`.
    */
-  textProps?: HTMLAttributes<HTMLSpanElement> &
-    CommonProps & {
-      ref?: Ref<HTMLSpanElement>;
-      'data-text'?: string;
-    };
+  textProps?:
+    | (HTMLAttributes<HTMLSpanElement> &
+        CommonProps & {
+          ref?: Ref<HTMLSpanElement>;
+          'data-text'?: string;
+        })
+    | false;
   iconSize?: ButtonContentIconSize;
   isDisabled?: boolean;
 }
@@ -90,11 +94,13 @@ export const EuiButtonDisplayContent: FunctionComponent<
   }
 
   const isText = typeof children === 'string';
+  const doNotRenderTextWrapper = textProps === false;
+  const renderTextWrapper = (isText || textProps) && !doNotRenderTextWrapper;
 
   return (
     <span css={cssStyles} {...contentProps}>
       {iconSide === 'left' && icon}
-      {isText || textProps ? (
+      {renderTextWrapper ? (
         <span
           {...textProps}
           className={classNames('eui-textTruncate', textProps?.className)}

src/components/button/button_empty/button_empty.test.tsx

@@ -167,5 +167,15 @@ describe('EuiButtonEmpty', () => {
 
       expect(container.firstChild).toMatchSnapshot();
     });
+
+    it('does not render the text wrapper when textProps is set to false', () => {
+      const { container } = render(
+        <EuiButtonEmpty textProps={false}>Content</EuiButtonEmpty>
+      );
+
+      expect(
+        container.querySelector('.euiButtonEmpty__text')
+      ).not.toBeInTheDocument();
+    });
   });
 });

src/components/button/button_empty/button_empty.tsx

@@ -72,7 +72,7 @@ export interface CommonEuiButtonEmptyProps
   type?: 'button' | 'submit';
   buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
   /**
-   * Object of props passed to the <span/> wrapping the button's content
+   * Object of props passed to the `<span>` wrapping the button's content
    */
   contentProps?: CommonProps & EuiButtonDisplayContentType;
 }
@@ -139,7 +139,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
 
   const textClassNames = classNames(
     'euiButtonEmpty__text',
-    textProps?.className
+    textProps && textProps.className
   );
 
   const innerNode = (
@@ -149,7 +149,11 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
       iconType={iconType}
       iconSide={iconSide}
       iconSize={size === 'xs' ? 's' : iconSize}
-      textProps={{ ...textProps, className: textClassNames }}
+      textProps={
+        textProps === false
+          ? false
+          : { ...textProps, className: textClassNames }
+      }
       {...{ ...contentProps, className: contentClassNames }}
     >
       {children}