Upgrade EUI to v106.0.0

package.json

@@ -127,9 +127,9 @@
     "@elastic/ecs": "^9.0.0",
     "@elastic/elasticsearch": "9.0.3",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "105.0.0",
-    "@elastic/eui-amsterdam": "npm:@elastic/eui@105.0.0-amsterdam.0",
-    "@elastic/eui-theme-borealis": "3.2.0",
+    "@elastic/eui": "106.0.0",
+    "@elastic/eui-amsterdam": "npm:@elastic/eui@106.0.0-amsterdam.0",
+    "@elastic/eui-theme-borealis": "3.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/monaco-esql": "^3.1.5",
     "@elastic/node-crypto": "^1.2.3",

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

@@ -1474,7 +1474,7 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       }
     ),
     'euiSaturation.ariaLabel': i18n.translate('core.euiSaturation.ariaLabel', {
-      defaultMessage: 'HSV color mode saturation and value 2-axis slider',
+      defaultMessage: 'Select a color',
     }),
     'euiSearchBox.ariaLabel': i18n.translate('core.euiSearchBox.ariaLabel', {
       defaultMessage:
@@ -1836,5 +1836,17 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: '{language} code block:',
         values: { language },
       }),
+    'euiSaturation.roleDescription': i18n.translate('core.euiSaturation.roleDescription', {
+      defaultMessage: 'HSV color mode saturation and value 2-axis slider.',
+    }),
+    'euiHue.ariaValueText': i18n.translate('core.euiHue.ariaValueText', {
+      defaultMessage: 'Hue',
+    }),
+    'euiHue.ariaRoleDescription': i18n.translate('core.euiHue.ariaRoleDescription', {
+      defaultMessage: 'Hue slider',
+    }),
+    'euiColorPicker.selectedColorLabel': i18n.translate('core.euiColorPicker.selectedColorLabel', {
+      defaultMessage: 'Selected color',
+    }),
   };
 };

src/dev/license_checker/config.ts

@@ -88,11 +88,11 @@ 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.6.3': ['Elastic License 2.0'],
-  '@elastic/eui@105.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-amsterdam@105.0.0-amsterdam.0': [
+  '@elastic/eui@106.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-amsterdam@106.0.0-amsterdam.0': [
     'Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0',
   ],
-  '@elastic/eui-theme-borealis@3.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@3.3.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.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@2.5.2': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/platform/packages/shared/kbn-coloring/src/palettes/utils/get_config_from_palette.test.ts

@@ -88,7 +88,7 @@ describe('getConfigFromPalette', () => {
           id: KbnPalette.Complementary,
           steps: [
             { ...commonStep, colorIndex: 8 },
-            { touched: false, type: 'colorCode' as const, colorCode: '#ebeff5' },
+            { touched: false, type: 'colorCode' as const, colorCode: '#f6f9fc' },
             { ...commonStep, colorIndex: 2 },
           ],
         },

src/platform/packages/shared/kbn-data-grid-in-table-search/src/in_table_search_control.tsx

@@ -20,6 +20,10 @@ import { getHighlightColors } from './get_highlight_colors';
 import { getActiveMatchCss } from './get_active_match_css';
 
 const innerCss = css`
+  /* ensure nested search input borders are visible */
+  position: relative;
+  z-index: 1;
+
   .dataGridInTableSearch__matchesCounter {
     font-variant-numeric: tabular-nums;
   }
@@ -30,7 +34,7 @@ const innerCss = css`
   }
 
   .euiFormControlLayout__append {
-    padding-inline: 0 !important;
+    padding-inline-end: 0 !important;
     background: none;
   }
 
@@ -40,6 +44,10 @@ const innerCss = css`
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
+
+    &::after {
+      border-right: 0;
+    }
   }
 `;
 

src/platform/packages/shared/kbn-discover-utils/src/data_types/logs/components/log_level_badge.test.tsx

@@ -30,7 +30,7 @@ describe('LogLevelBadge', () => {
     expect(badge).toBeInTheDocument();
     expect(badge).toHaveTextContent('info');
     expect(getComputedStyle(badge).getPropertyValue('--euiBadgeBackgroundColor')).toEqual(
-      '#90bdff'
+      '#a8caff'
     );
   });
 

src/platform/packages/shared/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.test.ts

@@ -20,10 +20,10 @@ const euiTheme = {
 describe('getLogLevelColor', () => {
   test('should work correctly', () => {
     expect(getLogLevelColor(LogLevelCoalescedValue.debug, euiTheme as EuiThemeComputed)).toBe(
-      '#bdd7ff'
+      '#e8f1ff'
     );
     expect(getLogLevelColor(LogLevelCoalescedValue.info, euiTheme as EuiThemeComputed)).toBe(
-      '#90bdff'
+      '#a8caff'
     );
     expect(getLogLevelColor(LogLevelCoalescedValue.notice, euiTheme as EuiThemeComputed)).toBe(
       '#61a2ff'

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

@@ -10,8 +10,8 @@
 import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
 import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
 
-import { default as borealisLight } from '@elastic/eui/dist/eui_theme_borealis_light.json';
-import { default as borealisDark } from '@elastic/eui/dist/eui_theme_borealis_dark.json';
+import { default as borealisLight } from '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json';
+import { default as borealisDark } from '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json';
 
 const globals: any = typeof window === 'undefined' ? {} : window;
 

src/platform/plugins/shared/discover/public/context_awareness/profile_providers/observability/logs_data_source_profile/profile.test.ts

@@ -179,7 +179,7 @@ describe('logsDataSourceProfileProvider', () => {
       });
 
       expect(getRowIndicator).toBeDefined();
-      expect(getRowIndicator?.(row, euiTheme)).toEqual({ color: '#90bdff', label: 'Info' });
+      expect(getRowIndicator?.(row, euiTheme)).toEqual({ color: '#a8caff', label: 'Info' });
     });
 
     it('should not return a color for a missing log level in the document', () => {

src/platform/plugins/shared/unified_search/public/filter_bar/filter_button_group/filter_button_group.tsx

@@ -60,7 +60,7 @@ const filterButtonStyles = {
         content: "''",
         position: 'absolute',
         inset: 0,
-        border: `${euiTheme.border.thin} solid ${euiTheme.colors.borderBasePlain}`,
+        border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,
         borderRadius: 'inherit',
         pointerEvents: 'none',
       },

x-pack/platform/plugins/private/global_search_bar/public/components/search_bar.tsx

@@ -390,6 +390,7 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
       popoverButtonBreakpoints={['xs', 's']}
       singleSelection={true}
       renderOption={(option) => euiSelectableTemplateSitewideRenderOptions(option, searchValue)}
+      colorModes={chromeStyle !== 'project' ? { search: 'dark', popover: 'global' } : undefined}
       listProps={{
         className: 'eui-yScroll',
         css: css`

x-pack/platform/plugins/shared/maps/public/classes/styles/color_palettes.test.ts

@@ -15,41 +15,41 @@ import {
 describe('getColorPalette', () => {
   test('Should create RGB color ramp', () => {
     expect(getColorPalette('Blues')).toEqual([
-      '#e4eefd',
-      '#d3e3fe',
-      '#c1d8fe',
-      '#afceff',
-      '#9dc3ff',
-      '#8bb8ff',
-      '#77adff',
+      '#d8e7ff',
+      '#c8ddff',
+      '#b8d4ff',
+      '#a8caff',
+      '#98c0ff',
+      '#87b6ff',
+      '#75acff',
       '#61a2ff',
     ]);
   });
 });
 
 describe('getColorRampCenterColor', () => {
   test('Should get center color from color ramp', () => {
-    expect(getColorRampCenterColor('Blues')).toBe('#9dc3ff');
+    expect(getColorRampCenterColor('Blues')).toBe('#98c0ff');
   });
 });
 
 describe('getOrdinalMbColorRampStops', () => {
   test('Should create color stops', () => {
     expect(getOrdinalMbColorRampStops('Blues', 0, 1000, false)).toEqual([
       0,
-      '#e4eefd',
+      '#d8e7ff',
       125,
-      '#d3e3fe',
+      '#c8ddff',
       250,
-      '#c1d8fe',
+      '#b8d4ff',
       375,
-      '#afceff',
+      '#a8caff',
       500,
-      '#9dc3ff',
+      '#98c0ff',
       625,
-      '#8bb8ff',
+      '#87b6ff',
       750,
-      '#77adff',
+      '#75acff',
       875,
       '#61a2ff',
     ]);
@@ -60,19 +60,19 @@ describe('getOrdinalMbColorRampStops', () => {
       0,
       '#61a2ff',
       125,
-      '#77adff',
+      '#75acff',
       250,
-      '#8bb8ff',
+      '#87b6ff',
       375,
-      '#9dc3ff',
+      '#98c0ff',
       500,
-      '#afceff',
+      '#a8caff',
       625,
-      '#c1d8fe',
+      '#b8d4ff',
       750,
-      '#d3e3fe',
+      '#c8ddff',
       875,
-      '#e4eefd',
+      '#d8e7ff',
     ]);
   });
 
@@ -92,13 +92,13 @@ describe('getPercentilesMbColorRampStops', () => {
     ];
     expect(getPercentilesMbColorRampStops('Blues', percentiles, false)).toEqual([
       5567.83,
-      '#dae8fd',
+      '#cee1ff',
       8069,
-      '#bed6fe',
+      '#b5d2ff',
       9581.13,
-      '#a1c5ff',
+      '#9bc2ff',
       11145.5,
-      '#83b3ff',
+      '#80b2ff',
       16958.18,
       '#61a2ff',
     ]);
@@ -116,13 +116,13 @@ describe('getPercentilesMbColorRampStops', () => {
       5567.83,
       '#61a2ff',
       8069,
-      '#83b3ff',
+      '#80b2ff',
       9581.13,
-      '#a1c5ff',
+      '#9bc2ff',
       11145.5,
-      '#bed6fe',
+      '#b5d2ff',
       16958.18,
-      '#dae8fd',
+      '#cee1ff',
     ]);
   });
 });