From 515226944552f36226a685c0a1fa1df3746e6579 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 7 Jul 2022 14:27:37 -0700 Subject: [PATCH 01/16] Add `:focus-within` support to EuiScreenReaderOnly showOnFocus - which expands/makes the prop more flexible for, e.g. buttons wrapped in tooltips or popovers --- .../src/views/accessibility/screen_reader_focus.tsx | 12 ++++++++++++ .../screen_reader_only/screen_reader_only.styles.ts | 2 +- .../screen_reader_only/screen_reader_only.tsx | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/accessibility/screen_reader_focus.tsx b/src-docs/src/views/accessibility/screen_reader_focus.tsx index b145df42fea..af16f2f4462 100644 --- a/src-docs/src/views/accessibility/screen_reader_focus.tsx +++ b/src-docs/src/views/accessibility/screen_reader_focus.tsx @@ -4,6 +4,8 @@ import { EuiScreenReaderOnly, EuiText, EuiLink, + EuiToolTip, + EuiButtonIcon, } from '../../../../src/components'; export default () => ( @@ -14,5 +16,15 @@ export default () => ( Link text

+

+ This tooltip + button is visible on focus within:{' '} + + + + + + + +

); diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts index f0c020090d1..3599923538a 100644 --- a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts +++ b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts @@ -38,7 +38,7 @@ export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => ({ euiScreenReaderOnly: showOnFocus ? css` // The :active selector is necessary for Safari which removes :focus when a button is pressed - &:not(:focus):not(:active) { + &:not(:focus):not(:active):not(:focus-within) { ${euiScreenReaderOnly()} } ` diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx index 2893915e6d3..b86114c9847 100644 --- a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx +++ b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx @@ -19,7 +19,7 @@ export interface EuiScreenReaderOnlyProps { children: ReactElement; /** - * For keyboard navigation, force content to display visually upon focus. + * For keyboard navigation, force content to display visually upon focus/focus-within. */ showOnFocus?: boolean; className?: string; From 1f4580939c507f261d68edfffe2350efd5142de4 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 7 Jul 2022 14:32:00 -0700 Subject: [PATCH 02/16] Set up keyboard shortcuts button + popover + styling --- src/components/datagrid/_index.scss | 1 + .../_data_grid_keyboard_shortcuts.scss | 17 +++ src/components/datagrid/controls/index.ts | 1 + .../datagrid/controls/keyboard_shortcuts.tsx | 120 ++++++++++++++++++ 4 files changed, 139 insertions(+) create mode 100644 src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss create mode 100644 src/components/datagrid/controls/keyboard_shortcuts.tsx diff --git a/src/components/datagrid/_index.scss b/src/components/datagrid/_index.scss index e85006fc93e..f2ac50334ec 100644 --- a/src/components/datagrid/_index.scss +++ b/src/components/datagrid/_index.scss @@ -9,3 +9,4 @@ @import 'controls/data_grid_column_selector'; @import 'controls/data_grid_column_sorting'; @import 'controls/data_grid_display'; +@import 'controls/data_grid_keyboard_shortcuts'; diff --git a/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss new file mode 100644 index 00000000000..913c25f11b5 --- /dev/null +++ b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss @@ -0,0 +1,17 @@ +.euiDataGrid__keyboardShortcutsPopoverPanel { + width: $euiSizeXXL * 12; + + .euiDescriptionList.euiDescriptionList--column { // Specificity override + .euiDescriptionList__title { + width: 25%; + } + + .euiDescriptionList__description { + width: 75%; + } + + & > *:not(:first-of-type) { + margin-top: $euiSizeS; + } + } +} diff --git a/src/components/datagrid/controls/index.ts b/src/components/datagrid/controls/index.ts index 62f5a1435b4..5c4a98c398d 100644 --- a/src/components/datagrid/controls/index.ts +++ b/src/components/datagrid/controls/index.ts @@ -9,6 +9,7 @@ export { useDataGridColumnSelector } from './column_selector'; export { useDataGridColumnSorting } from './column_sorting'; export { useDataGridDisplaySelector, startingStyles } from './display_selector'; +export { useDataGridKeyboardShortcuts } from './keyboard_shortcuts'; export { useDataGridFullScreenSelector } from './fullscreen_selector'; export { checkOrDefaultToolBarDisplayOptions, diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx new file mode 100644 index 00000000000..dcd8b43b676 --- /dev/null +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -0,0 +1,120 @@ +/* + * 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, { useState, useMemo, ReactNode } from 'react'; +import { EuiButtonIcon } from '../../button'; +import { EuiToolTip } from '../../tool_tip'; +import { EuiPopover } from '../../popover'; +import { EuiDescriptionList } from '../../description_list'; +import { EuiBadge } from '../../badge'; +import { useEuiI18n } from '../../i18n'; + +export const useDataGridKeyboardShortcuts = (): { + keyboardShortcuts: ReactNode; +} => { + const [isOpen, setIsOpen] = useState(false); + + const buttonLabel = useEuiI18n( + 'euiKeyboardShortcuts.label', + 'Keyboard shortcuts' + ); + + const keyboardShortcuts = useMemo( + () => ( + setIsOpen(false)} + anchorPosition="downRight" + panelClassName="euiDataGrid__keyboardShortcutsPopoverPanel" + button={ + + setIsOpen(!isOpen)} + aria-label={buttonLabel} + /> + + } + > + Up arrow, + description: 'Moves focus one cell down.', + }, + { + title: Down arrow, + description: 'Moves focus one cell up.', + }, + { + title: Right arrow, + description: 'Moves focus one cell to the right.', + }, + { + title: Left arrow, + description: 'Moves focus one cell to the left.', + }, + { + title: Home, + description: 'Moves focus to the first cell in the current row.', + }, + { + title: End, + description: 'Moves focus to the last cell in the current row.', + }, + { + title: ( + <> + Ctrl + Home + + ), + description: 'Moves focus to the first cell in the first row.', + }, + { + title: ( + <> + Ctrl + End + + ), + description: 'Moves focus to the last cell in the last row.', + }, + { + title: Page Up, + description: 'Paginates to the last row of the previous page.', + }, + { + title: Page Down, + description: 'Paginates to the first row of the next page.', + }, + { + title: Enter, + description: + 'Opens cell expansion popover for interactive cells.', + }, + { + title: Escape, + description: 'Closes any open popovers.', + }, + ]} + /> + + ), + [isOpen, buttonLabel] + ); + + return { keyboardShortcuts }; +}; From 8bbaac115ec673fb6069866b963d389df0f07cde Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 7 Jul 2022 14:33:04 -0700 Subject: [PATCH 03/16] Set up showKeyboardShortcuts configuration - if set to false, visually hide but still allow keyboard users to focus/access the info --- .../datagrid/controls/data_grid_toolbar.tsx | 14 +++++++++++++- src/components/datagrid/data_grid.tsx | 6 +++++- src/components/datagrid/data_grid_types.ts | 6 ++++++ 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx index 1cf496c1aaa..37f1932002e 100644 --- a/src/components/datagrid/controls/data_grid_toolbar.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar.tsx @@ -14,6 +14,7 @@ import { EuiDataGridToolBarAdditionalControlsOptions, EuiDataGridToolBarAdditionalControlsLeftOptions, } from '../data_grid_types'; +import { EuiScreenReaderOnly } from '../../accessibility'; import { IS_JEST_ENVIRONMENT } from '../../../utils'; // When below this number the grid only shows the right control icon buttons @@ -25,6 +26,7 @@ export const EuiDataGridToolbar = ({ toolbarVisibility, isFullScreen, fullScreenSelector, + keyboardShortcuts, displaySelector, columnSelector, columnSorting, @@ -35,7 +37,7 @@ export const EuiDataGridToolbar = ({ : gridWidth > minSizeForControls || isFullScreen; return ( -
+
{hasRoomForGridControls && (
{renderAdditionalControls(toolbarVisibility, 'left.prepend')} @@ -62,6 +64,16 @@ export const EuiDataGridToolbar = ({ ) ? displaySelector : null} + {checkOrDefaultToolBarDisplayOptions( + toolbarVisibility, + 'showKeyboardShortcuts' + ) ? ( + keyboardShortcuts + ) : ( + + {keyboardShortcuts} + + )} {checkOrDefaultToolBarDisplayOptions( toolbarVisibility, 'showFullScreenSelector' diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index bf858177a02..e15135cd541 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -24,6 +24,7 @@ import { useDataGridDisplaySelector, startingStyles, useDataGridFullScreenSelector, + useDataGridKeyboardShortcuts, checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar, } from './controls'; @@ -271,10 +272,12 @@ export const EuiDataGrid = forwardRef( const { cellPopoverContext, cellPopover } = useCellPopover(); /** - * Toolbar & fullscreen + * Toolbar, keyboard shortcuts, & fullscreen */ const showToolbar = !!toolbarVisibility; + const { keyboardShortcuts } = useDataGridKeyboardShortcuts(); + const { isFullScreen, setIsFullScreen, @@ -384,6 +387,7 @@ export const EuiDataGrid = forwardRef( toolbarVisibility={toolbarVisibility} isFullScreen={isFullScreen} fullScreenSelector={fullScreenSelector} + keyboardShortcuts={keyboardShortcuts} displaySelector={displaySelector} columnSelector={columnSelector} columnSorting={columnSorting} diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index f6cfb0d0a2e..180ed1f2c3c 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -39,6 +39,7 @@ export interface EuiDataGridToolbarProps { toolbarVisibility: boolean | EuiDataGridToolBarVisibilityOptions; isFullScreen: boolean; fullScreenSelector: ReactNode; + keyboardShortcuts: ReactNode; displaySelector: ReactNode; columnSelector: ReactNode; columnSorting: ReactNode; @@ -779,6 +780,11 @@ export interface EuiDataGridToolBarVisibilityOptions { * Allows the ability for the user to sort rows based upon column values */ showSortSelector?: boolean; + /** + * Displays a popover listing all keyboard controls and shortcuts for the data grid. + * If set to `false`, the toggle will be visually hidden, but still focusable by keyboard and screen reader users. + */ + showKeyboardShortcuts?: boolean; /** * Allows user to be able to fullscreen the data grid. If set to `false` make sure your grid fits within a large enough panel to still show the other controls. */ From 380b4b427ecd31f63265adeea4365d72cdecbe0f Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 7 Jul 2022 14:35:02 -0700 Subject: [PATCH 04/16] Add documentation --- src-docs/src/views/datagrid/_snippets.tsx | 1 + src-docs/src/views/datagrid/toolbar/_grid.js | 2 ++ src-docs/src/views/datagrid/toolbar/visibility.js | 13 +++++++++++++ 3 files changed, 16 insertions(+) diff --git a/src-docs/src/views/datagrid/_snippets.tsx b/src-docs/src/views/datagrid/_snippets.tsx index 1680b638853..66f82019fcd 100644 --- a/src-docs/src/views/datagrid/_snippets.tsx +++ b/src-docs/src/views/datagrid/_snippets.tsx @@ -70,6 +70,7 @@ inMemory={{ level: 'sorting' }}`, showColumnSelector: false, showDisplaySelector: false, showSortSelector: false, + showKeyboardShortcuts: false, showFullScreenSelector: false, additionalControls: { left: , diff --git a/src-docs/src/views/datagrid/toolbar/_grid.js b/src-docs/src/views/datagrid/toolbar/_grid.js index 0afb8f04460..4121f53ee54 100644 --- a/src-docs/src/views/datagrid/toolbar/_grid.js +++ b/src-docs/src/views/datagrid/toolbar/_grid.js @@ -48,6 +48,7 @@ const DataGridStyle = ({ showColumnSelector, showSortSelector, showDisplaySelector, + showKeyboardShortcuts, showFullScreenSelector, allowDensity, allowRowHeight, @@ -114,6 +115,7 @@ const DataGridStyle = ({ showColumnSelector: toggleColumnSelector, showSortSelector: showSortSelector, showDisplaySelector: toggleDisplaySelector, + showKeyboardShortcuts: showKeyboardShortcuts, showFullScreenSelector: showFullScreenSelector, }; diff --git a/src-docs/src/views/datagrid/toolbar/visibility.js b/src-docs/src/views/datagrid/toolbar/visibility.js index 26d356f0646..f885a69099e 100644 --- a/src-docs/src/views/datagrid/toolbar/visibility.js +++ b/src-docs/src/views/datagrid/toolbar/visibility.js @@ -49,6 +49,7 @@ const DataGrid = () => { const [showColumnSelector, setShowColumnSelector] = useState(true); const [allowHideColumns, setAllowHideColumns] = useState(true); const [allowOrderingColumns, setAllowOrderingColumns] = useState(true); + const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(true); const [showFullScreenSelector, setShowFullScreenSelector] = useState(true); const [toolbarType, setToolbarType] = useState('true'); @@ -76,6 +77,10 @@ const DataGrid = () => { setAllowRowHeight(optionId === 'true'); }; + const onShowKeyboardShortcutsChange = (optionId) => { + setShowKeyboardShortcuts(optionId === 'true'); + }; + const onShowFullScreenSelectorChange = (optionId) => { setShowFullScreenSelector(optionId === 'true'); }; @@ -232,6 +237,13 @@ const DataGrid = () => { )} +
  • + {createItem('Show keyboard shortcuts', { + idSelected: showKeyboardShortcuts.toString(), + onChange: onShowKeyboardShortcutsChange, + })} +
    • +
  • {createItem('Show full screen', { idSelected: showFullScreenSelector.toString(), @@ -250,6 +262,7 @@ const DataGrid = () => { showColumnSelector={showColumnSelector} showSortSelector={showSortSelector} showDisplaySelector={showDisplaySelector} + showKeyboardShortcuts={showKeyboardShortcuts} showFullScreenSelector={showFullScreenSelector} allowDensity={allowDensity} allowRowHeight={allowRowHeight} From 8cf2c1f795ce8d75f7fa89788d121f68efe28dff Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 18 Jul 2022 12:43:51 -0700 Subject: [PATCH 05/16] Update PR with recently added new `keyboard` icon and `kbd` styles --- .../datagrid/controls/keyboard_shortcuts.tsx | 137 +++++++++--------- 1 file changed, 69 insertions(+), 68 deletions(-) diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx index dcd8b43b676..b398e9d4b7d 100644 --- a/src/components/datagrid/controls/keyboard_shortcuts.tsx +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -11,7 +11,7 @@ import { EuiButtonIcon } from '../../button'; import { EuiToolTip } from '../../tool_tip'; import { EuiPopover } from '../../popover'; import { EuiDescriptionList } from '../../description_list'; -import { EuiBadge } from '../../badge'; +import { EuiText } from '../../text'; import { useEuiI18n } from '../../i18n'; export const useDataGridKeyboardShortcuts = (): { @@ -36,7 +36,7 @@ export const useDataGridKeyboardShortcuts = (): { setIsOpen(!isOpen)} @@ -45,72 +45,73 @@ export const useDataGridKeyboardShortcuts = (): { } > - Up arrow, - description: 'Moves focus one cell down.', - }, - { - title: Down arrow, - description: 'Moves focus one cell up.', - }, - { - title: Right arrow, - description: 'Moves focus one cell to the right.', - }, - { - title: Left arrow, - description: 'Moves focus one cell to the left.', - }, - { - title: Home, - description: 'Moves focus to the first cell in the current row.', - }, - { - title: End, - description: 'Moves focus to the last cell in the current row.', - }, - { - title: ( - <> - Ctrl - Home - - ), - description: 'Moves focus to the first cell in the first row.', - }, - { - title: ( - <> - Ctrl - End - - ), - description: 'Moves focus to the last cell in the last row.', - }, - { - title: Page Up, - description: 'Paginates to the last row of the previous page.', - }, - { - title: Page Down, - description: 'Paginates to the first row of the next page.', - }, - { - title: Enter, - description: - 'Opens cell expansion popover for interactive cells.', - }, - { - title: Escape, - description: 'Closes any open popovers.', - }, - ]} - /> + + Up arrow, + description: 'Moves focus one cell down.', + }, + { + title: Down arrow, + description: 'Moves focus one cell up.', + }, + { + title: Right arrow, + description: 'Moves focus one cell to the right.', + }, + { + title: Left arrow, + description: 'Moves focus one cell to the left.', + }, + { + title: Home, + description: + 'Moves focus to the first cell in the current row.', + }, + { + title: End, + description: 'Moves focus to the last cell in the current row.', + }, + { + title: ( + <> + Ctrl Home + + ), + description: 'Moves focus to the first cell in the first row.', + }, + { + title: ( + <> + Ctrl End + + ), + description: 'Moves focus to the last cell in the last row.', + }, + { + title: Page Up, + description: 'Paginates to the last row of the previous page.', + }, + { + title: Page Down, + description: 'Paginates to the first row of the next page.', + }, + { + title: Enter, + description: + 'Opens cell expansion popover for interactive cells.', + }, + { + title: Escape, + description: 'Closes any open popovers.', + }, + ]} + /> + ), [isOpen, buttonLabel] From ab66280290031d17383b6d5bf8d60b60e040d07f Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 18 Jul 2022 12:48:48 -0700 Subject: [PATCH 06/16] [PR feedback] Misc positioning - Move keyboard shortcuts button to leftmost position in icon controls - Add EuiPopoverTitle --- .../datagrid/controls/data_grid_toolbar.tsx | 12 ++++++------ .../datagrid/controls/keyboard_shortcuts.tsx | 14 ++++++-------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx index 37f1932002e..4c30a18d35b 100644 --- a/src/components/datagrid/controls/data_grid_toolbar.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar.tsx @@ -58,12 +58,6 @@ export const EuiDataGridToolbar = ({ )}
    {renderAdditionalControls(toolbarVisibility, 'right')} - {checkOrDefaultToolBarDisplayOptions( - toolbarVisibility, - 'showDisplaySelector' - ) - ? displaySelector - : null} {checkOrDefaultToolBarDisplayOptions( toolbarVisibility, 'showKeyboardShortcuts' @@ -74,6 +68,12 @@ export const EuiDataGridToolbar = ({ {keyboardShortcuts} )} + {checkOrDefaultToolBarDisplayOptions( + toolbarVisibility, + 'showDisplaySelector' + ) + ? displaySelector + : null} {checkOrDefaultToolBarDisplayOptions( toolbarVisibility, 'showFullScreenSelector' diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx index b398e9d4b7d..b9ee8e68966 100644 --- a/src/components/datagrid/controls/keyboard_shortcuts.tsx +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -9,7 +9,7 @@ import React, { useState, useMemo, ReactNode } from 'react'; import { EuiButtonIcon } from '../../button'; import { EuiToolTip } from '../../tool_tip'; -import { EuiPopover } from '../../popover'; +import { EuiPopover, EuiPopoverTitle } from '../../popover'; import { EuiDescriptionList } from '../../description_list'; import { EuiText } from '../../text'; import { useEuiI18n } from '../../i18n'; @@ -19,10 +19,7 @@ export const useDataGridKeyboardShortcuts = (): { } => { const [isOpen, setIsOpen] = useState(false); - const buttonLabel = useEuiI18n( - 'euiKeyboardShortcuts.label', - 'Keyboard shortcuts' - ); + const title = useEuiI18n('euiKeyboardShortcuts.title', 'Keyboard shortcuts'); const keyboardShortcuts = useMemo( () => ( @@ -33,18 +30,19 @@ export const useDataGridKeyboardShortcuts = (): { anchorPosition="downRight" panelClassName="euiDataGrid__keyboardShortcutsPopoverPanel" button={ - + setIsOpen(!isOpen)} - aria-label={buttonLabel} + aria-label={title} /> } > + {title} ), - [isOpen, buttonLabel] + [isOpen, title] ); return { keyboardShortcuts }; From dc1491f20c506fd40b2ba6ad9e8bcdd925b979fb Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 19 Jul 2022 14:26:33 -0700 Subject: [PATCH 07/16] [PR feedback] aria-labelledby --- .../datagrid/controls/keyboard_shortcuts.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx index b9ee8e68966..e6d30e4e58e 100644 --- a/src/components/datagrid/controls/keyboard_shortcuts.tsx +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -7,6 +7,8 @@ */ import React, { useState, useMemo, ReactNode } from 'react'; + +import { useGeneratedHtmlId } from '../../../services'; import { EuiButtonIcon } from '../../button'; import { EuiToolTip } from '../../tool_tip'; import { EuiPopover, EuiPopoverTitle } from '../../popover'; @@ -20,6 +22,7 @@ export const useDataGridKeyboardShortcuts = (): { const [isOpen, setIsOpen] = useState(false); const title = useEuiI18n('euiKeyboardShortcuts.title', 'Keyboard shortcuts'); + const titleId = useGeneratedHtmlId(); const keyboardShortcuts = useMemo( () => ( @@ -42,9 +45,12 @@ export const useDataGridKeyboardShortcuts = (): { } > - {title} + +

    {title}

    +     ), - [isOpen, title] + [isOpen, title, titleId] ); return { keyboardShortcuts }; From bd2435628ea66b48e051465c02c3a0afc621a4d5 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 27 Oct 2022 11:39:05 -0700 Subject: [PATCH 08/16] Popover supdates to account for EuiDescriptionList Emotion conversion --- .../datagrid/controls/_data_grid_keyboard_shortcuts.scss | 6 +----- src/components/datagrid/controls/keyboard_shortcuts.tsx | 1 + 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss index 913c25f11b5..b16a13c0061 100644 --- a/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss +++ b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss @@ -1,7 +1,7 @@ .euiDataGrid__keyboardShortcutsPopoverPanel { width: $euiSizeXXL * 12; - .euiDescriptionList.euiDescriptionList--column { // Specificity override + .euiDescriptionList { .euiDescriptionList__title { width: 25%; } @@ -9,9 +9,5 @@ .euiDescriptionList__description { width: 75%; } - - & > *:not(:first-of-type) { - margin-top: $euiSizeS; - } } } diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx index e6d30e4e58e..6b2e35178d0 100644 --- a/src/components/datagrid/controls/keyboard_shortcuts.tsx +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -54,6 +54,7 @@ export const useDataGridKeyboardShortcuts = (): { type="column" align="center" compressed + gutterSize="s" listItems={[ { title: Up arrow, From 25dccd0c079f2c45d2899882ad8880f56e47d981 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 27 Oct 2022 11:50:07 -0700 Subject: [PATCH 09/16] Mobile/responsive styling improvements --- .../datagrid/controls/_data_grid_keyboard_shortcuts.scss | 8 ++++++-- src/components/datagrid/controls/keyboard_shortcuts.tsx | 3 +-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss index b16a13c0061..e60250b56f1 100644 --- a/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss +++ b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss @@ -1,5 +1,9 @@ -.euiDataGrid__keyboardShortcutsPopoverPanel { - width: $euiSizeXXL * 12; +.euiDataGrid__keyboardShortcuts { + display: block; + max-inline-size: $euiSizeXXL * 12; + max-block-size: 80vh; + overflow-y: auto; + overflow-block: auto; .euiDescriptionList { .euiDescriptionList__title { diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx index 6b2e35178d0..2768902146d 100644 --- a/src/components/datagrid/controls/keyboard_shortcuts.tsx +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -31,7 +31,6 @@ export const useDataGridKeyboardShortcuts = (): { isOpen={isOpen} closePopover={() => setIsOpen(false)} anchorPosition="downRight" - panelClassName="euiDataGrid__keyboardShortcutsPopoverPanel" button={

    {title}

    - + Date: Thu, 27 Oct 2022 11:55:30 -0700 Subject: [PATCH 10/16] i18n all remaining strings --- .../datagrid/controls/keyboard_shortcuts.tsx | 204 +++++++++++++++--- 1 file changed, 177 insertions(+), 27 deletions(-) diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx index 2768902146d..55d6993713e 100644 --- a/src/components/datagrid/controls/keyboard_shortcuts.tsx +++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx @@ -14,7 +14,7 @@ import { EuiToolTip } from '../../tool_tip'; import { EuiPopover, EuiPopoverTitle } from '../../popover'; import { EuiDescriptionList } from '../../description_list'; import { EuiText } from '../../text'; -import { useEuiI18n } from '../../i18n'; +import { useEuiI18n, EuiI18n } from '../../i18n'; export const useDataGridKeyboardShortcuts = (): { keyboardShortcuts: ReactNode; @@ -56,62 +56,212 @@ export const useDataGridKeyboardShortcuts = (): { gutterSize="s" listItems={[ { - title: Up arrow, - description: 'Moves focus one cell down.', + title: ( + + + + ), + description: ( + + ), }, { - title: Down arrow, - description: 'Moves focus one cell up.', + title: ( + + + + ), + description: ( + + ), }, { - title: Right arrow, - description: 'Moves focus one cell to the right.', + title: ( + + + + ), + description: ( + + ), }, { - title: Left arrow, - description: 'Moves focus one cell to the left.', + title: ( + + + + ), + description: ( + + ), }, { - title: Home, - description: - 'Moves focus to the first cell in the current row.', + title: ( + + + + ), + description: ( + + ), }, { - title: End, - description: 'Moves focus to the last cell in the current row.', + title: ( + + + + ), + description: ( + + ), }, { title: ( <> - Ctrl Home + + + {' '} + + + ), - description: 'Moves focus to the first cell in the first row.', + description: ( + + ), }, { title: ( <> - Ctrl End + + + {' '} + + + ), - description: 'Moves focus to the last cell in the last row.', + description: ( + + ), }, { - title: Page Up, - description: 'Paginates to the last row of the previous page.', + title: ( + + + + ), + description: ( + + ), }, { - title: Page Down, - description: 'Paginates to the first row of the next page.', + title: ( + + + + ), + description: ( + + ), }, { - title: Enter, - description: - 'Opens cell expansion popover for interactive cells.', + title: ( + + + + ), + description: ( + + ), }, { - title: Escape, - description: 'Closes any open popovers.', + title: ( + + + + ), + description: ( + + ), }, ]} /> From f4dcfa5704d2049ca6df0d967290e57c8d3bc359 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 27 Oct 2022 12:13:53 -0700 Subject: [PATCH 11/16] Add keyboard shortcut popover unit tests --- .../keyboard_shortcuts.test.tsx.snap | 263 ++++++++++++++++++ .../controls/keyboard_shortcuts.test.tsx | 27 ++ 2 files changed, 290 insertions(+) create mode 100644 src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap create mode 100644 src/components/datagrid/controls/keyboard_shortcuts.test.tsx diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap new file mode 100644 index 00000000000..8778d0ae4c5 --- /dev/null +++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap @@ -0,0 +1,263 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`useDataGridKeyboardShortcuts returns a popover containing a list of keyboard shortcuts 1`] = ` + + +
    +