tooltip content
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
index da2ae883a92..d5625929f97 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
+++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
@@ -218,8 +218,8 @@ describe('EuiDataGridCellPopover', () => {
openCellPopover('A');
cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
- .should('have.css', 'left', '1px')
- .should('have.css', 'top', '72px')
+ .should('have.css', 'left', '16px')
+ .should('have.css', 'top', '75px')
.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', '75px')
.should('have.css', 'width', '375px');
});
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx
index b8ab7d90267..172c78367dd 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx
+++ b/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: 3px; left: 16px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;"
tabindex="0"
>
-
{
cy.get('[data-popover-open]').should('have.focus');
cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick();
- cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
+ cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
// Should not interefere with column actions popover toggle
cy.wait(250);
@@ -252,8 +252,8 @@ describe('draggable columns', () => {
cy.get('[data-popover-open]').should('have.focus');
cy.get('[data-test-subj=dataGridHeaderCell-b]').realClick();
- cy.get('[data-test-subj=dataGridHeaderCell-b]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
+ cy.get('[data-test-subj=dataGridHeaderCell-b]').should('have.focus');
});
it('should close row cell expansion popovers', () => {
@@ -268,8 +268,8 @@ describe('draggable columns', () => {
cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick({
position: 'right',
});
- cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
+ cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
});
it('should close data grid toolbar popovers', () => {
@@ -278,10 +278,10 @@ describe('draggable columns', () => {
cy.get('[data-test-subj="dataGridColumnSelectorButton"]').realClick();
cy.get('[data-popover-open]').should('have.focus');
- cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick({
- position: 'right',
+ // Click on the toolbar area (outside the popover) to dismiss it
+ cy.get('[data-test-subj="dataGridControls"]').realClick({
+ position: 'center',
});
- cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus');
cy.get('[data-popover-open]').should('not.exist');
});
});
diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
index 78f634bef1b..c187c0900cf 100644
--- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/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: 3px; left: 16px; will-change: transform, opacity; z-index: 2000;"
tabindex="0"
>
-
-
-
-
-
@@ -458,18 +394,9 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
data-popover-open="true"
data-popover-panel="true"
role="dialog"
- style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
+ style="top: 3px; left: 16px; will-change: transform, opacity; z-index: 2000;"
tabindex="0"
>
-
-
-
-
{
it('renders a popover with equal width to the input', () => {
cy.mount(Popover content);
cy.get('[data-popover-panel]')
- .should('have.css', 'left', '0px')
+ .should('have.css', 'left', '16px')
.invoke('outerWidth')
.should('equal', 400);
});
diff --git a/packages/eui/src/components/popover/input_popover.tsx b/packages/eui/src/components/popover/input_popover.tsx
index 7eb6ddf2897..c890916ff2e 100644
--- a/packages/eui/src/components/popover/input_popover.tsx
+++ b/packages/eui/src/components/popover/input_popover.tsx
@@ -65,6 +65,7 @@ export const EuiInputPopover: FunctionComponent = ({
className,
closePopover,
anchorPosition = 'downLeft',
+ offset = 2,
attachToAnchor = true,
repositionToCrossAxis = false,
display = 'block',
@@ -233,6 +234,7 @@ export const EuiInputPopover: FunctionComponent = ({
ref={popoverClassRef}
closePopover={closePopover}
anchorPosition={anchorPosition}
+ offset={offset}
attachToAnchor={attachToAnchor}
repositionToCrossAxis={repositionToCrossAxis}
panelPaddingSize={panelPaddingSize}
diff --git a/packages/eui/src/components/popover/popover.stories.tsx b/packages/eui/src/components/popover/popover.stories.tsx
index 83087604d8b..fcecb919bd4 100644
--- a/packages/eui/src/components/popover/popover.stories.tsx
+++ b/packages/eui/src/components/popover/popover.stories.tsx
@@ -33,8 +33,6 @@ const meta: Meta = {
ownFocus: true,
panelPaddingSize: 'm',
buffer: 16,
- hasArrow: true,
- anchorPosition: 'downCenter',
display: 'inline-block',
repositionToCrossAxis: true,
repositionOnScroll: false,
diff --git a/packages/eui/src/components/popover/popover.test.tsx b/packages/eui/src/components/popover/popover.test.tsx
index 9d4a45dee2e..559023e0a79 100644
--- a/packages/eui/src/components/popover/popover.test.tsx
+++ b/packages/eui/src/components/popover/popover.test.tsx
@@ -335,12 +335,13 @@ describe('EuiPopover', () => {
button={}
closePopover={() => {}}
offset={10}
+ hasArrow={true}
isOpen
/>
);
expect(baseElement.querySelector('[data-popover-panel]')).toHaveStyle({
- top: '26px',
+ top: '18px',
});
});
@@ -357,7 +358,7 @@ describe('EuiPopover', () => {
);
expect(baseElement.querySelector('[data-popover-panel]')).toHaveStyle({
- top: '18px',
+ top: '10px',
});
});
diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx
index 5443fd44cb5..8ff8074d8ce 100644
--- a/packages/eui/src/components/popover/popover.tsx
+++ b/packages/eui/src/components/popover/popover.tsx
@@ -288,9 +288,10 @@ export class EuiPopover extends Component {
isOpen: false,
ownFocus: true,
repositionToCrossAxis: true,
- anchorPosition: 'downCenter',
+ anchorPosition: 'downLeft',
panelPaddingSize: 'm',
- hasArrow: true,
+ hasArrow: false,
+ offset: 3,
display: 'inline-block',
};
@@ -519,6 +520,12 @@ export class EuiPopover extends Component {
forcePosition = true;
}
+ const visualOffset = this.props.attachToAnchor
+ ? offset
+ : this.props.hasArrow
+ ? 16 + offset - 8 // JavaScript offset minus CSS transform
+ : offset; // No penalty for hasArrow: false - let the algorithm choose naturally
+
const {
top,
left,
@@ -531,11 +538,7 @@ export class EuiPopover extends Component {
align: getPopoverAlignFromAnchorPosition(anchorPosition),
anchor: this.button,
popover: this.panel,
- offset: this.props.attachToAnchor
- ? offset
- : this.props.hasArrow
- ? 16 + offset
- : 8 + offset,
+ offset: visualOffset,
arrowConfig: this.props.hasArrow
? { arrowWidth: 16, arrowBuffer: 10 }
: { arrowWidth: 0, arrowBuffer: 0 },
@@ -723,6 +726,14 @@ export class EuiPopover extends Component {
isOpen={this.state.isOpening}
position={this.state.arrowPosition}
isAttached={attachToAnchor}
+ offset={
+ this.props.attachToAnchor
+ ? offset
+ : this.props.hasArrow
+ ? 16 + (offset || 0)
+ : offset || 0
+ }
+ hasArrow={this.props.hasArrow}
className={classNames(panelClassName, panelProps?.className)}
hasShadow={false}
paddingSize={panelPaddingSize}
diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
index 9355dd41bd6..3149e1ee143 100644
--- a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
+++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
@@ -30,10 +30,13 @@ export const openAnimationTiming = 'slow';
* 4. Make the popover lighter on dark mode (too hard to distinguish from plain bgs otherwise), and set a CSS var for the arrow to use
*/
-export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
+export const euiPopoverPanelStyles = (
+ euiThemeContext: UseEuiTheme,
+ hasArrow: boolean = true
+) => {
const { euiTheme, highContrastMode } = euiThemeContext;
- const translateDistance = euiTheme.size.s;
+ const translateDistance = hasArrow ? euiTheme.size.s : 0;
const animationSpeed = euiTheme.animation[openAnimationTiming];
const opacityTransition = `opacity ${euiTheme.animation.bounce} ${animationSpeed}`;
diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx b/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx
index 615d9bb6656..217fffa2a46 100644
--- a/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx
+++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.tsx
@@ -28,6 +28,8 @@ type EuiPopoverPanelInternalProps = {
isOpen?: boolean;
isAttached?: boolean;
position?: EuiPopoverArrowPositions | null;
+ offset?: number;
+ hasArrow?: boolean;
};
/**
@@ -36,12 +38,21 @@ type EuiPopoverPanelInternalProps = {
*/
export const EuiPopoverPanel: FunctionComponent<
EuiPopoverPanelProps & EuiPopoverPanelInternalProps
-> = ({ children, className, isOpen, isAttached, position, ...rest }) => {
+> = ({
+ children,
+ className,
+ isOpen,
+ isAttached,
+ position,
+ offset,
+ hasArrow,
+ ...rest
+}) => {
const classes = classNames('euiPopover__panel', className);
const euiThemeContext = useEuiTheme();
const cssStyles = useMemo(() => {
- const styles = euiPopoverPanelStyles(euiThemeContext);
+ const styles = euiPopoverPanelStyles(euiThemeContext, hasArrow);
const colorMode = euiThemeContext.colorMode.toLowerCase() as Lowercase<
'LIGHT' | 'DARK'
>;
@@ -64,7 +75,7 @@ export const EuiPopoverPanel: FunctionComponent<
styles.hasTransform.hasTransform,
isOpen && position && styles.hasTransform[position],
];
- }, [euiThemeContext, isOpen, position, isAttached]);
+ }, [euiThemeContext, isOpen, position, isAttached, hasArrow]);
return (