Upgrade EUI to v95.7.0 (#190346)

`v95.6.0` ⏩ `v95.7.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.7.0`](https://github.com/elastic/eui/releases/v95.7.0) **CSS-in-JS conversions** - Converted `EuiSelectable` to Emotion ([#7940](https://github.com/elastic/eui/pull/7940)) - Removed `$euiSelectableListItemBorder` - Removed `$euiSelectableListItemPadding` - Converted `EuiSelectableTemplateSitewide` to Emotion ([#7944](https://github.com/elastic/eui/pull/7944)) - Removed `$euiSelectableTemplateFocusBackgroundLight` - Removed `$euiSelectableTemplateFocusBackgroundDark` - Removed `$euiSelectableTemplateSitewideTypes` - Converted `EuiComboBox` to Emotion ([#7950](https://github.com/elastic/eui/pull/7950))
2025-04-23 09:19:04 -04:00 · 2024-08-14 10:35:08 -07:00 · 2024-08-14 10:35:08 -07:00 · 761f5e7133
commit 761f5e7133
parent 1144c0cea7
7 changed files with 60 additions and 57 deletions
--- a/package.json
+++ b/package.json
@ -114,7 +114,7 @@
    "@elastic/ecs": "^8.11.1",
    "@elastic/elasticsearch": "^8.14.0",
    "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.6.0",
+    "@elastic/eui": "95.7.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "1.2.1",
    "@elastic/numeral": "^2.5.1",
--- a/packages/kbn-securitysolution-autocomplete/src/field/tests/snapshots/index.test.tsx.snap
+++ b/packages/kbn-securitysolution-autocomplete/src/field/tests/snapshots/index.test.tsx.snap
@ -6,21 +6,21 @@ Object {
  "baseElement": <body>
    <div>
      <div
-        class="euiComboBox euiComboBox--fullWidth"
+        class="euiComboBox emotion-euiComboBox-fullWidth"
        data-test-subj="fieldAutocompleteComboBox"
      >
        <div
          class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
        >
          <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
          >
            <div
              class="euiFormControlLayout__childrenWrapper"
              style="--euiFormControlRightIconsCount: 2;"
            >
              <div
-                class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText"
                data-test-subj="comboBoxInput"
                tabindex="-1"
              >
@ -30,7 +30,7 @@ Object {
                  aria-expanded="false"
                  aria-invalid="false"
                  autocomplete="off"
-                  class="euiComboBox__input"
+                  class="euiComboBox__input emotion-euiComboBoxInput"
                  data-test-subj="comboBoxSearchInput"
                  id="generated-id__eui-combobox-id"
                  role="combobox"
@ -74,21 +74,21 @@ Object {
  </body>,
  "container": <div>
    <div
-      class="euiComboBox euiComboBox--fullWidth"
+      class="euiComboBox emotion-euiComboBox-fullWidth"
      data-test-subj="fieldAutocompleteComboBox"
    >
      <div
        class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
      >
        <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
        >
          <div
            class="euiFormControlLayout__childrenWrapper"
            style="--euiFormControlRightIconsCount: 2;"
          >
            <div
-              class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -98,7 +98,7 @@ Object {
                aria-expanded="false"
                aria-invalid="false"
                autocomplete="off"
-                class="euiComboBox__input"
+                class="euiComboBox__input emotion-euiComboBoxInput"
                data-test-subj="comboBoxSearchInput"
                id="generated-id__eui-combobox-id"
                role="combobox"
@ -199,20 +199,20 @@ Object {
  "baseElement": <body>
    <div>
      <div
-        class="euiComboBox euiComboBox--fullWidth euiComboBox-isDisabled"
+        class="euiComboBox euiComboBox-isDisabled emotion-euiComboBox-fullWidth"
        data-test-subj="fieldAutocompleteComboBox"
      >
        <div
          class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
        >
          <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
          >
            <div
              class="euiFormControlLayout__childrenWrapper"
            >
              <div
-                class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText-disabled"
                data-test-subj="comboBoxInput"
                tabindex="-1"
              >
@ -222,7 +222,7 @@ Object {
                  aria-expanded="false"
                  aria-invalid="false"
                  autocomplete="off"
-                  class="euiComboBox__input"
+                  class="euiComboBox__input emotion-euiComboBoxInput"
                  data-test-subj="comboBoxSearchInput"
                  disabled=""
                  id="generated-id__eui-combobox-id"
@ -239,20 +239,20 @@ Object {
  </body>,
  "container": <div>
    <div
-      class="euiComboBox euiComboBox--fullWidth euiComboBox-isDisabled"
+      class="euiComboBox euiComboBox-isDisabled emotion-euiComboBox-fullWidth"
      data-test-subj="fieldAutocompleteComboBox"
    >
      <div
        class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
      >
        <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
        >
          <div
            class="euiFormControlLayout__childrenWrapper"
          >
            <div
-              class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText-disabled"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -262,7 +262,7 @@ Object {
                aria-expanded="false"
                aria-invalid="false"
                autocomplete="off"
-                class="euiComboBox__input"
+                class="euiComboBox__input emotion-euiComboBoxInput"
                data-test-subj="comboBoxSearchInput"
                disabled=""
                id="generated-id__eui-combobox-id"
@ -336,21 +336,21 @@ Object {
  "baseElement": <body>
    <div>
      <div
-        class="euiComboBox euiComboBox--fullWidth"
+        class="euiComboBox emotion-euiComboBox-fullWidth"
        data-test-subj="fieldAutocompleteComboBox"
      >
        <div
          class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
        >
          <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
          >
            <div
              class="euiFormControlLayout__childrenWrapper"
              style="--euiFormControlRightIconsCount: 1;"
            >
              <div
-                class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText"
                data-test-subj="comboBoxInput"
                tabindex="-1"
              >
@ -360,7 +360,7 @@ Object {
                  aria-expanded="false"
                  aria-invalid="false"
                  autocomplete="off"
-                  class="euiComboBox__input"
+                  class="euiComboBox__input emotion-euiComboBoxInput"
                  data-test-subj="comboBoxSearchInput"
                  id="generated-id__eui-combobox-id"
                  role="combobox"
@ -393,21 +393,21 @@ Object {
  </body>,
  "container": <div>
    <div
-      class="euiComboBox euiComboBox--fullWidth"
+      class="euiComboBox emotion-euiComboBox-fullWidth"
      data-test-subj="fieldAutocompleteComboBox"
    >
      <div
        class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
      >
        <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
        >
          <div
            class="euiFormControlLayout__childrenWrapper"
            style="--euiFormControlRightIconsCount: 1;"
          >
            <div
-              class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -417,7 +417,7 @@ Object {
                aria-expanded="false"
                aria-invalid="false"
                autocomplete="off"
-                class="euiComboBox__input"
+                class="euiComboBox__input emotion-euiComboBoxInput"
                data-test-subj="comboBoxSearchInput"
                id="generated-id__eui-combobox-id"
                role="combobox"
@ -507,21 +507,21 @@ Object {
  "baseElement": <body>
    <div>
      <div
-        class="euiComboBox euiComboBox--fullWidth euiComboBox-isDisabled"
+        class="euiComboBox euiComboBox-isDisabled emotion-euiComboBox-fullWidth"
        data-test-subj="fieldAutocompleteComboBox"
      >
        <div
          class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
        >
          <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
          >
            <div
              class="euiFormControlLayout__childrenWrapper"
              style="--euiFormControlRightIconsCount: 1;"
            >
              <div
-                class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText-disabled"
                data-test-subj="comboBoxInput"
                tabindex="-1"
              >
@ -531,7 +531,7 @@ Object {
                  aria-expanded="false"
                  aria-invalid="false"
                  autocomplete="off"
-                  class="euiComboBox__input"
+                  class="euiComboBox__input emotion-euiComboBoxInput"
                  data-test-subj="comboBoxSearchInput"
                  disabled=""
                  id="generated-id__eui-combobox-id"
@ -557,21 +557,21 @@ Object {
  </body>,
  "container": <div>
    <div
-      class="euiComboBox euiComboBox--fullWidth euiComboBox-isDisabled"
+      class="euiComboBox euiComboBox-isDisabled emotion-euiComboBox-fullWidth"
      data-test-subj="fieldAutocompleteComboBox"
    >
      <div
        class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
      >
        <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth emotion-euiComboBox__formControlLayout"
        >
          <div
            class="euiFormControlLayout__childrenWrapper"
            style="--euiFormControlRightIconsCount: 1;"
          >
            <div
-              class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--plainText emotion-euiComboBoxInputWrapper-plainText-disabled"
              data-test-subj="comboBoxInput"
              tabindex="-1"
            >
@ -581,7 +581,7 @@ Object {
                aria-expanded="false"
                aria-invalid="false"
                autocomplete="off"
-                class="euiComboBox__input"
+                class="euiComboBox__input emotion-euiComboBoxInput"
                data-test-subj="comboBoxSearchInput"
                disabled=""
                id="generated-id__eui-combobox-id"
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@ -86,7 +86,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.5.3': ['Elastic License 2.0'],
-  '@elastic/eui@95.6.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@95.7.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
  '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
--- a/x-pack/plugins/cases/public/components/actions/tags/edit_tags_selectable.tsx
+++ b/x-pack/plugins/cases/public/components/actions/tags/edit_tags_selectable.tsx
@ -70,22 +70,25 @@ const EditTagsSelectableComponent: React.FC<Props> = ({
  const [searchValue, setSearchValue] = useState<string>('');
  const { euiTheme } = useEuiTheme();

-  const renderOption = useCallback((option: ItemSelectableOption, search: string) => {
-    const dataTestSubj = option.newItem
-      ? 'cases-actions-tags-edit-selectable-add-new-tag-icon'
-      : `cases-actions-tags-edit-selectable-tag-${option.label}-icon-${option.itemIcon}`;
+  const renderOption = useCallback(
+    (option: ItemSelectableOption, search: string) => {
+      const dataTestSubj = option.newItem
+        ? 'cases-actions-tags-edit-selectable-add-new-tag-icon'
+        : `cases-actions-tags-edit-selectable-tag-${option.label}-icon-${option.itemIcon}`;

-    return (
-      <>
-        <EuiIcon
-          type={option.itemIcon}
-          data-test-subj={dataTestSubj}
-          className="euiSelectableListItem__icon euiSelectableListItem__prepend"
-        />
-        <EuiHighlight search={search}>{option.label}</EuiHighlight>
-      </>
-    );
-  }, []);
+      return (
+        <>
+          <EuiIcon
+            type={option.itemIcon}
+            data-test-subj={dataTestSubj}
+            css={{ flexShrink: 0, marginRight: euiTheme.size.m }}
+          />
+          <EuiHighlight search={search}>{option.label}</EuiHighlight>
+        </>
+      );
+    },
+    [euiTheme]
+  );

  /**
   * While the user searches we need to add the ability
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/jest/test_pipeline.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/jest/test_pipeline.test.tsx
@ -377,9 +377,9 @@ describe('Test pipeline', () => {
        // Click the "Configuration" tab
        await actions.clickProcessorConfigurationTab();
        // Verify type selector has not changed
-        expect(find('processorTypeSelector.input').find('[role="combobox"]').props().value).toBe(
-          'Set'
-        );
+        expect(
+          find('processorTypeSelector.input').find('input[role="combobox"]').props().value
+        ).toBe('Set');
      });
    });

--- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
@ -584,7 +584,7 @@ export const ProcessEventDot = styled(UnstyledProcessEventDot)`
    width: fit-content;
  }

-  & .euiSelectableList-bordered {
+  & .euiSelectableList {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
  }
--- a/yarn.lock
+++ b/yarn.lock
@ -1767,10 +1767,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@95.6.0":
-  version "95.6.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.6.0.tgz#432845333bd0d64aa816222d192db4715cc75987"
-  integrity sha512-OnErgFixCcYcDpH3iu1fIG5FxoJ+mmHtKOVI/aqeC0beEeJJSZd8uqcLh4iJf9tfCEb+ApykTIuRGi6XTcpvjw==
+"@elastic/eui@95.7.0":
+  version "95.7.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.7.0.tgz#50edc43d3aac1a1ea87ec56a04ec0bc91e7e32a1"
+  integrity sha512-T6tihdAtE3JhXaTMHagidXWB5Sv6c++5vHdPj7kyYGjT1fDPpJ/fuTZTfH2GJLc56g63zBdDNMkLnXZYb0ld4Q==
  dependencies:
    "@hello-pangea/dnd" "^16.6.0"
    "@types/lodash" "^4.14.202"