diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd8691dfe70..20f5404bf32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
- Fixed `z-index` styles that were causing `EuiModal` and `EuiFlyout` components to appear behind `EuiDataGrid` when in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054))
- Fixed untranslated i18n strings for `EuiFilterButton` - adds 2 new tokens and removes old `euiFilterButton.filterBadge` token ([#4750](https://github.com/elastic/eui/pull/5061))
- Fixed missing i18n token `EuiFilePicker`'s default prompt, and improved i18n string for `euiFilePicker.filesSelected` ([#5063](https://github.com/elastic/eui/pull/5063))
+- Fixed `EuiDataGrid` sort button text pluralization ([#5043](https://github.com/elastic/eui/pull/5043))
**Theme: Amsterdam**
diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
index 39cc67db165..c1c82e8a634 100644
--- a/src/components/datagrid/column_sorting.tsx
+++ b/src/components/datagrid/column_sorting.tsx
@@ -7,13 +7,7 @@
*/
import classNames from 'classnames';
-import React, {
- Fragment,
- ReactChild,
- ReactNode,
- useEffect,
- useState,
-} from 'react';
+import React, { Fragment, ReactNode, useEffect, useState } from 'react';
import { DropResult } from 'react-beautiful-dnd';
import { EuiButtonEmpty } from '../button';
import {
@@ -22,7 +16,7 @@ import {
EuiDroppable,
} from '../drag_and_drop';
import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { EuiI18n } from '../i18n';
+import { EuiI18n, useEuiI18n } from '../i18n';
import { EuiPopover, EuiPopoverFooter } from '../popover';
import { EuiText } from '../text';
import { EuiToken } from '../token';
@@ -64,6 +58,22 @@ export const useDataGridColumnSorting = (
}
}, [columns, sorting]);
+ const sortingButtonText = useEuiI18n(
+ 'euiColumnSorting.button',
+ 'Sort fields'
+ );
+
+ const sortingButtonTextActive = useEuiI18n(
+ 'euiColumnSorting.buttonActive',
+ ({ numberOfSortedFields }) =>
+ `${numberOfSortedFields} field${
+ numberOfSortedFields === 1 ? '' : 's'
+ } sorted`,
+ {
+ numberOfSortedFields: sorting !== undefined ? sorting.columns.length : 0,
+ }
+ );
+
if (sorting == null) return [null];
const activeColumnIds = new Set(sorting.columns.map(({ id }) => id));
@@ -103,8 +113,6 @@ export const useDataGridColumnSorting = (
'euiDataGrid__controlBtn--active': sorting.columns.length > 0,
});
- const numberOfSortedFields = sorting.columns.length;
-
const schemaDetails = (id: string | number) =>
schema.hasOwnProperty(id) && schema[id].columnType != null
? getDetailsForSchema(schemaDetectors, schema[id].columnType)
@@ -134,25 +142,18 @@ export const useDataGridColumnSorting = (
panelPaddingSize="s"
panelClassName="euiDataGridColumnSortingPopover"
button={
- setIsOpen(!isOpen)}
>
- {([button, buttonActive]: ReactChild[]) => (
- setIsOpen(!isOpen)}
- >
- {numberOfSortedFields > 0
- ? `${numberOfSortedFields} ${buttonActive}`
- : button}
-
- )}
-
+ {sorting.columns.length > 0
+ ? sortingButtonTextActive
+ : sortingButtonText}
+
}
>
{sorting.columns.length > 0 ? (
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 5ed8ef779d0..e5e4391ef0f 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -1847,6 +1847,56 @@ describe('EuiDataGrid', () => {
closeColumnSorterSelection(component);
closeColumnSorter(component);
});
+
+ it('"Sort fields" button text updates', () => {
+ const component = mount(
+ {},
+ }}
+ sorting={{
+ onSort: () => {},
+ columns: [],
+ }}
+ rowCount={2}
+ renderCellValue={({ rowIndex, columnId }) =>
+ `${rowIndex}-${columnId}`
+ }
+ />
+ );
+
+ // Get column sorting button
+ const sortColumn = component.find(
+ 'EuiButtonEmpty[data-test-subj="dataGridColumnSortingButton"]'
+ );
+ const getButtonText = (): string =>
+ sortColumn.find('span[className="euiButtonEmpty__text"]').text();
+ expect(getButtonText()).toEqual('Sort fields');
+
+ // Update sorted columns
+ component.setProps({
+ sorting: {
+ columns: [{ id: 'A', direction: 'asc' }],
+ onSort: () => {},
+ },
+ });
+ expect(getButtonText()).toEqual('1 field sorted');
+
+ // Update sorted columns again
+ component.setProps({
+ sorting: {
+ columns: [
+ { id: 'A', direction: 'asc' },
+ { id: 'B', direction: 'asc' },
+ ],
+ onSort: () => {},
+ },
+ });
+ expect(getButtonText()).toEqual('2 fields sorted');
+ });
});
describe('render column actions', () => {