Upgrade @elastic/eui to 85.0.1 (#162209)

## Summary `eui@84.0.0` ⏩ `eui@85.0.1` ## [`85.0.1`](https://github.com/elastic/eui/tree/v85.0.1) **Bug fixes** - Fixed `EuiFilterGroup`'s responsive styles ([#6983](elastic/eui#6983)) ## [`85.0.0`](https://github.com/elastic/eui/tree/v85.0.0) - Updated `EuiThemeProvider` to set an Emotion theme context that returns the values of `useEuiTheme()` ([#6913](elastic/eui#6913)) - Added `size` prop to `EuiStepsHorizontal`, defaulting to the previous size of `m` ([#6928](elastic/eui#6928)) - Added new `s` sizing to `EuiStepsHorizontal` ([#6928](elastic/eui#6928)) - Added `at` and `key` icon glyphs. ([#6934](elastic/eui#6934)) - Added a new `cloneElementWithCss` Emotion utility ([#6939](elastic/eui#6939)) - Updated `EuiPopover` to allow consumer control of all `focusTrapProps` ([#6955](elastic/eui#6955)) **Bug fixes** - Fixed `EuiDataGrid` height calculation bug when browser zoom levels are not 100% ([#6895](elastic/eui#6895)) - Fixed `EuiTab` not correctly passing selection color state to `prepend` and `append` children ([#6938](elastic/eui#6938)) - Fixed `EuiInputPopover` to allow consumer control of its focus trap via `focusTrapProps` ([#6955](elastic/eui#6955)) **Breaking changes** - `EuiProvider` will no longer render multiple or duplicate nested instances of itself. If a nested `EuiProvider` is detected, that instance will return early without further processing, and will warn if configured to do so via `setEuiDevProviderWarning`. For nested theming, use `EuiThemeProvider` instead. ([#6949](elastic/eui#6949)) - Removed `onTrapDeactivation` prop from `EuiPopover`. Use `focusTrapProps.onDeactivation` instead ([#6955](elastic/eui#6955)) **CSS-in-JS conversions** - Converted `EuiFilterGroup` and `EuiFilterButton` to Emotion; Removed styles attached to `.euiFilterGroup__popoverPanel` ([#6957](elastic/eui#6957)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jul 27, 2023 · 1c42ee9 · 1c42ee9
1 parent 5f91306
commit 1c42ee9
Show file tree

Hide file tree

Showing 21 changed files with 74 additions and 48 deletions.
diff --git 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
@@ -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 } }}
     >
       <>
         <EuiText css={panelHeaderCSS}>{i18nText.headerSort}</EuiText>

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
@@ -116,7 +116,7 @@ export const TagFilterPanel: FC<Props> = ({
         closePopover={closePopover}
         panelPaddingSize="none"
         anchorPosition="downCenter"
-        panelClassName="euiFilterGroup__popoverPanel"
+        panelProps={{ css: { width: euiTheme.base * 18 } }}
         panelStyle={isInUse ? { transition: 'none' } : undefined}
       >
         <EuiPopoverTitle paddingSize="m" css={popoverTitleCSS}>

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
@@ -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<T extends FieldListItem = DataViewField>({
   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<T extends FieldListItem = DataViewField>({
   return (
     <EuiPopover
       id="unifiedFieldTypeFilter"
-      panelClassName="euiFilterGroup__popoverPanel"
+      panelProps={{ css: { width: euiTheme.base * 18 } }}
       panelPaddingSize="none"
       anchorPosition="rightUp"
       display="block"

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.4.0': ['Elastic License 2.0'],
-  '@elastic/eui@84.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@85.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };
diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss
@@ -1,4 +1,5 @@
 .presFilterByType__panel {
+  width: $euiSize * 18;
   min-width: $euiSizeXXL * 8;
   @include euiBreakpoint('l', 'xl') {
     width: $euiFormMaxWidth;

diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx
@@ -66,7 +66,7 @@ export function FieldTypeFilter({
     <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
       <EuiFilterGroup fullWidth>
         <EuiPopover
-          panelClassName="euiFilterGroup__popoverPanel presFilterByType__panel"
+          panelClassName="presFilterByType__panel"
           panelPaddingSize="none"
           display="block"
           isOpen={isPopoverOpen}

diff --git a/src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx b/src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx
@@ -679,8 +679,8 @@ describe('SavedObjectsFinder', () => {
       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
@@ -27,6 +27,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)`
 `;
 
 const FilterAllButton = styled(EuiFilterButton)`
+  &,
   & .euiFilterButton__textShift {
     min-width: 28px;
   }

diff --git a/...ion/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx b/...ion/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/...lution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx b/...lution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx
@@ -25,7 +25,10 @@ describe('JobsTableFilters', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    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', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    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', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    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', () => {
       <JobsTableFiltersComponent securityJobs={securityJobs} onFilterChanged={onFilterChanged} />
     );
 
-    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/...y_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx b/...y_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
@@ -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/...ins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx b/...ins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx
@@ -77,7 +77,7 @@ describe('SearchRow', () => {
         </ThemeProvider>
       );
 
-      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/...ic/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx b/...ic/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx
@@ -42,7 +42,7 @@ describe('event_log_list_status_filter', () => {
       <EventLogListStatusFilter selectedOptions={[]} onChange={onChangeMock} />
     );
 
-    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/..._actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx b/..._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', () => {
       <RuleStatusFilter selectedStatuses={[]} onChange={onChangeMock} />
     );
 
-    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/.../upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts b/.../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/..._assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts b/..._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/..._uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap b/..._uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap
diff --git a/.../legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap b/.../legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap
diff --git a/yarn.lock b/yarn.lock
@@ -1552,10 +1552,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@84.0.0":
-  version "84.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-84.0.0.tgz#0d37da1fe3f2f9af54b62e127c9682d381111ba6"
-  integrity sha512-hgDWyXwlhpbNzQgIvGLppqSRMEVt2zMlXIxMzvlV6PYPJUh1K9f5pOyXtNyouFgYZG2bkltvG3cUrMLeBbgUkg==
+"@elastic/eui@85.0.1":
+  version "85.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-85.0.1.tgz#835b77f20670918d0f30ccfa47f0f94cb1fdc9e8"
+  integrity sha512-OZ8XClOdiRTyhAcipaw3wGgA8HogNqNESJZ8jqUTGbVxN+hsLjAA64rKcqkTndid+7mbxV3+UePieRVnOkzMEg==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.194"
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)` @@
     `;
     const FilterAllButton = styled(EuiFilterButton)`
+      &,
       & .euiFilterButton__textShift {
         min-width: 28px;
       }
@@ Expand Down @@