From 1cfe8c02d38c3483216ad10204679df8a615b94f Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Tue, 14 Nov 2023 15:07:31 +0100 Subject: [PATCH 01/24] Show badges in grid toolbar --- .../__snapshots__/data_grid.test.tsx.snap | 92 +++++++++++++++++-- .../column_selector.test.tsx.snap | 23 ++++- .../column_sorting.test.tsx.snap | 21 ++++- .../controls/column_selector.test.tsx | 4 +- .../datagrid/controls/column_selector.tsx | 36 ++++---- .../datagrid/controls/column_sorting.test.tsx | 2 +- .../datagrid/controls/column_sorting.tsx | 22 +---- .../controls/data_grid_toolbar_control.tsx | 54 +++++++++++ src/components/datagrid/data_grid.test.tsx | 4 +- 9 files changed, 208 insertions(+), 50 deletions(-) create mode 100644 src/components/datagrid/controls/data_grid_toolbar_control.tsx diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 1955c97a301..4a5d5464ff1 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -492,12 +492,31 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
@@ -949,12 +968,31 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
@@ -1708,12 +1746,31 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
@@ -2164,12 +2221,31 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index 936e7231fc4..e1284ef20f5 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -608,12 +608,31 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b > - Columns +
+
+ Columns +
+
+ + 2 + +
+
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 8a45ed03f72..a0a74f2be6e 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -603,7 +603,26 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but - 1 field sorted +
+
+ Sort fields +
+
+ + 1 + +
+
diff --git a/src/components/datagrid/controls/column_selector.test.tsx b/src/components/datagrid/controls/column_selector.test.tsx index a62da600d34..267da579ca2 100644 --- a/src/components/datagrid/controls/column_selector.test.tsx +++ b/src/components/datagrid/controls/column_selector.test.tsx @@ -207,7 +207,7 @@ describe('useDataGridColumnSelector', () => { ).simulate('click'); forceUpdate(component); - expect(component.text()).toEqual('1 column hidden'); + expect(component.text()).toEqual('1 column hidden1'); findTestSubject( component, @@ -238,7 +238,7 @@ describe('useDataGridColumnSelector', () => { ).simulate('click'); forceUpdate(component); - expect(component.text()).toEqual('Columns'); + expect(component.text()).toEqual('Columns2'); }); }); }); diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx index 330d6c8b818..b4f08ba01df 100644 --- a/src/components/datagrid/controls/column_selector.tsx +++ b/src/components/datagrid/controls/column_selector.tsx @@ -36,6 +36,7 @@ import { EuiDataGridToolBarVisibilityOptions, } from '../data_grid_types'; import { getNestedObjectOptions } from './data_grid_toolbar'; +import { DataGridToolbarControl } from './data_grid_toolbar_control'; export const useDataGridColumnSelector = ( availableColumns: EuiDataGridColumn[], @@ -144,6 +145,19 @@ export const useDataGridColumnSelector = ( ); } + const orderedVisibleColumns = useMemo( + () => + visibleColumns + .map( + (columnId) => + availableColumns.find( + ({ id }) => id === columnId + ) as EuiDataGridColumn // cast to avoid `undefined`, it filters those out next + ) + .filter((column) => column != null), + [availableColumns, visibleColumns] + ); + const columnSelector = allowColumnHiding || allowColumnReorder ? ( setIsOpen(!isOpen)} - > - {buttonText} - + /> } >
@@ -319,18 +333,6 @@ export const useDataGridColumnSelector = ( ) : null; - const orderedVisibleColumns = useMemo( - () => - visibleColumns - .map( - (columnId) => - availableColumns.find( - ({ id }) => id === columnId - ) as EuiDataGridColumn // cast to avoid `undefined`, it filters those out next - ) - .filter((column) => column != null), - [availableColumns, visibleColumns] - ); /** * Used for moving columns left/right, available in the headers actions menu */ diff --git a/src/components/datagrid/controls/column_sorting.test.tsx b/src/components/datagrid/controls/column_sorting.test.tsx index 2ce2ea61c1f..47d40e36005 100644 --- a/src/components/datagrid/controls/column_sorting.test.tsx +++ b/src/components/datagrid/controls/column_sorting.test.tsx @@ -84,7 +84,7 @@ describe('useDataGridColumnSorting', () => { component.find('[data-popover-panel]').first().render() ).toMatchSnapshot(); closePopover(component); - expect(component.text()).toEqual('1 field sorted'); + expect(component.text()).toEqual('Sort fields1'); } ); diff --git a/src/components/datagrid/controls/column_sorting.tsx b/src/components/datagrid/controls/column_sorting.tsx index 6305d379f2e..2e2b00d29e7 100644 --- a/src/components/datagrid/controls/column_sorting.tsx +++ b/src/components/datagrid/controls/column_sorting.tsx @@ -20,6 +20,7 @@ import { EuiI18n, useEuiI18n } from '../../i18n'; import { EuiPopover, EuiPopoverFooter } from '../../popover'; import { EuiText } from '../../text'; import { EuiToken } from '../../token'; +import { DataGridToolbarControl } from './data_grid_toolbar_control'; import { EuiDataGridColumnSortingDraggable } from './column_sorting_draggable'; import { getDetailsForSchema } from '../utils/data_grid_schema'; import { @@ -63,17 +64,6 @@ export const useDataGridColumnSorting = ( 'Sort fields' ); - const sortingButtonTextActive = useEuiI18n( - 'euiColumnSorting.buttonActive', - ({ numberOfSortedFields }) => - `${numberOfSortedFields} field${ - numberOfSortedFields === 1 ? '' : 's' - } sorted`, - { - numberOfSortedFields: sorting != null ? sorting.columns.length : 0, - } - ); - if (sorting == null) return null; const activeColumnIds = new Set(sorting.columns.map(({ id }) => id)); @@ -143,18 +133,16 @@ export const useDataGridColumnSorting = ( panelPaddingSize="s" hasDragDrop button={ - setIsOpen(!isOpen)} - > - {sorting.columns.length > 0 - ? sortingButtonTextActive - : sortingButtonText} - + /> } > {sorting.columns.length > 0 ? ( diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx new file mode 100644 index 00000000000..e37e0bc7c50 --- /dev/null +++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx @@ -0,0 +1,54 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { ReactElement } from 'react'; +import { EuiButtonEmpty, type EuiButtonEmptyProps } from '../../button'; +import { EuiFlexGroup, EuiFlexItem } from '../../flex'; +import { EuiNotificationBadge } from '../../badge'; +import { useEuiI18n } from '../../i18n'; + +export type DataGridToolbarControlProps = EuiButtonEmptyProps & { + buttonText: string | ReactElement; + badgeCount: number; +}; + +export const DataGridToolbarControl = ({ + buttonText, + badgeCount, + ...buttonProps +}: DataGridToolbarControlProps) => { + const badgeAriaLabel = useEuiI18n( + 'euiDataGridToolbarControl.badgeAriaLabel', + 'Current count: {count}', + { count: badgeCount } + ); + + return ( + + + {buttonText} + {badgeCount > 0 && ( + + + {badgeCount} + + + )} + + + ); +}; diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index c6c48e0fa77..dd3ab98a6aa 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -1924,7 +1924,7 @@ describe('EuiDataGrid', () => { onSort: () => {}, }, }); - expect(getButtonText()).toEqual('1 field sorted'); + expect(getButtonText()).toEqual('Sort fields1'); // Update sorted columns again component.setProps({ @@ -1936,7 +1936,7 @@ describe('EuiDataGrid', () => { onSort: () => {}, }, }); - expect(getButtonText()).toEqual('2 fields sorted'); + expect(getButtonText()).toEqual('Sort fields2'); }); }); From 4423ca36f4fc5c849c1590f954e987e88beefc71 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 15 Nov 2023 12:15:44 +0100 Subject: [PATCH 02/24] Add tests --- .../data_grid_toolbar_control.test.tsx.snap | 74 +++++++++++++++++++ .../datagrid/controls/column_selector.tsx | 4 +- .../datagrid/controls/column_sorting.tsx | 4 +- .../data_grid_toolbar_control.test.tsx | 51 +++++++++++++ .../controls/data_grid_toolbar_control.tsx | 10 +-- 5 files changed, 134 insertions(+), 9 deletions(-) create mode 100644 src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap create mode 100644 src/components/datagrid/controls/data_grid_toolbar_control.test.tsx diff --git a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap new file mode 100644 index 00000000000..e050539f1df --- /dev/null +++ b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap @@ -0,0 +1,74 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`euiDataGridToolbarControl renders with a badge 1`] = ` +
+ +
+`; + +exports[`euiDataGridToolbarControl renders without a badge 1`] = ` +
+ +
+`; diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx index b4f08ba01df..5407a8d84c8 100644 --- a/src/components/datagrid/controls/column_selector.tsx +++ b/src/components/datagrid/controls/column_selector.tsx @@ -36,7 +36,7 @@ import { EuiDataGridToolBarVisibilityOptions, } from '../data_grid_types'; import { getNestedObjectOptions } from './data_grid_toolbar'; -import { DataGridToolbarControl } from './data_grid_toolbar_control'; +import { EuiDataGridToolbarControl } from './data_grid_toolbar_control'; export const useDataGridColumnSelector = ( availableColumns: EuiDataGridColumn[], @@ -168,7 +168,7 @@ export const useDataGridColumnSelector = ( panelPaddingSize="s" hasDragDrop button={ - { + it('renders with a badge', () => { + const onClickMock = jest.fn(); + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('renders without a badge', () => { + const onClickMock = jest.fn(); + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + screen.getByRole('button').click(); + + expect(onClickMock).toHaveBeenCalled(); + }); +}); diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx index e37e0bc7c50..5c61ed69caa 100644 --- a/src/components/datagrid/controls/data_grid_toolbar_control.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx @@ -12,16 +12,16 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { EuiNotificationBadge } from '../../badge'; import { useEuiI18n } from '../../i18n'; -export type DataGridToolbarControlProps = EuiButtonEmptyProps & { +export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & { buttonText: string | ReactElement; - badgeCount: number; + badgeCount?: number; }; -export const DataGridToolbarControl = ({ +export const EuiDataGridToolbarControl = ({ buttonText, badgeCount, ...buttonProps -}: DataGridToolbarControlProps) => { +}: EuiDataGridToolbarControlProps) => { const badgeAriaLabel = useEuiI18n( 'euiDataGridToolbarControl.badgeAriaLabel', 'Current count: {count}', @@ -37,7 +37,7 @@ export const DataGridToolbarControl = ({ gutterSize="s" > {buttonText} - {badgeCount > 0 && ( + {typeof badgeCount === 'number' && badgeCount > 0 && ( Date: Wed, 15 Nov 2023 12:56:24 +0100 Subject: [PATCH 03/24] Update tests --- .../__snapshots__/data_grid.test.tsx.snap | 92 +++++++++++++++++-- .../column_selector.test.tsx.snap | 23 ++++- .../column_sorting.test.tsx.snap | 21 ++++- 3 files changed, 125 insertions(+), 11 deletions(-) diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index b6dc51f0c29..4a6c364d340 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -485,12 +485,31 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
@@ -922,12 +941,31 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
@@ -1661,12 +1699,31 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
@@ -2097,12 +2154,31 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` > - Columns +
+
+ Columns +
+
+ + 2 + +
+
diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index 7ae7f5af061..2e6040e05ca 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -585,12 +585,31 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b > - Columns +
+
+ Columns +
+
+ + 2 + +
+
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index b562f7a2182..8cae67a1b2f 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -546,7 +546,26 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but - 1 field sorted +
+
+ Sort fields +
+
+ + 1 + +
+
From f6437455455a251894eea921295d7e16e272885f Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 15 Nov 2023 14:38:38 +0100 Subject: [PATCH 04/24] Add changelog --- changelogs/upcoming/7283.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelogs/upcoming/7283.md diff --git a/changelogs/upcoming/7283.md b/changelogs/upcoming/7283.md new file mode 100644 index 00000000000..7e239d92fd8 --- /dev/null +++ b/changelogs/upcoming/7283.md @@ -0,0 +1,2 @@ +- Added counter-badges to `EuiDataGrid`'s toolbar controls +- Updated `EuiDataGrid`'s toolbar columns button icon From 562a8eab02e06252c97bd5ef89506540ace57a2e Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 15 Nov 2023 15:21:44 +0100 Subject: [PATCH 05/24] Export EuiDataGridToolbarControl component and update its props --- changelogs/upcoming/7283.md | 3 +- .../datagrid/toolbar/additional_controls.tsx | 6 ++-- .../toolbar/render_custom_toolbar.tsx | 10 +++++-- .../datagrid/controls/column_selector.tsx | 13 +++----- .../datagrid/controls/column_sorting.tsx | 14 +++------ .../controls/data_grid_toolbar_control.tsx | 30 ++++++++++++------- src/components/datagrid/controls/index.ts | 1 + src/components/datagrid/data_grid_types.ts | 6 +++- src/components/datagrid/index.ts | 1 + 9 files changed, 47 insertions(+), 37 deletions(-) diff --git a/changelogs/upcoming/7283.md b/changelogs/upcoming/7283.md index 7e239d92fd8..f104bd06492 100644 --- a/changelogs/upcoming/7283.md +++ b/changelogs/upcoming/7283.md @@ -1,2 +1,3 @@ +- Added `EuiDataGridToolbarControl` component - Added counter-badges to `EuiDataGrid`'s toolbar controls -- Updated `EuiDataGrid`'s toolbar columns button icon +- Updated `EuiDataGrid`'s toolbar Columns button icon diff --git a/src-docs/src/views/datagrid/toolbar/additional_controls.tsx b/src-docs/src/views/datagrid/toolbar/additional_controls.tsx index d91c17d43d8..b45ba919abc 100644 --- a/src-docs/src/views/datagrid/toolbar/additional_controls.tsx +++ b/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 () => { setPopover((open) => !open)} > Download - + } isOpen={isPopoverOpen} closePopover={() => setPopover(false)} diff --git a/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx b/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx index 6f32b3a895a..4719fc1b8e3 100644 --- a/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx +++ b/src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx @@ -7,7 +7,7 @@ import { EuiDataGridSorting, EuiDataGridColumnSortingConfig, EuiDataGridToolbarProps, - EuiButtonEmpty, + EuiDataGridToolbarControl, EuiFormRow, EuiRange, EuiFlexGroup, @@ -59,9 +59,13 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({ > {hasRoomForGridControls && ( - + {}} + > Custom left side - + )} diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx index 6dc61fe3bcd..76805152945 100644 --- a/src/components/datagrid/controls/column_selector.tsx +++ b/src/components/datagrid/controls/column_selector.tsx @@ -102,10 +102,6 @@ export const useDataGridColumnSelector = ( const [columnSearchText, setColumnSearchText] = useState(''); - const controlBtnClasses = classNames('euiDataGrid__controlBtn', { - 'euiDataGrid__controlBtn--active': numberOfHiddenFields > 0, - }); - const filteredColumns = useMemo( () => sortedColumns.filter( @@ -169,15 +165,14 @@ export const useDataGridColumnSelector = ( hasDragDrop button={ 0} iconType="tableDensityNormal" - color="text" - className={controlBtnClasses} data-test-subj="dataGridColumnSelectorButton" onClick={() => setIsOpen(!isOpen)} - /> + > + {buttonText} + } > {allowColumnHiding && ( diff --git a/src/components/datagrid/controls/column_sorting.tsx b/src/components/datagrid/controls/column_sorting.tsx index c0e8407e2db..b21bad30ee0 100644 --- a/src/components/datagrid/controls/column_sorting.tsx +++ b/src/components/datagrid/controls/column_sorting.tsx @@ -6,7 +6,6 @@ * Side Public License, v 1. */ -import classNames from 'classnames'; import React, { ReactNode, useEffect, useState } from 'react'; import { DropResult } from '@hello-pangea/dnd'; import { EuiButtonEmpty } from '../../button'; @@ -100,10 +99,6 @@ export const useDataGridColumnSorting = ( } }; - const controlBtnClasses = classNames('euiDataGrid__controlBtn', { - 'euiDataGrid__controlBtn--active': sorting.columns.length > 0, - }); - const schemaDetails = (id: string | number) => schema.hasOwnProperty(id) && schema[id].columnType != null ? getDetailsForSchema(schemaDetectors, schema[id].columnType) @@ -134,15 +129,14 @@ export const useDataGridColumnSorting = ( hasDragDrop button={ 0} iconType="sortable" - color="text" - className={controlBtnClasses} data-test-subj="dataGridColumnSortingButton" onClick={() => setIsOpen(!isOpen)} - /> + > + {sortingButtonText} + } > {sorting.columns.length > 0 ? ( diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx index 5c61ed69caa..c197fb76fda 100644 --- a/src/components/datagrid/controls/data_grid_toolbar_control.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx @@ -6,19 +6,16 @@ * Side Public License, v 1. */ -import React, { ReactElement } from 'react'; -import { EuiButtonEmpty, type EuiButtonEmptyProps } from '../../button'; +import React from 'react'; +import classNames from 'classnames'; +import { EuiButtonEmpty } from '../../button'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { EuiNotificationBadge } from '../../badge'; import { useEuiI18n } from '../../i18n'; - -export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & { - buttonText: string | ReactElement; - badgeCount?: number; -}; +import { EuiDataGridToolbarControlProps } from '../data_grid_types'; export const EuiDataGridToolbarControl = ({ - buttonText, + children, badgeCount, ...buttonProps }: EuiDataGridToolbarControlProps) => { @@ -28,15 +25,28 @@ export const EuiDataGridToolbarControl = ({ { count: badgeCount } ); + const controlBtnClasses = classNames( + 'euiDataGrid__controlBtn', + { + 'euiDataGrid__controlBtn--active': buttonProps.isSelected, + }, + buttonProps.className + ); + return ( - + - {buttonText} + {children} {typeof badgeCount === 'number' && badgeCount > 0 && ( Date: Wed, 15 Nov 2023 15:28:22 +0100 Subject: [PATCH 06/24] Export EuiDataGridToolbarControl component and update its props --- .../data_grid_toolbar_control.test.tsx.snap | 4 ++-- src/components/datagrid/controls/column_selector.tsx | 2 +- src/components/datagrid/controls/column_sorting.tsx | 2 +- .../controls/data_grid_toolbar_control.test.tsx | 10 ++++++---- .../datagrid/controls/data_grid_toolbar_control.tsx | 3 ++- src/components/datagrid/data_grid_types.ts | 1 + 6 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap index e050539f1df..eaf5f925984 100644 --- a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap @@ -3,7 +3,7 @@ exports[`euiDataGridToolbarControl renders with a badge 1`] = `
@@ -300,12 +319,31 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b > - Columns +
+
+ Columns +
+
+ + 2 + +
+
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 8cae67a1b2f..64819fb0354 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -20,7 +20,26 @@ exports[`useDataGridColumnSorting columnSorting [React 16] renders a toolbar but - 1 field sorted +
+
+ Sort fields +
+
+ + 1 + +
+
@@ -283,7 +302,26 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but - 1 field sorted +
+
+ Sort fields +
+
+ + 1 + +
+
From 0d47cd7bc0689ff180e3ef44b24c39ce6e979530 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 15 Nov 2023 16:54:03 +0100 Subject: [PATCH 08/24] Rename changelog to PR id --- changelogs/upcoming/{7283.md => 7369.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename changelogs/upcoming/{7283.md => 7369.md} (100%) diff --git a/changelogs/upcoming/7283.md b/changelogs/upcoming/7369.md similarity index 100% rename from changelogs/upcoming/7283.md rename to changelogs/upcoming/7369.md From 8eb7277ffd6d13082d6a45030efcf9a2ca0528e8 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 15 Nov 2023 17:36:43 +0100 Subject: [PATCH 09/24] Don't highlight active controls and update label for hidden columns --- .../toolbar/render_custom_toolbar.tsx | 2 +- .../column_sorting.test.tsx.snap | 6 ++-- .../controls/column_selector.test.tsx | 6 ++-- .../datagrid/controls/column_selector.tsx | 29 +++++-------------- .../datagrid/controls/column_sorting.tsx | 3 +- .../data_grid_toolbar_control.test.tsx | 4 +-- .../controls/data_grid_toolbar_control.tsx | 12 +++----- src/components/datagrid/data_grid_types.ts | 3 +- 8 files changed, 23 insertions(+), 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 index 4719fc1b8e3..d3086fed78c 100644 --- 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 && ( {}} > 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 index 64819fb0354..9fda512654c 100644 --- 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" > `; @@ -30,12 +26,8 @@ exports[`EuiFilterButton props badgeColor renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> `; @@ -49,12 +41,8 @@ exports[`EuiFilterButton props grow can be turned off 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> `; @@ -68,12 +56,8 @@ exports[`EuiFilterButton props iconType and iconSide renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon" > - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> `; @@ -111,12 +91,8 @@ exports[`EuiFilterButton props isSelected renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> `; @@ -130,18 +106,14 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`] class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + - - - 5 - + 5 @@ -156,18 +128,14 @@ exports[`EuiFilterButton props numFilters renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + - - - 5 - + 5 @@ -182,12 +150,8 @@ exports[`EuiFilterButton props type renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> `; @@ -201,12 +165,8 @@ exports[`EuiFilterButton props withNext renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> `; @@ -222,12 +182,8 @@ exports[`EuiFilterButton renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - + class="euiFilterButton__text emotion-euiFilterButton__text" + /> `; @@ -243,18 +199,14 @@ exports[`EuiFilterButton renders zero properly 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + - - - 0 - + 0 diff --git a/src/components/filter_group/filter_button.styles.ts b/src/components/filter_group/filter_button.styles.ts index c0ac6e2c1b2..a269948c35a 100644 --- a/src/components/filter_group/filter_button.styles.ts +++ b/src/components/filter_group/filter_button.styles.ts @@ -42,11 +42,11 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => { /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */ &:hover:not(:disabled), - &:focus:not(:disabled) { + &:focus { /* Remove underline from whole button so notifications don't get the underline */ text-decoration: none; - .euiFilterButton__textShift { + .euiFilterButton__text { /* And put it only on the actual text part */ text-decoration: underline; } @@ -83,17 +83,14 @@ export const euiFilterButtonChildStyles = ({ euiTheme }: UseEuiTheme) => { content: { euiFilterButton__content: css``, hasIcon: css` - justify-content: space-between; + /* Align the dropdown arrow/caret to the right */ + & > .euiIcon:last-child { + ${logicalCSS('margin-left', 'auto')} + } `, }, text: { - euiFilterButton__text: css``, - hasNotification: css` - display: flex; - align-items: center; - gap: ${euiTheme.size.s}; - `, - euiFilterButton__textShift: css` + euiFilterButton__text: css` ${euiTextShift('bold', 'data-text', euiTheme)} ${euiTextTruncate()} ${logicalCSS( diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index 3f7354a28da..34d24769c9b 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/src/components/filter_group/filter_button.tsx @@ -103,6 +103,9 @@ export const EuiFilterButton: FunctionComponent = ({ className ); + /** + * Badge + */ const showBadge = numFiltersDefined || numActiveFiltersDefined; const badgeCount = numActiveFilters || numFilters; const activeBadgeLabel = useEuiI18n( @@ -116,12 +119,6 @@ export const EuiFilterButton: FunctionComponent = ({ { count: badgeCount } ); - const buttonTextClassNames = classNames( - 'euiFilterButton__text', - { 'euiFilterButton__text-hasNotification': showBadge }, - textProps && textProps.className - ); - const badgeContent = showBadge && ( = ({ ); + /** + * Text + */ + const buttonTextClassNames = classNames( + 'euiFilterButton__text', + { 'euiFilterButton__text-hasNotification': showBadge }, + textProps && textProps.className + ); + const textCssStyles = [ + textStyles.euiFilterButton__text, + textProps && textProps.css, + ]; + const [ref, innerText] = useInnerText(); const dataText = children && typeof children === 'string' ? children : innerText; - const buttonContents = ( - <> - - {children} - - {badgeContent} - + const textContent = ( + + {children} + ); return ( @@ -165,15 +173,7 @@ export const EuiFilterButton: FunctionComponent = ({ iconSide={iconSide} iconType={iconType} type={type} - textProps={{ - ...textProps, - className: buttonTextClassNames, - css: [ - textStyles.euiFilterButton__text, - showBadge && textStyles.hasNotification, - textProps && textProps.css, - ], - }} + textProps={false} contentProps={{ ...contentProps, css: [ @@ -184,7 +184,8 @@ export const EuiFilterButton: FunctionComponent = ({ }} {...rest} > - {buttonContents} + {textContent} + {badgeContent} ); }; diff --git a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap index afc2a6f729a..98f6fb63890 100644 --- a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap +++ b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap @@ -145,15 +145,11 @@ exports[`SearchBar render - provided query, filters 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Open - + Open @@ -168,15 +164,11 @@ exports[`SearchBar render - provided query, filters 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon" > - - Tag - + Tag - - Open - + Open @@ -42,15 +38,11 @@ exports[`EuiSearchBarFilters render - with filters 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon" > - - Tag - + Tag - - Kibana - + Kibana @@ -34,15 +30,11 @@ exports[`FieldValueToggleFilter render - active negated - custom negated name 1` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Others - + Others @@ -58,15 +50,11 @@ exports[`FieldValueToggleFilter render - active negated 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Not Kibana - + Not Kibana @@ -82,15 +70,11 @@ exports[`FieldValueToggleFilter renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Kibana - + Kibana diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap index ceedeec3b89..838f9e4575d 100644 --- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap +++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap @@ -10,15 +10,11 @@ exports[`TermToggleGroupFilter render - active 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Kibana - + Kibana @@ -34,15 +30,11 @@ exports[`TermToggleGroupFilter render - active negated - custom negated name 1`] class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - -Kibana - + -Kibana @@ -58,15 +50,11 @@ exports[`TermToggleGroupFilter render - active negated 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Not Kibana - + Not Kibana @@ -82,15 +70,11 @@ exports[`TermToggleGroupFilter renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Kibana - + Kibana diff --git a/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap index 60c3bda6148..48522efff02 100644 --- a/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap +++ b/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap @@ -10,15 +10,11 @@ exports[`IsFilter render 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - Open - + Open From 5e3b8c96ace7845f5e155be628cc351e6d6c7086 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 12:23:15 -0800 Subject: [PATCH 14/24] Update datagrid button to use new `textProps={false}` - this allows us to remove the extra flex group/wrappers completely, as the text and badge node now sit as siblings and automatically inherit button content flex layout - also lets us correctly text truncate the text content, if needed --- .../data_grid_toolbar_control.test.tsx.snap | 42 +++++-------------- .../controls/data_grid_toolbar_control.tsx | 39 ++++++++--------- 2 files changed, 31 insertions(+), 50 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap index 40d299863c6..501d30ba6f8 100644 --- a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap @@ -14,28 +14,16 @@ exports[`euiDataGridToolbarControl renders with a badge 1`] = ` data-euiicon-type="sortable" /> -
-
- Test button text -
-
- - 5 - -
-
+ Test button text + + + 5 @@ -56,17 +44,9 @@ exports[`euiDataGridToolbarControl renders without a badge 1`] = ` data-euiicon-type="sortable" /> -
-
- Test button text -
-
+ Test button text diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx index 6068f8c4712..ed80024d7b3 100644 --- a/src/components/datagrid/controls/data_grid_toolbar_control.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx @@ -9,7 +9,6 @@ import React from 'react'; import classNames from 'classnames'; import { EuiButtonEmpty } from '../../button'; -import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { EuiNotificationBadge } from '../../badge'; import { useEuiI18n } from '../../i18n'; import { EuiDataGridToolbarControlProps } from '../data_grid_types'; @@ -17,6 +16,7 @@ import { EuiDataGridToolbarControlProps } from '../data_grid_types'; export const EuiDataGridToolbarControl = ({ children, badgeContent, + textProps, ...buttonProps }: EuiDataGridToolbarControlProps) => { const badgeAriaLabel = useEuiI18n( @@ -34,28 +34,29 @@ export const EuiDataGridToolbarControl = ({ - - {children} - {Boolean(badgeContent) && ( - - - {badgeContent} - - + + > + {children} + + + {Boolean(badgeContent) && ( + + {badgeContent} + + )} ); }; From 472161ea9fc1b4b522fbfee1a4d014fbbde999a6 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 12:49:52 -0800 Subject: [PATCH 15/24] [misc cleanup] Move new component props to file - TBH, the types are so simple I don't anticipate many consumers needing it, and I'd rather keep them where they're used. If consumers really do need it they can import directly from this file or use PropsOf - use `FC<>` typing to match rest of EUI --- .../controls/data_grid_toolbar_control.tsx | 19 ++++++++++--------- src/components/datagrid/controls/index.ts | 5 ++++- src/components/datagrid/data_grid_types.ts | 6 +----- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx index ed80024d7b3..38a26c38ace 100644 --- a/src/components/datagrid/controls/data_grid_toolbar_control.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx @@ -6,19 +6,20 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { FunctionComponent } from 'react'; import classNames from 'classnames'; -import { EuiButtonEmpty } from '../../button'; + +import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button'; import { EuiNotificationBadge } from '../../badge'; import { useEuiI18n } from '../../i18n'; -import { EuiDataGridToolbarControlProps } from '../data_grid_types'; -export const EuiDataGridToolbarControl = ({ - children, - badgeContent, - textProps, - ...buttonProps -}: EuiDataGridToolbarControlProps) => { +export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & { + badgeContent?: number | string; +}; + +export const EuiDataGridToolbarControl: FunctionComponent< + EuiDataGridToolbarControlProps +> = ({ children, badgeContent, textProps, ...buttonProps }) => { const badgeAriaLabel = useEuiI18n( 'euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', diff --git a/src/components/datagrid/controls/index.ts b/src/components/datagrid/controls/index.ts index a5633daba50..8b17b80bb86 100644 --- a/src/components/datagrid/controls/index.ts +++ b/src/components/datagrid/controls/index.ts @@ -15,4 +15,7 @@ export { checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar, } from './data_grid_toolbar'; -export { EuiDataGridToolbarControl } from './data_grid_toolbar_control'; +export { + EuiDataGridToolbarControl, + type EuiDataGridToolbarControlProps, +} from './data_grid_toolbar_control'; diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 5c81d40de41..07f891a05f2 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -26,7 +26,7 @@ import { GridOnItemsRenderedProps, } from 'react-window'; import { EuiListGroupItemProps } from '../list_group'; -import { EuiButtonEmpty, EuiButtonEmptyProps, EuiButtonIcon } from '../button'; +import { EuiButtonEmpty, EuiButtonIcon } from '../button'; import { ExclusiveUnion, CommonProps, OneOf } from '../common'; import { RowHeightUtilsType } from './utils/row_heights'; import { IconType } from '../icon'; @@ -62,10 +62,6 @@ export interface EuiDataGridCustomToolbarProps { columnSortingControl: ReactNode; } -export type EuiDataGridToolbarControlProps = EuiButtonEmptyProps & { - badgeContent?: number | string; -}; - export interface EuiDataGridPaginationRendererProps extends EuiDataGridPaginationProps { rowCount: number; From 184f1b776df36d15d764a274856a47f0c02472f4 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 12:40:12 -0800 Subject: [PATCH 16/24] 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 --- .../toolbar/render_custom_toolbar.tsx | 2 +- .../controls/data_grid_toolbar_control.tsx | 30 ++++++++++++++----- 2 files changed, 23 insertions(+), 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 index d3086fed78c..0657f7ff511 100644 --- 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 index 38a26c38ace..69182e2fff7 100644 --- 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 ( Date: Tue, 21 Nov 2023 13:44:22 -0800 Subject: [PATCH 17/24] [cleanup] Remove `.euiDataGrid__controlBtn` className - in favor of `.euiDataGridToolbarControl` (now that we have a specific component for this) - remove the active `font-weight` as well, since it's no longer being used - remove `.euiDataGrid__controlBtn` from the icon buttons as well - they're not consistently applied and they're not really doing anything, nor are they being hooked into in Kibana for the icon buttons - replace fullscreen hook with `aria-pressed` instead + snapshot updates --- .../__snapshots__/data_grid.test.tsx.snap | 148 ++++++------------ .../column_selector.test.tsx.snap | 32 ++-- .../column_sorting.test.tsx.snap | 32 ++-- .../display_selector.test.tsx.snap | 1 - .../datagrid/controls/_data_grid_toolbar.scss | 5 - .../datagrid/controls/display_selector.tsx | 1 - .../datagrid/controls/fullscreen_selector.tsx | 9 +- 7 files changed, 75 insertions(+), 153 deletions(-) diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index edcdcacfffd..e0433fb8303 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/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" > @@ -552,7 +540,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` > @@ -990,7 +967,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = ` > @@ -1703,7 +1669,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = ` > @@ -2140,7 +2095,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = ` > diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index a7f43a5a1fd..0bc9fa82ab3 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -570,7 +570,7 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but data-test-subj="dataGridColumnSortingPopover" > diff --git a/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap index d806098b349..a690d2e23c4 100644 --- a/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap @@ -13,7 +13,6 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop > setIsOpen(!isOpen)} diff --git a/src/components/datagrid/controls/fullscreen_selector.tsx b/src/components/datagrid/controls/fullscreen_selector.tsx index c76ba9931ee..d151e7f2f59 100644 --- a/src/components/datagrid/controls/fullscreen_selector.tsx +++ b/src/components/datagrid/controls/fullscreen_selector.tsx @@ -15,7 +15,7 @@ import React, { KeyboardEvent, KeyboardEventHandler, } from 'react'; -import classNames from 'classnames'; + import { keys } from '../../../services'; import { EuiToolTip } from '../../tool_tip'; import { EuiButtonIcon } from '../../button'; @@ -38,9 +38,6 @@ export const useDataGridFullScreenSelector = (): { ], ['Enter fullscreen', 'Exit fullscreen'] ); - const controlBtnClasses = classNames('euiDataGrid__controlBtn', { - 'euiDataGrid__controlBtn--active': isFullScreen, - }); const fullScreenSelector = useMemo( () => ( setIsFullScreen(!isFullScreen)} aria-label={isFullScreen ? fullScreenButtonActive : fullScreenButton} /> ), - [isFullScreen, controlBtnClasses, fullScreenButton, fullScreenButtonActive] + [isFullScreen, fullScreenButton, fullScreenButtonActive] ); const handleGridKeyDown = useCallback( From 41aac637449132e74ea19bbc2c4108a28740062a Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 12:48:44 -0800 Subject: [PATCH 18/24] [cleanup] EuiDataGridToolbarControl tests - make unit tests more focused - add specific assertions in addition to snapshots - add test for new `textProps` behavior --- .../data_grid_toolbar_control.test.tsx.snap | 76 +++++++++---------- .../data_grid_toolbar_control.test.tsx | 50 +++++++----- 2 files changed, 66 insertions(+), 60 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap index 501d30ba6f8..aeb390d3eba 100644 --- a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap @@ -1,54 +1,48 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`euiDataGridToolbarControl renders with a badge 1`] = ` -
- -
+ + `; -exports[`euiDataGridToolbarControl renders without a badge 1`] = ` -
- -
+ + `; diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx index 6ae1d86b000..8fab0d361f1 100644 --- a/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar_control.test.tsx @@ -7,47 +7,59 @@ */ import React from 'react'; -import { render, screen } from '../../../test/rtl'; +import { render } from '../../../test/rtl'; +import { shouldRenderCustomStyles } from '../../../test/internal'; +import { requiredProps } from '../../../test'; import { EuiDataGridToolbarControl } from './data_grid_toolbar_control'; describe('euiDataGridToolbarControl', () => { - it('renders with a badge', () => { - const onClickMock = jest.fn(); + shouldRenderCustomStyles(); + it('passes props to the underlying EuiButtonEmpty', () => { const { container } = render( Test button text ); - expect(container).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); - it('renders without a badge', () => { - const onClickMock = jest.fn(); - + it('renders with a badge', () => { const { container } = render( - + Test button text ); - expect(container).toMatchSnapshot(); - screen.getByRole('button').click(); + expect(container.firstChild).toMatchSnapshot(); + expect( + container.querySelector('.euiDataGridToolbarControl__badge') + ).toBeInTheDocument(); + }); + + it('renders textProps onto the custom text wrapper', () => { + const { container } = render( + + Test button text + + ); - expect(onClickMock).toHaveBeenCalled(); + expect(container.querySelector('.euiDataGridToolbarControl__text')) + .toMatchInlineSnapshot(` + + Test button text + + `); }); }); From 4c3c8e56db59e33caf41e160a419049dc5389e4e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 13:34:22 -0800 Subject: [PATCH 19/24] [cleanup] Badge text assertions - make the text assertion more specific, now that we can look at the badge node --- .../controls/column_selector.test.tsx | 18 ++++++++++++----- src/components/datagrid/data_grid.test.tsx | 20 ++++++++++--------- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/components/datagrid/controls/column_selector.test.tsx b/src/components/datagrid/controls/column_selector.test.tsx index f76f88dc6be..075c38621bd 100644 --- a/src/components/datagrid/controls/column_selector.test.tsx +++ b/src/components/datagrid/controls/column_selector.test.tsx @@ -184,6 +184,13 @@ describe('useDataGridColumnSelector', () => { describe('column visibility', () => { const showColumnSelector = { allowHide: true, allowReorder: false }; + const getButtonText = (component: ReactWrapper) => { + return component.find('span.euiDataGridToolbarControl__text').text(); + }; + const getBadgeText = (component: ReactWrapper) => { + return component.find('span.euiDataGridToolbarControl__badge').text(); + }; + it('shows the number of columns hidden as the toolbar button text', () => { const component = mount( { /> ); - expect(component.text()).toEqual('Columns0/2'); + expect(getButtonText(component)).toEqual('Columns'); + expect(getBadgeText(component)).toEqual('0/2'); }); it('toggles column visibility on switch interaction', () => { @@ -207,7 +215,7 @@ describe('useDataGridColumnSelector', () => { ).simulate('click'); forceUpdate(component); - expect(component.text()).toEqual('Columns1/2'); + expect(getBadgeText(component)).toEqual('1/2'); findTestSubject( component, @@ -215,7 +223,7 @@ describe('useDataGridColumnSelector', () => { ).simulate('click'); forceUpdate(component); - expect(component.text()).not.toEqual('1 column hidden'); + expect(getBadgeText(component)).toEqual('2'); }); it('toggles all column visibility with the show/hide all buttons', () => { @@ -230,7 +238,7 @@ describe('useDataGridColumnSelector', () => { ).simulate('click'); forceUpdate(component); - expect(component.text()).toEqual('Columns0/2'); + expect(getBadgeText(component)).toEqual('0/2'); findTestSubject( component, @@ -238,7 +246,7 @@ describe('useDataGridColumnSelector', () => { ).simulate('click'); forceUpdate(component); - expect(component.text()).toEqual('Columns2'); + expect(getBadgeText(component)).toEqual('2'); }); }); }); diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index 74210e777ec..2eb963f13dd 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -1901,13 +1901,15 @@ describe('EuiDataGrid', () => { /> ); - // 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'); + // Get column sort count + const getBadgeText = () => { + const button = component.find( + 'EuiButtonEmpty[data-test-subj="dataGridColumnSortingButton"]' + ); + const badge = button.find('span.euiDataGridToolbarControl__badge'); + return badge.length ? badge.text() : false; + }; + expect(getBadgeText()).toBeFalsy(); // Update sorted columns component.setProps({ @@ -1916,7 +1918,7 @@ describe('EuiDataGrid', () => { onSort: () => {}, }, }); - expect(getButtonText()).toEqual('Sort fields1'); + expect(getBadgeText()).toEqual('1'); // Update sorted columns again component.setProps({ @@ -1928,7 +1930,7 @@ describe('EuiDataGrid', () => { onSort: () => {}, }, }); - expect(getButtonText()).toEqual('Sort fields2'); + expect(getBadgeText()).toEqual('2'); }); }); From f4d0c88d22c480ac62543facea720e72994d3e28 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 13:32:06 -0800 Subject: [PATCH 20/24] [a11y] Screen reader UX improvements for columns badge + simplify logic of columns badge --- .../data_grid_toolbar_control.test.tsx.snap | 2 +- .../datagrid/controls/column_selector.tsx | 6 ++---- .../controls/data_grid_toolbar_control.tsx | 14 ++++++++++++-- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap index aeb390d3eba..64dd49abd84 100644 --- a/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap @@ -37,7 +37,7 @@ exports[`euiDataGridToolbarControl renders with a badge 1`] = ` Test button text diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx index c8ba621cbac..e61de0c29c8 100644 --- a/src/components/datagrid/controls/column_selector.tsx +++ b/src/components/datagrid/controls/column_selector.tsx @@ -149,10 +149,8 @@ export const useDataGridColumnSelector = ( 0 - ? `${orderedVisibleColumns.length}/${ - numberOfHiddenFields + orderedVisibleColumns.length - }` - : orderedVisibleColumns.length + ? `${orderedVisibleColumns.length}/${availableColumns.length}` + : availableColumns.length } iconType="tableDensityNormal" data-test-subj="dataGridColumnSelectorButton" diff --git a/src/components/datagrid/controls/data_grid_toolbar_control.tsx b/src/components/datagrid/controls/data_grid_toolbar_control.tsx index 69182e2fff7..3bbddcf9bea 100644 --- a/src/components/datagrid/controls/data_grid_toolbar_control.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar_control.tsx @@ -26,7 +26,12 @@ export const EuiDataGridToolbarControl: FunctionComponent< const badgeAriaLabel = useEuiI18n( 'euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', - { count: badgeContent } + { + count: + typeof badgeContent === 'string' + ? betterScreenReaderSlashes(badgeContent) + : badgeContent, + } ); return ( @@ -66,7 +71,7 @@ export const EuiDataGridToolbarControl: FunctionComponent< cursor: inherit; `} color="subdued" - aria-label={badgeAriaLabel} + aria-label={`- ${badgeAriaLabel}`} // Punctuation helps add pauses for screen readers role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role > {badgeContent} @@ -75,3 +80,8 @@ export const EuiDataGridToolbarControl: FunctionComponent< ); }; + +// The columns control specifically passes (e.g.) `5/10` when some columns +// are being hidden. We can make this a bit more legible to SRs with this quick util +const betterScreenReaderSlashes = (badgeContent: string) => + badgeContent.replaceAll('/', ' out of '); From 9a67614b1e579918a85268e85e45a718b7bb0651 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 14:14:34 -0800 Subject: [PATCH 21/24] changelog --- changelogs/upcoming/7369.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/changelogs/upcoming/7369.md b/changelogs/upcoming/7369.md index f104bd06492..f23fc30080f 100644 --- a/changelogs/upcoming/7369.md +++ b/changelogs/upcoming/7369.md @@ -1,3 +1,3 @@ -- Added `EuiDataGridToolbarControl` component -- Added counter-badges to `EuiDataGrid`'s toolbar controls -- Updated `EuiDataGrid`'s toolbar Columns button icon +- 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 From 545e6de4f16f2b022f7519c54d696471fb7d2325 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 14:25:57 -0800 Subject: [PATCH 22/24] Revert "[EuiFilterButton] Clean up DOM/CSS by disabling text wrapper" - This is too noisy for a datagrid-specific PR, I'll cherry-pick it out and open up a follow-up PR once this one merges This reverts commit 3408cfb3bf7e96c4a0936a84b347ebeba5afb0c5. --- .../__snapshots__/filter_button.test.tsx.snap | 126 ++++++++++++------ .../filter_group/filter_button.styles.ts | 17 ++- src/components/filter_group/filter_button.tsx | 59 ++++---- .../__snapshots__/search_bar.test.tsx.snap | 24 ++-- .../search_filters.test.tsx.snap | 24 ++-- .../field_value_toggle_filter.test.tsx.snap | 48 ++++--- ...ld_value_toggle_group_filter.test.tsx.snap | 48 ++++--- .../__snapshots__/is_filter.test.tsx.snap | 12 +- 8 files changed, 230 insertions(+), 128 deletions(-) diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap index cb83f85064c..944dd9122ab 100644 --- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap +++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap @@ -11,8 +11,12 @@ exports[`EuiFilterButton does not render a badge or count if numFilters is not p class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -26,8 +30,12 @@ exports[`EuiFilterButton props badgeColor renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -41,8 +49,12 @@ exports[`EuiFilterButton props grow can be turned off 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -56,8 +68,12 @@ exports[`EuiFilterButton props iconType and iconSide renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -91,8 +111,12 @@ exports[`EuiFilterButton props isSelected renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -106,14 +130,18 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`] class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - 5 + + + 5 + @@ -128,14 +156,18 @@ exports[`EuiFilterButton props numFilters renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - 5 + + + 5 + @@ -150,8 +182,12 @@ exports[`EuiFilterButton props type renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -165,8 +201,12 @@ exports[`EuiFilterButton props withNext renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -182,8 +222,12 @@ exports[`EuiFilterButton renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > + class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text" + > + + `; @@ -199,14 +243,18 @@ exports[`EuiFilterButton renders zero properly 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - - 0 + + + 0 + diff --git a/src/components/filter_group/filter_button.styles.ts b/src/components/filter_group/filter_button.styles.ts index a269948c35a..c0ac6e2c1b2 100644 --- a/src/components/filter_group/filter_button.styles.ts +++ b/src/components/filter_group/filter_button.styles.ts @@ -42,11 +42,11 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => { /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */ &:hover:not(:disabled), - &:focus { + &:focus:not(:disabled) { /* Remove underline from whole button so notifications don't get the underline */ text-decoration: none; - .euiFilterButton__text { + .euiFilterButton__textShift { /* And put it only on the actual text part */ text-decoration: underline; } @@ -83,14 +83,17 @@ export const euiFilterButtonChildStyles = ({ euiTheme }: UseEuiTheme) => { content: { euiFilterButton__content: css``, hasIcon: css` - /* Align the dropdown arrow/caret to the right */ - & > .euiIcon:last-child { - ${logicalCSS('margin-left', 'auto')} - } + justify-content: space-between; `, }, text: { - euiFilterButton__text: css` + euiFilterButton__text: css``, + hasNotification: css` + display: flex; + align-items: center; + gap: ${euiTheme.size.s}; + `, + euiFilterButton__textShift: css` ${euiTextShift('bold', 'data-text', euiTheme)} ${euiTextTruncate()} ${logicalCSS( diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index 34d24769c9b..3f7354a28da 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/src/components/filter_group/filter_button.tsx @@ -103,9 +103,6 @@ export const EuiFilterButton: FunctionComponent = ({ className ); - /** - * Badge - */ const showBadge = numFiltersDefined || numActiveFiltersDefined; const badgeCount = numActiveFilters || numFilters; const activeBadgeLabel = useEuiI18n( @@ -119,6 +116,12 @@ export const EuiFilterButton: FunctionComponent = ({ { count: badgeCount } ); + const buttonTextClassNames = classNames( + 'euiFilterButton__text', + { 'euiFilterButton__text-hasNotification': showBadge }, + textProps && textProps.className + ); + const badgeContent = showBadge && ( = ({ ); - /** - * Text - */ - const buttonTextClassNames = classNames( - 'euiFilterButton__text', - { 'euiFilterButton__text-hasNotification': showBadge }, - textProps && textProps.className - ); - const textCssStyles = [ - textStyles.euiFilterButton__text, - textProps && textProps.css, - ]; - const [ref, innerText] = useInnerText(); const dataText = children && typeof children === 'string' ? children : innerText; + const buttonContents = ( + <> + + {children} + - const textContent = ( - - {children} - + {badgeContent} + ); return ( @@ -173,7 +165,15 @@ export const EuiFilterButton: FunctionComponent = ({ iconSide={iconSide} iconType={iconType} type={type} - textProps={false} + textProps={{ + ...textProps, + className: buttonTextClassNames, + css: [ + textStyles.euiFilterButton__text, + showBadge && textStyles.hasNotification, + textProps && textProps.css, + ], + }} contentProps={{ ...contentProps, css: [ @@ -184,8 +184,7 @@ export const EuiFilterButton: FunctionComponent = ({ }} {...rest} > - {textContent} - {badgeContent} + {buttonContents} ); }; diff --git a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap index 98f6fb63890..afc2a6f729a 100644 --- a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap +++ b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap @@ -145,11 +145,15 @@ exports[`SearchBar render - provided query, filters 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Open + + Open + @@ -164,11 +168,15 @@ exports[`SearchBar render - provided query, filters 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon" > - Tag + + Tag + - Open + + Open + @@ -38,11 +42,15 @@ exports[`EuiSearchBarFilters render - with filters 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon" > - Tag + + Tag + - Kibana + + Kibana + @@ -30,11 +34,15 @@ exports[`FieldValueToggleFilter render - active negated - custom negated name 1` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Others + + Others + @@ -50,11 +58,15 @@ exports[`FieldValueToggleFilter render - active negated 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Not Kibana + + Not Kibana + @@ -70,11 +82,15 @@ exports[`FieldValueToggleFilter renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Kibana + + Kibana + diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap index 838f9e4575d..ceedeec3b89 100644 --- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap +++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap @@ -10,11 +10,15 @@ exports[`TermToggleGroupFilter render - active 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Kibana + + Kibana + @@ -30,11 +34,15 @@ exports[`TermToggleGroupFilter render - active negated - custom negated name 1`] class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - -Kibana + + -Kibana + @@ -50,11 +58,15 @@ exports[`TermToggleGroupFilter render - active negated 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Not Kibana + + Not Kibana + @@ -70,11 +82,15 @@ exports[`TermToggleGroupFilter renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Kibana + + Kibana + diff --git a/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap index 48522efff02..60c3bda6148 100644 --- a/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap +++ b/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap @@ -10,11 +10,15 @@ exports[`IsFilter render 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" > - Open + + Open + From 44cb0f46a350851acef097fb4289f85659a0eec4 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 21 Nov 2023 14:55:19 -0800 Subject: [PATCH 23/24] [docs] Add more documentation for new `EuiDataGridToolbarControl` - update copy + props tables --- .../toolbar/datagrid_toolbar_example.js | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js b/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js index 9998f094434..fe92a60e883 100644 --- a/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js +++ b/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 = {

Although any node is allowed, the recommendation is to use{' '} - {''} for the + {''} for the left-side of the toolbar and{' '} {''} for the right-side of the toolbar. @@ -186,6 +190,7 @@ export const DataGridToolbarExample = { EuiDataGridToolBarVisibilityOptions, EuiDataGridToolBarAdditionalControlsOptions, EuiDataGridToolBarAdditionalControlsLeftOptions, + EuiDataGridToolbarControl, }, demo: , }, @@ -211,18 +216,27 @@ export const DataGridToolbarExample = { renderCustomToolbar 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{' '} + {''} subcomponent + when rendering custom controls.

+ + 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. + ), demo: , props: { EuiDataGridCustomToolbarProps, + EuiDataGridToolbarControl, }, snippet: ` Date: Tue, 21 Nov 2023 15:33:18 -0800 Subject: [PATCH 24/24] React 16/17 snapshots - gets me every time... --- .../column_selector.test.tsx.snap | 64 ++++++------------- .../column_sorting.test.tsx.snap | 64 ++++++------------- 2 files changed, 40 insertions(+), 88 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index e42760dda99..c18c44fbb19 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -6,7 +6,7 @@ exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar b data-test-subj="dataGridColumnSelectorPopover" > @@ -310,7 +298,7 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b data-test-subj="dataGridColumnSelectorPopover" > diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 0bc9fa82ab3..cd7eee17d4d 100644 --- 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" > @@ -288,7 +276,7 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but data-test-subj="dataGridColumnSortingPopover" >