From 784cc4932d9ad4865e3216d0ce28b0771697898f Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Fri, 4 Oct 2024 10:53:45 -0700 Subject: [PATCH] Upgrade EUI to v96.1.0 (#194619) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `v95.12.0`⏩`v96.1.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)_ --- ## [`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0) - Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX: ([#8044](https://github.com/elastic/eui/pull/8044)) - `rightSideItems` are no longer pushed to the side by wide `tabs` content - `rightSideItems` now wrap more responsively at smaller container widths - Updated `EuiDraggable` with a new `usePortal` prop. ([#8048](https://github.com/elastic/eui/pull/8048)) - This prop portals the dragged element to the body, allowing it to escape stacking contexts which prevents buggy drag positioning in e.g. popovers, modals, and flyouts. **Bug fixes** - Fixed `EuiProvider`'s system color mode detection causing errors during server-side rendering ([#8040](https://github.com/elastic/eui/pull/8040)) - Fixed an `EuiDataGrid` rendering bug that was causing bouncing scrollbar issues ([#8041](https://github.com/elastic/eui/pull/8041)) - Fixed `EuiSearchBox` skips input when running with React 18 in Legacy Mode ([#8047](https://github.com/elastic/eui/pull/8047)) **Deprecations** - Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s new `usePortal` prop instead. ([#8048](https://github.com/elastic/eui/pull/8048)) **Breaking changes** - Removed the following exported `.css` files: ([#8045](https://github.com/elastic/eui/pull/8045)) - `@elastic/eui/dist/eui_theme_light.css` - `@elastic/eui/dist/eui_theme_light.min.css` - `@elastic/eui/dist/eui_theme_dark.css` - `@elastic/eui/dist/eui_theme_dark.min.css` - All EUI components are now on CSS-in-JS. A CSS file/import in consuming applications is no longer needed, and is safe to remove. ([#8045](https://github.com/elastic/eui/pull/8045)) - Removed all `src/theme/legacy` Sass exports ([#8054](https://github.com/elastic/eui/pull/8054)) **CSS-in-JS conversions** - Removed the following component-specific Sass variables: ([#8031](https://github.com/elastic/eui/pull/8031)) - `$euiButtonColorDisabled` - `$euiButtonColorDisabledText` - `$euiButtonColorGhostDisabled` - `$euiButtonFontWeight` - `$euiFormControlIconSizes` - `$euiFormControlLayoutGroupInputHeight` - `$euiFormControlLayoutGroupInputCompressedHeight` - `$euiFormControlLayoutGroupInputCompressedBorderRadius` - `$euiPageSidebarMinWidth` - `$euiPageDefaultMaxWidth` - `$euiPanelPaddingModifiers` - `$euiPanelBorderRadiusModifiers` - `$euiPanelBackgroundColorModifiers` - `$euiRangeTrackColor` - `$euiRangeHighlightColor` - `$euiRangeThumbHeight` - `$euiRangeThumbWidth` - `$euiRangeThumbBorderColor` - `$euiRangeThumbBackgroundColor` - `$euiRangeTrackWidth` - `$euiRangeTrackHeight` - `$euiRangeTrackCompressedHeight` - `$euiRangeTrackBorderWidth` - `$euiRangeTrackBorderColor` - `$euiRangeTrackRadius` - `$euiRangeDisabledOpacity` - `$euiRangeHighlightHeight` - `$euiRangeHighlightCompressedHeight` - `$euiRangeHeight` - `$euiRangeCompressedHeight` - `$euiTooltipAnimations` - `$euiTooltipBackgroundColor` - `$euiTooltipBorderColor` - Removed the following Sass mixins due to low external usage: ([#8031](https://github.com/elastic/eui/pull/8031)) - `euiHoverState` - `euiFocusState` - `euiDisabledState` - `euiInteractiveStates` - `euiFormControlStyle` - `euiFormControlStyleCompressed` - `euiFormControlFocusStyle` - `euiFormControlInvalidStyle` - `euiFormControlDisabledTextStyle` - `euiFormControlDisabledStyle` - `euiFormControlReadOnlyStyle` - `euiFormControlText` - `euiFormControlSize` - `euiFormControlGradient` - `euiFormControlLayoutPadding` - `euiFormControlWithIcon` - `euiFormControlIsLoading` - `euiFormControlSideBorderRadius` - `euiPlaceholderPerBrowser` - `euiHiddenSelectableInput` - `euiLink` - `euiLoadingSpinnerBorderColors` - `euiRangeTrackSize` - `euiRangeTrackPerBrowser` - `euiRangeThumbBorder` - `euiRangeThumbBoxShadow` - `euiRangeThumbFocusBoxShadow` - `euiRangeThumbStyle` - `euiRangeThumbPerBrowser` - `euiRangeThumbFocus` - `euiToolTipAnimation` ## [`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0) **CSS-in-JS conversions** - Removed the following component-specific Sass mixins: ([#8055](https://github.com/elastic/eui/pull/8055)) - `euiButton` - `euiButtonBase` - `euiButtonFocus` - `euiButtonContent` - `euiButtonContentDisabled` - `euiButtonDefaultStyle` - `euiButtonFillStyle` - `euiPanel` - `euiFormControlDefaultShadow` - `euiToolTipTitle` --- package.json | 2 +- .../__snapshots__/list_header.test.tsx.snap | 350 +++++++++--------- packages/kbn-test/src/jest/setup/emotion.js | 9 + .../__snapshots__/page_template.test.tsx.snap | 14 +- src/dev/license_checker/config.ts | 2 +- .../__snapshots__/header.test.tsx.snap | 70 ++-- .../filter_item/filter_item.tsx | 1 + .../query_string_input/add_filter_popover.tsx | 1 - .../query_string_input/query_bar_menu.tsx | 1 - .../components/all_cases/columns_popover.tsx | 2 +- .../license_page_header.test.js.snap | 8 +- .../chart_tooltip/_chart_tooltip.scss | 4 +- yarn.lock | 8 +- 13 files changed, 229 insertions(+), 243 deletions(-) diff --git a/package.json b/package.json index f04b96e75345b..8da1f4a647d4b 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "@elastic/ecs": "^8.11.1", "@elastic/elasticsearch": "^8.15.0", "@elastic/ems-client": "8.5.3", - "@elastic/eui": "95.12.0-backport.0", + "@elastic/eui": "96.1.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git 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 index b6c22f01f14b8..5f861bace9550 100644 --- 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 @@ -45,10 +45,10 @@ exports[`ExceptionListHeader should render edit modal 1`] = ` class="euiSpacer euiSpacer--s emotion-euiSpacer-s" />

-
- - Linked to 0 rules - -
-
+
+
+ -
+ + +
+
-
- -
+
@@ -269,10 +265,10 @@ exports[`ExceptionListHeader should render the List Header with name, default de class="euiSpacer euiSpacer--s emotion-euiSpacer-s" />

-
- - Linked to 0 rules - -
-
+
+
+ -
+ + +
+
-
- -
+
@@ -493,10 +485,10 @@ exports[`ExceptionListHeader should render the List Header with name, default de class="euiSpacer euiSpacer--s emotion-euiSpacer-s" />

-
- - Linked to 0 rules - -
-
+
+
+ -
+ + +
+
-
- -
+
@@ -690,10 +678,10 @@ exports[`ExceptionListHeader should render the List Header with name, default de class="euiSpacer euiSpacer--s emotion-euiSpacer-s" />

-
- - Linked to 0 rules - -
+ Linked to 0 rules + +
+
-
- -
+
diff --git a/packages/kbn-test/src/jest/setup/emotion.js b/packages/kbn-test/src/jest/setup/emotion.js index 66c2e838b472c..1084d4d695c6d 100644 --- a/packages/kbn-test/src/jest/setup/emotion.js +++ b/packages/kbn-test/src/jest/setup/emotion.js @@ -29,5 +29,14 @@ console.error = (message, ...rest) => { ) { return; } + // @see https://github.com/jsdom/jsdom/issues/2177 + // JSDOM doesn't yet know how to parse @container CSS queries - + // all we can do is silence its errors for now + if ( + typeof message === 'object' && + message?.message?.startsWith('Could not parse CSS stylesheet') + ) { + return; + } consoleError(message, ...rest); }; diff --git a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap index a185c193981f8..f455fbb1d00bf 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap +++ b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap @@ -18,10 +18,10 @@ exports[`KibanaPageTemplate render basic template 1`] = ` style="max-width:1200px" >
-
- test -
+ test
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 15d08e194c4df..c4d5357ceefb1 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -87,7 +87,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.12.0-backport.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui@96.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.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) diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap index eb2e5d733b98a..ef2699747a6b5 100644 --- a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap +++ b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap @@ -8,10 +8,10 @@ exports[`Intro component renders correctly 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent-border-l" >

-
- -
-
+ Delete + + +
+
+ - - - View saved object - - -
+ color="inherit" + data-euiicon-type="eye" + /> + View saved object + +
diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx index ed6b6c8a8d315..bc1f1f513e15b 100644 --- a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx +++ b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx @@ -251,6 +251,7 @@ export function FilterItem({ hasInteractiveChildren={true} disableInteractiveElementBlocking className={cx(disabledDraggableCss)} + usePortal > {(provided) => ( {renderComponent()} diff --git a/x-pack/plugins/cases/public/components/all_cases/columns_popover.tsx b/x-pack/plugins/cases/public/components/all_cases/columns_popover.tsx index d16b1f20059a9..25c4de69b731d 100644 --- a/x-pack/plugins/cases/public/components/all_cases/columns_popover.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/columns_popover.tsx @@ -98,7 +98,6 @@ export const ColumnsPopover: React.FC = ({ closePopover={closePopover} panelPaddingSize="s" anchorPosition="leftUp" - hasDragDrop zIndex={0} data-test-subj="column-selection-popover" button={ @@ -158,6 +157,7 @@ export const ColumnsPopover: React.FC = ({ css={{ height: euiTheme.size.xl, paddingLeft: euiTheme.size.base }} customDragHandle hasInteractiveChildren + usePortal > {(provided) => ( diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/license_page_header.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/license_page_header.test.js.snap index 533367de22376..44cf021ef63d6 100644 --- a/x-pack/plugins/license_management/__jest__/__snapshots__/license_page_header.test.js.snap +++ b/x-pack/plugins/license_management/__jest__/__snapshots__/license_page_header.test.js.snap @@ -9,10 +9,10 @@ Array [ class="euiPageHeaderContent emotion-euiPageHeaderContent-border-l" >