diff --git a/package.json b/package.json index 3b1ee85678c9e..58234e0656555 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "84.0.0", + "@elastic/eui": "85.0.1", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx b/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx index 37cc6fc9eea80..9140c8ac3bc32 100644 --- a/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx +++ b/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx @@ -160,7 +160,7 @@ export function TableSortSelect({ tableSort, hasUpdatedAtMetadata, onChange }: P closePopover={closePopover} panelPaddingSize="none" anchorPosition="downCenter" - panelClassName="euiFilterGroup__popoverPanel" + panelProps={{ css: { width: euiTheme.base * 18 } }} > <> {i18nText.headerSort} diff --git a/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx b/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx index 03439f9dec161..c9871eb509d7e 100644 --- a/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx +++ b/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx @@ -116,7 +116,7 @@ export const TagFilterPanel: FC = ({ closePopover={closePopover} panelPaddingSize="none" anchorPosition="downCenter" - panelClassName="euiFilterGroup__popoverPanel" + panelProps={{ css: { width: euiTheme.base * 18 } }} panelStyle={isInUse ? { transition: 'none' } : undefined} > diff --git a/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx b/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx index db98acad65013..1afe4bac5f0ba 100644 --- a/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx +++ b/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx @@ -47,7 +47,8 @@ const popoverTitleStyle = css` padding: ${EQUAL_HEIGHT_OFFSET}px 0; `; const filterButtonStyle = css` - .euiFilterButton__textShift { + &, + & .euiFilterButton__textShift { min-width: 0; line-height: 1; } @@ -105,7 +106,12 @@ export function FieldTypeFilter({ const itemStyle = useMemo( () => css` font-size: ${euiTheme.size.m}; - padding: ${euiTheme.size.s} ${euiTheme.size.m}; + + // Specificity needed to override Sass styles + // EUI TODO: Remove this selector once EuiContextMenu has been converted to Emotion + &.euiContextMenuItem { + padding: ${euiTheme.size.s} ${euiTheme.size.m}; + } & + & { border-top: 1px solid ${euiTheme.colors.lightestShade}; @@ -149,7 +155,7 @@ export function FieldTypeFilter({ return ( {}} isDisabled={!isPopoverOpen}> { wrapper.instance().componentDidMount!(); await nextTick(); expect(wrapper.find('button.euiFilterButton')).toHaveLength(2); - expect(wrapper.find('button.euiFilterButton [data-text="Types"]')).toHaveLength(1); - expect(wrapper.find('button.euiFilterButton [data-text="Tags"]')).toHaveLength(1); + expect(wrapper.find('button.euiFilterButton span[data-text="Types"]')).toHaveLength(1); + expect(wrapper.find('button.euiFilterButton span[data-text="Tags"]')).toHaveLength(1); }); it('should not render filter buttons if disabled', async () => { diff --git a/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx b/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx index ba95479ae6107..f3730a24cbad8 100644 --- a/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx +++ b/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx @@ -27,6 +27,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)` `; const FilterAllButton = styled(EuiFilterButton)` + &, & .euiFilterButton__textShift { min-width: 28px; } diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx index 403d48c38850e..1e10ab18b5783 100644 --- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx @@ -38,7 +38,7 @@ describe('GroupsFilterPopover', () => { /> ); - wrapper.find('[data-test-subj="groups-filter-popover-button"]').first().simulate('click'); + wrapper.find('button[data-test-subj="groups-filter-popover-button"]').first().simulate('click'); wrapper.update(); wrapper.find('EuiFilterSelectItem').first().simulate('click'); diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx index 6156a01c70485..bf367a8c57e41 100644 --- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx @@ -25,7 +25,10 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-elastic-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( @@ -42,7 +45,10 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( @@ -59,10 +65,16 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); - wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-elastic-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( @@ -85,10 +97,16 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( diff --git a/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx b/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx index 57d31bd2a03e5..1899c3ae33cc3 100644 --- a/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx +++ b/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx @@ -44,7 +44,7 @@ describe('Select Flow Direction', () => { ); wrapper - .find(`[data-test-subj="${FlowDirection.biDirectional}"]`) + .find(`button[data-test-subj="${FlowDirection.biDirectional}"]`) .first() .simulate('click', event); wrapper.update(); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx index 62f1445529066..471561d6eeb0e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx @@ -472,7 +472,7 @@ describe('StatefulOpenTimeline', () => { false ); - wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click'); + wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click'); expect(wrapper.find('[data-test-subj="open-timeline"]').last().prop('onlyFavorites')).toEqual( true diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx index 3b0f2cc4ad7c0..e7bda4a5b79b9 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx @@ -77,7 +77,7 @@ describe('SearchRow', () => { ); - wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click'); + wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click'); expect(onToggleOnlyFavorites).toHaveBeenCalled(); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx index d3e8b38a8a557..df1cb6b7a1e2c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx @@ -42,7 +42,7 @@ describe('event_log_list_status_filter', () => { ); - wrapper.find(EuiFilterButton).simulate('click'); + wrapper.find(EuiFilterButton).find('button').simulate('click'); const statusItems = wrapper.find(EuiFilterSelectItem); expect(statusItems.length).toEqual(4); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx index 27eddb21177cd..7221736830917 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx @@ -35,7 +35,7 @@ describe('RuleStatusFilter', () => { expect(wrapper.find('[data-test-subj="ruleStateFilterSelect"]').exists()).toBeFalsy(); - wrapper.find(EuiFilterButton).simulate('click'); + wrapper.find(EuiFilterButton).find('button').simulate('click'); const statusItems = wrapper.find(EuiSelectableListItem); expect(statusItems.length).toEqual(3); @@ -46,7 +46,7 @@ describe('RuleStatusFilter', () => { ); - wrapper.find(EuiFilterButton).simulate('click'); + wrapper.find(EuiFilterButton).find('button').simulate('click'); wrapper.find(EuiSelectableListItem).at(0).simulate('click'); expect(onChangeMock).toHaveBeenCalledWith(['enabled']); diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts index e6e87087ed55d..87f022fc4f47b 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts @@ -56,7 +56,7 @@ const createActions = (testBed: TestBed) => { // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector find('searchBarContainer') .find('.euiPopover') - .find('.euiFilterButton') + .find('button.euiFilterButton') .at(index) .simulate('click'); }); @@ -75,7 +75,7 @@ const createActions = (testBed: TestBed) => { clickCriticalFilterButton: async () => { await act(async () => { // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector - find('searchBarContainer').find('.euiFilterButton').at(0).simulate('click'); + find('searchBarContainer').find('button.euiFilterButton').at(0).simulate('click'); }); component.update(); diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts index 8899212ca341c..adf24716ca932 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts @@ -64,7 +64,7 @@ const createActions = (testBed: TestBed) => { find('kibanaDeprecations') .find('.euiSearchBar__filtersHolder') .find('.euiPopover') - .find('.euiFilterButton') + .find('button.euiFilterButton') .at(0) .simulate('click'); }); @@ -77,7 +77,7 @@ const createActions = (testBed: TestBed) => { // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector find('kibanaDeprecations') .find('.euiSearchBar__filtersHolder') - .find('.euiFilterButton') + .find('button.euiFilterButton') .at(0) .simulate('click'); }); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap index f71c1d6885b99..e0aaefdf9d549 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap @@ -2,18 +2,18 @@ exports[`FilterStatusButton renders without errors for valid props 1`] = `