Upgrade EUI to v88.2.0 (#165790)

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](elastic/eui#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](elastic/eui#7144))
- `EuiFlyout`s now dynamically set their position, height, and mask
based on the number of fixed headers on the page.
([#7144](elastic/eui#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](elastic/eui#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](elastic/eui#7144))
- Updated `EuiAccordion` with a new `borders` prop
([#7154](elastic/eui#7154))
- Updated `EuiAccordion` with a new `buttonProps.paddingSize` prop
([#7154](elastic/eui#7154))

**Deprecations**

- Deprecated the Sass `euiHeaderAffordForFixed` mixin. Use the new
global CSS `var(--euiFixedHeadersOffset)` variable instead.
([#7144](elastic/eui#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](elastic/eui#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 <efstratia.kalafateli@elastic.co>

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

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

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