From 51569b4c93fec61ad42a149d9899e9e93ed23ad9 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Tue, 12 Sep 2023 08:51:07 -0700 Subject: [PATCH] Upgrade EUI to v88.2.0 (#165790) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Major changes in this PR: ## Removal of `.euiAccordionForm` classNames EUI is moving away from providing global `classNames` styles for components - where possible, we want to provide props as opposed to styles. As part of our ongoing Emotion conversion, we have removed the following `EuiAccordion`-specific classes: - `.euiAccordionForm` (replaced with `borders="horizontal"`) - `.euiAccordionForm__button` (replaced with `buttonProps={{ paddingSize: 'm' }}`) - `.euiAccordionForm__title` styles - this was only removing text underlines on hover. If still desired, re-add this behavior with custom CSS. - `.euiAccordionForm__extraAction` - there was 1 usage of this in Kibana in Watcher, which was converted to one-off custom inline Emotion CSS instead. This change accounts for the first 3-4 commits in the PR. ⚠️ If your team was one of the 4-5 teams affected by this change, we would greatly appreciate your help QAing the UI and ensuring it looks as desired/the same as before. ## Fixed `EuiHeader` affordance The Sass `euiHeaderAffordForFixed` mixin has been deprecated and replaced by a global `--euiFixedHeadersOffset` CSS variable. This variable updates independently and dynamically based on the number of fixed headers on the page, and is usable by both Sass and Emotion. All underlying EUI components that need to account for fixed headers (such as flyouts and page sidebars/templates) have been updated to consume this new variable. This change cleans up a great deal of Sass code, and is incidentally extremely timely with serverless efforts (as serverless has only one fixed header and the classic Kibana chrome has two). This change constitutes a majority of the commits in this PR, which involve removing various fixed Sass header variables and replacing them with the new CSS variable. I strongly recommend [reviewing changes by commit if possible](https://github.com/elastic/kibana/pull/165790/commits) to see any associated changes that make sense together with any of your touched file(s). ⚠️ If your team was affected by this change (primarily due to custom header layouts), your help would be greatly appreciated QAing your app to ensure no UI regressions in that regard have occurred. --- `v88.1.0`⏩ `v88.2.0` ## [`88.2.0`](https://github.com/elastic/eui/tree/v88.2.0) - Added a new `EuiTextTruncate` component, which provides custom truncation options beyond native CSS ([#7116](https://github.com/elastic/eui/pull/7116)) - Fixed-positioned `EuiHeader`s now set a global CSS `--euiFixedHeadersOffset` variable, which updates dynamically based on the number of fixed headers on the page. ([#7144](https://github.com/elastic/eui/pull/7144)) - `EuiFlyout`s now dynamically set their position, height, and mask based on the number of fixed headers on the page. ([#7144](https://github.com/elastic/eui/pull/7144)) - Sticky-positioned `EuiPageSidebar`s now dynamically set their position and height based on the number of fixed headers on the page. This can still be overridden via the `sticky.offset` prop if needed. ([#7144](https://github.com/elastic/eui/pull/7144)) - `EuiPageTemplate` now dynamically offsets content from any fixed headers on the page. This can still be overridden via the `offset` prop if needed. ([#7144](https://github.com/elastic/eui/pull/7144)) - Updated `EuiAccordion` with a new `borders` prop ([#7154](https://github.com/elastic/eui/pull/7154)) - Updated `EuiAccordion` with a new `buttonProps.paddingSize` prop ([#7154](https://github.com/elastic/eui/pull/7154)) **Deprecations** - Deprecated the Sass `euiHeaderAffordForFixed` mixin. Use the new global CSS `var(--euiFixedHeadersOffset)` variable instead. ([#7144](https://github.com/elastic/eui/pull/7144)) **CSS-in-JS conversions** - Except for generic CSS utilities, EUI is moving away from providing global `classNames` that are component-specific. As part of this effort, we have removed the following `EuiAccordion`-specific classes: ([#7154](https://github.com/elastic/eui/pull/7154)) - Removed `.euiAccordionForm` styles. Use the `borders="horizontal"` prop instead - Removed `.euiAccordionForm__button` styles. Use the `buttonProps={{ paddingSize: 'm' }}` prop instead - Removed `.euiAccordionForm__extraAction` styles. Convert this to your own custom CSS if necessary. - Removed `.euiAccordionForm__title` styles. Convert this to your own custom CSS if necessary. --------- Co-authored-by: Stratoula Kalafateli --- package.json | 2 +- .../src/chrome_service.test.tsx | 38 ++++++------ .../src/chrome_service.tsx | 1 - .../collapsible_nav.test.tsx.snap | 10 +-- .../header/__snapshots__/header.test.tsx.snap | 2 + .../src/ui/project/app_menu.tsx | 2 +- .../__snapshots__/comments.test.tsx.snap | 8 +-- .../src/components/accordion_panel/index.tsx | 2 +- .../page_template_inner.test.tsx.snap | 4 +- .../impl/src/page_template_inner.tsx | 21 +------ .../with_solution_nav.test.tsx.snap | 4 +- .../solution_nav/src/with_solution_nav.tsx | 5 +- src/core/public/_css_variables.scss | 11 ++++ src/core/public/_mixins.scss | 47 ++------------ src/core/public/_variables.scss | 8 --- src/core/public/index.scss | 2 +- src/core/public/styles/chrome/_banner.scss | 31 +--------- src/core/public/styles/core_app/_mixins.scss | 4 +- src/core/public/styles/rendering/_base.scss | 62 +++++++------------ src/dev/license_checker/config.ts | 2 +- .../top_nav/_dashboard_top_nav.scss | 21 +------ .../dashboard_empty_screen.test.tsx.snap | 8 +-- x-pack/plugins/canvas/common/lib/constants.ts | 1 - .../components/workpad/workpad.component.tsx | 20 +++--- .../shared/schema/errors_accordion/index.tsx | 5 +- .../package_policy_input_stream.tsx | 2 +- .../components/package_list_grid/controls.tsx | 2 +- .../components/package_list_grid/index.tsx | 2 +- .../fleet/public/layouts/without_header.tsx | 8 +-- .../shared_components/flyout_container.tsx | 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 +- .../global_kql_header/index.tsx | 2 +- .../rules/accordion_title/index.tsx | 2 +- .../execute_action_host_response.test.tsx | 4 +- .../components/page_overlay/page_overlay.tsx | 15 +---- .../components/flyout/pane/index.tsx | 6 +- .../browser/browser_test_results.tsx | 4 +- .../threshold_watch_action_accordion.tsx | 30 +++++++-- .../apps/maps/group1/sample_data.js | 4 +- yarn.lock | 8 +-- 43 files changed, 162 insertions(+), 268 deletions(-) create mode 100644 src/core/public/_css_variables.scss delete mode 100644 src/core/public/_variables.scss diff --git a/package.json b/package.json index fa7ceb4edd592..3e4cb3323cabf 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "88.1.0", + "@elastic/eui": "88.2.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx index ad7c6d8fc52a5..6109a1bd0688c 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.tsx @@ -147,16 +147,15 @@ describe('start', () => { const promise = chrome.getBodyClasses$().pipe(toArray()).toPromise(); service.stop(); await expect(promise).resolves.toMatchInlineSnapshot(` - Array [ - Array [ - "kbnBody", - "kbnBody--classicLayout", - "kbnBody--noHeaderBanner", - "kbnBody--chromeHidden", - "kbnVersion-1-2-3", - ], - ] - `); + Array [ + Array [ + "kbnBody", + "kbnBody--noHeaderBanner", + "kbnBody--chromeHidden", + "kbnVersion-1-2-3", + ], + ] + `); }); it('strips off "snapshot" from the kibana version if present', async () => { @@ -166,16 +165,15 @@ describe('start', () => { const promise = chrome.getBodyClasses$().pipe(toArray()).toPromise(); service.stop(); await expect(promise).resolves.toMatchInlineSnapshot(` - Array [ - Array [ - "kbnBody", - "kbnBody--classicLayout", - "kbnBody--noHeaderBanner", - "kbnBody--chromeHidden", - "kbnVersion-8-0-0", - ], - ] - `); + Array [ + Array [ + "kbnBody", + "kbnBody--noHeaderBanner", + "kbnBody--chromeHidden", + "kbnVersion-8-0-0", + ], + ] + `); }); it('does not add legacy browser warning if browser supports CSP', async () => { diff --git a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx index 76fef465d823c..02ba5a912cd40 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx @@ -207,7 +207,6 @@ export class ChromeService { map(([headerBanner, isVisible, chromeStyle]) => { return [ 'kbnBody', - chromeStyle === 'project' ? 'kbnBody--projectLayout' : 'kbnBody--classicLayout', headerBanner ? 'kbnBody--hasHeaderBanner' : 'kbnBody--noHeaderBanner', isVisible ? 'kbnBody--chromeVisible' : 'kbnBody--chromeHidden', getKbnVersionClass(), 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 476776a40a155..0ae5e0504839b 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 @@ -105,7 +105,7 @@ Array [
{ /* fixates the elements position in the viewport, removes the element from the flow of the page */ position: sticky; /* position below the primary fixed EuiHeader in the viewport */ - top: 48px; + top: var(--euiFixedHeadersOffset, 0); `} > diff --git a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap index f194c0af3908a..770a862dd4ce5 100644 --- a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap +++ b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap @@ -71,7 +71,7 @@ Object { data-test-subj="ExceptionItemCardCommentsContainer" >
- +

{title}

diff --git a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap index 0588fbfae152d..7a238b54533dd 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap +++ b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap @@ -66,7 +66,9 @@ exports[`KibanaPageTemplateInner page sidebar 1`] = ` minHeight={0} offset={0} > - + Test diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx index 607b8fbd1776b..f9b9dcd247de6 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx +++ b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FC, useEffect, useState } from 'react'; +import React, { FC } from 'react'; import classNames from 'classnames'; import { EuiPageTemplate } from '@elastic/eui'; @@ -21,9 +21,6 @@ const getClasses = (template?: string, className?: string) => { ); }; -const KIBANA_CHROME_SELECTOR = '[data-test-subj="kibanaChrome"]'; -const HEADER_GLOBAL_NAV_SELECTOR = '[data-test-subj="headerGlobalNav"]'; - /** * A thin wrapper around EuiPageTemplate with a few Kibana specific additions */ @@ -38,18 +35,6 @@ export const KibanaPageTemplateInner: FC = ({ }) => { let header; - const [offset, setOffset] = useState(); - - useEffect(() => { - const kibanaChrome = document.querySelector(KIBANA_CHROME_SELECTOR) as HTMLElement; - if (kibanaChrome) { - const kibanaChromeHeader = kibanaChrome.querySelector( - HEADER_GLOBAL_NAV_SELECTOR - ) as HTMLElement; - setOffset(kibanaChromeHeader?.offsetTop + kibanaChromeHeader?.offsetHeight); - } - }, []); - if (isEmptyState && pageHeader && !children) { const { iconType, pageTitle, description, rightSideItems } = pageHeader; const title = pageTitle ?

{pageTitle}

: undefined; @@ -70,9 +55,7 @@ export const KibanaPageTemplateInner: FC = ({ let sideBar; if (pageSideBar) { const sideBarProps = { ...pageSideBarProps }; - if (offset) { - sideBarProps.sticky = { offset }; - } + sideBarProps.sticky = true; sideBar = {pageSideBar}; } diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap index d31d61c4b8129..f55fc4c110b11 100644 --- a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap +++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap @@ -52,7 +52,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = ` } pageSideBarProps={ Object { - "className": "css-c34ez9", + "className": "kbnSolutionNav__sidebar css-c34ez9", "minWidth": undefined, "paddingSize": "none", } @@ -112,7 +112,7 @@ exports[`WithSolutionNav with children 1`] = ` } pageSideBarProps={ Object { - "className": "css-c34ez9", + "className": "kbnSolutionNav__sidebar css-c34ez9", "minWidth": undefined, "paddingSize": "none", } diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx index da73befdf519e..2e4879a4093cb 100644 --- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx +++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx @@ -57,9 +57,8 @@ export const withSolutionNav =

(WrappedComponent: Compo isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop); const withSolutionNavStyles = WithSolutionNavStyles(euiTheme); const sideBarClasses = classNames( - { - 'kbnSolutionNav__sidebar--shrink': isSidebarShrunk, - }, + 'kbnSolutionNav__sidebar', + { 'kbnSolutionNav__sidebar--shrink': isSidebarShrunk }, props.pageSideBarProps?.className, withSolutionNavStyles ); diff --git a/src/core/public/_css_variables.scss b/src/core/public/_css_variables.scss new file mode 100644 index 0000000000000..cef1be40d1239 --- /dev/null +++ b/src/core/public/_css_variables.scss @@ -0,0 +1,11 @@ +:root { + // height of the header banner + --kbnHeaderBannerHeight: #{$euiSizeXL}; + // total height of all fixed headers (when the banner is *not* present) inherited from EUI + --kbnHeaderOffset: var(--euiFixedHeadersOffset, 0); + // total height of everything when the banner is present + --kbnHeaderOffsetWithBanner: calc(var(--kbnHeaderBannerHeight) + var(--kbnHeaderOffset)); +} + +// Quick note: This shouldn't be mixed with Sass variable declarations, +// as each import will cause :root to be re-declared unnecessarily diff --git a/src/core/public/_mixins.scss b/src/core/public/_mixins.scss index 2dbef465e074e..9d533a87d1843 100644 --- a/src/core/public/_mixins.scss +++ b/src/core/public/_mixins.scss @@ -1,43 +1,6 @@ -@import './variables'; - -/* stylelint-disable-next-line length-zero-no-unit -- need consistent unit to sum them */ -@mixin kibanaFullBodyHeight($additionalOffset: 0px) { - // default - header, no banner - height: calc(100vh - #{$kbnHeaderOffset + $additionalOffset}); - - @at-root { - // no header, no banner - .kbnBody--chromeHidden & { - height: calc(100vh - #{$additionalOffset}); - } - // header, banner - .kbnBody--hasHeaderBanner & { - height: calc(100vh - #{$kbnHeaderOffsetWithBanner + $additionalOffset}); - } - // no header, banner - .kbnBody--chromeHidden.kbnBody--hasHeaderBanner & { - height: calc(100vh - #{$kbnHeaderBannerHeight + $additionalOffset}); - } - } -} - -/* stylelint-disable-next-line length-zero-no-unit -- need consistent unit to sum them */ -@mixin kibanaFullBodyMinHeight($additionalOffset: 0px) { - // default - header, no banner - min-height: calc(100vh - #{$kbnHeaderOffset + $additionalOffset}); - - @at-root { - // no header, no banner - .kbnBody--chromeHidden & { - min-height: calc(100vh - #{$additionalOffset}); - } - // header, banner - .kbnBody--hasHeaderBanner & { - min-height: calc(100vh - #{$kbnHeaderOffsetWithBanner + $additionalOffset}); - } - // no header, banner - .kbnBody--chromeHidden.kbnBody--hasHeaderBanner & { - min-height: calc(100vh - #{$kbnHeaderBannerHeight + $additionalOffset}); - } - } +@mixin kibanaFullBodyHeight($additionalOffset: 0) { + // The `--euiFixedHeadersOffset` CSS variable is automatically updated by + // styles/rendering/_base.scss, based on whether the Kibana chrome has a + // header banner, and is visible or hidden + height: calc(100vh - var(--euiFixedHeadersOffset, 0) - #{$additionalOffset}); } diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss deleted file mode 100644 index 6c21c9760be97..0000000000000 --- a/src/core/public/_variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import '@elastic/eui/src/global_styling/variables/header'; - -// height of the header banner -$kbnHeaderBannerHeight: $euiSizeXL; // This value is also declared in `/x-pack/plugins/canvas/common/lib/constants.ts` -// total height of the header (when the banner is *not* present) -$kbnHeaderOffset: $euiHeaderHeightCompensation * 2; -// total height of the header when the banner is present -$kbnHeaderOffsetWithBanner: $kbnHeaderOffset + $kbnHeaderBannerHeight; diff --git a/src/core/public/index.scss b/src/core/public/index.scss index c056b0f851801..db05def14bc0c 100644 --- a/src/core/public/index.scss +++ b/src/core/public/index.scss @@ -1,3 +1,3 @@ -@import './variables'; +@import './css_variables'; @import './mixins'; @import './styles/index'; diff --git a/src/core/public/styles/chrome/_banner.scss b/src/core/public/styles/chrome/_banner.scss index 9c521da3f30ca..feb69e54a911f 100644 --- a/src/core/public/styles/chrome/_banner.scss +++ b/src/core/public/styles/chrome/_banner.scss @@ -2,7 +2,7 @@ position: fixed; top: 0; left: 0; - height: $kbnHeaderBannerHeight; + height: var(--kbnHeaderBannerHeight); width: 100%; z-index: $euiZHeader; } @@ -11,32 +11,3 @@ height: 100%; width: 100%; } - -// overriding `top` positioning of the chrome headers -.kbnBody--hasHeaderBanner .header__bars { - .header__firstBar { - top: $kbnHeaderBannerHeight; - } - .header__secondBar { - top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation; - } -} - -// overriding padding on the body element added by EUI -.kbnBody.kbnBody--hasHeaderBanner.kbnBody--projectLayout.euiBody--headerIsFixed { - padding-top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation; - - // overriding `top` positioning of the project side nav, and flyouts - // overriding `top` positioning of the project app menu toolbar - &.euiBody--headerIsFixed .euiCollapsibleNav, - &.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout, - .header__actionMenu { - top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation; - } - - // overriding `height` calculation of the project side nav, and flyouts - &.euiBody--headerIsFixed .euiCollapsibleNav, - &.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout { - height: calc(100% - #{$kbnHeaderBannerHeight + $euiHeaderHeightCompensation}); - } -} diff --git a/src/core/public/styles/core_app/_mixins.scss b/src/core/public/styles/core_app/_mixins.scss index a801ffd7a2cae..78691f71fe87d 100644 --- a/src/core/public/styles/core_app/_mixins.scss +++ b/src/core/public/styles/core_app/_mixins.scss @@ -1,5 +1,3 @@ -@import '../../variables'; - @mixin flexParent($grow: 1, $shrink: 1, $basis: auto, $direction: column) { flex: $grow $shrink $basis; display: flex; @@ -86,7 +84,7 @@ @at-root { .kbnBody--hasHeaderBanner & { - top: $kbnHeaderBannerHeight; + top: var(--kbnHeaderBannerHeight); } } diff --git a/src/core/public/styles/rendering/_base.scss b/src/core/public/styles/rendering/_base.scss index a9ece9955e6ca..8a7b14242f8bf 100644 --- a/src/core/public/styles/rendering/_base.scss +++ b/src/core/public/styles/rendering/_base.scss @@ -19,7 +19,7 @@ pointer-events: none; visibility: hidden; position: fixed; - top: 0; + top: var(--euiFixedHeadersOffset, 0); right: 0; bottom: 0; left: 0; @@ -35,50 +35,30 @@ position: relative; // This is temporary for apps that relied on this being present on `.application` } -@mixin kbnAffordForHeader($headerHeight) { - @include euiHeaderAffordForFixed($headerHeight); - - #securitySolutionStickyKQL, - #app-fixed-viewport { - top: $headerHeight; - } - - @include euiBreakpoint('xl', 'l') { - .kbnStickyMenu { - position: sticky; - max-height: calc(100vh - #{$headerHeight + $euiSize}); - top: $headerHeight + $euiSize; - } - - .kbnSolutionNav__sidebar { - position: sticky; - max-height: calc(100vh - #{$headerHeight}); - top: $headerHeight; - } - } -} - .kbnBody { - @include kbnAffordForHeader($kbnHeaderOffset); + padding-top: var(--euiFixedHeadersOffset, 0); +} - &.kbnBody--hasHeaderBanner { - padding-top: $kbnHeaderBannerHeight; +// Conditionally override :root CSS fixed header variable. Updating `--euiFixedHeadersOffset` +// on the body will cause all child EUI components to automatically update their offsets - @include kbnAffordForHeader($kbnHeaderOffsetWithBanner); +.kbnBody--hasHeaderBanner { + --euiFixedHeadersOffset: var(--kbnHeaderOffsetWithBanner); - // Prevents banners from covering full screen data grids - .euiDataGrid--fullScreen { - height: calc(100vh - #{$kbnHeaderBannerHeight}); - top: $kbnHeaderBannerHeight; - } - } - &.kbnBody--chromeHidden { - @include kbnAffordForHeader(0); - } - &.kbnBody--projectLayout { - @include kbnAffordForHeader($euiHeaderHeightCompensation); + // Offset fixed EuiHeaders by the top banner + .euiHeader[data-fixed-header] { + margin-top: var(--kbnHeaderBannerHeight); } - &.kbnBody--chromeHidden.kbnBody--hasHeaderBanner { - @include kbnAffordForHeader($kbnHeaderBannerHeight); + + // Prevent banners from covering full screen data grids + .euiDataGrid--fullScreen { + height: calc(100vh - var(--kbnHeaderBannerHeight)); + top: var(--kbnHeaderBannerHeight); } } +.kbnBody--chromeHidden { + --euiFixedHeadersOffset: 0; +} +.kbnBody--chromeHidden.kbnBody--hasHeaderBanner { + --euiFixedHeadersOffset: var(--kbnHeaderBannerHeight); +} diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 448c7f900ffd1..ff0296ec9777b 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -85,7 +85,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.4.0': ['Elastic License 2.0'], - '@elastic/eui@88.1.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@88.2.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 }; diff --git a/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss b/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss index 1cc815d05e71a..e73de35dfc41d 100644 --- a/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss +++ b/src/plugins/dashboard/public/dashboard_app/top_nav/_dashboard_top_nav.scss @@ -3,24 +3,7 @@ width: 100%; position: sticky; z-index: $euiZLevel2; + top: var(--euiFixedHeadersOffset, 0); background: $euiPageBackgroundColor; } - - &.kbnBody--noHeaderBanner { - &.kbnBody--chromeVisible .dashboardTopNav { - top: $kbnHeaderOffset; - } - &.kbnBody--chromeHidden .dashboardTopNav { - top: 0; - } - } - - &.kbnBody--hasHeaderBanner { - &.kbnBody--chromeVisible .dashboardTopNav { - top: $kbnHeaderOffsetWithBanner; - } - &.kbnBody--chromeHidden .dashboardTopNav { - top: $kbnHeaderBannerHeight; - } - } -} \ No newline at end of file +} diff --git a/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap index 46d3b77578b3b..6863540ad4a71 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap +++ b/src/plugins/dashboard/public/dashboard_container/component/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap @@ -7,7 +7,7 @@ exports[`DashboardEmptyScreen renders correctly with edit mode 1`] = `

= ({ zoomOut, zoomScale, }) => { - const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0; + const headerBannerOffset = useMemo(() => { + if (!hasHeaderBanner) return 0; + if (typeof document === 'undefined') return 0; + + // Get the banner height from the CSS variable value + const headerHeightFromCSS = getComputedStyle(document.documentElement).getPropertyValue( + '--kbnHeaderBannerHeight' + ); + // Remove the CSS unit + return parseInt(headerHeightFromCSS, 10); + }, [hasHeaderBanner]); const bufferStyle = { height: isFullscreen ? height : (height + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale, diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx index 99f3d30c6caae..6b4bcba14fd1d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/schema/errors_accordion/index.tsx @@ -77,8 +77,9 @@ export const SchemaErrorsAccordion: React.FC = ({ diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx index 1a13bbcf25367..6b1bfaaaa0961 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx @@ -53,7 +53,7 @@ import { sortDatastreamsByDataset } from './sort_datastreams'; const ScrollAnchor = styled.div` display: none; - scroll-margin-top: ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px; + scroll-margin-top: var(--euiFixedHeadersOffset, 0); `; interface Props { diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx index 08004cadeb46d..cb5c61ff57a14 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/controls.tsx @@ -27,7 +27,7 @@ export const ControlsColumn = ({ controls, title }: ControlsColumnProps) => { ); } return ( - + {titleContent} {controls} diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx index 97adcaa7e40a6..19e267d3c2aee 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.tsx @@ -168,7 +168,7 @@ export const PackageListGrid: FunctionComponent = ({ gutterSize="xl" data-test-subj="epmList.integrationCards" > - + diff --git a/x-pack/plugins/fleet/public/layouts/without_header.tsx b/x-pack/plugins/fleet/public/layouts/without_header.tsx index d9481d44359c2..0f60cb28814a7 100644 --- a/x-pack/plugins/fleet/public/layouts/without_header.tsx +++ b/x-pack/plugins/fleet/public/layouts/without_header.tsx @@ -12,12 +12,8 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui'; export const Wrapper = styled.div` background-color: ${(props) => props.theme.eui.euiColorEmptyShade}; - // HACK: Kibana introduces a div element around the app component that results in us - // being unable to stretch this Wrapper to full height via flex: 1. This calc sets - // the min height to the viewport size minus the height of the two global Kibana headers. - min-height: calc( - 100vh - ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px - ); + // Set the min height to the viewport size minus the height of any global Kibana headers + min-height: calc(100vh - var(--euiFixedHeadersOffset, 0)); `; export const Page = styled(EuiPage)` diff --git a/x-pack/plugins/lens/public/shared_components/flyout_container.tsx b/x-pack/plugins/lens/public/shared_components/flyout_container.tsx index 6b970a3e55f38..46a5c5ca39706 100644 --- a/x-pack/plugins/lens/public/shared_components/flyout_container.tsx +++ b/x-pack/plugins/lens/public/shared_components/flyout_container.tsx @@ -98,7 +98,7 @@ export function FlyoutContainer({ ref={panelContainerRef} role="dialog" aria-labelledby="lnsDimensionContainerTitle" - className="lnsDimensionContainer euiFlyout" + className="lnsDimensionContainer" onAnimationEnd={() => { if (isOpen) { // EuiFocusTrap interferes with animating elements with absolute position: 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 b290215981024..9d95afb5852dd 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 @@ -94,7 +94,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout style="width: auto; margin-left: -16px; margin-right: -16px;" />
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 a752facec0213..b16535269e1c9 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 cc55a03d84555..255cc8b4963a0 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/app/home/template_wrapper/global_kql_header/index.tsx b/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx index ac49d8e90498d..f5f9b55e59e7c 100644 --- a/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx +++ b/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx @@ -12,7 +12,7 @@ import { useGlobalHeaderPortal } from '../../../../common/hooks/use_global_heade const StyledStickyWrapper = styled.div` position: sticky; z-index: ${(props) => props.theme.eui.euiZHeaderBelowDataGrid}; - // TOP location is declared in src/public/rendering/_base.scss to keep in line with Kibana Chrome + top: var(--euiFixedHeadersOffset, 0); `; export const GlobalKQLHeader = React.memo(() => { diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx index 8e25d444ebd2b..86280bd98d58f 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/accordion_title/index.tsx @@ -21,7 +21,7 @@ const AccordionTitleComponent: React.FC = ({ name, title, t - +
{title}
 diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx index ea91afe44afdd..04958e60b4de8 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_execute_action/execute_action_host_response.test.tsx @@ -58,8 +58,8 @@ describe('When using the `ExecuteActionHostResponse` component', () => { it('should show execute context accordion as `closed`', async () => { render(); - expect(renderResult.getByTestId('test-executeResponseOutput-context').className).toEqual( - 'euiAccordion' + expect(renderResult.getByTestId('test-executeResponseOutput-context').className).not.toContain( + 'euiAccordion-isOpen' ); }); diff --git a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx index 3ea38e5ed2314..e6f8f2b207ea8 100644 --- a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx +++ b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx @@ -24,11 +24,11 @@ const OverlayRootContainer = styled.div` position: fixed; overflow: hidden; - top: calc((${({ theme: { eui } }) => eui.euiHeaderHeightCompensation} * 2)); + top: var(--euiFixedHeadersOffset, 0); bottom: 0; right: 0; - height: calc(100% - ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation} * 2); + height: calc(100% - var(--euiFixedHeadersOffset, 0)); width: 100%; z-index: ${({ theme: { eui } }) => eui.euiZFlyout}; @@ -89,17 +89,6 @@ const PageOverlayGlobalStyles = createGlobalStyle<{ theme: EuiTheme }>` body.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME} { ${FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET} } - - //------------------------------------------------------------------------------------------- - // Style overrides for when Page Overlay is displayed in serverless project - //------------------------------------------------------------------------------------------- - // With serverless, there is 1 less header displayed, thus the display of the page overlay - // need to be adjusted slightly so that it still display below the header - //------------------------------------------------------------------------------------------- - body.kbnBody.kbnBody--projectLayout:not(.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME}) .${PAGE_OVERLAY_CSS_CLASSNAME} { - top: ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation}; - height: calc(100% - (${({ theme: { eui } }) => eui.euiHeaderHeightCompensation})); - } `; const setDocumentBodyOverlayIsVisible = () => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx index d3007d0d6346a..c8156c455d7e2 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx @@ -42,12 +42,12 @@ const FlyoutPaneComponent: React.FC = ({
= ({ settings, actionErrors, }) => { + const { euiTheme } = useEuiTheme(); const { links: { watchActionsConfigurationMap }, toasts, @@ -96,8 +100,15 @@ export const WatchActionsAccordion: React.FunctionComponent = ({ initialIsOpen={action.isNew || hasErrors} // If an action contains errors in edit mode, we want the accordion open so the user is aware key={action.id} id={action.id} - className="euiAccordionForm" - buttonContentClassName="euiAccordionForm__button" + borders="horizontal" + buttonProps={{ + paddingSize: 'm', + css: css` + &:hover { + text-decoration: none; + } + `, + }} data-test-subj="watchActionAccordion" buttonContent={ @@ -105,7 +116,7 @@ export const WatchActionsAccordion: React.FunctionComponent = ({ - +
{action.typeName}
 @@ -115,7 +126,18 @@ export const WatchActionsAccordion: React.FunctionComponent = ({