Don't highlight active controls and update label for hidden columns

elastic · Nov 15, 2023 · 8eb7277 · 8eb7277
1 parent 0d47cd7
commit 8eb7277
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 42 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
@@ -61,7 +61,7 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
         {hasRoomForGridControls && (
           <EuiDataGridToolbarControl
             iconType="brush"
-            badgeCount={10}
+            badgeContent={10}
             onClick={() => {}}
           >
             Custom left side

diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`useDataGridColumnSorting columnSorting [React 16] renders a toolbar but
   data-test-subj="dataGridColumnSortingPopover"
 >
   <button
-    class="euiButtonEmpty euiDataGrid__controlBtn euiDataGrid__controlBtn--active emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+    class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
     data-test-subj="dataGridColumnSortingButton"
     type="button"
   >
@@ -288,7 +288,7 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but
   data-test-subj="dataGridColumnSortingPopover"
 >
   <button
-    class="euiButtonEmpty euiDataGrid__controlBtn euiDataGrid__controlBtn--active emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+    class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
     data-test-subj="dataGridColumnSortingButton"
     type="button"
   >
@@ -570,7 +570,7 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
   data-test-subj="dataGridColumnSortingPopover"
 >
   <button
-    class="euiButtonEmpty euiDataGrid__controlBtn euiDataGrid__controlBtn--active emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+    class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
     data-test-subj="dataGridColumnSortingButton"
     type="button"
   >

diff --git a/src/components/datagrid/controls/column_selector.test.tsx b/src/components/datagrid/controls/column_selector.test.tsx
@@ -192,7 +192,7 @@ describe('useDataGridColumnSelector', () => {
           />
         );
 
-        expect(component.text()).toEqual('2 columns hidden');
+        expect(component.text()).toEqual('Columns0/2');
       });
 
       it('toggles column visibility on switch interaction', () => {
@@ -207,7 +207,7 @@ describe('useDataGridColumnSelector', () => {
         ).simulate('click');
         forceUpdate(component);
 
-        expect(component.text()).toEqual('1 column hidden1');
+        expect(component.text()).toEqual('Columns1/2');
 
         findTestSubject(
           component,
@@ -230,7 +230,7 @@ describe('useDataGridColumnSelector', () => {
         ).simulate('click');
         forceUpdate(component);
 
-        expect(component.text()).toEqual('2 columns hidden');
+        expect(component.text()).toEqual('Columns0/2');
 
         findTestSubject(
           component,

diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx
@@ -119,28 +119,10 @@ export const useDataGridColumnSelector = (
     'Drag handle'
   );
 
-  let buttonText = (
+  const buttonText = (
     <EuiI18n token="euiColumnSelector.button" default="Columns" />
   );
 
-  if (numberOfHiddenFields === 1) {
-    buttonText = (
-      <EuiI18n
-        token="euiColumnSelector.buttonActiveSingular"
-        default="{numberOfHiddenFields} column hidden"
-        values={{ numberOfHiddenFields }}
-      />
-    );
-  } else if (numberOfHiddenFields > 1) {
-    buttonText = (
-      <EuiI18n
-        token="euiColumnSelector.buttonActivePlural"
-        default="{numberOfHiddenFields} columns hidden"
-        values={{ numberOfHiddenFields }}
-      />
-    );
-  }
-
   const orderedVisibleColumns = useMemo(
     () =>
       visibleColumns
@@ -165,8 +147,13 @@ export const useDataGridColumnSelector = (
         hasDragDrop
         button={
           <EuiDataGridToolbarControl
-            badgeCount={orderedVisibleColumns.length}
-            isActive={numberOfHiddenFields > 0}
+            badgeContent={
+              numberOfHiddenFields > 0
+                ? `${orderedVisibleColumns.length}/${
+                    numberOfHiddenFields + orderedVisibleColumns.length
+                  }`
+                : orderedVisibleColumns.length
+            }
             iconType="tableDensityNormal"
             data-test-subj="dataGridColumnSelectorButton"
             onClick={() => setIsOpen(!isOpen)}

diff --git a/src/components/datagrid/controls/column_sorting.tsx b/src/components/datagrid/controls/column_sorting.tsx
@@ -129,8 +129,7 @@ export const useDataGridColumnSorting = (
       hasDragDrop
       button={
         <EuiDataGridToolbarControl
-          badgeCount={sorting.columns.length}
-          isActive={sorting.columns.length > 0}
+          badgeContent={sorting.columns.length}
           iconType="sortable"
           data-test-subj="dataGridColumnSortingButton"
           onClick={() => setIsOpen(!isOpen)}

diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx
@@ -17,7 +17,7 @@ describe('euiDataGridToolbarControl', () => {
 
     const { container } = render(
       <EuiDataGridToolbarControl
-        badgeCount={5}
+        badgeContent={5}
         size="xs"
         iconType="sortable"
         color="text"
@@ -35,7 +35,7 @@ describe('euiDataGridToolbarControl', () => {
 
     const { container } = render(
       <EuiDataGridToolbarControl
-        badgeCount={undefined}
+        badgeContent={undefined}
         size="xs"
         iconType="sortable"
         color="text"

diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx
@@ -16,21 +16,17 @@ import { EuiDataGridToolbarControlProps } from '../data_grid_types';
 
 export const EuiDataGridToolbarControl = ({
   children,
-  badgeCount,
-  isActive,
+  badgeContent,
   ...buttonProps
 }: EuiDataGridToolbarControlProps) => {
   const badgeAriaLabel = useEuiI18n(
     'euiDataGridToolbarControl.badgeAriaLabel',
     'Current count: {count}',
-    { count: badgeCount }
+    { count: badgeContent }
   );
 
   const controlBtnClasses = classNames(
     'euiDataGrid__controlBtn',
-    {
-      'euiDataGrid__controlBtn--active': isActive,
-    },
     buttonProps.className
   );
 
@@ -48,14 +44,14 @@ export const EuiDataGridToolbarControl = ({
         gutterSize="s"
       >
         <EuiFlexItem grow={false}>{children}</EuiFlexItem>
-        {typeof badgeCount === 'number' && badgeCount > 0 && (
+        {Boolean(badgeContent) && (
           <EuiFlexItem grow={false}>
             <EuiNotificationBadge
               color="subdued"
               aria-label={badgeAriaLabel}
               role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
             >
-              {badgeCount}
+              {badgeContent}
             </EuiNotificationBadge>
           </EuiFlexItem>
         )}

diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -63,8 +63,7 @@ export interface EuiDataGridCustomToolbarProps {
 }
 
 export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & {
-  badgeCount?: number;
-  isActive?: boolean;
+  badgeContent?: number | string;
 };
 
 export interface EuiDataGridPaginationRendererProps