From fc9ac7a9c9193d5f80ea5ee4877612f6f1850915 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Fri, 14 Jul 2023 11:16:49 -0700 Subject: [PATCH] Upgrade EUI to v84.0.0 (#161716) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary `eui@83.1.0` ⏩ `eui@84.0.0` --- ## [`84.0.0`](https://github.com/elastic/eui/tree/v84.0.0) - Updated `EuiDualRange`'s `minInputProps` and `maxInputProps` to support passing more props to underlying inputs ([#6902](https://github.com/elastic/eui/pull/6902)) - `EuiFocusTrap` now supports configuring cross-iframe focus trapping via the `crossFrame` prop ([#6908](https://github.com/elastic/eui/pull/6908)) **Bug fixes** - Fixed `EuiFilterButton` icon display ([#6900](https://github.com/elastic/eui/pull/6900)) - Fixed `EuiCombobox` compressed plain text display ([#6910](https://github.com/elastic/eui/pull/6910)) - Fixed visual appearance of collapse buttons on collapsible `EuiResizablePanel`s ([#6926](https://github.com/elastic/eui/pull/6926)) **Breaking changes** - `EuiFocusTrap` now defaults to *not* trapping focus across iframes ([#6908](https://github.com/elastic/eui/pull/6908)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- package.json | 3 +- .../collapsible_nav.test.tsx.snap | 10 +- .../__snapshots__/comments.test.tsx.snap | 8 +- .../src/components/styles.tsx | 4 +- src/dev/license_checker/config.ts | 2 +- .../__snapshots__/app.test.tsx.snap | 2 +- ...screen_capture_panel_content.test.tsx.snap | 6 +- .../__snapshots__/prompt_page.test.tsx.snap | 4 +- .../unauthenticated_page.test.tsx.snap | 4 +- .../reset_session_page.test.tsx.snap | 4 +- .../__snapshots__/link_to_app.test.tsx.snap | 451 +----------------- .../components/endpoint/link_to_app.test.tsx | 4 +- .../rules/rule_actions_field/index.tsx | 2 +- .../components/exceptions_list_card/index.tsx | 13 +- yarn.lock | 52 +- 15 files changed, 69 insertions(+), 500 deletions(-) diff --git a/package.json b/package.json index 88c4458833292..1050bc5f95d13 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "83.1.0", + "@elastic/eui": "84.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", @@ -930,7 +930,6 @@ "react-dom": "^17.0.2", "react-dropzone": "^4.2.9", "react-fast-compare": "^2.0.4", - "react-focus-on": "^3.7.0", "react-grid-layout": "^1.3.4", "react-hook-form": "^7.44.2", "react-intl": "^2.8.0", diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap index a2c9d6044173b..476776a40a155 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap @@ -162,7 +162,7 @@ Array [ >
App renders properly 1`] = `"
markdown mock
markdown mock
My Canvas Workpad
"`; +exports[` App renders properly 1`] = `"
markdown mock
markdown mock
My Canvas Workpad
"`; diff --git a/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap b/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap index b3fd4620cf0ca..b290215981024 100644 --- a/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap +++ b/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap @@ -138,7 +138,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout >
ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected with additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; -exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; diff --git a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap index 079f0f39144c7..27612db490f4b 100644 --- a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; -exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap index b85edba9b79a7..a6b592367d47b 100644 --- a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; -exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/link_to_app.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/link_to_app.test.tsx.snap index 840ccf19ddd1b..d222c5969046d 100644 --- a/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/link_to_app.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/link_to_app.test.tsx.snap @@ -1,451 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LinkToApp component should render with href 1`] = ` - - - - - - - - - - - - - , - , - , - , - , - , - , - , - ], - }, - } - } - isStringTag={true} - serialized={ - Object { - "map": undefined, - "name": "zxmf4e-euiLink-primary", - "next": undefined, - "styles": " - font-weight: 500; - text-align: start; - - &:hover { - - text-decoration: underline; - - } - - &:focus { - - outline: 2px solid currentColor; - outline-offset: 2px; - - // 👀 Chrome respects :focus-visible and allows coloring the \`auto\` style - &:focus-visible { - outline-style: auto; - } - - // 🙅‍♀️ But Chrome also needs to have the outline forcefully removed from regular \`:focus\` state - &:not(:focus-visible) { - outline: none; - } - - - text-decoration: underline; - text-decoration-thickness: 2px !important; - - } - user-select:text;&[target='_blank']{position:relative;};label:euiLink;;;; - color: #006bb8; - - &:hover, - &:focus, - &:target { - text-decoration: underline; - } - - &:target { - color: darken(#006bb8, 10%); - } - ;label:primary;;;", - "toString": [Function], - } - } - /> - - link - - - - + link + `; exports[`LinkToApp component should render with minimum input 1`] = ` - - - - - - + link + `; diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx index 724d0489a6dbc..4290cff8c2b1f 100644 --- a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx @@ -32,7 +32,7 @@ describe('LinkToApp component', () => { }); it('should render with minimum input', () => { - expect(render({'link'})).toMatchSnapshot(); + expect(render({'link'}).render()).toMatchSnapshot(); }); it('should render with href', () => { expect( @@ -40,7 +40,7 @@ describe('LinkToApp component', () => { {'link'} - ) + ).render() ).toMatchSnapshot(); }); it('should support onClick prop', () => { diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx index bfdc407fc551e..c83b2d2ff4b02 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx @@ -99,7 +99,7 @@ const ContainerActions = styled.div.attrs( ${({ $caseIndexes }) => $caseIndexes.map( (index) => ` - div[id="${index}"].euiAccordion__childWrapper .euiAccordion__padding--l { + div[id="${index}"].euiAccordion__childWrapper .euiAccordion__children { padding: 0px; .euiFlexGroup { display: none; diff --git a/x-pack/plugins/security_solution/public/exceptions/components/exceptions_list_card/index.tsx b/x-pack/plugins/security_solution/public/exceptions/components/exceptions_list_card/index.tsx index 6379d4f1a792f..00b97308c28c6 100644 --- a/x-pack/plugins/security_solution/public/exceptions/components/exceptions_list_card/index.tsx +++ b/x-pack/plugins/security_solution/public/exceptions/components/exceptions_list_card/index.tsx @@ -17,7 +17,7 @@ import { EuiAccordion, EuiButtonIcon, } from '@elastic/eui'; -import { css } from '@emotion/react'; +import { css } from '@emotion/css'; import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types'; import type { NamespaceType } from '@kbn/securitysolution-io-ts-list-types'; import { HeaderMenu } from '@kbn/securitysolution-exception-list-components'; @@ -73,12 +73,10 @@ interface ExceptionsListCardProps { readOnly: boolean; } const buttonCss = css` - // Ask KIBANA Team why Emotion is not working fully under xpack - width: 100%; z-index: 100; - span { + .euiAccordion__buttonContent { cursor: pointer; - display: block; + width: 100%; } `; const ExceptionPanel = styled(EuiPanel)` @@ -146,7 +144,10 @@ export const ExceptionsListCard = memo( setToggleAccordion(!toggleAccordion)} diff --git a/yarn.lock b/yarn.lock index 0a728423b3105..482adb32d5ecd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1552,10 +1552,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@83.1.0": - version "83.1.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-83.1.0.tgz#ed1e409306da2ed9171d334e0ed7e6622c499141" - integrity sha512-l6ERa836K/U9dccZ4xkyf2tmTO54DeElhGXmNdq02CATbXNQ3YGnoAn99+HvA82oXF3zCSpy+pg5tLx6Ag1zaw== +"@elastic/eui@84.0.0": + version "84.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-84.0.0.tgz#0d37da1fe3f2f9af54b62e127c9682d381111ba6" + integrity sha512-hgDWyXwlhpbNzQgIvGLppqSRMEVt2zMlXIxMzvlV6PYPJUh1K9f5pOyXtNyouFgYZG2bkltvG3cUrMLeBbgUkg== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.194" @@ -1576,7 +1576,7 @@ react-beautiful-dnd "^13.1.0" react-dropzone "^11.5.3" react-element-to-jsx-string "^14.3.4" - react-focus-on "^3.7.0" + react-focus-on "^3.9.1" react-input-autosize "^3.0.0" react-is "^17.0.2" react-remove-scroll-bar "^2.3.4" @@ -16346,10 +16346,10 @@ fnv-plus@^1.3.1: resolved "https://registry.yarnpkg.com/fnv-plus/-/fnv-plus-1.3.1.tgz#c34cb4572565434acb08ba257e4044ce2b006d67" integrity sha512-Gz1EvfOneuFfk4yG458dJ3TLJ7gV19q3OM/vVvvHf7eT02Hm1DleB4edsia6ahbKgAYxO9gvyQ1ioWZR+a00Yw== -focus-lock@^0.11.2: - version "0.11.2" - resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.2.tgz#aeef3caf1cea757797ac8afdebaec8fd9ab243ed" - integrity sha512-pZ2bO++NWLHhiKkgP1bEXHhR1/OjVcSvlCJ98aNJDFeb7H5OOQaO+SKOZle6041O9rv2tmbrO4JzClAvDUHf0g== +focus-lock@^0.11.6: + version "0.11.6" + resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.6.tgz#e8821e21d218f03e100f7dc27b733f9c4f61e683" + integrity sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg== dependencies: tslib "^2.0.3" @@ -24501,26 +24501,26 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== -react-focus-lock@^2.9.2: - version "2.9.2" - resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.2.tgz#a57dfd7c493e5a030d87f161c96ffd082bd920f2" - integrity sha512-5JfrsOKyA5Zn3h958mk7bAcfphr24jPoMoznJ8vaJF6fUrPQ8zrtEd3ILLOK8P5jvGxdMd96OxWNjDzATfR2qw== +react-focus-lock@^2.9.4: + version "2.9.5" + resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.5.tgz#8a82f4f0128cccc27b9e77a4472e8a22f1b52189" + integrity sha512-h6vrdgUbsH2HeD5I7I3Cx1PPrmwGuKYICS+kB9m+32X/9xHRrAbxgvaBpG7BFBN9h3tO+C3qX1QAVESmi4CiIA== dependencies: "@babel/runtime" "^7.0.0" - focus-lock "^0.11.2" + focus-lock "^0.11.6" prop-types "^15.6.2" react-clientside-effect "^1.2.6" use-callback-ref "^1.3.0" use-sidecar "^1.1.2" -react-focus-on@^3.7.0: - version "3.7.0" - resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.7.0.tgz#bf782b51483d52d1d336b7b09cb864897af26cdf" - integrity sha512-TsCnbJr4qjqFatJ4U1N8qGSZH+FUzxJ5mJ5ta7TY2YnDmUbGGmcvZMTZgGjQ1fl6vlztsMyg6YyZlPAeeIhEUg== +react-focus-on@^3.9.1: + version "3.9.1" + resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.9.1.tgz#449a34ebb487c458d9d5526a74214c408544cfec" + integrity sha512-IYo2j4mgNpZEJNv+/XzZs3S3xhJbR+AFop092h4OMW7sbFpIMVWxp/Z61V/gfpsgOi7VnoSFXP2bfOWWkjjtOw== dependencies: aria-hidden "^1.2.2" - react-focus-lock "^2.9.2" - react-remove-scroll "^2.5.5" + react-focus-lock "^2.9.4" + react-remove-scroll "^2.5.6" react-style-singleton "^2.2.0" tslib "^2.3.1" use-callback-ref "^1.3.0" @@ -24657,7 +24657,7 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4: +react-remove-scroll-bar@^2.3.4: version "2.3.4" resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9" integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A== @@ -24665,12 +24665,12 @@ react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4: react-style-singleton "^2.2.1" tslib "^2.0.0" -react-remove-scroll@^2.5.5: - version "2.5.5" - resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77" - integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw== +react-remove-scroll@^2.5.6: + version "2.5.6" + resolved "https://packages.atlassian.com/api/npm/npm-remote/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz#7510b8079e9c7eebe00e65a33daaa3aa29a10336" + integrity sha512-bO856ad1uDYLefgArk559IzUNeQ6SWH4QnrevIUjH+GczV56giDfl3h0Idptf2oIKxQmd1p9BN25jleKodTALg== dependencies: - react-remove-scroll-bar "^2.3.3" + react-remove-scroll-bar "^2.3.4" react-style-singleton "^2.2.1" tslib "^2.1.0" use-callback-ref "^1.3.0"