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](elastic/eui#6953)) - Updated deprecated `.substr()` usages to `.substring()` ([#6954](elastic/eui#6954)) - Updated `EuiInlineEdit`'s read mode button to include a title tooltip, increasing readability of truncated text ([#6966](elastic/eui#6966)) **Bug fixes** - Fixed `EuiFilterGroup`'s responsive styles ([#6983](elastic/eui#6983)) **Deprecations** - Deprecated `EuiFilterSelectItem`; Use `EuiSelectable` instead ([#6982](elastic/eui#6982)) **CSS-in-JS conversions** - Converted `EuiFilterSelectItem` to Emotion ([#6982](elastic/eui#6982)) - Removed `.euiFilterSelect__items` CSS; Use `EuiSelectable` instead ([#6982](elastic/eui#6982)) - Removed `.euiFilterSelect__note` and `.euiFilterSelect__noteContent` CSS; Use `EuiSelectableMessage` instead ([#6982](elastic/eui#6982)) - Added `focus.transparency` and `focus.backgroundColor` theme tokens ([#6984](elastic/eui#6984)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Aug 3, 2023 · 68fec4b · 68fec4b
1 parent 1300a84
commit 68fec4b
Show file tree

Hide file tree

Showing 25 changed files with 207 additions and 79 deletions.
diff --git a/package.json b/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",

diff --git a/...s/kbn-securitysolution-autocomplete/src/field/__tests__/__snapshots__/index.test.tsx.snap b/...s/kbn-securitysolution-autocomplete/src/field/__tests__/__snapshots__/index.test.tsx.snap
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@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
 };
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_empty_message.tsx b/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>
   );
 };
diff --git a/...sualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx b/...sualizer/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>
   );
 };
 

diff --git a/...blic/applications/workplace_search/views/groups/components/group_row_sources_dropdown.tsx b/...blic/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>
   );

diff --git a/...rise_search/public/applications/workplace_search/views/groups/components/sources_list.tsx b/...rise_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>
+  );
 };
diff --git a/...lic/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx b/...lic/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}

diff --git a/...c/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx b/...c/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}

diff --git a/...ation/components/component_templates/component_template_selector/component_templates.scss b/...ation/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 {

diff --git a/...ponents/component_templates/component_template_selector/components/filter_list_button.tsx b/...ponents/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}

diff --git a/...ugins/index_management/public/application/sections/home/components/filter_list_button.tsx b/...ugins/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}