From 7b9109dde0525f8849d14529eabb24b3724a0af6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 8 Nov 2021 10:30:30 -0500 Subject: [PATCH 1/7] =?UTF-8?q?Update=20some=20props=20comments=20and=20fi?= =?UTF-8?q?x=20popover=E2=80=99s=20responsiveness?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/style_selector.test.tsx.snap | 2 +- .../datagrid/controls/_data_grid_display.scss | 4 ++-- src/components/datagrid/controls/style_selector.tsx | 2 +- src/components/datagrid/data_grid_types.ts | 12 ++++++------ 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap index 7c096fc42b2..7efed7c1aa0 100644 --- a/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap @@ -21,7 +21,7 @@ exports[`useDataGridStyleSelector styleSelector renders a toolbar button/popover hasArrow={true} isOpen={false} ownFocus={true} - panelClassName="euiDataGrid__controlPopover" + panelClassName="euiDataGrid__stylePopoverPanel" panelPaddingSize="s" > setIsOpen(false)} anchorPosition="downRight" panelPaddingSize="s" - panelClassName="euiDataGrid__controlPopover" + panelClassName="euiDataGrid__stylePopoverPanel" button={ ` to match the existing controls on the left. */ left?: ReactNode; /** - * Will prepend the passed node into the right side of the toolbar, before the density & full screen controls. - * We recommend using `xs`-sized `EuiButtonIcons`s to match the existing controls on the right. + * Will prepend the passed node into the right side of the toolbar, **before** the density & full screen controls. + * We recommend using `` to match the existing controls on the right. */ right?: ReactNode; } From 1c9d899f425e8daba0bddc73469b036e4a8c3071 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 8 Nov 2021 10:54:33 -0500 Subject: [PATCH 2/7] [Design] Remove a few extraneous style overrides to control buttons And lower left padding --- .../datagrid/controls/_data_grid_toolbar.scss | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/datagrid/controls/_data_grid_toolbar.scss b/src/components/datagrid/controls/_data_grid_toolbar.scss index e9f77596327..7e3d9b42afa 100644 --- a/src/components/datagrid/controls/_data_grid_toolbar.scss +++ b/src/components/datagrid/controls/_data_grid_toolbar.scss @@ -3,7 +3,7 @@ position: relative; z-index: 3; // Needs to sit above the content blow that sits below it border: $euiBorderThin; - padding: $euiSizeXS; + padding: $euiSizeXS $euiSizeXS $euiSizeXS 0; display: flex; justify-content: space-between; } @@ -28,18 +28,9 @@ } } -.euiDataGrid__controlBtn { - border-radius: $euiBorderRadius; - - &:focus { - background: shadeOrTint($euiColorLightestShade, 10%, 10%); - } -} - .euiDataGrid__controlBtn--active, .euiDataGrid__controlBtn--active:focus { font-weight: $euiFontWeightSemiBold; - color: $euiColorFullShade; } @include euiDataGridStyles(bordersNone) { From 3a2a2211b9ee5dc62da31dfcb8dfeab9e504fcec Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 8 Nov 2021 11:08:15 -0500 Subject: [PATCH 3/7] Fixed add/remove of fullscreen body class --- .../datagrid/controls/data_grid_toolbar.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx index 058277a78d2..9362a6fa3c7 100644 --- a/src/components/datagrid/controls/data_grid_toolbar.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { useEffect } from 'react'; import { EuiButtonIcon } from '../../button'; import { useEuiI18n } from '../../i18n'; import { @@ -48,11 +48,18 @@ export const EuiDataGridToolbar = ({ ? true : gridWidth > minSizeForControls || isFullScreen; - // need to safely access those Web APIs - if (typeof document !== 'undefined') { - // When data grid is full screen, we add a class to the body to remove the extra scrollbar - document.body.classList.toggle(GRID_IS_FULLSCREEN_CLASSNAME, isFullScreen); - } + useEffect(() => { + // When data grid is full screen, we add a class to the body to remove the extra scrollbar and stay above any fixed headers + if (isFullScreen && typeof document !== 'undefined') { + document.body.classList.add(GRID_IS_FULLSCREEN_CLASSNAME); + + return () => { + if (typeof document !== 'undefined') { + document.body.classList.remove(GRID_IS_FULLSCREEN_CLASSNAME); + } + }; + } + }, [isFullScreen]); const fullScreenSelector = ( Date: Mon, 8 Nov 2021 11:19:52 -0500 Subject: [PATCH 4/7] Added tooltips around icon buttons with long delay --- .../__snapshots__/data_grid.test.tsx.snap | 224 ++++++++++-------- .../style_selector.test.tsx.snap | 25 +- .../controls/data_grid_toolbar.test.tsx | 25 +- .../datagrid/controls/data_grid_toolbar.tsx | 32 ++- .../datagrid/controls/style_selector.tsx | 26 +- 5 files changed, 200 insertions(+), 132 deletions(-) diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index bd507bb4161..4bd0193a57b 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -986,34 +986,42 @@ Array [
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
+ + + } closePopover={[Function]} data-test-subj="dataGridStyleSelectorPopover" diff --git a/src/components/datagrid/controls/data_grid_toolbar.test.tsx b/src/components/datagrid/controls/data_grid_toolbar.test.tsx index d4daff865d2..ee99cd71d7d 100644 --- a/src/components/datagrid/controls/data_grid_toolbar.test.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar.test.tsx @@ -52,15 +52,22 @@ describe('EuiDataGridToolbar', () => {
mock style selector
- + + +
`); diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx index 9362a6fa3c7..15b7ce80237 100644 --- a/src/components/datagrid/controls/data_grid_toolbar.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar.tsx @@ -7,6 +7,7 @@ */ import React, { useEffect } from 'react'; +import { EuiToolTip } from '../../tool_tip'; import { EuiButtonIcon } from '../../button'; import { useEuiI18n } from '../../i18n'; import { @@ -62,15 +63,28 @@ export const EuiDataGridToolbar = ({ }, [isFullScreen]); const fullScreenSelector = ( - setIsFullScreen(!isFullScreen)} - aria-label={isFullScreen ? fullScreenButtonActive : fullScreenButton} - /> + + {fullScreenButtonActive} (esc) + + ) : ( + fullScreenButton + ) + } + delay="long" + > + setIsFullScreen(!isFullScreen)} + aria-label={isFullScreen ? fullScreenButtonActive : fullScreenButton} + /> + ); return ( diff --git a/src/components/datagrid/controls/style_selector.tsx b/src/components/datagrid/controls/style_selector.tsx index 28672bec9a5..9eb65eb1b27 100644 --- a/src/components/datagrid/controls/style_selector.tsx +++ b/src/components/datagrid/controls/style_selector.tsx @@ -12,6 +12,7 @@ import { EuiI18n, useEuiI18n } from '../../i18n'; import { EuiPopover } from '../../popover'; import { EuiButtonIcon, EuiButtonGroup } from '../../button'; import { EuiFormRow } from '../../form'; +import { EuiToolTip } from '../../tool_tip'; export const startingStyles: EuiDataGridStyle = { cellPadding: 'm', @@ -64,6 +65,11 @@ export const useDataGridStyleSelector = ( ...userGridStyles, }; + const buttonLabel = useEuiI18n( + 'euiStyleSelector.buttonText', + 'Display options' + ); + const styleSelector = ( setIsOpen(!isOpen)} - aria-label={useEuiI18n('euiStyleSelector.buttonText', 'Grid display')} - /> + + setIsOpen(!isOpen)} + aria-label={buttonLabel} + /> + } > Date: Mon, 8 Nov 2021 12:36:37 -0500 Subject: [PATCH 5/7] =?UTF-8?q?Updated=20examples=20and=20snippets=20with?= =?UTF-8?q?=20=E2=80=9Creal=20world=E2=80=9D=20examples?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed all the unnecessary manual additions of `className="euiDataGrid__controlBtn”` --- .../src/views/datagrid/additional_controls.js | 127 ----------- .../views/datagrid/additional_controls.tsx | 197 ++++++++++++++++++ .../src/views/datagrid/control_columns.js | 62 +++--- .../datagrid/datagrid_styling_example.js | 53 ++--- 4 files changed, 243 insertions(+), 196 deletions(-) delete mode 100644 src-docs/src/views/datagrid/additional_controls.js create mode 100644 src-docs/src/views/datagrid/additional_controls.tsx diff --git a/src-docs/src/views/datagrid/additional_controls.js b/src-docs/src/views/datagrid/additional_controls.js deleted file mode 100644 index dfa50437dd4..00000000000 --- a/src-docs/src/views/datagrid/additional_controls.js +++ /dev/null @@ -1,127 +0,0 @@ -import React, { useState, useCallback, Fragment } from 'react'; -import { fake } from 'faker'; - -import { - EuiDataGrid, - EuiButtonEmpty, - EuiButtonIcon, - EuiLink, -} from '../../../../src/components/'; - -const columns = [ - { - id: 'name', - }, - { - id: 'email', - }, - { - id: 'city', - }, - { - id: 'country', - }, - { - id: 'account', - }, -]; - -const data = []; - -for (let i = 1; i < 20; i++) { - data.push({ - name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'), - email: fake('{{internet.email}}'), - city: ( - {fake('{{address.city}}')} - ), - country: fake('{{address.country}}'), - account: fake('{{finance.account}}'), - }); -} - -export default () => { - const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 }); - - const [visibleColumns, setVisibleColumns] = useState(() => - columns.map(({ id }) => id) - ); - - const setPageIndex = useCallback( - (pageIndex) => setPagination({ ...pagination, pageIndex }), - [pagination, setPagination] - ); - const setPageSize = useCallback( - (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 0 }), - [pagination, setPagination] - ); - - return ( - data[rowIndex][columnId]} - pagination={{ - ...pagination, - pageSizeOptions: [5, 10, 25], - onChangeItemsPerPage: setPageSize, - onChangePage: setPageIndex, - }} - toolbarVisibility={{ - additionalControls: { - left: ( - - {}} - > - New button - - {}} - > - Another button - - - ), - right: ( - - {}} - /> - {}} - /> - - ), - }, - }} - /> - ); -}; diff --git a/src-docs/src/views/datagrid/additional_controls.tsx b/src-docs/src/views/datagrid/additional_controls.tsx new file mode 100644 index 00000000000..1e98546c3bf --- /dev/null +++ b/src-docs/src/views/datagrid/additional_controls.tsx @@ -0,0 +1,197 @@ +import React, { useState, useCallback, Fragment } from 'react'; + +// @ts-ignore Importing from JS +import { fake } from 'faker'; + +import { + EuiDataGrid, + EuiButtonEmpty, + EuiButtonIcon, + EuiLink, + EuiToolTip, + useGeneratedHtmlId, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiText, + EuiTitle, + EuiContextMenuItem, + EuiContextMenuPanel, + EuiPopover, +} from '../../../../src'; + +const columns = [ + { + id: 'name', + }, + { + id: 'email', + }, + { + id: 'city', + }, + { + id: 'country', + }, + { + id: 'account', + }, +]; + +const data: any[] = []; + +for (let i = 1; i < 20; i++) { + data.push({ + name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'), + email: fake('{{internet.email}}'), + city: ( + {fake('{{address.city}}')} + ), + country: fake('{{address.country}}'), + account: fake('{{finance.account}}'), + }); +} + +export default () => { + const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 }); + const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); + const flyoutTitleId = useGeneratedHtmlId({ + prefix: 'dataGridAdditionalControlsFlyout', + }); + + let flyout; + if (isFlyoutVisible) { + flyout = ( + setIsFlyoutVisible(false)} + aria-labelledby={flyoutTitleId} + > + + +

Inspect

+ + + + +

+ This is not a real control, just an example of how to trigger a + flyout from a custom data grid control. +

+ + + + ); + } + + const [isPopoverOpen, setPopover] = useState(false); + const popoverId = useGeneratedHtmlId({ + prefix: 'dataGridAdditionalControlsPopover', + }); + const alertAndClosePopover = () => { + setPopover(false); + window.alert('This is not a real control.'); + }; + + const [visibleColumns, setVisibleColumns] = useState(() => + columns.map(({ id }) => id) + ); + + const setPageIndex = useCallback( + (pageIndex) => setPagination({ ...pagination, pageIndex }), + [pagination, setPagination] + ); + const setPageSize = useCallback( + (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 0 }), + [pagination, setPagination] + ); + + return ( + <> + data[rowIndex][columnId]} + pagination={{ + ...pagination, + pageSizeOptions: [5, 10, 25], + onChangeItemsPerPage: setPageSize, + onChangePage: setPageIndex, + }} + toolbarVisibility={{ + additionalControls: { + left: ( + setPopover((open) => !open)} + > + Download + + } + isOpen={isPopoverOpen} + closePopover={() => setPopover(false)} + panelPaddingSize="none" + > + + CSV + , + + JSON + , + ]} + /> + + ), + right: ( + + + { + window.alert('This is not a real control.'); + }} + /> + + + setIsFlyoutVisible(true)} + /> + + + ), + }, + }} + /> + {flyout} + + ); +}; diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js index bee036d8aca..434fb8e754b 100644 --- a/src-docs/src/views/datagrid/control_columns.js +++ b/src-docs/src/views/datagrid/control_columns.js @@ -27,6 +27,8 @@ import { EuiDescriptionList, EuiDescriptionListTitle, EuiDescriptionListDescription, + EuiContextMenuItem, + EuiContextMenuPanel, } from '../../../../src/components/'; const columns = [ @@ -77,6 +79,11 @@ const SelectionContext = createContext(); const SelectionButton = () => { const [selectedRows] = useContext(SelectionContext); const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const alertAndClosePopover = () => { + setIsPopoverOpen(false); + window.alert('This is not a real control.'); + }; + if (selectedRows.size > 0) { return ( { setIsPopoverOpen(!isPopoverOpen)} > {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}{' '} @@ -100,43 +106,25 @@ const SelectionButton = () => { {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'} -
- - - -
+ Delete item + , + ]} + /> ); } else { diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js index 98a8d4802aa..332c4b1bc23 100644 --- a/src-docs/src/views/datagrid/datagrid_styling_example.js +++ b/src-docs/src/views/datagrid/datagrid_styling_example.js @@ -65,17 +65,11 @@ const gridSnippet = ` {}}> New button {}}> Another button @@ -108,17 +102,11 @@ const controlsSnippet = ` {}}> New button {}}> Another button @@ -126,22 +114,22 @@ const controlsSnippet = ` - {}} - /> - {}} - /> + + {}} + /> + + + {}} + /> + ) } @@ -273,7 +261,7 @@ export const DataGridStylingExample = { <>

Use the toolbarVisibility.additionalControls prop - to pass additional controls to the toolbar. It will respect the{' '} + to pass more buttons to the toolbar. It will respect the{' '} toolbarVisibility={'{false}'}{' '} setting and hide when appropriate.

@@ -298,9 +286,10 @@ export const DataGridStylingExample = {

Although any node is allowed, the recommendation is to use{' '} - EuiButtonEmpty for the left-side of the toolbar and{' '} - EuiButtonIcon for the right-side of the toolbar, - with the configurations shown in the snippet. + {''} for the + left-side of the toolbar and{' '} + {''} for the + right-side of the toolbar.

), From 2e43c54ba60709b88594c06ed6473575135149e9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 8 Nov 2021 14:50:46 -0500 Subject: [PATCH 6/7] More responsive fixes --- src/components/datagrid/controls/_data_grid_toolbar.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/controls/_data_grid_toolbar.scss b/src/components/datagrid/controls/_data_grid_toolbar.scss index 7e3d9b42afa..4a7913dd4eb 100644 --- a/src/components/datagrid/controls/_data_grid_toolbar.scss +++ b/src/components/datagrid/controls/_data_grid_toolbar.scss @@ -6,12 +6,15 @@ padding: $euiSizeXS $euiSizeXS $euiSizeXS 0; display: flex; justify-content: space-between; + align-items: center; } .euiDataGrid__rightControls { + // These **should** just be icon buttons and so we'll restrict them to not wrap lines + white-space: nowrap; + // Keep this right-aligned if hasRoomForGridControls is hiding dataControls &:only-child { - margin-right: 0; margin-left: auto; } From 22d85f93633af22cf7abbd428bc39e58f266f339 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 8 Nov 2021 14:53:07 -0500 Subject: [PATCH 7/7] Change class name --- .../controls/__snapshots__/style_selector.test.tsx.snap | 2 +- src/components/datagrid/controls/_data_grid_display.scss | 2 +- src/components/datagrid/controls/style_selector.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap index 4dc4b80f357..c850e0e74b8 100644 --- a/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap @@ -28,7 +28,7 @@ exports[`useDataGridStyleSelector styleSelector renders a toolbar button/popover hasArrow={true} isOpen={false} ownFocus={true} - panelClassName="euiDataGrid__stylePopoverPanel" + panelClassName="euiDataGrid__displayPopoverPanel" panelPaddingSize="s" > setIsOpen(false)} anchorPosition="downRight" panelPaddingSize="s" - panelClassName="euiDataGrid__stylePopoverPanel" + panelClassName="euiDataGrid__displayPopoverPanel" button={