From 50e5206fc1aed779c0fc71b96541804470c1c173 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Thu, 18 Feb 2021 17:58:53 -0500 Subject: [PATCH 1/2] Defaulting EuiPopover to ownfocus Co-authored-by: Elizabet Oliveira Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Chandler Prall --- CHANGELOG.md | 1 + src-docs/src/views/color_picker/containers.js | 1 - src-docs/src/views/combo_box/containers.js | 1 - .../src/views/datagrid/control_columns.js | 6 +- src-docs/src/views/datagrid/datagrid.js | 3 +- src-docs/src/views/expression/columns.js | 2 - src-docs/src/views/expression/expression.js | 2 - .../src/views/filter_group/filter_group.js | 1 - .../views/filter_group/filter_group_multi.js | 1 - .../src/views/form_layouts/inline_popover.js | 2 - src-docs/src/views/header/header.js | 3 - src-docs/src/views/header/header_alert.js | 1 - .../views/header/header_elastic_pattern.js | 3 - src-docs/src/views/popover/popover.js | 1 - .../views/popover/popover_anchor_position.js | 12 -- src-docs/src/views/popover/popover_block.js | 1 - .../src/views/popover/popover_container.js | 1 - src-docs/src/views/popover/popover_example.js | 9 +- src-docs/src/views/popover/popover_fixed.js | 1 - .../popover/popover_htmlelement_anchor.js | 1 - .../views/popover/popover_panel_class_name.js | 1 - .../src/views/popover/popover_with_title.js | 3 - .../popover/popover_with_title_padding.js | 6 - src-docs/src/views/popover/trap_focus.js | 1 + .../collapsed_item_actions.test.tsx.snap | 2 +- .../in_memory_table.test.tsx.snap | 107 ++++++++-------- src/components/datagrid/column_selector.tsx | 1 - src/components/datagrid/column_sorting.tsx | 2 - .../datagrid/data_grid_cell_popover.tsx | 1 - src/components/datagrid/style_selector.tsx | 1 - .../date_popover/date_popover_button.tsx | 1 - .../quick_select_popover.tsx | 3 +- .../header/header_links/header_links.tsx | 1 - .../__snapshots__/popover.test.tsx.snap | 114 ++++++++++++++---- src/components/popover/popover.test.tsx | 7 +- src/components/popover/popover.tsx | 2 +- .../filters/field_value_selection_filter.tsx | 1 - .../table/mobile/table_sort_mobile.tsx | 1 - src/components/tour/tour_step.tsx | 1 + 39 files changed, 156 insertions(+), 153 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 210fedc690e..f0d821715b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Added support for all `color`s of `EuiPanel` ([#4504](https://github.com/elastic/eui/pull/4504)) - Added `hasBorder` prop to `EuiPanel` ([#4504](https://github.com/elastic/eui/pull/4504)) - Added `labelProps` prop to `EuiRadio`, `EuiSwitch` and `EuiCheckbox` ([#4516](https://github.com/elastic/eui/pull/4516)) +- Updated the default of the `EuiPopover`s `ownFocus` prop from `false` to `true` ([#4551](https://github.com/elastic/eui/pull/4551)) **Bug fixes** diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js index b96e0e90a01..0b706dbd8f8 100644 --- a/src-docs/src/views/color_picker/containers.js +++ b/src-docs/src/views/color_picker/containers.js @@ -95,7 +95,6 @@ export default () => { diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js index 17043d45307..576229fa02f 100644 --- a/src-docs/src/views/combo_box/containers.js +++ b/src-docs/src/views/combo_box/containers.js @@ -143,7 +143,6 @@ export default () => { diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js index 8cab3573658..71a0151766b 100644 --- a/src-docs/src/views/datagrid/control_columns.js +++ b/src-docs/src/views/datagrid/control_columns.js @@ -94,8 +94,7 @@ const SelectionButton = () => { selected } - closePopover={() => setIsPopoverOpen(false)} - ownFocus={true}> + closePopover={() => setIsPopoverOpen(false)}> {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'} @@ -264,8 +263,7 @@ const trailingControlColumns = [ onClick={() => setIsPopoverOpen(!isPopoverOpen)} /> } - closePopover={() => setIsPopoverOpen(false)} - ownFocus={true}> + closePopover={() => setIsPopoverOpen(false)}> Actions
- -
+ + + + - +
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx index f67d06197bc..1efa878cba9 100644 --- a/src/components/datagrid/column_selector.tsx +++ b/src/components/datagrid/column_selector.tsx @@ -159,7 +159,6 @@ export const useDataGridColumnSelector = ( isOpen={isOpen} closePopover={() => setIsOpen(false)} anchorPosition="downLeft" - ownFocus panelPaddingSize="s" panelClassName="euiDataGridColumnSelectorPopover" button={ diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx index 542e057181f..890d1562d61 100644 --- a/src/components/datagrid/column_sorting.tsx +++ b/src/components/datagrid/column_sorting.tsx @@ -141,7 +141,6 @@ export const useDataGridColumnSorting = ( isOpen={isOpen} closePopover={() => setIsOpen(false)} anchorPosition="downLeft" - ownFocus panelPaddingSize="s" panelClassName="euiDataGridColumnSortingPopover" button={ @@ -212,7 +211,6 @@ export const useDataGridColumnSorting = ( isOpen={avilableColumnsisOpen} closePopover={() => setAvailableColumnsIsOpen(false)} anchorPosition="downLeft" - ownFocus panelPaddingSize="none" button={ setIsOpen(false)} anchorPosition="downCenter" - ownFocus panelPaddingSize="s" panelClassName="euiDataGridColumnSelectorPopover" button={ diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx index 918775d6a23..4da6acccebd 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx +++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx @@ -112,7 +112,6 @@ export const EuiDatePopoverButton: FunctionComponent anchorPosition={position === 'start' ? 'downLeft' : 'downRight'} display="block" panelPaddingSize="none" - ownFocus {...rest}> + anchorClassName="euiQuickSelectPopover__anchor">
diff --git a/src/components/header/header_links/header_links.tsx b/src/components/header/header_links/header_links.tsx index 6899c3fa391..39fab32d0a1 100644 --- a/src/components/header/header_links/header_links.tsx +++ b/src/components/header/header_links/header_links.tsx @@ -134,7 +134,6 @@ export const EuiHeaderLinks: FunctionComponent = ({ @@ -153,16 +162,25 @@ exports[`EuiPopover props buffer 1`] = ` data-focus-lock-disabled="disabled" >