Upgrade EUI to v93.2.0 (#177361)

`v93.1.1`⏩ `v93.2.0` --- - Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new `hasEmbellish` prop (defaults to false) ([#7521](https://github.com/elastic/eui/pull/7521)) - Added `diff` glyph to `EuiIcon` ([#7520](https://github.com/elastic/eui/pull/7520)) - Added `newChat` glyph to `EuiIcon` ([#7524](https://github.com/elastic/eui/pull/7524)) **Bug fixes** - Fixed `EuiSideNav` not correctly typing the `items` prop as required ([#7521](https://github.com/elastic/eui/pull/7521)) - Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering in some SSR environments, particularly Next.js v13 and up ([#7525](https://github.com/elastic/eui/pull/7525)) - Fixed `EuiDataGrid` component to clean up timer from side effect on unmount ([#7534](https://github.com/elastic/eui/pull/7534)) **Accessibility** - Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles if no heading or mobile title exists ([#7521](https://github.com/elastic/eui/pull/7521)) **CSS-in-JS conversions** - Converted `EuiSideNav` to Emotion; Removed the following Sass variables: ([#7521](https://github.com/elastic/eui/pull/7521)) - `$euiSideNavEmphasizedBackgroundColor` - `$euiSideNavRootTextcolor` - `$euiSideNavBranchTextcolor` - `$euiSideNavSelectedTextcolor` - `$euiSideNavDisabledTextcolor` - Removed the `euiSideNavEmbellish` Sass mixin. Use the new `EuiPageSidebar` `hasEmbellish` prop instead ([#7521](https://github.com/elastic/eui/pull/7521)) - Added a new memoization/performance optimization utility for CSS-in-JS styles ([#7529](https://github.com/elastic/eui/pull/7529))
2025-04-23 17:28:26 -04:00 · 2024-02-23 13:41:44 -08:00 · 2024-02-23 13:41:44 -08:00 · 7481923be4
commit 7481923be4
parent 79d085ed9c
13 changed files with 34 additions and 47 deletions
--- a/package.json
+++ b/package.json
@ -106,7 +106,7 @@
    "@elastic/ecs": "^8.11.1",
    "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
    "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "93.1.1",
+    "@elastic/eui": "93.2.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "1.2.1",
    "@elastic/numeral": "^2.5.1",
--- a/packages/core/i18n/core-i18n-browser-internal/src/snapshots/i18n_service.test.tsx.snap
+++ b/packages/core/i18n/core-i18n-browser-internal/src/snapshots/i18n_service.test.tsx.snap
@ -303,6 +303,7 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiSelectableTemplateSitewide.noResults": "No results available",
          "euiSelectableTemplateSitewide.onFocusBadgeGoTo": "Go to",
          "euiSelectableTemplateSitewide.searchPlaceholder": "Search for anything...",
+          "euiSideNav.mobileToggleAriaLabel": "Toggle navigation",
          "euiSkeletonLoading.loadedAriaText": [Function],
          "euiSkeletonLoading.loadingAriaText": [Function],
          "euiStat.loadingText": "Statistic is loading",
--- a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
+++ b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@ -1544,6 +1544,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
        defaultMessage: 'Search for anything...',
      }
    ),
+    'euiSideNav.mobileToggleAriaLabel': i18n.translate('core.euiSideNav.mobileToggleAriaLabel', {
+      defaultMessage: 'Toggle navigation',
+    }),
    'euiStat.loadingText': i18n.translate('core.euiStat.loadingText', {
      defaultMessage: 'Statistic is loading',
    }),
--- a/packages/shared-ux/page/solution_nav/src/snapshots/solution_nav.test.tsx.snap
+++ b/packages/shared-ux/page/solution_nav/src/snapshots/solution_nav.test.tsx.snap
@ -36,7 +36,7 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
      color="transparent"
      paddingSize="s"
    >
-      <EuiSideNav
+      <EuiSideNavClass
        aria-hidden={true}
        aria-labelledby="SolutionNav_generated-id_heading"
        data-test-subj="DTS"
@ -124,7 +124,7 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
    <EuiSpacer
      size="l"
    />
-    <EuiSideNav
+    <EuiSideNavClass
      aria-hidden={true}
      aria-labelledby="SolutionNav_generated-id_heading"
      data-test-subj="DTS"
@ -227,7 +227,7 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
      color="transparent"
      paddingSize="s"
    >
-      <EuiSideNav
+      <EuiSideNavClass
        aria-hidden={true}
        aria-labelledby="SolutionNav_generated-id_heading"
        items={
@ -314,7 +314,7 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
    <EuiSpacer
      size="l"
    />
-    <EuiSideNav
+    <EuiSideNavClass
      aria-hidden={true}
      aria-labelledby="SolutionNav_generated-id_heading"
      items={
@ -416,7 +416,7 @@ exports[`SolutionNav accepts canBeCollapsed prop 2`] = `
      color="transparent"
      paddingSize="s"
    >
-      <EuiSideNav
+      <EuiSideNavClass
        aria-hidden={false}
        aria-labelledby="SolutionNav_generated-id_heading"
        items={
@ -503,7 +503,7 @@ exports[`SolutionNav accepts canBeCollapsed prop 2`] = `
    <EuiSpacer
      size="l"
    />
-    <EuiSideNav
+    <EuiSideNavClass
      aria-hidden={false}
      aria-labelledby="SolutionNav_generated-id_heading"
      items={
@ -672,7 +672,7 @@ exports[`SolutionNav renders 1`] = `
      color="transparent"
      paddingSize="s"
    >
-      <EuiSideNav
+      <EuiSideNavClass
        aria-hidden={true}
        aria-labelledby="SolutionNav_generated-id_heading"
        items={
@ -759,7 +759,7 @@ exports[`SolutionNav renders 1`] = `
    <EuiSpacer
      size="l"
    />
-    <EuiSideNav
+    <EuiSideNavClass
      aria-hidden={true}
      aria-labelledby="SolutionNav_generated-id_heading"
      items={
@ -866,7 +866,7 @@ exports[`SolutionNav renders with icon 1`] = `
      color="transparent"
      paddingSize="s"
    >
-      <EuiSideNav
+      <EuiSideNavClass
        aria-hidden={true}
        aria-labelledby="SolutionNav_generated-id_heading"
        items={
@ -958,7 +958,7 @@ exports[`SolutionNav renders with icon 1`] = `
    <EuiSpacer
      size="l"
    />
-    <EuiSideNav
+    <EuiSideNavClass
      aria-hidden={true}
      aria-labelledby="SolutionNav_generated-id_heading"
      items={
--- 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
@ -53,6 +53,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
  pageSideBarProps={
    Object {
      "className": "kbnSolutionNav__sidebar css-c34ez9",
+      "hasEmbellish": true,
      "minWidth": undefined,
      "paddingSize": "none",
    }
@ -113,6 +114,7 @@ exports[`WithSolutionNav with children 1`] = `
  pageSideBarProps={
    Object {
      "className": "kbnSolutionNav__sidebar css-c34ez9",
+      "hasEmbellish": true,
      "minWidth": undefined,
      "paddingSize": "none",
    }
--- a/packages/shared-ux/page/solution_nav/src/solution_nav.scss
+++ b/packages/shared-ux/page/solution_nav/src/solution_nav.scss
@ -1,14 +1,15 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-@import '@elastic/eui/src/components/side_nav/mixins';
@import 'variables';

 // Put the page background color in the flyout version too
 .kbnSolutionNav__flyout {
  background-color: $euiPageBackgroundColor;
+
+  .kbnSolutionNav {
+    flex: auto; // Override default EuiPageSideBar flex CSS when in a flyout
+  }
 }

 .kbnSolutionNav {
-  @include euiSideNavEmbellish;
  @include euiYScroll;

  display: flex;
--- a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
@ -25,6 +25,7 @@ import {
  useIsWithinMinBreakpoint,
  useEuiTheme,
  useEuiThemeCSSVariables,
+  EuiPageSidebar,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@ -234,11 +235,11 @@ export const SolutionNav: FC<SolutionNavProps> = ({
              className="kbnSolutionNav__flyout"
              hideCloseButton={!canBeCollapsed}
            >
-              <div className={sideNavClasses}>
+              <EuiPageSidebar className={sideNavClasses} hasEmbellish={true}>
                {titleText}
                <EuiSpacer size="l" />
                {sideNavContent}
-              </div>
+              </EuiPageSidebar>
            </EuiFlyout>
          )}
          {canBeCollapsed && (
--- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
@ -76,6 +76,7 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
      ...props.pageSideBarProps,
      minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,
      className: sideBarClasses,
+      hasEmbellish: !isSidebarShrunk,
    };

    return (
--- 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.5.1': ['Elastic License 2.0'],
-  '@elastic/eui@93.1.1': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@93.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
  '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
--- a/src/plugins/kibana_react/public/page_template/solution_nav/snapshots/solution_nav.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/snapshots/solution_nav.test.tsx.snap
@ -2,7 +2,7 @@

 exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
 <Fragment>
-  <EuiSideNav
+  <EuiSideNavClass
    aria-hidden={true}
    className="kbnPageTemplateSolutionNav kbnPageTemplateSolutionNav--hidden"
    data-test-subj="DTS"
@ -68,12 +68,6 @@ exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
        },
      ]
    }
-    mobileBreakpoints={
-      Array [
-        "xs",
-        "s",
-      ]
-    }
    mobileTitle={
      <React.Fragment>
        <FormattedMessage
@ -97,7 +91,7 @@ exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `

 exports[`KibanaPageTemplateSolutionNav renders 1`] = `
 <Fragment>
-  <EuiSideNav
+  <EuiSideNavClass
    aria-hidden={true}
    className="kbnPageTemplateSolutionNav kbnPageTemplateSolutionNav--hidden"
    heading={
@ -162,12 +156,6 @@ exports[`KibanaPageTemplateSolutionNav renders 1`] = `
        },
      ]
    }
-    mobileBreakpoints={
-      Array [
-        "xs",
-        "s",
-      ]
-    }
    mobileTitle={
      <React.Fragment>
        <FormattedMessage
@ -191,7 +179,7 @@ exports[`KibanaPageTemplateSolutionNav renders 1`] = `

 exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
 <Fragment>
-  <EuiSideNav
+  <EuiSideNavClass
    aria-hidden={true}
    className="kbnPageTemplateSolutionNav kbnPageTemplateSolutionNav--hidden"
    heading={
@ -260,12 +248,6 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
        },
      ]
    }
-    mobileBreakpoints={
-      Array [
-        "xs",
-        "s",
-      ]
-    }
    mobileTitle={
      <React.Fragment>
        <KibanaPageTemplateSolutionNavAvatar
--- a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
@ -1,13 +1,9 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-@import '@elastic/eui/src/components/side_nav/mixins';
-
 // Put the page background color in the flyout version too
 .kbnPageTemplateSolutionNav__flyout {
  background-color: $euiPageBackgroundColor;
 }

 .kbnPageTemplateSolutionNav {
-  @include euiSideNavEmbellish;
  @include euiYScroll;

  @include euiBreakpoint('m' ,'l', 'xl') {
--- a/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx
+++ b/x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx
@ -35,7 +35,7 @@ const StyledKibanaPageTemplate = styled(KibanaPageTemplate)<
    theme: EuiThemeComputed; // using computed EUI theme to be consistent with user profile theming
  }
 >`
-  .kbnSolutionNav {
+  .kbnSolutionNav__sidebar:not(.kbnSolutionNav__sidebar--shrink) {
    background-color: ${({ theme }) => theme.colors.emptyShade};
  }

--- a/yarn.lock
+++ b/yarn.lock
@ -1743,10 +1743,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@93.1.1":
-  version "93.1.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-93.1.1.tgz#03c9667456664978c3477abef52afd6aceb48ebf"
-  integrity sha512-YnmNST8PmgAyeahDFTUTpToiBAc6gOyK/RSSqx6NTxCmUCwXnV7Oog9TUHlQ8tYGLjfFXrAja6Msy0X2VuxHOA==
+"@elastic/eui@93.2.0":
+  version "93.2.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-93.2.0.tgz#ebe74c4aefcf78cd72a8db7332666a7aa0681954"
+  integrity sha512-YPJM+hs1Ouv7Fc04JZiEOT5nCNBMFKsQwKmmGqzEwpMDsXpx6NKT0s0AlRO43JabTWBHL9yIRE4aORhAzH6pBQ==
  dependencies:
    "@hello-pangea/dnd" "^16.3.0"
    "@types/lodash" "^4.14.198"