fix(Positioner): Correctly overflow bottom's (segmentio#570)

* fix(Positioner): Correctly overflow bottom's * test: Correctly unit test a shift up from the target * chore: Added story for illustrating edge case
js3692 · Jun 17, 2019 · 947cf13 · 947cf13
1 parent fef0013
commit 947cf13
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/src/popover/stories/index.stories.js b/src/popover/stories/index.stories.js
@@ -11,10 +11,11 @@ import { Button } from '../../buttons'
 import { Position } from '../../constants'
 import { Icon, IconNames } from '../../icon'
 
-const PopoverContent = () => (
+// eslint-disable-next-line react/prop-types
+const PopoverContent = ({ height = 240 }) => (
   <Pane
     width={240}
-    height={240}
+    height={height}
     display="flex"
     alignItems="center"
     justifyContent="center"
@@ -172,6 +173,14 @@ storiesOf('popover', module)
           Use Smart Positioning
         </Button>
       </Popover>
+      <Popover
+        content={<PopoverContent height={999} />}
+        position={Position.TOP_LEFT}
+      >
+        <Button position="absolute" left={40} top={80} marginRight={20}>
+          Compensated for shooting past the bottom
+        </Button>
+      </Popover>
     </Box>
   ))
   .add('auto focus text input', () => (

diff --git a/src/positioner/src/getPosition.js b/src/positioner/src/getPosition.js
@@ -202,7 +202,7 @@ export default function getFittedPosition({
   if (rect.bottom > viewport.height - viewportOffset) {
     const delta = Math.ceil(rect.bottom - (viewport.height - viewportOffset))
     rect.top -= delta
-    rect.right -= delta
+    rect.bottom -= delta
   }
 
   const targetCenter = isAlignedHorizontal(position)

diff --git a/src/positioner/test/index.js b/src/positioner/test/index.js
@@ -112,3 +112,15 @@ test('It pushes the rect to the right if overflowing on the left side', t => {
     })
   )
 })
+
+test('It pushes the rect to the top if overflowing on the bottom side', t => {
+  t.snapshot(
+    getFittedPosition({
+      position: Position.TOP,
+      dimensions: dimensions({ width: 50, height: 100 }),
+      targetRect: targetRect({ left: 100, x: 100, top: 550, y: 550 }),
+      targetOffset,
+      viewport: viewport({ height: 500 })
+    })
+  )
+})
diff --git a/src/positioner/test/snapshots/index.js.md b/src/positioner/test/snapshots/index.js.md
@@ -124,6 +124,23 @@ Generated by [AVA](https://ava.li).
       transformOrigin: '27px 0px ',
     }
 
+## It pushes the rect to the top if overflowing on the bottom side
+
+> Snapshot 1
+
+    {
+      position: 'top',
+      rect: {
+        bottom: 492,
+        height: 100,
+        left: 100,
+        right: 150,
+        top: 392,
+        width: 50,
+      },
+      transformOrigin: '25px 100px ',
+    }
+
 ## Position.BOTTOM repositions to the top
 
 > Snapshot 1
@@ -199,10 +216,10 @@ Generated by [AVA](https://ava.li).
     {
       position: 'bottom',
       rect: {
-        bottom: 376,
+        bottom: 242,
         height: 250,
         left: 225,
-        right: 191,
+        right: 325,
         top: -8,
         width: 100,
       },

diff --git a/src/positioner/test/snapshots/index.js.snap b/src/positioner/test/snapshots/index.js.snap