Upgrade @elastic/eui to 85.0.1 (#162209)

## Summary

`[email protected]` ⏩ `[email protected]`

## [`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 <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>

Author: 3 people

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@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",

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>

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}>

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"

src/dev/license_checker/config.ts

@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['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'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };

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;

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}

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 () => {

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;
   }

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');