Updated popover position to correctly address arrow buffer (#1490)

* Updated popover position to correctly address arrow buffer * changelog
elastic · Jan 29, 2019 · 3eec2d3 · 3eec2d3
1 parent e5e2b49
commit 3eec2d3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 - Added missing `'m'` option for text `size` for `EuiText`'s TypeScript definition ([#1487](https://github.com/elastic/eui/pull/1487))
 - Added missing TypeScript definition for `EuiTextAlign` ([#1487](https://github.com/elastic/eui/pull/1487))
 
+**Bug fixes**
+
+- Fixed popover & tooltip positioning to properly account for arrow buffer ([#1490](https://github.com/elastic/eui/pull/1490))
+
 ## [`6.7.3`](https://github.com/elastic/eui/tree/v6.7.3)
 
 - `EuiHeader` no longer reduces height at mobile sizes ([#1480](https://github.com/elastic/eui/pull/1480))

diff --git a/src/services/popover/popover_positioning.test.ts b/src/services/popover/popover_positioning.test.ts
@@ -297,12 +297,33 @@ describe('popover_positioning', () => {
           offset: 10,
           arrowConfig: { arrowWidth: 5, arrowBuffer: 10 },
         })).toEqual({
-          fit: 0.63,
+          fit: 0.665,
           top: -15,
-          left: 35,
+          left: 37.5,
           arrow: {
             top: 50,
-            left: 12.5,
+            left: 10,
+          },
+        });
+      });
+
+      it('respects both popover & arrow buffers', () => {
+        expect(getPopoverScreenCoordinates({
+          position: 'top',
+          anchorBoundingBox: makeBB(45, 55, 55, 45),
+          popoverBoundingBox: makeBB(0, 50, 50, 0),
+          windowBoundingBox: makeBB(0, 1024, 768, 0),
+          containerBoundingBox: makeBB(0, 1024, 768, 40),
+          offset: 10,
+          buffer: 15,
+          arrowConfig: { arrowWidth: 5, arrowBuffer: 10 },
+        })).toEqual({
+          fit: 0.26,
+          top: -15,
+          left: 37.5,
+          arrow: {
+            top: 50,
+            left: 10,
           },
         });
       });

diff --git a/src/services/popover/popover_positioning.ts b/src/services/popover/popover_positioning.ts
@@ -405,8 +405,6 @@ function getCrossAxisPosition({
   const combinedBoundingBox = intersectBoundingBoxes(windowBoundingBox, containerBoundingBox);
   const availableSpace = getAvailableSpace(anchorBoundingBox, combinedBoundingBox, buffer, offset, position);
   const minimumSpace = arrowConfig ? arrowConfig.arrowBuffer : 0;
-  availableSpace[crossAxisFirstSide] = Math.max(availableSpace[crossAxisFirstSide], minimumSpace);
-  availableSpace[crossAxisSecondSide] = Math.max(availableSpace[crossAxisSecondSide], minimumSpace);
 
   const contentOverflowSize = (popoverSizeOnCrossAxis - anchorSizeOnCrossAxis) / 2;