[8.x] Upgrade EUI to v98.2.1-borealis.1 (#204783)

>[!IMPORTANT]
This PR introduces the Borealis enabled EUI package to `8.x`.
The intention is to support new features being developed that need to
live in `main` as well as `8.x`.


>[!IMPORTANT]
All `8.x` versions should continue to use the current Amsterdam theme.
To ensure this even with upcoming changes to the default theme for EUI,
we're adding `euiThemeAmsterdam` on `EuiProvider` usages manually.

## Description

This PR introduces all previous Borealis related PR changes but excludes
the specific changes to support `@elastic/eui-theme-borealis` as only
Amsterdam is supported as theme in `8.x`.

Previous PRs

- #199993
- #201049
- #202073

---

`v97.3.1`⏩`v98.2.1-borealis.1`

_[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)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([#8247](elastic/eui#8247))

---

# `@elastic/eui`

## [`v98.1.0`](https://github.com/elastic/eui/releases/v98.1.0)

- Updated `EuiBetaBadge` with a new `warning` color variant
([#8177](elastic/eui#8177))

**Accessibility**

- Ensures `autoFocus` on `EuiSelectableList` triggers initial focus
([#8091](elastic/eui#8091))
- Improved the accessibility of `EuiSearchBarFilters` by:
([#8091](elastic/eui#8091))
  - adding a more descriptive `aria-label` to selection filter buttons
- ensuring the selection listbox is initially focused when opening a
selection popover
- Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab
group is a tab stop and tabs can be traversed with arrow keys.
([#8116](elastic/eui#8116))
- Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows
setting a custom screen reader label on the copy button.
([#8176](elastic/eui#8176))

**CSS-in-JS conversions**

- Removed the following global Sass variables:
([#8169](elastic/eui#8169))
  - `$euiButtonMinWidth`
  - `$euiDatePickerCalendarWidth`
- Removed the following Sass animations:
([#8169](elastic/eui#8169))
  - `euiAnimFadeIn`
  - `euiGrow`
  - `focusRingAnimate`
  - `focusRingAnimateLarge`
  - `euiButtonActive`
- Removed the following Sass mixins:
([#8169](elastic/eui#8169))
  - `euiFullHeight`
  - `euiSlightShadowHover`
  - `datePickerArrow`

# Borealis updates

- [Visual Refresh] Fix euiColorFullShade Sass variable mapping
(elastic/eui#8178)

---

# `@elastic/eui`

## [`v98.0.0`](https://github.com/elastic/eui/releases/v98.0.0)

**Bug fixes**

- Fixed an `EuiDataGrid` bug where column actions where not clickable
when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was
used inside a modal ([#8135](elastic/eui#8135))

**Breaking changes**

- Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display
prop. Use `columnCompressed` instead
([#8113](elastic/eui#8113))

# Borealis updates

**Bug fixes**

- Fixed computed border token mapping
(elastic/eui#8170)

examples/data_view_field_editor_example/public/app.tsx

@@ -19,6 +19,7 @@ import {
   EuiSpacer,
   EuiText,
   useGeneratedHtmlId,
+  EuiThemeAmsterdam,
 } from '@elastic/eui';
 import { AppMountParameters } from '@kbn/core/public';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
@@ -136,7 +137,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
   );
 
   return (
-    <EuiProvider>
+    <EuiProvider theme={EuiThemeAmsterdam}>
       <EuiPageTemplate offset={0}>
         <EuiPageTemplate.Header pageTitle="Data view field editor demo" />
         <EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>

examples/error_boundary/public/plugin.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiButton, EuiProvider } from '@elastic/eui';
+import { EuiButton, EuiProvider, EuiThemeAmsterdam } from '@elastic/eui';
 
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -79,7 +79,7 @@ export class ErrorBoundaryExamplePlugin implements Plugin<void, void, SetupDeps>
         // Using the "EuiProvider" here rather than KibanaRenderContextProvider, because KibanaRenderContextProvider
         // wraps KibanaErrorBoundaryProvider and KibanaErrorBoundary and we want to test it directly, not a wrapper.
         ReactDOM.render(
-          <EuiProvider>
+          <EuiProvider theme={EuiThemeAmsterdam}>
             <KibanaErrorBoundaryProvider analytics={core.analytics}>
               <KibanaErrorBoundary>
                 <KibanaPageTemplate>

examples/esql_ast_inspector/public/app.tsx

@@ -8,13 +8,20 @@
  */
 
 import * as React from 'react';
-import { EuiPage, EuiPageBody, EuiPageSection, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageSection,
+  EuiPageHeader,
+  EuiSpacer,
+  EuiThemeAmsterdam,
+} from '@elastic/eui';
 import { EuiProvider } from '@elastic/eui';
 import { EsqlInspector } from './components/esql_inspector';
 
 export const App = () => {
   return (
-    <EuiProvider>
+    <EuiProvider theme={EuiThemeAmsterdam}>
       <EuiPage>
         <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
           <EuiPageHeader paddingSize="s" bottomBorder={true} pageTitle="ES|QL AST Inspector" />

examples/field_formats_example/public/app.tsx

@@ -18,6 +18,7 @@ import {
   EuiProvider,
   EuiSpacer,
   EuiText,
+  EuiThemeAmsterdam,
   EuiTitle,
 } from '@elastic/eui';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
@@ -168,7 +169,7 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
 
 export const App: React.FC<{ deps: Deps }> = (props) => {
   return (
-    <EuiProvider>
+    <EuiProvider theme={EuiThemeAmsterdam}>
       <EuiPageTemplate offset={0}>
         <EuiPageTemplate.Header pageTitle="Field formats examples" />
         <EuiPageTemplate.Section grow={false}>

examples/files_example/public/components/app.tsx

@@ -21,6 +21,7 @@ import {
   EuiIcon,
   EuiButtonIcon,
   EuiLink,
+  EuiThemeAmsterdam,
 } from '@elastic/eui';
 
 import { CoreStart } from '@kbn/core/public';
@@ -133,7 +134,7 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
   ];
 
   return (
-    <EuiProvider>
+    <EuiProvider theme={EuiThemeAmsterdam}>
       <EuiPageTemplate restrictWidth>
         <EuiPageTemplate.Header pageTitle="Files example" />
         <EuiPageTemplate.Section>

examples/partial_results_example/public/app/app.tsx

@@ -17,6 +17,7 @@ import {
   EuiPageTemplate,
   EuiSpacer,
   EuiText,
+  EuiThemeAmsterdam,
 } from '@elastic/eui';
 import type { Datatable } from '@kbn/expressions-plugin/common';
 import { ExpressionsContext } from './expressions_context';
@@ -42,7 +43,7 @@ export function App() {
   }, [expressions]);
 
   return (
-    <EuiProvider>
+    <EuiProvider theme={EuiThemeAmsterdam}>
       <EuiPageTemplate offset={0}>
         <EuiPageTemplate.Header pageTitle="Partial Results Demo" />
         <EuiPageTemplate.Section>

package.json

@@ -117,7 +117,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.16.0",
     "@elastic/ems-client": "8.6.2",
-    "@elastic/eui": "97.3.1",
+    "@elastic/eui": "98.2.1-borealis.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "^1.2.3",
     "@elastic/numeral": "^2.5.1",

packages/kbn-eslint-config/.eslintrc.js

@@ -128,13 +128,14 @@ module.exports = {
           exclude: USES_STYLED_COMPONENTS,
           disallowedMessage: `Prefer using @emotion/react instead. To use styled-components, ensure you plugin is enabled in packages/kbn-babel-preset/styled_components_files.js.`,
         },
-        ...['@elastic/eui/dist/eui_theme_light.json', '@elastic/eui/dist/eui_theme_dark.json'].map(
-          (from) => ({
-            from,
-            to: false,
-            disallowedMessage: `Use "@kbn/ui-theme" to access theme vars.`,
-          })
-        ),
+        ...[
+          '@elastic/eui/dist/eui_theme_amsterdam_light.json',
+          '@elastic/eui/dist/eui_theme_amsterdam_dark.json',
+        ].map((from) => ({
+          from,
+          to: false,
+          disallowedMessage: `Use "@kbn/ui-theme" to access theme vars.`,
+        })),
         {
           from: '@kbn/test/jest',
           to: '@kbn/test-jest-helpers',

packages/react/kibana_context/root/eui_provider.tsx

@@ -11,7 +11,7 @@ import React, { FC, PropsWithChildren, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
 
-import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui';
+import { EuiProvider, EuiProviderProps, euiStylisPrefixer, EuiThemeAmsterdam } from '@elastic/eui';
 import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common';
 import type { UserProfileService } from '@kbn/core-user-profile-browser';
@@ -78,7 +78,16 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
   const globalStyles = globalStylesProp === false ? false : undefined;
 
   return (
-    <EuiProvider {...{ cache, modify, colorMode, globalStyles, utilityClasses: globalStyles }}>
+    <EuiProvider
+      {...{
+        cache,
+        modify,
+        colorMode,
+        globalStyles,
+        utilityClasses: globalStyles,
+        theme: EuiThemeAmsterdam,
+      }}
+    >
       {children}
     </EuiProvider>
   );

src/core/packages/i18n/browser-internal/src/i18n_eui_mapping.tsx

@@ -1822,5 +1822,19 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Select listbox',
       description: 'Accessible label for Super Selects without a visible label.',
     }),
+    'euiFieldValueSelectionFilter.buttonLabelHint': i18n.translate(
+      'core.euiFieldValueSelectionFilter.buttonLabelHint',
+      {
+        defaultMessage: 'Selection',
+      }
+    ),
+    'euiCodeBlockFullScreen.ariaLabel': i18n.translate('core.euiCodeBlockFullScreen.ariaLabel', {
+      defaultMessage: 'Expanded code block',
+    }),
+    'euiCodeBlock.label': ({ language }: EuiValues) =>
+      i18n.translate('core.euiCodeBlock.label', {
+        defaultMessage: '{language} code block:',
+        values: { language },
+      }),
   };
 };

src/dev/license_checker/config.ts

@@ -87,7 +87,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@97.3.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@98.2.1-borealis.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js

@@ -65,8 +65,8 @@ module.exports = (_, argv) => {
         '@elastic/eui/optimize/es/components/provider/nested',
         '@elastic/eui/optimize/es/services',
         '@elastic/eui/optimize/es/services/format',
-        '@elastic/eui/dist/eui_theme_light.json',
-        '@elastic/eui/dist/eui_theme_dark.json',
+        '@elastic/eui/dist/eui_theme_amsterdam_light.json',
+        '@elastic/eui/dist/eui_theme_amsterdam_dark.json',
         '@elastic/numeral',
         '@emotion/cache',
         '@emotion/react',

src/platform/packages/shared/kbn-ui-theme/src/theme.ts

@@ -8,9 +8,9 @@
  */
 
 /* eslint-disable-next-line @kbn/eslint/module_migration */
-import { default as v8Light } from '@elastic/eui/dist/eui_theme_light.json';
+import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
 /* eslint-disable-next-line @kbn/eslint/module_migration */
-import { default as v8Dark } from '@elastic/eui/dist/eui_theme_dark.json';
+import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
 
 const globals: any = typeof window === 'undefined' ? {} : window;
 

src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx

@@ -37,7 +37,7 @@ describe('<ToolbarPopover />', () => {
     const button = component.find('EuiButton');
     expect(button.prop('color')).toBe('text');
     expect(button.prop('css')).toMatchObject({
-      backgroundColor: '#FFF',
+      backgroundColor: '#FFFFFF',
       border: '1px solid #D3DAE6',
       color: '#343741',
     });