[EuiPopover] Add new configurable repositionToCrossAxis prop

cee-chen · cee-chen · commit 4420a7a1a42d · 2023-09-22T13:42:09.000-07:00
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`CollapsedItemActions render with href and _target provided 1`] = `
   ownFocus={true}
   panelPaddingSize="none"
   popoverRef={[Function]}
+  repositionToCrossAxis={true}
 >
   <EuiContextMenuPanel
     items={
diff --git a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
@@ -57,6 +57,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
         token="euiDataGridHeaderCell.actionsPopoverScreenReaderText"
       />
     }
+    repositionToCrossAxis={true}
   >
     <EuiListGroup
       data-test-subj="dataGridHeaderCellActionGroup-someColumn"
diff --git a/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
     ownFocus={true}
     panelClassName="euiDataGrid__displayPopoverPanel"
     panelPaddingSize="s"
+    repositionToCrossAxis={true}
   >
     <EuiI18n
       defaults={
diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx
@@ -128,6 +128,7 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
   return (
     <EuiPopover
       css={css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth))}
+      repositionToCrossAxis={false}
       ownFocus={false}
       button={
         <EuiResizeObserver onResize={onResize}>
diff --git a/src/components/popover/popover.spec.tsx b/src/components/popover/popover.spec.tsx
@@ -166,4 +166,44 @@ describe('EuiPopover', () => {
       });
     });
   });
+
+  describe('repositionToCrossAxis', () => {
+    beforeEach(() => {
+      // Set a forced viewport with not enough room to render the popover vertically
+      cy.viewport(500, 50);
+    });
+
+    it('allows the popover to reposition to the cross/secondary axis if there is not enough room on the primary axis', () => {
+      cy.mount(
+        <PopoverComponent anchorPosition="downCenter">Test</PopoverComponent>
+      );
+      cy.get('[data-test-subj="togglePopover"]').click();
+
+      // Assert that the popover rendered horizontally and not vertically
+      cy.get('[data-popover-panel]')
+        .invoke('offset')
+        .then(({ top, left }) => {
+          expect(left).to.be.gt(top);
+        });
+    });
+
+    it('does not reposition to the cross axis if set to false', () => {
+      cy.mount(
+        <PopoverComponent
+          anchorPosition="downCenter"
+          repositionToCrossAxis={false}
+        >
+          Test
+        </PopoverComponent>
+      );
+      cy.get('[data-test-subj="togglePopover"]').click();
+
+      // Assert that the popover vertically and not horizontally
+      cy.get('[data-popover-panel]')
+        .invoke('offset')
+        .then(({ top, left }) => {
+          expect(top).to.be.gt(left);
+        });
+    });
+  });
 });
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -163,6 +163,18 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
    * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
    */
   repositionOnScroll?: boolean;
+  /**
+   * By default, popovers will attempt to position themselves along the initial
+   * axis specified. If there is not enough room either vertically or horizontally
+   * however, the popover will attempt to reposition itself along the secondary
+   * cross axis if there is room there instead.
+   *
+   * If you do not not want this repositioning to occur (and it is acceptable for
+   * the popover to appear offscreen), set this to false to disable this behavior.
+   *
+   * @default true
+   */
+  repositionToCrossAxis?: boolean;
   /**
    * Must be set to true if using `EuiDragDropContext` within a popover,
    * otherwise your nested drag & drop will have incorrect positioning
@@ -281,6 +293,7 @@ export class EuiPopover extends Component<Props, State> {
   static defaultProps: Partial<PropsWithDefaults> = {
     isOpen: false,
     ownFocus: true,
+    repositionToCrossAxis: true,
     anchorPosition: 'downCenter',
     panelPaddingSize: 'm',
     hasArrow: true,
@@ -517,7 +530,7 @@ export class EuiPopover extends Component<Props, State> {
         arrowBuffer: 10,
       },
       returnBoundingBox: this.props.attachToAnchor,
-      allowCrossAxis: !this.props.attachToAnchor,
+      allowCrossAxis: this.props.repositionToCrossAxis,
       buffer: this.props.buffer,
     });
 
@@ -607,6 +620,7 @@ export class EuiPopover extends Component<Props, State> {
       hasArrow,
       arrowChildren,
       repositionOnScroll,
+      repositionToCrossAxis,
       hasDragDrop,
       zIndex,
       attachToAnchor,
diff --git a/upcoming_changelogs/7211.md b/upcoming_changelogs/7211.md
@@ -1,3 +1,5 @@
+- Updated `EuiPopover` with a new configurable `repositionToCrossAxis` prop
+
 **Bug fixes**
 
 - Fixed `EuiPopover`'s missing animations on popover close

Original file line number	Diff line number	Diff line change
@@ -48,6 +48,7 @@ exports[`CollapsedItemActions render with href and _target provided 1`] = `
`48`	`48`	`ownFocus={true}`
`49`	`49`	`panelPaddingSize="none"`
`50`	`50`	`popoverRef={[Function]}`
	`51`	`+ repositionToCrossAxis={true}`
`51`	`52`	`>`
`52`	`53`	`<EuiContextMenuPanel`
`53`	`54`	`items={`
Original file line number	Diff line number	Diff line change
@@ -57,6 +57,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
`57`	`57`	`token="euiDataGridHeaderCell.actionsPopoverScreenReaderText"`
`58`	`58`	`/>`
`59`	`59`	`}`
	`60`	`+ repositionToCrossAxis={true}`
`60`	`61`	`>`
`61`	`62`	`<EuiListGroup`
`62`	`63`	`data-test-subj="dataGridHeaderCellActionGroup-someColumn"`
Original file line number	Diff line number	Diff line change
@@ -30,6 +30,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
`30`	`30`	`ownFocus={true}`
`31`	`31`	`panelClassName="euiDataGrid__displayPopoverPanel"`
`32`	`32`	`panelPaddingSize="s"`
	`33`	`+ repositionToCrossAxis={true}`
`33`	`34`	`>`
`34`	`35`	`<EuiI18n`
`35`	`36`	`defaults={`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	+- Updated `EuiPopover` with a new configurable `repositionToCrossAxis` prop
	`2`	`+`
`1`	`3`	`Bug fixes`
`2`	`4`
`3`	`5`	- Fixed `EuiPopover`'s missing animations on popover close