[EuiDataGrid] Badges in grid toolbar

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/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}

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -476,7 +476,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -485,13 +485,20 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               >
                 <span
                   color="inherit"
-                  data-euiicon-type="listAdd"
+                  data-euiicon-type="tableDensityNormal"
                 />
                 <span
-                  class="eui-textTruncate euiButtonEmpty__text"
+                  class="euiDataGridToolbarControl__text eui-textTruncate"
                 >
                   Columns
                 </span>
+                <span
+                  aria-label="- Active: 2"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  role="marquee"
+                >
+                  2
+                </span>
               </span>
             </button>
           </div>
@@ -533,7 +540,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
             >
               <button
                 aria-label="Display options"
-                class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                 data-test-subj="dataGridDisplaySelectorButton"
                 type="button"
               >
@@ -551,7 +558,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+              aria-pressed="false"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >
@@ -895,7 +903,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -904,13 +912,20 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               >
                 <span
                   color="inherit"
-                  data-euiicon-type="listAdd"
+                  data-euiicon-type="tableDensityNormal"
                 />
                 <span
-                  class="eui-textTruncate euiButtonEmpty__text"
+                  class="euiDataGridToolbarControl__text eui-textTruncate"
                 >
                   Columns
                 </span>
+                <span
+                  aria-label="- Active: 2"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  role="marquee"
+                >
+                  2
+                </span>
               </span>
             </button>
           </div>
@@ -952,7 +967,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
             >
               <button
                 aria-label="Display options"
-                class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                 data-test-subj="dataGridDisplaySelectorButton"
                 type="button"
               >
@@ -970,7 +985,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+              aria-pressed="false"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >
@@ -1592,7 +1608,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -1601,13 +1617,20 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               >
                 <span
                   color="inherit"
-                  data-euiicon-type="listAdd"
+                  data-euiicon-type="tableDensityNormal"
                 />
                 <span
-                  class="eui-textTruncate euiButtonEmpty__text"
+                  class="euiDataGridToolbarControl__text eui-textTruncate"
                 >
                   Columns
                 </span>
+                <span
+                  aria-label="- Active: 2"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  role="marquee"
+                >
+                  2
+                </span>
               </span>
             </button>
           </div>
@@ -1646,7 +1669,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
             >
               <button
                 aria-label="Display options"
-                class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                 data-test-subj="dataGridDisplaySelectorButton"
                 type="button"
               >
@@ -1664,7 +1687,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+              aria-pressed="false"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >
@@ -2010,7 +2034,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
             data-test-subj="dataGridColumnSelectorPopover"
           >
             <button
-              class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+              class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
               data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
@@ -2019,13 +2043,20 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               >
                 <span
                   color="inherit"
-                  data-euiicon-type="listAdd"
+                  data-euiicon-type="tableDensityNormal"
                 />
                 <span
-                  class="eui-textTruncate euiButtonEmpty__text"
+                  class="euiDataGridToolbarControl__text eui-textTruncate"
                 >
                   Columns
                 </span>
+                <span
+                  aria-label="- Active: 2"
+                  class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
+                  role="marquee"
+                >
+                  2
+                </span>
               </span>
             </button>
           </div>
@@ -2064,7 +2095,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
             >
               <button
                 aria-label="Display options"
-                class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                 data-test-subj="dataGridDisplaySelectorButton"
                 type="button"
               >
@@ -2082,7 +2113,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
+              aria-pressed="false"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >