Upgrade EUI to v95.1.0 (#186324)

`v95.0.0-backport.0` ⏩ `v95.1.0-backport.0` This PR primarily concerns converting multiple common/building block form control components to Emotion (text, number, and search fields). This means that custom CSS or direct `className` usage of these form controls **should be manually QA'd** to ensure they still look the same before visually, with no regressions. _[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.1.0`](https://github.com/elastic/eui/releases/v95.1.0) - Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s ([#7799](https://github.com/elastic/eui/pull/7799)) **Bug fixes** - Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s ([#7770](https://github.com/elastic/eui/pull/7770)) **CSS-in-JS conversions** - Converted `EuiFieldText` to Emotion ([#7770](https://github.com/elastic/eui/pull/7770)) - Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode ([#7776](https://github.com/elastic/eui/pull/7776)) - Converted `EuiFieldNumber` to Emotion ([#7802](https://github.com/elastic/eui/pull/7802)) - Converted `EuiFieldSearch` to Emotion ([#7802](https://github.com/elastic/eui/pull/7802)) - Converted `EuiFieldPassword` to Emotion ([#7802](https://github.com/elastic/eui/pull/7802)) - Converted `EuiTextArea` to Emotion ([#7812](https://github.com/elastic/eui/pull/7812)) - Converted `EuiSelect` to Emotion ([#7812](https://github.com/elastic/eui/pull/7812)) - Converted `EuiSuperSelect` to Emotion ([#7812](https://github.com/elastic/eui/pull/7812)) ## [`v95.1.0-backport.0`](https://github.com/elastic/eui/releases/v95.1.0-backport.0) **This is a backport release only intended for use by Kibana.** - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([#7813](https://github.com/elastic/eui/pull/7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([#7813](https://github.com/elastic/eui/pull/7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([#7813](https://github.com/elastic/eui/pull/7813))
2025-04-23 17:28:26 -04:00 · 2024-06-21 09:10:58 -07:00 · 2024-06-21 09:10:58 -07:00 · 04d6c1d3d7
commit 04d6c1d3d7
parent 108e1fadea
30 changed files with 3573 additions and 11222 deletions
--- a/package.json
+++ b/package.json
@ -109,7 +109,7 @@
    "@elastic/ecs": "^8.11.1",
    "@elastic/elasticsearch": "^8.13.1",
    "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "95.0.0-backport.0",
+    "@elastic/eui": "95.1.0-backport.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "1.2.1",
    "@elastic/numeral": "^2.5.1",
--- a/packages/core/apps/core-apps-server-internal/assets/legacy_dark_theme.css
+++ b/packages/core/apps/core-apps-server-internal/assets/legacy_dark_theme.css
@ -4324,14 +4324,12 @@ table .info a,
 .table-bordered > tfoot > tr > td {
  border: 1px solid #343741;
 }
-.form-control,
-input {
+.form-control {
  border-width: 1px;
  -webkit-box-shadow: none;
  box-shadow: none;
 }
-.form-control:focus,
-input:focus {
+.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
 }
--- a/packages/core/apps/core-apps-server-internal/assets/legacy_dark_theme.min.css
+++ b/packages/core/apps/core-apps-server-internal/assets/legacy_dark_theme.min.css
--- a/packages/core/apps/core-apps-server-internal/assets/legacy_light_theme.css
+++ b/packages/core/apps/core-apps-server-internal/assets/legacy_light_theme.css
@ -4324,14 +4324,12 @@ table .info a,
 .table-bordered > tfoot > tr > td {
  border: 1px solid #D3DAE6;
 }
-.form-control,
-input {
+.form-control {
  border-width: 1px;
  -webkit-box-shadow: none;
  box-shadow: none;
 }
-.form-control:focus,
-input:focus {
+.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
 }
--- a/packages/core/apps/core-apps-server-internal/assets/legacy_light_theme.min.css
+++ b/packages/core/apps/core-apps-server-internal/assets/legacy_light_theme.min.css
--- a/packages/kbn-search-connectors/components/cron_editor/snapshots/cron_editor.test.tsx.snap
+++ b/packages/kbn-search-connectors/components/cron_editor/snapshots/cron_editor.test.tsx.snap
--- a/packages/kbn-search-connectors/components/cron_editor/cron_editor.test.tsx
+++ b/packages/kbn-search-connectors/components/cron_editor/cron_editor.test.tsx
@ -28,7 +28,7 @@ describe('CronEditor', () => {
        />
      );

-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
    });
  });

--- 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
@ -17,6 +17,7 @@ Object {
          >
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 2;"
            >
              <div
                class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
@ -83,6 +84,7 @@ Object {
        >
          <div
            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 2;"
          >
            <div
              class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
@ -341,6 +343,7 @@ Object {
          >
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <div
                class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
@ -396,6 +399,7 @@ Object {
        >
          <div
            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
          >
            <div
              class="euiComboBox__inputWrap euiFormControlLayout--1icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
@ -508,6 +512,7 @@ Object {
          >
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <div
                class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
@ -556,6 +561,7 @@ Object {
        >
          <div
            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
          >
            <div
              class="euiComboBox__inputWrap euiFormControlLayout--2icons euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap--plainText"
--- a/packages/kbn-securitysolution-exception-list-components/src/list_header/snapshots/list_header.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/snapshots/list_header.test.tsx.snap
@ -299,7 +299,7 @@ Object {
                        class="euiFormControlLayout__childrenWrapper"
                      >
                        <input
-                          class="euiFieldText euiFieldText--fullWidth"
+                          class="euiFieldText emotion-euiFieldText-fullWidth"
                          data-test-subj="editModalNameTextField"
                          id="generated-id"
                          name="name"
@ -329,13 +329,13 @@ Object {
                    class="euiFormRow__fieldWrapper"
                  >
                    <div
-                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--euiTextArea"
+                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--euiTextArea emotion-euiTextArea"
                    >
                      <div
                        class="euiFormControlLayout__childrenWrapper"
                      >
                        <textarea
-                          class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+                          class="euiTextArea emotion-euiTextArea-vertical-fullWidth"
                          data-test-subj="editModalDescriptionTextField"
                          id="generated-id"
                          name="description"
--- a/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/snapshots/edit_modal.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/snapshots/edit_modal.test.tsx.snap
@ -79,7 +79,7 @@ Object {
                        class="euiFormControlLayout__childrenWrapper"
                      >
                        <input
-                          class="euiFieldText euiFieldText--fullWidth"
+                          class="euiFieldText emotion-euiFieldText-fullWidth"
                          data-test-subj="editModalNameTextField"
                          id="generated-id"
                          name="name"
@ -109,13 +109,13 @@ Object {
                    class="euiFormRow__fieldWrapper"
                  >
                    <div
-                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--euiTextArea"
+                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--euiTextArea emotion-euiTextArea"
                    >
                      <div
                        class="euiFormControlLayout__childrenWrapper"
                      >
                        <textarea
-                          class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+                          class="euiTextArea emotion-euiTextArea-vertical-fullWidth"
                          data-test-subj="editModalDescriptionTextField"
                          id="generated-id"
                          name="description"
--- 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.1': ['Elastic License 2.0'],
-  '@elastic/eui@95.0.0-backport.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@95.1.0-backport.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/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/snapshots/url.test.tsx.snap
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/snapshots/url.test.tsx.snap
@ -25,9 +25,10 @@ exports[`UrlFormatEditor should render normally 1`] = `
      >
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons"
+            class="euiSelect emotion-euiSelect"
            data-test-subj="urlEditorType"
            id="generated-id"
          >
@ -149,7 +150,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
        >
          <input
            aria-describedby="generated-id-help-0"
-            class="euiFieldText"
+            class="euiFieldText emotion-euiFieldText"
            data-test-subj="urlEditorUrlTemplate"
            id="generated-id"
            type="text"
@ -210,7 +211,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
        >
          <input
            aria-describedby="generated-id-help-0"
-            class="euiFieldText"
+            class="euiFieldText emotion-euiFieldText"
            data-test-subj="urlEditorLabelTemplate"
            id="generated-id"
            type="text"
--- a/src/plugins/es_ui_shared/public/components/cron_editor/snapshots/cron_editor.test.tsx.snap
+++ b/src/plugins/es_ui_shared/public/components/cron_editor/snapshots/cron_editor.test.tsx.snap
@ -31,9 +31,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencySelect"
            id="generated-id"
          >
@ -121,10 +122,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Hour"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyDailyHourSelect"
              >
                <option
@ -277,10 +279,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Minute"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyDailyMinuteSelect"
              >
                <option
@ -637,9 +640,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencySelect"
            id="generated-id"
          >
@ -721,9 +725,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencyHourlyMinuteSelect"
            id="generated-id"
          >
@ -1078,9 +1083,10 @@ exports[`CronEditor is rendered with a MINUTE frequency 1`] = `
      </label>
      <div
        class="euiFormControlLayout__childrenWrapper"
+        style="--euiFormControlRightIconsCount: 1;"
      >
        <select
-          class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+          class="euiSelect emotion-euiSelect-fullWidth-inGroup"
          data-test-subj="cronFrequencySelect"
          id="generated-id"
        >
@ -1165,9 +1171,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencySelect"
            id="generated-id"
          >
@ -1249,9 +1256,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencyMonthlyDateSelect"
            id="generated-id"
          >
@ -1464,10 +1472,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Hour"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyMonthlyHourSelect"
              >
                <option
@ -1620,10 +1629,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Minute"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyMonthlyMinuteSelect"
              >
                <option
@ -1980,9 +1990,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencySelect"
            id="generated-id"
          >
@ -2064,9 +2075,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencyWeeklyDaySelect"
            id="generated-id"
          >
@ -2159,10 +2171,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Hour"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyWeeklyHourSelect"
              >
                <option
@ -2315,10 +2328,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Minute"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyWeeklyMinuteSelect"
              >
                <option
@ -2675,9 +2689,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencySelect"
            id="generated-id"
          >
@ -2759,9 +2774,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencyYearlyMonthSelect"
            id="generated-id"
          >
@ -2873,9 +2889,10 @@ Array [
        </label>
        <div
          class="euiFormControlLayout__childrenWrapper"
+          style="--euiFormControlRightIconsCount: 1;"
        >
          <select
-            class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+            class="euiSelect emotion-euiSelect-fullWidth-inGroup"
            data-test-subj="cronFrequencyYearlyDateSelect"
            id="generated-id"
          >
@ -3088,10 +3105,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Hour"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyYearlyHourSelect"
              >
                <option
@ -3244,10 +3262,11 @@ Array [
            </label>
            <div
              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
            >
              <select
                aria-label="Minute"
-                class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--inGroup"
+                class="euiSelect emotion-euiSelect-fullWidth-inGroup"
                data-test-subj="cronFrequencyYearlyMinuteSelect"
              >
                <option
--- a/src/plugins/vis_default_editor/public/components/controls/size.test.tsx
+++ b/src/plugins/vis_default_editor/public/components/controls/size.test.tsx
@ -63,7 +63,7 @@ describe('SizeParamEditor', () => {

  it('should set new parsed value', () => {
    const comp = mountWithIntl(<SizeParamEditor {...defaultProps} />);
-    const input = comp.find('[type="number"]');
+    const input = comp.find('input[type="number"]');
    input.simulate('change', { target: { value: '3' } });

    expect(defaultProps.setValue).toBeCalledWith(3);
@ -76,7 +76,7 @@ describe('SizeParamEditor', () => {

  it('should call setTouched on blur', () => {
    const comp = mountWithIntl(<SizeParamEditor {...defaultProps} />);
-    comp.find('[type="number"]').simulate('blur');
+    comp.find('input[type="number"]').simulate('blur');

    expect(defaultProps.setTouched).toHaveBeenCalledTimes(1);
  });
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/snapshots/settings.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/snapshots/settings.test.tsx.snap
@ -279,7 +279,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                            >
                              <input
                                aria-describedby="generated-id-help-0"
-                                class="euiFieldText euiFieldText--compressed"
+                                class="euiFieldText emotion-euiFieldText-compressed"
                                id="generated-id"
                                type="text"
                                value="5s"
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/credential_item/credential_item.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/credential_item/credential_item.test.tsx
@ -61,8 +61,7 @@ describe('CredentialItem', () => {
      preventDefault: jest.fn(),
    };

-    const input = wrapper.find(EuiFieldText).dive().find('input');
-    input.simulate('click', simulatedEvent);
+    wrapper.find(EuiFieldText).simulate('click', simulatedEvent);

    expect(simulatedEvent.currentTarget.select).toHaveBeenCalled();
  });
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_config_fields/source_config_fields.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_config_fields/source_config_fields.test.tsx
@ -60,11 +60,9 @@ describe('SourceConfigFields', () => {
      preventDefault: jest.fn(),
    };

-    const input = wrapper
+    wrapper
      .find('[data-test-subj="external-connector-url-input"]')
-      .dive()
-      .find('input');
-    input.simulate('click', simulatedEvent);
+      .simulate('click', simulatedEvent);

    expect(simulatedEvent.currentTarget.select).toHaveBeenCalled();
  });
--- a/x-pack/plugins/index_lifecycle_management/jest/policy_table.test.tsx
+++ b/x-pack/plugins/index_lifecycle_management/jest/policy_table.test.tsx
@ -209,7 +209,7 @@ describe('policy table', () => {
    expect(deprecatedPolicies.length).toBe(0);

    // Enable filtering by deprecated policies
-    const searchInput = rendered.find('.euiFieldSearch').first();
+    const searchInput = rendered.find('input.euiFieldSearch').first();
    (searchInput.instance() as unknown as HTMLInputElement).value = 'is:policy.deprecated';
    searchInput.simulate('keyup', { key: 'Enter', keyCode: 13, which: 13 });
    rendered.update();
@ -221,7 +221,7 @@ describe('policy table', () => {

  test('filters based on content of search input', () => {
    const rendered = mountWithIntl(component);
-    const searchInput = rendered.find('.euiFieldSearch').first();
+    const searchInput = rendered.find('input.euiFieldSearch').first();
    (searchInput.instance() as unknown as HTMLInputElement).value = 'testy0';
    searchInput.simulate('keyup', { key: 'Enter', keyCode: 13, which: 13 });
    rendered.update();
--- a/x-pack/plugins/index_management/jest/components/index_table.test.js
+++ b/x-pack/plugins/index_management/jest/components/index_table.test.js
@ -298,7 +298,7 @@ describe('index table', () => {
    await runAllPromises();
    rendered.update();

-    const searchInput = rendered.find('.euiFieldSearch').first();
+    const searchInput = rendered.find('input.euiFieldSearch').first();
    searchInput.instance().value = 'testy0';
    searchInput.simulate('keyup', { key: 'Enter', keyCode: 13, which: 13 });
    rendered.update();
--- a/x-pack/plugins/ingest_pipelines/jest/client_integration/ingest_pipelines_list.test.ts
+++ b/x-pack/plugins/ingest_pipelines/jest/client_integration/ingest_pipelines_list.test.ts
@ -103,7 +103,7 @@ describe('<PipelinesList />', () => {
      expect(tableCellsValues.length).toEqual(pipelinesWithoutDeprecated.length);

      // Enable filtering by deprecated pipelines
-      const searchInput = component.find('.euiFieldSearch').first();
+      const searchInput = component.find('input.euiFieldSearch').first();
      (searchInput.instance() as unknown as HTMLInputElement).value = 'is:deprecated';
      searchInput.simulate('keyup', { key: 'Enter', keyCode: 13, which: 13 });
      component.update();
--- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/certificates/snapshots/cert_search.test.tsx.snap
+++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/certificates/snapshots/cert_search.test.tsx.snap
@ -13,6 +13,7 @@ exports[`CertificatesSearch renders expected elements for valid props 1`] = `
  >
    <div
      class="euiFormControlLayout__childrenWrapper"
+      style="--euiFormControlLeftIconsCount:1"
    >
      <div
        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
@ -29,7 +30,7 @@ exports[`CertificatesSearch renders expected elements for valid props 1`] = `
      </div>
      <input
        aria-label="Search certificates"
-        class="euiFieldSearch euiFieldSearch--fullWidth"
+        class="euiFieldSearch emotion-euiFieldSearch-fullWidth"
        data-test-subj="uptimeCertSearch"
        placeholder="Search certificates"
        type="search"
--- a/x-pack/plugins/search_playground/public/components/summarization_panel/summarization_model.tsx
+++ b/x-pack/plugins/search_playground/public/components/summarization_panel/summarization_model.tsx
@ -14,13 +14,13 @@ import {
  EuiFormRow,
  EuiIcon,
  EuiSuperSelect,
+  type EuiSuperSelectOption,
  EuiText,
  EuiToolTip,
 } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiSuperSelectOption } from '@elastic/eui/src/components/form/super_select/super_select_control';
 import { AnalyticsEvents } from '../../analytics/constants';
 import { useUsageTracker } from '../../hooks/use_usage_tracker';
 import type { LLMModel } from '../../types';
--- a/x-pack/plugins/security/public/components/token_field.tsx
+++ b/x-pack/plugins/security/public/components/token_field.tsx
@ -12,6 +12,7 @@ import {
  EuiContextMenuItem,
  EuiContextMenuPanel,
  EuiCopy,
+  EuiFieldText,
  EuiFormControlLayout,
  EuiHorizontalRule,
  EuiPopover,
@ -50,12 +51,11 @@ export const TokenField: FunctionComponent<TokenFieldProps> = (props) => {
      style={{ backgroundColor: 'transparent' }}
      readOnly
    >
-      <input
-        type="text"
+      <EuiFieldText
+        controlOnly
        aria-label={i18n.translate('xpack.security.copyTokenField.tokenLabel', {
          defaultMessage: 'Token',
        })}
-        className="euiFieldText euiFieldText--inGroup"
        value={props.value}
        style={{
          fontFamily: euiThemeVars.euiCodeFontFamily,
--- a/x-pack/plugins/security_solution/public/sourcerer/components/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/sourcerer/components/index.test.tsx
@ -13,7 +13,7 @@ import { SourcererScopeName } from '../store/model';
 import { Sourcerer } from '.';
 import { sourcererActions, sourcererModel } from '../store';
 import { createMockStore, mockGlobalState, TestProviders } from '../../common/mock';
-import type { EuiSuperSelectOption } from '@elastic/eui/src/components/form/super_select/super_select_control';
+import type { EuiSuperSelectOption } from '@elastic/eui';
 import { fireEvent, waitFor, render } from '@testing-library/react';
 import { useSourcererDataView } from '../containers';
 import { useSignalHelpers } from '../containers/use_signal_helpers';
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx
@ -8,7 +8,6 @@
 import type { EuiSelectableOption, EuiFieldTextProps } from '@elastic/eui';
 import { EuiInputPopover, EuiFieldText, htmlIdGenerator, keys } from '@elastic/eui';
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';

 import type { OpenTimelineResult } from '../../open_timeline/types';
 import { SelectableTimeline } from '../selectable_timeline';
@ -16,38 +15,6 @@ import * as i18n from '../translations';
 import type { TimelineTypeLiteral } from '../../../../../common/api/timeline';
 import { TimelineType } from '../../../../../common/api/timeline';

-const StyledEuiInputPopover = styled(EuiInputPopover)`
-  .rightArrowIcon {
-    .euiFieldText {
-      padding-left: 12px;
-      padding-right: 40px;
-
-      &[readonly] {
-        cursor: pointer;
-        background-size: 0 100%;
-        background-repeat: no-repeat;
-
-        // To match EuiFieldText focus state
-        &:focus {
-          background-color: ${({ theme }) => theme.eui.euiFormBackgroundColor};
-          background-image: linear-gradient(
-            to top,
-            ${({ theme }) => theme.eui.euiFocusRingColor},
-            ${({ theme }) => theme.eui.euiFocusRingColor} 2px,
-            transparent 2px,
-            transparent 100%
-          );
-          background-size: 100% 100%;
-        }
-      }
-    }
-    .euiFormControlLayoutIcons {
-      left: unset;
-      right: 12px;
-    }
-  }
-`;
-
 interface SearchTimelineSuperSelectProps {
  isDisabled: boolean;
  hideUntitled?: boolean;
@ -105,7 +72,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
        onClick={handleOpenPopover}
        onKeyDown={handleKeyboardOpen}
        value={timelineTitle ?? i18n.DEFAULT_TIMELINE_TITLE}
-        icon="arrowDown"
+        icon={!isDisabled ? { type: 'arrowDown', side: 'right' } : undefined}
        aria-label={ariaLabel}
        aria-controls={popoverId}
        aria-expanded={isPopoverOpen}
@ -149,7 +116,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
  );

  return (
-    <StyledEuiInputPopover
+    <EuiInputPopover
      id={popoverId}
      input={superSelect}
      isOpen={isPopoverOpen}
@ -164,7 +131,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
        timelineType={timelineType}
        placeholder={placeholder}
      />
-    </StyledEuiInputPopover>
+    </EuiInputPopover>
  );
 };

--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_notify_when.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_notify_when.tsx
@ -245,7 +245,6 @@ export const ActionNotifyWhen = ({
  const summaryOptions = useMemo(
    () => [
      <SummaryContextMenuOption
-        className="euiSuperSelect__item"
        key="summary"
        onClick={() => selectSummaryOption(true)}
        icon={frequency.summary ? 'check' : 'empty'}
@ -255,7 +254,6 @@ export const ActionNotifyWhen = ({
        {SUMMARY_OF_ALERTS}
      </SummaryContextMenuOption>,
      <SummaryContextMenuOption
-        className="euiSuperSelect__item"
        key="for_each"
        onClick={() => selectSummaryOption(false)}
        icon={!frequency.summary ? 'check' : 'empty'}
@ -392,4 +390,5 @@ const SUMMARY_OF_ALERTS = i18n.translate(

 const SummaryContextMenuOption = euiStyled(EuiContextMenuItem)`
  min-width: 300px;
+  padding: ${({ theme }) => theme.eui.euiSizeS};
 `;
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.test.tsx
@ -18,6 +18,7 @@ import {
 } from '../../../types';
 import { act } from 'react-dom/test-utils';
 import { EuiFieldText } from '@elastic/eui';
+import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { I18nProvider, __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { render, waitFor, screen } from '@testing-library/react';
 import { DEFAULT_FREQUENCY } from '../../../common/constants';
@ -413,19 +414,21 @@ describe('action_type_form', () => {
      frequency: DEFAULT_FREQUENCY,
    };
    const wrapper = render(
-      <IntlProvider locale="en">
-        {getActionTypeForm({
-          index: 1,
-          actionItem,
-          setActionFrequencyProperty: () => {
-            actionItem.frequency = {
-              notifyWhen: RuleNotifyWhen.ACTIVE,
-              throttle: null,
-              summary: true,
-            };
-          },
-        })}
-      </IntlProvider>
+      <EuiThemeProvider>
+        <IntlProvider locale="en">
+          {getActionTypeForm({
+            index: 1,
+            actionItem,
+            setActionFrequencyProperty: () => {
+              actionItem.frequency = {
+                notifyWhen: RuleNotifyWhen.ACTIVE,
+                throttle: null,
+                summary: true,
+              };
+            },
+          })}
+        </IntlProvider>
+      </EuiThemeProvider>
    );

    const summaryOrPerRuleSelect = wrapper.getByTestId('summaryOrPerRuleSelect');
--- a/x-pack/plugins/watcher/jest/client_integration/helpers/watch_list_page.helpers.ts
+++ b/x-pack/plugins/watcher/jest/client_integration/helpers/watch_list_page.helpers.ts
@ -68,7 +68,7 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchListTestBed> =>

  const searchWatches = async (term: string) => {
    const { find, component } = testBed;
-    const searchInput = find('watchesTableContainer').find('.euiFieldSearch');
+    const searchInput = find('watchesTableContainer').find('input.euiFieldSearch');

    // Enter input into the search box
    // @ts-ignore
--- a/x-pack/test/security_solution_cypress/cypress/screens/integrations.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/integrations.ts
@ -11,6 +11,6 @@ export const SKIP_AGENT_INSTALLATION_BTN = '[data-test-subj="skipAgentInstallati

 export const INTEGRATION_ADDED_POP_UP = '[data-test-subj="postInstallAddAgentModal"]';

-export const QUEUE_URL = '.euiFieldText.euiFormControlLayout--1icons';
+export const QUEUE_URL = '.euiFieldText';

 export const SAVE_AND_CONTINUE_BTN = '[data-test-subj="createPackagePolicySaveButton"]';
--- a/yarn.lock
+++ b/yarn.lock
@ -1743,10 +1743,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.0.0-backport.0":
-  version "95.0.0-backport.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.0.0-backport.0.tgz#6fdfbc813259cf82896f24641bb6e8a03587f3e8"
-  integrity sha512-aaCQYLdJ4/1uQUb8xsToa94HwUDN2HSjtZzrgh3iT3El7tieNk6TNzX9QtNePw9M57snpdt41wyg6QFM7Jhltg==
+"@elastic/eui@95.1.0-backport.0":
+  version "95.1.0-backport.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.1.0-backport.0.tgz#effc5a536d7630a7bad7ff1aae817c8beab3cfef"
+  integrity sha512-0V5+7hGk4PyiR1qi1UA15RctQMJCCRDvCZSlgtisj5BLQ1fbfPbKUwr3oVqpx7gwhswDDP2jWWbk1OmUR1nnfg==
  dependencies:
    "@hello-pangea/dnd" "^16.6.0"
    "@types/lodash" "^4.14.202"