Upgrade EUI to v85.1.0 (#162660)

`85.0.0` ➡️ `85.1.0`

⚠️ The biggest change in this PR by far is the **removal** of several
`EuiFilterSelectItem` CSS classes and styles associated with those
classes. EUI has previously exported component-specific CSS classes for
usage such as `.euiFilterSelect__items`,
`.euiFilterGroup__popoverPanel`, or `.euiAccordionForm`.

❌ **As of our move to CSS-in-JS, we are actively moving away from this
architecture**. The goal is to either provide either a component or prop
directly to you instead of a CSS class. As a reminder, our classNames
are not guaranteed APIs and are subject to change without warning -
should you need to tweak or customize EUI's styling, we strongly
recommend passing in your own `className`.

💬 Moving forward, EUI will attempted to convert any usages of removed
CSS classes and their direct usages in Kibana for you. In most cases,
we'll hopefully be able to take the correct path of using a component or
prop instead. In cases where we cannot or significant/complex changes
are required, we may temporarily convert the CSS to a static CSS-in-JS
usage instead and add a TODO asking the relevant team to address this in
their own time (for example, the deprecation of `EuiFilterSelectItem`
and its conversion to `EuiSelectable`).

## [`85.1.0`](https://github.com/elastic/eui/tree/v85.1.0)

- Updated `EuiComboBox`'s `options` to accept `option.append` and
`option.prepend` props
([#6953](https://github.com/elastic/eui/pull/6953))
- Updated deprecated `.substr()` usages to `.substring()`
([#6954](https://github.com/elastic/eui/pull/6954))
- Updated `EuiInlineEdit`'s read mode button to include a title tooltip,
increasing readability of truncated text
([#6966](https://github.com/elastic/eui/pull/6966))

**Bug fixes**

- Fixed `EuiFilterGroup`'s responsive styles
([#6983](https://github.com/elastic/eui/pull/6983))

**Deprecations**

- Deprecated `EuiFilterSelectItem`; Use `EuiSelectable` instead
([#6982](https://github.com/elastic/eui/pull/6982))

**CSS-in-JS conversions**

- Converted `EuiFilterSelectItem` to Emotion
([#6982](https://github.com/elastic/eui/pull/6982))
- Removed `.euiFilterSelect__items` CSS; Use `EuiSelectable` instead
([#6982](https://github.com/elastic/eui/pull/6982))
- Removed `.euiFilterSelect__note` and `.euiFilterSelect__noteContent`
CSS; Use `EuiSelectableMessage` instead
([#6982](https://github.com/elastic/eui/pull/6982))
- Added `focus.transparency` and `focus.backgroundColor` theme tokens
([#6984](https://github.com/elastic/eui/pull/6984))

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch@8.9.0",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "85.0.1",
+    "@elastic/eui": "85.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/kbn-securitysolution-autocomplete/src/field/__tests__/__snapshots__/index.test.tsx.snap

@@ -22,6 +22,7 @@ Object {
             >
               <span
                 class="euiComboBoxPill euiComboBoxPill--plainText"
+                data-test-subj="euiComboBoxPill"
               >
                 machine.os.raw
               </span>
@@ -96,6 +97,7 @@ Object {
           >
             <span
               class="euiComboBoxPill euiComboBoxPill--plainText"
+              data-test-subj="euiComboBoxPill"
             >
               machine.os.raw
             </span>
@@ -227,6 +229,7 @@ Object {
             >
               <span
                 class="euiComboBoxPill euiComboBoxPill--plainText"
+                data-test-subj="euiComboBoxPill"
               >
                 machine.os.raw
               </span>
@@ -274,6 +277,7 @@ Object {
           >
             <span
               class="euiComboBoxPill euiComboBoxPill--plainText"
+              data-test-subj="euiComboBoxPill"
             >
               machine.os.raw
             </span>
@@ -378,6 +382,7 @@ Object {
             >
               <span
                 class="euiComboBoxPill euiComboBoxPill--plainText"
+                data-test-subj="euiComboBoxPill"
               >
                 machine.os.raw
               </span>
@@ -441,6 +446,7 @@ Object {
           >
             <span
               class="euiComboBoxPill euiComboBoxPill--plainText"
+              data-test-subj="euiComboBoxPill"
             >
               machine.os.raw
             </span>
@@ -561,6 +567,7 @@ Object {
             >
               <span
                 class="euiComboBoxPill euiComboBoxPill--plainText"
+                data-test-subj="euiComboBoxPill"
               >
                 machine.os.raw
               </span>
@@ -617,6 +624,7 @@ Object {
           >
             <span
               class="euiComboBoxPill euiComboBoxPill--plainText"
+              data-test-subj="euiComboBoxPill"
             >
               machine.os.raw
             </span>

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@85.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@85.1.0': ['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
 };

src/plugins/controls/public/options_list/components/options_list_popover_empty_message.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiSpacer } from '@elastic/eui';
+import { EuiSelectableMessage, EuiIcon, EuiSpacer } from '@elastic/eui';
 
 import { OptionsListStrings } from './options_list_strings';
 
@@ -17,19 +17,16 @@ export const OptionsListPopoverEmptyMessage = ({
   showOnlySelected: boolean;
 }) => {
   return (
-    <span
-      className="euiFilterSelect__note"
+    <EuiSelectableMessage
       data-test-subj={`optionsList-control-${
         showOnlySelected ? 'selectionsEmptyMessage' : 'noSelectionsMessage'
       }`}
     >
-      <span className="euiFilterSelect__noteContent">
-        <EuiIcon type="minusInCircle" />
-        <EuiSpacer size="xs" />
-        {showOnlySelected
-          ? OptionsListStrings.popover.getSelectionsEmptyMessage()
-          : OptionsListStrings.popover.getEmptyMessage()}
-      </span>
-    </span>
+      <EuiIcon type="minusInCircle" />
+      <EuiSpacer size="xs" />
+      {showOnlySelected
+        ? OptionsListStrings.popover.getSelectionsEmptyMessage()
+        : OptionsListStrings.popover.getEmptyMessage()}
+    </EuiSelectableMessage>
   );
 };

x-pack/plugins/data_visualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx

@@ -10,6 +10,7 @@ import {
   EuiFilterButton,
   EuiFilterGroup,
   EuiFilterSelectItem,
+  EuiSelectableMessage,
   EuiIcon,
   EuiPopover,
   EuiPopoverTitle,
@@ -32,18 +33,16 @@ const SELECT_PICKER_HEIGHT = '250px';
 
 const NoFilterItems = () => {
   return (
-    <div className="euiFilterSelect__note">
-      <div className="euiFilterSelect__noteContent">
-        <EuiIcon type="minusInCircle" />
-        <EuiSpacer size="xs" />
-        <p>
-          <FormattedMessage
-            id="xpack.dataVisualizer.multiSelectPicker.NoFiltersFoundMessage"
-            defaultMessage="No filters found"
-          />
-        </p>
-      </div>
-    </div>
+    <EuiSelectableMessage>
+      <EuiIcon type="minusInCircle" />
+      <EuiSpacer size="xs" />
+      <p>
+        <FormattedMessage
+          id="xpack.dataVisualizer.multiSelectPicker.NoFiltersFoundMessage"
+          defaultMessage="No filters found"
+        />
+      </p>
+    </EuiSelectableMessage>
   );
 };
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_row_sources_dropdown.tsx

@@ -7,7 +7,13 @@
 
 import React from 'react';
 
-import { EuiFilterGroup, EuiPopover, EuiPopoverTitle, EuiButtonEmpty } from '@elastic/eui';
+import {
+  EuiFilterGroup,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiButtonEmpty,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { ContentSource } from '../../../types';
@@ -29,6 +35,8 @@ export const GroupRowSourcesDropdown: React.FC<GroupRowSourcesDropdownProps> = (
   onButtonClick,
   closePopover,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const toggleLink = (
     <EuiButtonEmpty className="user-group-source--additional" onClick={onButtonClick}>
       + {numOptions}
@@ -58,7 +66,9 @@ export const GroupRowSourcesDropdown: React.FC<GroupRowSourcesDropdownProps> = (
         panelPaddingSize="none"
       >
         <EuiPopoverTitle>{contentSourceCountHeading}</EuiPopoverTitle>
-        <div className="euiFilterSelect__items">{sources}</div>
+        <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
+          {sources}
+        </div>
       </EuiPopover>
     </EuiFilterGroup>
   );

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/sources_list.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiFilterSelectItem } from '@elastic/eui';
+import { EuiFilterSelectItem, useEuiTheme } from '@elastic/eui';
 
 import { ContentSource } from '../../../types';
 
@@ -26,6 +26,8 @@ export const SourcesList: React.FC<SourcesListProps> = ({
   addFilteredSource,
   removeFilteredSource,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const sourceIds = contentSources.map(({ id }) => id);
   const sources = sourceIds.map((sourceId, index) => {
     const checked = filteredSources.indexOf(sourceId) > -1 ? 'on' : undefined;
@@ -38,5 +40,12 @@ export const SourcesList: React.FC<SourcesListProps> = ({
     );
   });
 
-  return <div className="euiFilterSelect__items">{sources}</div>;
+  return (
+    // EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+    // instead of EuiFilterSelectItem (which is pending deprecation).
+    // @see https://elastic.github.io/eui/#/forms/filter-group#multi-select
+    <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
+      {sources}
+    </div>
+  );
 };

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx

@@ -12,6 +12,7 @@ import {
   EuiPopover,
   EuiText,
   EuiTourStep,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -153,6 +154,9 @@ export const AgentStatusFilter: React.FC<{
 
     setIsStatusFilterOpen(isOpen);
   };
+
+  const { euiTheme } = useEuiTheme();
+
   return (
     <InactiveAgentsTourStep
       isOpen={newlyInactiveAgentsCount > 0 && !inactiveAgentsCalloutHasBeenDismissed}
@@ -177,7 +181,10 @@ export const AgentStatusFilter: React.FC<{
         closePopover={() => updateIsStatusFilterOpen(false)}
         panelPaddingSize="none"
       >
-        <div className="euiFilterSelect__items">
+        {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+            instead of EuiFilterSelectItem (which is pending deprecation).
+            @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+        <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
           {statusFilters.map(({ label, status }, idx) => (
             <EuiFilterSelectItem
               key={idx}

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx

@@ -17,6 +17,7 @@ import {
   EuiIcon,
   EuiPopover,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import styled from 'styled-components';
@@ -91,6 +92,7 @@ export const SearchAndFilterBar: React.FunctionComponent<SearchAndFilterBarProps
   onClickAgentActivity,
   showAgentActivityTour,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const { isFleetServerStandalone } = useFleetServerStandalone();
   const showAddFleetServerBtn = !isFleetServerStandalone;
 
@@ -218,7 +220,10 @@ export const SearchAndFilterBar: React.FunctionComponent<SearchAndFilterBarProps
                   closePopover={() => setIsTagsFilterOpen(false)}
                   panelPaddingSize="none"
                 >
-                  <div className="euiFilterSelect__items">
+                  {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+                      instead of EuiFilterSelectItem (which is pending deprecation).
+                      @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+                  <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
                     <>
                       {tags.map((tag, index) => (
                         <EuiFilterSelectItem
@@ -283,7 +288,10 @@ export const SearchAndFilterBar: React.FunctionComponent<SearchAndFilterBarProps
                   closePopover={() => setIsAgentPoliciesFilterOpen(false)}
                   panelPaddingSize="none"
                 >
-                  <div className="euiFilterSelect__items">
+                  {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+                      instead of EuiFilterSelectItem (which is pending deprecation).
+                      @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+                  <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
                     {agentPolicies.map((agentPolicy, index) => (
                       <EuiFilterSelectItem
                         checked={selectedAgentPolicies.includes(agentPolicy.id) ? 'on' : undefined}

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss

@@ -33,10 +33,14 @@ $heightHeader: $euiSizeL * 2;
     border-bottom: $euiBorderThin;
     border-top: $euiBorderThin;
     border-left: $euiBorderThin;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
     box-shadow: none;
     height: $euiSizeXXL; /* [2] */
+
+    &,
+    & > :first-child .euiFilterButton { /* EUI specificity override */
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
   }
 
   &__listWrapper {

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx

@@ -7,7 +7,13 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiFilterButton, EuiPopover, EuiFilterSelectItem, EuiFilterGroup } from '@elastic/eui';
+import {
+  EuiFilterButton,
+  EuiPopover,
+  EuiFilterSelectItem,
+  EuiFilterGroup,
+  useEuiTheme,
+} from '@elastic/eui';
 
 interface Filter {
   name: string;
@@ -24,6 +30,7 @@ export interface Filters {
 }
 
 export function FilterListButton({ onChange, filters }: Props) {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const activeFilters = Object.values(filters).filter((v) => (v as Filter).checked === 'on');
@@ -76,7 +83,10 @@ export function FilterListButton({ onChange, filters }: Props) {
         panelPaddingSize="none"
         data-test-subj="filterList"
       >
-        <div className="euiFilterSelect__items">
+        {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+            instead of EuiFilterSelectItem (which is pending deprecation).
+            @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+        <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
           {Object.entries(filters).map(([filter, item], index) => (
             <EuiFilterSelectItem
               checked={(item as Filter).checked}

x-pack/plugins/index_management/public/application/sections/home/components/filter_list_button.tsx

@@ -7,7 +7,13 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiFilterButton, EuiFilterGroup, EuiPopover, EuiFilterSelectItem } from '@elastic/eui';
+import {
+  EuiFilterButton,
+  EuiFilterGroup,
+  EuiPopover,
+  EuiFilterSelectItem,
+  useEuiTheme,
+} from '@elastic/eui';
 
 interface Filter {
   name: string;
@@ -24,6 +30,7 @@ export type Filters<T extends string> = {
 };
 
 export function FilterListButton<T extends string>({ onChange, filters }: Props<T>) {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const activeFilters = Object.values(filters).filter((v) => (v as Filter).checked === 'on');
@@ -74,7 +81,10 @@ export function FilterListButton<T extends string>({ onChange, filters }: Props<
         panelPaddingSize="none"
         data-test-subj="filterList"
       >
-        <div className="euiFilterSelect__items">
+        {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+            instead of EuiFilterSelectItem (which is pending deprecation).
+            @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+        <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
           {Object.entries(filters).map(([filter, item], index) => (
             <EuiFilterSelectItem
               checked={(item as Filter).checked}

x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx

@@ -10,6 +10,7 @@ import {
   EuiFilterButton,
   EuiFilterGroup,
   EuiFilterSelectItem,
+  EuiSelectableMessage,
   EuiIcon,
   EuiPopover,
   EuiPopoverTitle,
@@ -26,18 +27,16 @@ export interface Option {
 
 const NoFilterItems = () => {
   return (
-    <div className="euiFilterSelect__note">
-      <div className="euiFilterSelect__noteContent">
-        <EuiIcon type="minusInCircle" />
-        <EuiSpacer size="xs" />
-        <p>
-          <FormattedMessage
-            id="xpack.ml.multiSelectPicker.NoFiltersFoundMessage"
-            defaultMessage="No filters found"
-          />
-        </p>
-      </div>
-    </div>
+    <EuiSelectableMessage>
+      <EuiIcon type="minusInCircle" />
+      <EuiSpacer size="xs" />
+      <p>
+        <FormattedMessage
+          id="xpack.ml.multiSelectPicker.NoFiltersFoundMessage"
+          defaultMessage="No filters found"
+        />
+      </p>
+    </EuiSelectableMessage>
   );
 };
 

x-pack/plugins/security_solution/public/common/components/ml/tables/job_id_filter.tsx

@@ -5,7 +5,13 @@
  * 2.0.
  */
 import React, { useCallback, useMemo, useState } from 'react';
-import { EuiFilterButton, EuiFilterGroup, EuiFilterSelectItem, EuiPopover } from '@elastic/eui';
+import {
+  EuiFilterButton,
+  EuiFilterGroup,
+  EuiFilterSelectItem,
+  EuiPopover,
+  useEuiTheme,
+} from '@elastic/eui';
 
 export const JobIdFilter: React.FC<{
   selectedJobIds: string[];
@@ -14,6 +20,7 @@ export const JobIdFilter: React.FC<{
   onSelect: (jobIds: string[]) => void;
   title: string;
 }> = ({ selectedJobIds, onSelect, title, jobIds, jobNameById }) => {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const onButtonClick = useCallback(() => {
@@ -62,7 +69,10 @@ export const JobIdFilter: React.FC<{
         closePopover={closePopover}
         panelPaddingSize="none"
       >
-        <div className="euiFilterSelect__items">
+        {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+            instead of EuiFilterSelectItem (which is pending deprecation).
+            @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+        <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
           {jobIds.map((id) => (
             <EuiFilterSelectItem
               data-test-subj={`job-id-filter-item-${id}`}

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap

@@ -24,26 +24,23 @@ exports[`GroupsFilterPopover renders correctly against snapshot 1`] = `
   panelPaddingSize="none"
   repositionOnScroll={true}
 >
-  <EuiFilterSelectItem
+  <EuiFilterSelectItemClass
     key="0-auditbeat"
     onClick={[Function]}
-    showIcons={true}
   >
     auditbeat (2)
-  </EuiFilterSelectItem>
-  <EuiFilterSelectItem
+  </EuiFilterSelectItemClass>
+  <EuiFilterSelectItemClass
     key="1-process"
     onClick={[Function]}
-    showIcons={true}
   >
     process (3)
-  </EuiFilterSelectItem>
-  <EuiFilterSelectItem
+  </EuiFilterSelectItemClass>
+  <EuiFilterSelectItemClass
     key="2-winlogbeat"
     onClick={[Function]}
-    showIcons={true}
   >
     winlogbeat (1)
-  </EuiFilterSelectItem>
+  </EuiFilterSelectItemClass>
 </EuiPopover>
 `;

x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx

@@ -41,9 +41,9 @@ describe('GroupsFilterPopover', () => {
     wrapper.find('button[data-test-subj="groups-filter-popover-button"]').first().simulate('click');
     wrapper.update();
 
-    wrapper.find('EuiFilterSelectItem').first().simulate('click');
+    wrapper.find('EuiFilterSelectItemClass').first().simulate('click');
     wrapper.update();
 
-    expect(wrapper.find('EuiFilterSelectItem').first().prop('checked')).toEqual('on');
+    expect(wrapper.find('EuiFilterSelectItemClass').first().prop('checked')).toEqual('on');
   });
 });

x-pack/plugins/security_solution/public/explore/components/risk_score/severity/severity_filter_group.tsx

@@ -13,6 +13,7 @@ import {
   EuiFilterSelectItem,
   EuiPopover,
   useGeneratedHtmlId,
+  useEuiTheme,
 } from '@elastic/eui';
 
 import type { RiskScoreEntity, RiskSeverity } from '../../../../../common/search_strategy';
@@ -33,6 +34,7 @@ export const SeverityFilterGroup: React.FC<{
   onSelect: (newSelection: RiskSeverity[]) => void;
   riskEntity: RiskScoreEntity;
 }> = ({ severityCount, selectedSeverities, onSelect, riskEntity }) => {
+  const { euiTheme } = useEuiTheme();
   const { telemetry } = useKibana().services;
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -105,7 +107,10 @@ export const SeverityFilterGroup: React.FC<{
         closePopover={closePopover}
         panelPaddingSize="none"
       >
-        <div className="euiFilterSelect__items">
+        {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+            instead of EuiFilterSelectItem (which is pending deprecation).
+            @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+        <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
           {items.map((item, index) => (
             <EuiFilterSelectItem
               data-test-subj={`risk-filter-item-${item.risk}`}

x-pack/plugins/security_solution/public/management/components/policies_selector/policies_selector.tsx

@@ -20,6 +20,7 @@ import {
   EuiFilterButton,
   EuiFilterSelectItem,
   EuiText,
+  useEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { ImmutableArray, PolicyData } from '../../../../common/endpoint/types';
@@ -57,6 +58,7 @@ const UNASSIGNED_ENTRIES = i18n.translate(
 
 export const PoliciesSelector = memo<PoliciesSelectorProps>(
   ({ policies, onChangeSelection, defaultExcludedPolicies, defaultIncludedPolicies }) => {
+    const { euiTheme } = useEuiTheme();
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const [query, setQuery] = useState<string>('');
     const [itemsList, setItemsList] = useState<PolicySelectionItem[]>([]);
@@ -195,7 +197,14 @@ export const PoliciesSelector = memo<PoliciesSelectorProps>(
                   value={query}
                 />
               </EuiPopoverTitle>
-              <div data-test-subj="policiesSelector-popover" className="euiFilterSelect__items">
+              {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+                  instead of EuiFilterSelectItem (which is pending deprecation).
+                  @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+              <div
+                data-test-subj="policiesSelector-popover"
+                className="eui-yScroll"
+                css={{ maxHeight: euiTheme.base * 30 }}
+              >
                 {dropdownItems}
               </div>
             </EuiPopover>

x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap

@@ -102,7 +102,9 @@ exports[`NavControlPopover renders without crashing 1`] = `
           "warningText": "#83650a",
         },
         "focus": Object {
+          "backgroundColor": "rgba(0,119,204,0.1)",
           "color": "currentColor",
+          "transparency": 0.1,
           "width": "2px",
         },
         "font": Object {

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/solution_filter.tsx

@@ -7,7 +7,13 @@
 
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiFilterGroup, EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
+import {
+  EuiFilterGroup,
+  EuiPopover,
+  EuiFilterButton,
+  EuiFilterSelectItem,
+  useEuiTheme,
+} from '@elastic/eui';
 
 interface SolutionFilterProps {
   solutions: Map<string, string>;
@@ -18,6 +24,7 @@ export const SolutionFilter: React.FunctionComponent<SolutionFilterProps> = ({
   solutions,
   onChange,
 }: SolutionFilterProps) => {
+  const { euiTheme } = useEuiTheme();
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
@@ -49,7 +56,10 @@ export const SolutionFilter: React.FunctionComponent<SolutionFilterProps> = ({
           </EuiFilterButton>
         }
       >
-        <div className="euiFilterSelect__items">
+        {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+            instead of EuiFilterSelectItem (which is pending deprecation).
+            @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+        <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
           {[...solutions.entries()].map(([id, title]) => (
             <EuiFilterSelectItem
               key={id}

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/action_type_filter.tsx

@@ -7,7 +7,7 @@
 
 import React, { useState, useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
+import { EuiPopover, EuiFilterButton, EuiFilterSelectItem, useEuiTheme } from '@elastic/eui';
 import { ActionType } from '../../../../types';
 
 interface ActionTypeFilterProps {
@@ -21,6 +21,7 @@ export const ActionTypeFilter: React.FunctionComponent<ActionTypeFilterProps> =
   onChange: onFilterChange,
   filters,
 }: ActionTypeFilterProps) => {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
   const onClick = useCallback(
@@ -57,7 +58,10 @@ export const ActionTypeFilter: React.FunctionComponent<ActionTypeFilterProps> =
         </EuiFilterButton>
       }
     >
-      <div className="euiFilterSelect__items">
+      {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+          instead of EuiFilterSelectItem (which is pending deprecation).
+          @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+      <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
         {actionTypes.map((item) => (
           <EuiFilterSelectItem
             key={item.id}

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx

@@ -7,7 +7,13 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiPopover, EuiFilterButton, EuiFilterSelectItem, EuiHealth } from '@elastic/eui';
+import {
+  EuiPopover,
+  EuiFilterButton,
+  EuiFilterSelectItem,
+  EuiHealth,
+  useEuiTheme,
+} from '@elastic/eui';
 import { RuleExecutionStatuses, RuleExecutionStatusValues } from '@kbn/alerting-plugin/common';
 import { rulesStatusesTranslationsMapping } from '../translations';
 import { getExecutionStatusHealthColor } from '../../../../common/lib';
@@ -23,6 +29,7 @@ export const RuleExecutionStatusFilter: React.FunctionComponent<RuleExecutionSta
   selectedStatuses,
   onChange,
 }: RuleExecutionStatusFilterProps) => {
+  const { euiTheme } = useEuiTheme();
   const [selectedValues, setSelectedValues] = useState<string[]>(selectedStatuses);
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
@@ -65,7 +72,10 @@ export const RuleExecutionStatusFilter: React.FunctionComponent<RuleExecutionSta
         </EuiFilterButton>
       }
     >
-      <div className="euiFilterSelect__items">
+      {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+          instead of EuiFilterSelectItem (which is pending deprecation).
+          @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+      <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
         {sortedRuleExecutionStatusValues.map((item: RuleExecutionStatuses) => {
           const healthColor = getExecutionStatusHealthColor(item);
           return (

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx

@@ -7,7 +7,13 @@
 
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiPopover, EuiFilterButton, EuiFilterSelectItem, EuiHealth } from '@elastic/eui';
+import {
+  EuiPopover,
+  EuiFilterButton,
+  EuiFilterSelectItem,
+  EuiHealth,
+  useEuiTheme,
+} from '@elastic/eui';
 import { RuleLastRunOutcomes, RuleLastRunOutcomeValues } from '@kbn/alerting-plugin/common';
 import { rulesLastRunOutcomeTranslationMapping } from '../translations';
 import { getOutcomeHealthColor } from '../../../../common/lib';
@@ -23,6 +29,7 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
   selectedOutcomes,
   onChange,
 }: RuleLastRunOutcomeFilterProps) => {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
   const onTogglePopover = useCallback(() => {
@@ -65,7 +72,10 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
         </EuiFilterButton>
       }
     >
-      <div className="euiFilterSelect__items">
+      {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+          instead of EuiFilterSelectItem (which is pending deprecation).
+          @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+      <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
         {sortedRuleLastRunOutcomeValues.map((item: RuleLastRunOutcomes) => {
           const healthColor = getOutcomeHealthColor(item);
           return (

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/type_filter.tsx

@@ -7,7 +7,13 @@
 
 import React, { Fragment, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiPopover, EuiFilterButton, EuiFilterSelectItem, EuiTitle } from '@elastic/eui';
+import {
+  EuiPopover,
+  EuiFilterButton,
+  EuiFilterSelectItem,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 
 export interface TypeFilterProps {
   options: Array<{
@@ -26,6 +32,7 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
   onChange: onFilterChange,
   filters,
 }: TypeFilterProps) => {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
   return (
@@ -48,7 +55,10 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
         </EuiFilterButton>
       }
     >
-      <div className="euiFilterSelect__items">
+      {/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
+          instead of EuiFilterSelectItem (which is pending deprecation).
+          @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
+      <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
         {options.map((groupItem, groupIndex) => (
           <Fragment key={`group${groupIndex}`}>
             <EuiTitle data-test-subj={`ruleType${groupIndex}Group`} size="xxs">

yarn.lock

@@ -1545,10 +1545,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@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==
+"@elastic/eui@85.1.0":
+  version "85.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-85.1.0.tgz#cad3113223992b3a857b8054440ce4f499eaf897"
+  integrity sha512-G2pBPJrNbO92/ttRowlxGczuAQEkcXlco4LJWWesWBqKxOW6ypF8LJxlC7J7tIBWAOUEQFSVUGELqPnynMVoew==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.194"