Update EUI to 107.0.0

package.json

@@ -126,8 +126,8 @@
     "@elastic/ecs": "^9.0.0",
     "@elastic/elasticsearch": "9.1.1",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "106.7.0",
-    "@elastic/eui-theme-borealis": "3.5.0",
+    "@elastic/eui": "107.0.0",
+    "@elastic/eui-theme-borealis": "3.6.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1",
     "@elastic/monaco-esql": "^3.1.10",

src/dev/license_checker/config.ts

@@ -89,8 +89,8 @@ 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@106.7.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-theme-borealis@3.5.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@107.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@3.6.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/shared_components/color_mapping/components/color_picker/color_swatch.tsx

@@ -102,7 +102,7 @@ export const ColorSwatch = ({
               border-radius: 50%;
               top: 8px;
               border: 3px solid ${euiTheme.euiTheme.colors.emptyShade};
-              ${euiShadowSmall(euiTheme)};
+              ${euiShadowSmall(euiTheme, { border: 'none' })};
               backgroundcolor: ${colorHex};
               cursor: pointer;
             `}

src/platform/packages/shared/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx

@@ -304,7 +304,7 @@ const componentStyles = {
   }),
   fieldItemButton: (themeContext: UseEuiTheme) => {
     const { euiTheme } = themeContext;
-    const boxShadow = euiShadowXSmall(themeContext);
+    const boxShadow = euiShadowXSmall(themeContext, { border: 'none' });
 
     return css({
       width: '100%',

src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/styles.ts

@@ -29,4 +29,8 @@ export const navPanelStyles = ({ euiTheme }: Theme) => css`
   background-color: ${euiTheme.colors.backgroundBaseSubdued};
   height: 100%;
   width: ${PANEL_WIDTH};
+  /* unset default panel floating border */
+  border: none;
+  /* add custom floating border */
+  border-inline-end: 1px solid ${euiTheme.colors.borderBaseFloating};
 `;

src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/tooltip.styles.ts

@@ -14,7 +14,7 @@ export const vislibTooltipStyles = (euiThemeContext: UseEuiTheme) => {
   return css`
     .visTooltip,
     .visTooltip__sizingClone {
-      ${euiShadow(euiThemeContext, 'l')};
+      ${euiShadow(euiThemeContext, 'l', { border: 'none' })};
       border-radius: ${euiTheme.border.radius.medium};
       background-color: ${euiTheme.colors.backgroundBasePlain};
       border: ${euiThemeContext.euiTheme.border.width.thin} solid

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx

@@ -163,7 +163,7 @@ const styles = {
       ${euiFontSize(euiThemeContext, 's')}
       color: ${euiThemeContext.euiTheme.colors.textParagraph};
 
-      ${euiShadow(euiThemeContext)}
+      ${euiShadow(euiThemeContext, 'l', { border: 'none' })}
       background-color: ${euiThemeContext.euiTheme.colors.backgroundBasePlain};
 
       table {

src/platform/plugins/shared/unified_search/public/query_string_input/esql_menu_popover.tsx

@@ -14,6 +14,7 @@ import {
   EuiContextMenuItem,
   EuiContextMenu,
   useEuiScrollBar,
+  useEuiTheme,
 } from '@elastic/eui';
 import { isEqual } from 'lodash';
 import { css } from '@emotion/react';
@@ -45,6 +46,8 @@ export const ESQLMenuPopover: React.FC<ESQLMenuPopoverProps> = ({
   const kibana = useKibana<IUnifiedSearchPluginServices>();
   const { docLinks, http, chrome } = kibana.services;
 
+  const { euiTheme } = useEuiTheme();
+
   const activeSolutionId = useObservable(chrome.getActiveSolutionNavId$());
   const [isESQLMenuPopoverOpen, setIsESQLMenuPopoverOpen] = useState(false);
   const [isLanguageComponentOpen, setIsLanguageComponentOpen] = useState(false);
@@ -255,6 +258,7 @@ export const ESQLMenuPopover: React.FC<ESQLMenuPopoverProps> = ({
 
   const esqlMenuPopoverStyles = css`
     width: 240px;
+    padding: ${euiTheme.size.s};
     max-height: 350px;
     overflow-y: auto;
     ${useEuiScrollBar()};
@@ -277,14 +281,15 @@ export const ESQLMenuPopover: React.FC<ESQLMenuPopoverProps> = ({
         }
         panelProps={{
           ['data-test-subj']: 'esql-menu-popover',
-          css: esqlMenuPopoverStyles,
         }}
         isOpen={isESQLMenuPopoverOpen}
         closePopover={() => setIsESQLMenuPopoverOpen(false)}
-        panelPaddingSize="s"
+        panelPaddingSize="none"
         display="block"
       >
-        <EuiContextMenu initialPanelId={0} panels={esqlContextMenuPanels} />
+        <div css={esqlMenuPopoverStyles}>
+          <EuiContextMenu initialPanelId={0} panels={esqlContextMenuPanels} />
+        </div>
       </EuiPopover>
       <LanguageDocumentationFlyout
         searchInDescription

src/platform/plugins/shared/unified_search/public/typeahead/suggestions_component.tsx

@@ -199,12 +199,14 @@ const ResizableSuggestionsListDiv: React.FC<{
         })}
       >
         <div
-          className={classNames('kbnTypeahead__popover', 'eui-scrollBar', {
+          className={classNames('kbnTypeahead__popover', {
             ['kbnTypeahead__popover--bottom']: isSuggestionsListFittable,
             ['kbnTypeahead__popover--top']: !isSuggestionsListFittable,
           })}
         >
-          {props.children(containerRect)}
+          <div className={classNames('kbnTypeahead__popover-content', 'eui-scrollBar')}>
+            {props.children(containerRect)}
+          </div>
         </div>
       </div>
     </div>
@@ -303,10 +305,15 @@ const suggestionsStyles: EmotionStyles = {
         position: 'relative',
         zIndex: context.euiTheme.levels.menu,
         width: '100%',
-        overflowY: 'auto',
+        overflow: 'hidden',
+
+        '.kbnTypeahead__popover-content': {
+          maxHeight: 'inherit',
+          overflowY: 'auto',
+        },
 
         '&.kbnTypeahead__popover--top': css([
-          euiShadowFlat(context),
+          euiShadowFlat(context, { border: 'none' }),
           {
             borderTopLeftRadius: context.euiTheme.border.radius.medium,
             borderTopRightRadius: context.euiTheme.border.radius.medium,
@@ -315,7 +322,7 @@ const suggestionsStyles: EmotionStyles = {
           },
         ]),
         '&.kbnTypeahead__popover--bottom': css([
-          euiShadow(context),
+          euiShadow(context, 'l', { border: 'none' }),
           {
             borderBottomLeftRadius: context.euiTheme.border.radius.medium,
             borderBottomRightRadius: context.euiTheme.border.radius.medium,

src/platform/test/functional/services/combo_box.ts

@@ -349,10 +349,25 @@ export class ComboBoxService extends FtrService {
    */
   public async closeOptionsList(comboBoxElement: WebElementWrapper): Promise<void> {
     this.log.debug('comboBox.closeOptionsList');
-    const isOptionsListOpen = await this.testSubjects.exists('~comboBoxOptionsList', {
-      timeout: 50,
-    });
-    if (isOptionsListOpen) {
+
+    // wait for potential other animations to finish (e.g. due to closing on selection)
+    const isOptionListClosed = await this.retry.tryWithRetries(
+      'wait for possible ongoing closing of the combobox listbox',
+      async () => {
+        const isOpen = await this.testSubjects.exists('~comboBoxOptionsList', {
+          timeout: 50,
+        });
+
+        return !isOpen;
+      },
+      {
+        timeout: 5000,
+        initialDelay: 500,
+        retryCount: 3,
+      }
+    );
+
+    if (!isOptionListClosed) {
       const input = await comboBoxElement.findByTagName('input');
       await input.pressKeys(this.browser.keys.ESCAPE);
     }

x-pack/platform/plugins/shared/lens/public/shared_components/flyout.styles.ts

@@ -22,7 +22,7 @@ const flyoutOpenCloseAnimation = keyframes`
 
 export const flyoutContainerStyles = (euiThemeContext: UseEuiTheme) => css`
   border-left: ${euiThemeContext.euiTheme.border.thin};
-  ${euiShadow(euiThemeContext, 'xl')};
+  ${euiShadow(euiThemeContext, 'xl', { border: 'none' })};
   position: fixed;
   top: 0;
   bottom: 0;

x-pack/platform/plugins/shared/maps/public/_mapbox_hacks.scss

@@ -11,7 +11,7 @@
   .maplibregl-ctrl-group:not(:empty) {
     @include euiBottomShadowLarge;
     @include mapToolbarButtonGroupBorderRadius;
-    background-color: $euiColorEmptyShade;
+    background-color: $euiColorBackgroundBasePlain;
     transition: transform $euiAnimSpeedNormal ease-in-out;
 
     &:hover {
@@ -20,9 +20,19 @@
 
     > button {
       @include size($euiSizeXL);
+      margin: $euiColorBorderBaseFloating;
+      border: $euiBorderWidthThin solid $euiColorBorderBaseFloating;
+      border-radius: inherit;
+
+      &:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
       + button {
-        border: none;
+        border-top: none;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
       }
     }
   }

x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss

@@ -7,6 +7,7 @@
 
 .mapToolbarOverlay__button,
 .mapToolbarOverlay__buttonGroup {
+  @include euiBottomShadowLarge;
   position: relative;
   transition: transform $euiAnimSpeedNormal ease-in-out, background $euiAnimSpeedNormal ease-in-out;
 
@@ -31,6 +32,17 @@
   }
 }
 
+.mapToolbarOverlay__button {
+  @include size($euiSizeXL);
+  overflow: hidden;
+
+  .euiButtonIcon {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
+}
+
 .mapToolbarOverlay__buttonGroup {
   @include mapToolbarButtonGroupBorderRadius;
   display: flex;

x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx

@@ -45,6 +45,7 @@ export function TimesliderToggleButton(props: Props) {
         iconType="timeslider"
         aria-label={label}
         title={label}
+        color="text"
         isSelected={props.isTimesliderOpen}
         display={props.isTimesliderOpen ? 'fill' : 'empty'}
       />