Upgrade EUI to v88.2.0

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",

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 () => {

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(),

packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx

@@ -34,7 +34,7 @@ export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
         /* 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);
       `}
     >
       <HeaderActionMenu mounter={headerActionMenuMounter} />

packages/kbn-securitysolution-grouping/src/components/accordion_panel/index.tsx

@@ -41,7 +41,7 @@ const DefaultGroupPanelRenderer = ({
   <div>
     <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
       <EuiFlexItem grow={false} className="eui-textTruncate">
-        <EuiTitle size="xs" className="euiAccordionForm__title">
+        <EuiTitle size="xs">
           <h4 className="eui-textTruncate" title={title}>
             {title}
           </h4>

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<Props> = ({
 }) => {
   let header;
 
-  const [offset, setOffset] = useState<number | undefined>();
-
-  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 ? <h1>{pageTitle}</h1> : undefined;
@@ -70,9 +55,7 @@ export const KibanaPageTemplateInner: FC<Props> = ({
   let sideBar;
   if (pageSideBar) {
     const sideBarProps = { ...pageSideBarProps };
-    if (offset) {
-      sideBarProps.sticky = { offset };
-    }
+    sideBarProps.sticky = true;
     sideBar = <EuiPageTemplate.Sidebar {...sideBarProps}>{pageSideBar}</EuiPageTemplate.Sidebar>;
   }
 

packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx

@@ -57,9 +57,8 @@ export const withSolutionNav = <P extends TemplateProps>(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
     );

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);
+  // 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

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) - #{$additionalOffset});
 }

src/core/public/index.scss

@@ -1,3 +1,3 @@
-@import './variables';
+@import './css_variables';
 @import './mixins';
 @import './styles/index';

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});
-  }
-}