Upgrade EUI to v77.0.0 (#154379)

> ⚠️ Synthetic failures are not related to any EUI changes and are likely already failing on main. Please ignore the failing CI status when reviewing. ## [`77.0.0`](https://github.com/elastic/eui/tree/v77.0.0) **Bug fixes** - Fixed named `EuiBadge` colors to reflect custom theme overrides ([#6659](https://github.com/elastic/eui/pull/6659)) - Fixed user-defined SCSS variables failing to override variables defined in Amsterdam typography overrides. ([#6665](https://github.com/elastic/eui/pull/6665)) - Fixed bold `EuiCode` tokens to actually be bold ([#6666](https://github.com/elastic/eui/pull/6666)) **Breaking changes** - Success- and accent-colored `EuiBadge`s and `EuiButton`s have had their fill colors tinted slightly on light mode to be more readable ([#6659](https://github.com/elastic/eui/pull/6659)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co>
2025-04-23 17:28:26 -04:00 · 2023-04-10 15:06:26 -07:00 · 2023-04-10 15:06:26 -07:00 · 31b50a3906
commit 31b50a3906
parent 8770a1ceed
12 changed files with 17 additions and 37 deletions
--- a/package.json
+++ b/package.json
@ -96,7 +96,7 @@
    "@elastic/datemath": "5.0.3",
    "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.6.0-canary.3",
    "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "76.4.0",
+    "@elastic/eui": "77.0.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "1.2.1",
    "@elastic/numeral": "^2.5.1",
--- a/packages/core/apps/core-apps-browser-internal/src/status/components/snapshots/server_status.test.tsx.snap
+++ b/packages/core/apps/core-apps-browser-internal/src/status/components/snapshots/server_status.test.tsx.snap
@ -5,7 +5,7 @@ exports[`ServerStatus renders correctly for green state 2`] = `
  aria-label="Green"
  class="euiBadge emotion-euiBadge"
  data-test-subj="serverStatusTitleBadge"
-  style="background-color: rgb(109, 204, 177); color: rgb(0, 0, 0);"
+  style="background-color: rgb(77, 210, 202); color: rgb(0, 0, 0);"
  title="Green"
 >
  <span
@ -25,7 +25,7 @@ exports[`ServerStatus renders correctly for red state 2`] = `
  aria-label="Red"
  class="euiBadge emotion-euiBadge"
  data-test-subj="serverStatusTitleBadge"
-  style="background-color: rgb(109, 204, 177); color: rgb(0, 0, 0);"
+  style="background-color: rgb(77, 210, 202); color: rgb(0, 0, 0);"
  title="Red"
 >
  <span
@ -45,7 +45,7 @@ exports[`ServerStatus renders correctly for yellow state 2`] = `
  aria-label="Yellow"
  class="euiBadge emotion-euiBadge"
  data-test-subj="serverStatusTitleBadge"
-  style="background-color: rgb(109, 204, 177); color: rgb(0, 0, 0);"
+  style="background-color: rgb(77, 210, 202); color: rgb(0, 0, 0);"
  title="Yellow"
 >
  <span
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@ -84,6 +84,6 @@ 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@76.4.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@77.0.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
 };
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx
@ -129,8 +129,6 @@ export class CustomizePanelAction implements Action<CustomizePanelActionContext>
      {
        size: 's',
        'data-test-subj': 'customizePanel',
-        // @ts-ignore - TODO: Remove this once https://github.com/elastic/eui/pull/6645 lands in Kibana
-        focusTrapProps: { scrollLock: true },
      }
    );
    overlayTracker?.openOverlay(handle);
--- a/x-pack/plugins/security_solution/public/common/components/event_details/overview/snapshots/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/overview/snapshots/index.test.tsx.snap
@ -91,7 +91,7 @@ exports[`Event Details Overview Cards renders rows and spacers correctly 1`] = `
                  <button
                    aria-label="Click to change alert status"
                    class="euiBadge c3 emotion-euiBadge-clickable"
-                    style="background-color: rgb(121, 170, 217); color: rgb(0, 0, 0);"
+                    style="background-color: rgb(0, 119, 204); color: rgb(255, 255, 255);"
                  >
                    <span
                      class="euiBadge__content emotion-euiBadge__content"
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@ -359,29 +359,10 @@ describe('when on the endpoint list page', () => {
        const hostStatuses = await renderResult.findAllByTestId('rowHostStatus');

        expect(hostStatuses[0].textContent).toEqual('Unhealthy');
-        expect(hostStatuses[0].getAttribute('style')).toMatch(
-          /background-color\: rgb\(241\, 216\, 111\)\;/
-        );
-
        expect(hostStatuses[1].textContent).toEqual('Healthy');
-        expect(hostStatuses[1].getAttribute('style')).toMatch(
-          /background-color\: rgb\(109\, 204\, 177\)\;/
-        );
-
        expect(hostStatuses[2].textContent).toEqual('Offline');
-        expect(hostStatuses[2].getAttribute('style')).toMatch(
-          /background-color\: rgb\(211\, 218\, 230\)\;/
-        );
-
        expect(hostStatuses[3].textContent).toEqual('Updating');
-        expect(hostStatuses[3].getAttribute('style')).toMatch(
-          /background-color\: rgb\(121\, 170\, 217\)\;/
-        );
-
        expect(hostStatuses[4].textContent).toEqual('Inactive');
-        expect(hostStatuses[4].getAttribute('style')).toMatch(
-          /background-color\: rgb\(211\, 218\, 230\)\;/
-        );
      });

      it('should display correct policy status', async () => {
--- a/x-pack/plugins/session_view/public/components/process_tree_alert/snapshots/index.test.tsx.snap
+++ b/x-pack/plugins/session_view/public/components/process_tree_alert/snapshots/index.test.tsx.snap
@ -61,7 +61,7 @@ Object {
          >
            <span
              class="euiBadge emotion-EuiInnerText"
-              style="background-color: rgb(121, 170, 217); color: rgb(0, 0, 0);"
+              style="background-color: rgb(0, 119, 204); color: rgb(255, 255, 255);"
              title="open"
            >
              <span
@ -155,7 +155,7 @@ Object {
        >
          <span
            class="euiBadge emotion-EuiInnerText"
-            style="background-color: rgb(121, 170, 217); color: rgb(0, 0, 0);"
+            style="background-color: rgb(0, 119, 204); color: rgb(255, 255, 255);"
            title="open"
          >
            <span
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/availability_reporting/snapshots/tag_label.test.tsx.snap
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/availability_reporting/snapshots/tag_label.test.tsx.snap
@ -18,7 +18,7 @@ exports[`TagLabel component renders correctly against snapshot 1`] = `
 >
  <span
    class="euiBadge emotion-euiBadge"
-    style="background-color:#ff7e62;color:#000"
+    style="background-color:#BD271E;color:#FFF"
  >
    <span
      class="euiBadge__content emotion-euiBadge__content"
--- a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/field_value/snapshots/field.test.tsx.snap
+++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/field_value/snapshots/field.test.tsx.snap
@ -4,7 +4,7 @@ exports[`<IndicatorField /> should render tlp marking badge 1`] = `
 <DocumentFragment>
  <span
    class="euiBadge emotion-euiBadge"
-    style="background-color: rgb(255, 126, 98); color: rgb(0, 0, 0);"
+    style="background-color: rgb(189, 39, 30); color: rgb(255, 255, 255);"
    title="Red"
  >
    <span
--- a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/tlp_badge/snapshots/tlp_badge.test.tsx.snap
+++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/tlp_badge/snapshots/tlp_badge.test.tsx.snap
@ -4,7 +4,7 @@ exports[`TLPBadge should handle proper value 1`] = `
 <DocumentFragment>
  <span
    class="euiBadge emotion-euiBadge"
-    style="background-color: rgb(109, 204, 177); color: rgb(0, 0, 0);"
+    style="background-color: rgb(77, 210, 202); color: rgb(0, 0, 0);"
    title="Green"
  >
    <span
@ -24,7 +24,7 @@ exports[`TLPBadge should handle value in various casing with extra spaces 1`] =
 <DocumentFragment>
  <span
    class="euiBadge emotion-euiBadge"
-    style="background-color: rgb(255, 126, 98); color: rgb(0, 0, 0);"
+    style="background-color: rgb(189, 39, 30); color: rgb(255, 255, 255);"
    title="Red"
  >
    <span
--- a/x-pack/test/functional/services/ml/data_visualizer_table.ts
+++ b/x-pack/test/functional/services/ml/data_visualizer_table.ts
@ -113,6 +113,7 @@ export function MachineLearningDataVisualizerTableProvider(
            fieldName,
            `dataVisualizerDetailsToggle-${fieldName}-arrowRight`
          );
+          await testSubjects.moveMouseTo(selector); // move mouse to selector before clicking to ensure a tooltip isn't blocking the button
          await testSubjects.click(selector);
          await testSubjects.existOrFail(
            this.rowSelector(fieldName, `dataVisualizerDetailsToggle-${fieldName}-arrowDown`),
--- a/yarn.lock
+++ b/yarn.lock
@ -1543,10 +1543,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@76.4.0":
-  version "76.4.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-76.4.0.tgz#be7d8afadd3848cf1513c095e68a9e4db8fcbac7"
-  integrity sha512-0b3w6CloIZZ8B+URDSYLQsyTtc/GadkbNcoDg+20SeRuB8q339S+n6tbq+sVX+uk/RtRu1T/068mAd6nZZmqIg==
+"@elastic/eui@77.0.0":
+  version "77.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-77.0.0.tgz#931bb7f8a109b571dedefe481ccf41a9229a6286"
+  integrity sha512-4RV6GxSFFWGEZtUkLpZWQrwTdEVMq/hmicSZiCpvJUnilLmhfnNEGqCn5Qu8g/OOb5AL3XayfytWMiiaJ9Yw+g==
  dependencies:
    "@types/chroma-js" "^2.0.0"
    "@types/lodash" "^4.14.160"