Remove arrow from EuiPopover for Borealis theme

packages/eui-theme-borealis/changelogs/upcoming/9055.md

@@ -0,0 +1 @@
+- Added theme defaults turning off arrow in `EuiPopover`

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts

@@ -425,6 +425,11 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorBorderStrongRisk: string;
     euiColorBorderStrongDanger: string;
     euiColorBorderStrongText: string;
+    popover: {
+      hasArrow: boolean;
+      anchorPosition: string;
+      offset: number;
+    };
   };
   export default sassVariables;
 }

packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts

@@ -425,6 +425,11 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBorderStrongRisk: string;
     euiColorBorderStrongDanger: string;
     euiColorBorderStrongText: string;
+    popover: {
+      hasArrow: boolean;
+      anchorPosition: string;
+      offset: number;
+    };
   };
   export default sassVariables;
 }

packages/eui-theme-borealis/src/variables/_components.ts

@@ -20,6 +20,7 @@ import {
 import { border_colors } from './colors/_colors_light';
 import { buttons } from './_buttons';
 import { forms } from './_forms';
+import { popover } from './_popover';
 
 const component_colors: _EuiThemeComponentColors = {
   badgeBackground: computed(
@@ -370,6 +371,7 @@ const component_colors: _EuiThemeComponentColors = {
 export const components: _EuiThemeComponents = {
   buttons,
   forms,
+  popover,
   LIGHT: component_colors,
   DARK: {
     ...component_colors,

packages/eui-theme-borealis/src/variables/_popover.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+import { _EuiThemePopover } from '@elastic/eui-theme-common';
+
+export const popover: _EuiThemePopover = {
+  hasArrow: false,
+  anchorPosition: 'downLeft',
+  offset: 4,
+};

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -12,6 +12,7 @@ import {
 } from '../../services/theme/types';
 import { _EuiThemeButton } from './buttons';
 import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
+import { _EuiThemePopover } from './popover';
 
 export type _EuiThemeComponentColors = {
   badgeBackground: ColorModeSwitch;
@@ -157,6 +158,7 @@ export type _EuiThemeComponentColors = {
 export type _EuiThemeComponents = {
   buttons: _EuiThemeButton;
   forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>;
+  popover: _EuiThemePopover;
   /**
    * internal-only key that holds temporary tokens used while migrating themes
    */

packages/eui-theme-common/src/global_styling/variables/index.ts

@@ -19,6 +19,7 @@ export * from './states';
 export * from './typography';
 export * from './buttons';
 export * from './forms';
+export * from './popover';
 export * from './components';
 export * from './flags';
 export * from './overrides';

packages/eui-theme-common/src/global_styling/variables/popover.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 type _EuiThemePopover = {
+  hasArrow: boolean;
+  anchorPosition: string;
+  offset: number;
+};

packages/eui/changelogs/upcoming/9055.md

@@ -0,0 +1 @@
+- Added themable prop support for `EuiPopover`

packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -48,18 +48,9 @@ exports[`CollapsedItemActions custom actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -18px; left: -16px; z-index: 2000;"
+        style="top: 0px; left: -12px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="top: 9px; left: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-left"
-            data-popover-arrow="left"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -162,18 +153,9 @@ exports[`CollapsedItemActions default actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -18px; left: -16px; z-index: 2000;"
+        style="top: 0px; left: -12px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="top: 9px; left: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-left"
-            data-popover-arrow="left"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap

@@ -46,18 +46,9 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; z-index: 2000;"
+        style="top: 12px; left: 0px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="left: 9px; bottom: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-            data-popover-arrow="bottom"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap

@@ -61,18 +61,9 @@ exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="left: 9px; bottom: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-            data-popover-arrow="bottom"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap

@@ -41,18 +41,9 @@ exports[`EuiCodeBlockAnnotation renders 1`] = `
         data-popover-panel="true"
         data-test-subj="euiCodeBlockAnnotationPopover"
         role="dialog"
-        style="top: 16px; left: -18px; z-index: 6001;"
+        style="top: 12px; left: 0px; z-index: 6001;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="left: 9px; bottom: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-            data-popover-arrow="bottom"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap

@@ -61,18 +61,9 @@ exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = `
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: -18px; left: 16px; z-index: 2000;"
+  style="top: 0px; left: 12px; z-index: 2000;"
   tabindex="0"
 >
-  <div
-    class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-    style="top: 9px; right: 100%;"
-  >
-    <div
-      class="euiPopover__arrow emotion-euiPopoverArrow-right"
-      data-popover-arrow="right"
-    />
-  </div>
   <p
     class="emotion-euiScreenReaderOnly"
     id="generated-id"
@@ -192,7 +183,7 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher: popover
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
+  style="top: 4px; left: 0px; z-index: 2000; inline-size: 0px;"
   tabindex="0"
 >
   <p

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap

@@ -47,18 +47,9 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -18px; left: 16px; z-index: 2000;"
+        style="top: 0px; left: 12px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="top: 9px; right: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-right"
-            data-popover-arrow="right"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap

@@ -381,7 +381,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
         class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 4px; left: 0px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div

packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -143,7 +143,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
+        style="top: 4px; left: 0px; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div

packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx

@@ -219,7 +219,7 @@ describe('EuiDataGridCellPopover', () => {
       openCellPopover('A');
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
         .should('have.css', 'left', '1px')
-        .should('have.css', 'top', '72px')
+        .should('have.css', 'top', '76px')
         .should('have.css', 'width', '112px');
     });
 
@@ -229,7 +229,7 @@ describe('EuiDataGridCellPopover', () => {
       openCellPopover('B');
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
         .should('have.css', 'left', '109px')
-        .should('have.css', 'top', '72px')
+        .should('have.css', 'top', '76px')
         .should('have.css', 'width', '375px');
     });
 

packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx

@@ -111,7 +111,7 @@ describe('useCellPopover', () => {
           data-popover-panel="true"
           data-test-subj="euiDataGridExpansionPopover"
           role="dialog"
-          style="top: 0px; left: 0px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;"
+          style="top: 4px; left: 0px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;"
           tabindex="0"
         >
           <p

packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap

@@ -42,18 +42,9 @@ exports[`ColumnActions renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 23px; left: -18px; z-index: 2000;"
+        style="top: 15px; left: 0px; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="left: 9px; bottom: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-            data-popover-arrow="bottom"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap

@@ -54,18 +54,9 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="left: 9px; bottom: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-            data-popover-arrow="bottom"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap

@@ -54,18 +54,9 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="left: 9px; bottom: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-            data-popover-arrow="bottom"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"

packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap

@@ -240,18 +240,9 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
-        <div
-          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
-          style="left: 9px; bottom: 100%;"
-        >
-          <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-            data-popover-arrow="bottom"
-          />
-        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"