Upgrade EUI to v43.1.1

package.json

@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35",
     "@elastic/ems-client": "8.0.0",
-    "@elastic/eui": "41.2.3",
+    "@elastic/eui": "43.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/elastic-eslint-config-kibana/.eslintrc.js

@@ -91,8 +91,6 @@ module.exports = {
         ...[
           '@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',
         ].map(from => ({
           from,
           to: false,

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

@@ -70,8 +70,8 @@ module.exports = (_, argv) => {
         '@elastic/eui/dist/eui_charts_theme',
         '@elastic/eui/lib/services',
         '@elastic/eui/lib/services/format',
-        '@elastic/eui/dist/eui_theme_amsterdam_light.json',
-        '@elastic/eui/dist/eui_theme_amsterdam_dark.json',
+        '@elastic/eui/dist/eui_theme_light.json',
+        '@elastic/eui/dist/eui_theme_dark.json',
         '@elastic/numeral',
         '@emotion/react',
         'classnames',
@@ -96,8 +96,8 @@ module.exports = (_, argv) => {
         'styled-components',
         'tslib',
       ],
-      'kbn-ui-shared-deps-npm.v8.dark': ['@elastic/eui/dist/eui_theme_amsterdam_dark.css'],
-      'kbn-ui-shared-deps-npm.v8.light': ['@elastic/eui/dist/eui_theme_amsterdam_light.css'],
+      'kbn-ui-shared-deps-npm.v8.dark': ['@elastic/eui/dist/eui_theme_dark.css'],
+      'kbn-ui-shared-deps-npm.v8.light': ['@elastic/eui/dist/eui_theme_light.css'],
     },
     context: __dirname,
     devtool: 'cheap-source-map',

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

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

src/core/public/core_app/styles/_globals_v8dark.scss

@@ -2,8 +2,8 @@
 //
 // prepended to all .scss imports (from JS, when v8dark theme selected)
 
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_dark';
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
+@import '@elastic/eui/src/themes/amsterdam/colors_dark';
+@import '@elastic/eui/src/themes/amsterdam/globals';
 
 @import './mixins';
 

src/core/public/core_app/styles/_globals_v8light.scss

@@ -2,8 +2,8 @@
 //
 // prepended to all .scss imports (from JS, when v8light theme selected)
 
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light';
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
+@import '@elastic/eui/src/themes/amsterdam/colors_light';
+@import '@elastic/eui/src/themes/amsterdam/globals';
 
 @import './mixins';
 

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -20,6 +20,17 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiAccordion.isLoading': i18n.translate('core.euiAccordion.isLoading', {
       defaultMessage: 'Loading',
     }),
+    'euiAutoRefresh.autoRefreshLabel': i18n.translate('core.euiAutoRefresh.autoRefreshLabel', {
+      defaultMessage: 'Auto refresh',
+    }),
+    'euiAutoRefresh.buttonLabelOff': i18n.translate('core.euiAutoRefresh.buttonLabelOff', {
+      defaultMessage: 'Auto refresh is off',
+    }),
+    'euiAutoRefresh.buttonLabelOn': ({ prettyInterval }: EuiValues) =>
+      i18n.translate('core.euiAutoRefresh.buttonLabelOn', {
+        defaultMessage: 'Auto refresh is on and set to {prettyInterval}',
+        values: { prettyInterval },
+      }),
     'euiBasicTable.selectAllRows': i18n.translate('core.euiBasicTable.selectAllRows', {
       defaultMessage: 'Select all rows',
       description: 'ARIA and displayed label on a checkbox to select all table rows',
@@ -495,6 +506,42 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Update needed: {title}',
         values: { title },
       }),
+    'euiDisplaySelector.buttonText': i18n.translate('core.euiDisplaySelector.buttonText', {
+      defaultMessage: 'Display options',
+    }),
+    'euiDisplaySelector.resetButtonText': i18n.translate(
+      'core.euiDisplaySelector.resetButtonText',
+      {
+        defaultMessage: 'Reset to default',
+      }
+    ),
+    'euiDisplaySelector.densityLabel': i18n.translate('core.euiDisplaySelector.densityLabel', {
+      defaultMessage: 'Density',
+    }),
+    'euiDisplaySelector.labelCompact': i18n.translate('core.euiDisplaySelector.labelCompact', {
+      defaultMessage: 'Compact',
+    }),
+    'euiDisplaySelector.labelNormal': i18n.translate('core.euiDisplaySelector.labelNormal', {
+      defaultMessage: 'Normal',
+    }),
+    'euiDisplaySelector.labelExpanded': i18n.translate('core.euiDisplaySelector.labelExpanded', {
+      defaultMessage: 'Expanded',
+    }),
+    'euiDisplaySelector.labelSingle': i18n.translate('core.euiDisplaySelector.labelSingle', {
+      defaultMessage: 'Single',
+    }),
+    'euiDisplaySelector.labelAuto': i18n.translate('core.euiDisplaySelector.labelAuto', {
+      defaultMessage: 'Auto',
+    }),
+    'euiDisplaySelector.labelCustom': i18n.translate('core.euiDisplaySelector.labelCustom', {
+      defaultMessage: 'Custom',
+    }),
+    'euiDisplaySelector.rowHeightLabel': i18n.translate('core.euiDisplaySelector.rowHeightLabel', {
+      defaultMessage: 'Row height',
+    }),
+    'euiDisplaySelector.lineCountLabel': i18n.translate('core.euiDisplaySelector.lineCountLabel', {
+      defaultMessage: 'Lines per row',
+    }),
     'euiFieldPassword.showPassword': i18n.translate('core.euiFieldPassword.showPassword', {
       defaultMessage:
         'Show password as plain text. Note: this will visually expose your password on the screen.',
@@ -708,32 +755,13 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'hide',
       }
     ),
-    'euiPagination.nextPage': ({ page }: EuiValues) =>
-      i18n.translate('core.euiPagination.nextPage', {
-        defaultMessage: 'Next page, {page}',
-        values: { page },
-      }),
     'euiPagination.pageOfTotalCompressed': ({ page, total }: EuiValues) => (
       <FormattedMessage
         id="core.euiPagination.pageOfTotalCompressed"
         defaultMessage="{page} of {total}"
         values={{ page, total }}
       />
     ),
-    'euiPagination.previousPage': ({ page }: EuiValues) =>
-      i18n.translate('core.euiPagination.previousPage', {
-        defaultMessage: 'Previous page, {page}',
-        values: { page },
-      }),
-    'euiPagination.disabledPreviousPage': i18n.translate(
-      'core.euiPagination.disabledPreviousPage',
-      {
-        defaultMessage: 'Previous page',
-      }
-    ),
-    'euiPagination.disabledNextPage': i18n.translate('core.euiPagination.disabledNextPage', {
-      defaultMessage: 'Next page',
-    }),
     'euiPagination.firstRangeAriaLabel': ({ lastPage }: EuiValues) =>
       i18n.translate('core.euiPagination.firstRangeAriaLabel', {
         defaultMessage: 'Skipping pages 2 to {lastPage}',
@@ -744,6 +772,21 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Skipping pages {firstPage} to {lastPage}',
         values: { firstPage, lastPage },
       }),
+    'euiPagination.last': i18n.translate('core.euiPagination.last', {
+      defaultMessage: 'Last',
+    }),
+    'euiPagination.page': i18n.translate('core.euiPagination.page', {
+      defaultMessage: 'Page',
+    }),
+    'euiPagination.of': i18n.translate('core.euiPagination.of', {
+      defaultMessage: 'of',
+    }),
+    'euiPagination.collection': i18n.translate('core.euiPagination.collection', {
+      defaultMessage: 'collection',
+    }),
+    'euiPagination.fromEndLabel': i18n.translate('core.euiPagination.fromEndLabel', {
+      defaultMessage: 'from end',
+    }),
     'euiPaginationButton.longPageString': ({ page, totalPages }: EuiValues) =>
       i18n.translate('core.euiPaginationButton.longPageString', {
         defaultMessage: 'Page {page} of {totalPages}',
@@ -756,6 +799,24 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         values: { page },
         description: 'Text to describe the current page of a paginated section',
       }),
+    'euiPaginationButtonArrow.nextPage': i18n.translate('core.euiPaginationButtonArrow.nextPage', {
+      defaultMessage: 'Next page',
+    }),
+    'euiPaginationButtonArrow.previousPage': i18n.translate(
+      'core.euiPaginationButtonArrow.previousPage',
+      {
+        defaultMessage: 'Previous page',
+      }
+    ),
+    'euiPaginationButtonArrow.firstPage': i18n.translate(
+      'core.euiPaginationButtonArrow.firstPage',
+      {
+        defaultMessage: 'First page',
+      }
+    ),
+    'euiPaginationButtonArrow.lastPage': i18n.translate('core.euiPaginationButtonArrow.lastPage', {
+      defaultMessage: 'Last page',
+    }),
     'euiPinnableListGroup.pinExtraActionLabel': i18n.translate(
       'core.euiPinnableListGroup.pinExtraActionLabel',
       {
@@ -811,20 +872,19 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiRecentlyUsed.legend': i18n.translate('core.euiRecentlyUsed.legend', {
       defaultMessage: 'Recently used date ranges',
     }),
-    'euiRefreshInterval.fullDescription': ({ optionValue, optionText }: EuiValues) =>
-      i18n.translate('core.euiRefreshInterval.fullDescription', {
-        defaultMessage: 'Refresh interval currently set to {optionValue} {optionText}.',
-        values: { optionValue, optionText },
-      }),
     'euiRefreshInterval.legend': i18n.translate('core.euiRefreshInterval.legend', {
       defaultMessage: 'Refresh every',
     }),
-    'euiRefreshInterval.start': i18n.translate('core.euiRefreshInterval.start', {
-      defaultMessage: 'Start',
-    }),
-    'euiRefreshInterval.stop': i18n.translate('core.euiRefreshInterval.stop', {
-      defaultMessage: 'Stop',
-    }),
+    'euiRefreshInterval.fullDescriptionOff': ({ optionValue, optionText }: EuiValues) =>
+      i18n.translate('core.euiRefreshInterval.fullDescriptionOff', {
+        defaultMessage: 'Refresh is off, interval set to {optionValue} {optionText}.',
+        values: { optionValue, optionText },
+      }),
+    'euiRefreshInterval.fullDescriptionOn': ({ optionValue, optionText }: EuiValues) =>
+      i18n.translate('core.euiRefreshInterval.fullDescriptionOn', {
+        defaultMessage: 'Refresh is on, interval set to {optionValue} {optionText}.',
+        values: { optionValue, optionText },
+      }),
     'euiRelativeTab.fullDescription': ({ unit }: EuiValues) =>
       i18n.translate('core.euiRelativeTab.fullDescription', {
         defaultMessage: 'The unit is changeable. Currently set to {unit}.',
@@ -1028,28 +1088,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Step {number} is loading',
         values: { number },
       }),
-    'euiStyleSelector.buttonText': i18n.translate('core.euiStyleSelector.buttonText', {
-      defaultMessage: 'Density',
-    }),
-    'euiStyleSelector.buttonLegend': i18n.translate('core.euiStyleSelector.buttonLegend', {
-      defaultMessage: 'Select the display density for the data grid',
-    }),
-    'euiStyleSelector.labelExpanded': i18n.translate('core.euiStyleSelector.labelExpanded', {
-      defaultMessage: 'Expanded density',
-    }),
-    'euiStyleSelector.labelNormal': i18n.translate('core.euiStyleSelector.labelNormal', {
-      defaultMessage: 'Normal density',
-    }),
-    'euiStyleSelector.labelCompact': i18n.translate('core.euiStyleSelector.labelCompact', {
-      defaultMessage: 'Compact density',
-    }),
-    'euiSuperDatePicker.showDatesButtonLabel': i18n.translate(
-      'core.euiSuperDatePicker.showDatesButtonLabel',
-      {
-        defaultMessage: 'Show dates',
-        description: 'Displayed in a button that shows date picker',
-      }
-    ),
     'euiSuperSelect.screenReaderAnnouncement': i18n.translate(
       'core.euiSuperSelect.screenReaderAnnouncement',
       {

src/core/public/theme/convert_core_theme.ts

@@ -6,19 +6,20 @@
  * Side Public License, v 1.
  */
 
-import type { EuiThemeSystem, EuiThemeColorMode } from '@elastic/eui';
+import { COLOR_MODES_STANDARD } from '@elastic/eui';
+import type { EuiThemeSystem, EuiThemeColorModeStandard } from '@elastic/eui';
 import type { CoreTheme } from './types';
 
 /** @internal */
 export interface EuiTheme {
-  colorMode: EuiThemeColorMode;
+  colorMode: EuiThemeColorModeStandard;
   euiThemeSystem?: EuiThemeSystem;
 }
 
 /** @internal */
 export const convertCoreTheme = (coreTheme: CoreTheme): EuiTheme => {
   const { darkMode } = coreTheme;
   return {
-    colorMode: darkMode ? 'DARK' : 'LIGHT',
+    colorMode: darkMode ? COLOR_MODES_STANDARD.dark : COLOR_MODES_STANDARD.light,
   };
 };

src/core/public/theme/core_theme_provider.test.tsx

@@ -11,12 +11,13 @@ import { act } from 'react-dom/test-utils';
 import type { ReactWrapper } from 'enzyme';
 import { of, BehaviorSubject } from 'rxjs';
 import { useEuiTheme } from '@elastic/eui';
+import type { UseEuiTheme } from '@elastic/eui';
 import { mountWithIntl } from '@kbn/test/jest';
 import { CoreThemeProvider } from './core_theme_provider';
 import type { CoreTheme } from './types';
 
 describe('CoreThemeProvider', () => {
-  let euiTheme: ReturnType<typeof useEuiTheme> | undefined;
+  let euiTheme: UseEuiTheme | undefined;
 
   beforeEach(() => {
     euiTheme = undefined;

src/core/public/theme/core_theme_provider.tsx

@@ -9,7 +9,9 @@
 import React, { FC, useMemo } from 'react';
 import { Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
-import { EuiThemeProvider } from '@elastic/eui';
+import createCache from '@emotion/cache';
+import { EuiProvider } from '@elastic/eui';
+import { EUI_STYLES_GLOBAL } from '../../utils';
 import { CoreTheme } from './types';
 import { convertCoreTheme } from './convert_core_theme';
 
@@ -21,16 +23,26 @@ interface CoreThemeProviderProps {
   theme$: Observable<CoreTheme>;
 }
 
+const emotionCache = createCache({
+  key: 'eui-styles',
+  container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
+});
+
 /**
- * Wrapper around `EuiThemeProvider` converting (and exposing) core's theme to EUI theme.
+ * Wrapper around `EuiProvider` converting (and exposing) core's theme to EUI theme.
  * @internal Only meant to be used within core for internal usages of EUI/React
  */
 export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({ theme$, children }) => {
   const coreTheme = useObservable(theme$, defaultTheme);
   const euiTheme = useMemo(() => convertCoreTheme(coreTheme), [coreTheme]);
   return (
-    <EuiThemeProvider colorMode={euiTheme.colorMode} theme={euiTheme.euiThemeSystem}>
+    <EuiProvider
+      modify={{ LIGHT: { colors: { primary: '#FF0000' } } }}
+      colorMode={euiTheme.colorMode}
+      theme={euiTheme.euiThemeSystem}
+      cache={emotionCache}
+    >
       {children}
-    </EuiThemeProvider>
+    </EuiProvider>
   );
 };

src/core/server/rendering/views/template.tsx

@@ -8,6 +8,7 @@
 
 import React, { FunctionComponent, createElement } from 'react';
 
+import { EUI_STYLES_GLOBAL } from '../../../utils';
 import { RenderingMetadata } from '../types';
 import { Fonts } from './fonts';
 import { Styles } from './styles';
@@ -42,6 +43,8 @@ export const Template: FunctionComponent<Props> = ({
         <link rel="icon" type="image/svg+xml" href={`${uiPublicUrl}/favicons/favicon.svg`} />
         <meta name="theme-color" content="#ffffff" />
         <meta name="color-scheme" content="light dark" />
+        {/* Inject EUI reset and global styles before all other component styles */}
+        <meta name={EUI_STYLES_GLOBAL} />
         <Styles darkMode={darkMode} stylesheetPaths={stylesheetPaths} />
 
         {/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}

src/core/utils/index.ts

@@ -8,3 +8,4 @@
 
 export { DEFAULT_APP_CATEGORIES } from './default_app_categories';
 export { APP_WRAPPER_CLASS } from './app_wrapper_class';
+export { EUI_STYLES_GLOBAL } from './meta';

src/core/utils/meta.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const EUI_STYLES_GLOBAL = 'eui-styles-global';

src/dev/license_checker/config.ts

@@ -76,6 +76,6 @@ 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@41.2.3': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@43.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };