From 6049741175af491af620e578c8b6fe0bcfaba33c Mon Sep 17 00:00:00 2001
From: Jared Stoffan <jstoffan@users.noreply.github.com>
Date: Wed, 29 Apr 2020 15:01:47 -0700
Subject: [PATCH] feat(popups): Add x-axis fallback positions to support tall
 regions (#467)

---
 package.json                         |  2 +-
 src/components/Popups/Popper.ts      | 19 +------------
 src/components/Popups/PopupBase.scss | 42 +++++++++++++++++++++++++---
 src/components/Popups/PopupReply.tsx | 28 ++++++++++++++++++-
 yarn.lock                            |  8 +++---
 5 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index a8568bc7b..94dfdc5de 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "dependencies": {
         "@formatjs/intl-pluralrules": "^1.5.5",
         "@formatjs/intl-relativetimeformat": "^4.5.12",
-        "@popperjs/core": "^2.3.3",
+        "@popperjs/core": "^2.4.0",
         "@reduxjs/toolkit": "^1.3.5",
         "@types/react-redux": "^7.1.7",
         "axios": "^0.19.2",
diff --git a/src/components/Popups/Popper.ts b/src/components/Popups/Popper.ts
index 5521a67c8..89f2295d4 100644
--- a/src/components/Popups/Popper.ts
+++ b/src/components/Popups/Popper.ts
@@ -6,24 +6,7 @@ export type Instance = popper.Instance;
 export type Options = popper.Options;
 
 export const defaults = {
-    modifiers: [
-        {
-            name: 'arrow',
-            options: {
-                element: '.ba-Popup-arrow',
-                padding: 20,
-            },
-        },
-        {
-            name: 'flip',
-        },
-        {
-            name: 'offset',
-            options: {
-                offset: [0, 15],
-            },
-        },
-    ],
+    modifiers: [],
     placement: 'bottom',
 };
 
diff --git a/src/components/Popups/PopupBase.scss b/src/components/Popups/PopupBase.scss
index a9f93a5cd..9729e37e3 100644
--- a/src/components/Popups/PopupBase.scss
+++ b/src/components/Popups/PopupBase.scss
@@ -9,7 +9,8 @@
     .ba-Popup {
         z-index: 1;
 
-        &[data-popper-placement='bottom'] {
+        // Top-facing arrows
+        &[data-popper-placement*='bottom'] {
             .ba-Popup-arrow {
                 top: -#{$popup-arrow-size - 1};
 
@@ -24,7 +25,42 @@
             }
         }
 
-        &[data-popper-placement='top'] {
+        // Right-facing arrows
+        &[data-popper-placement*='left'] {
+            .ba-Popup-arrow {
+                right: 0;
+
+                &::before,
+                &::after {
+                    transform: rotate(-90deg) translateY(-100%);
+                    transform-origin: center top;
+                }
+
+                &::after {
+                    left: -1px;
+                }
+            }
+        }
+
+        // Left-facing arrows
+        &[data-popper-placement*='right'] {
+            .ba-Popup-arrow {
+                left: -#{$popup-arrow-size - 1};
+
+                &::before,
+                &::after {
+                    transform: rotate(90deg);
+                    transform-origin: center top;
+                }
+
+                &::after {
+                    left: 1px;
+                }
+            }
+        }
+
+        // Bottom-facing arrows
+        &[data-popper-placement*='top'] {
             .ba-Popup-arrow {
                 top: auto;
                 bottom: 0;
@@ -42,8 +78,6 @@
     }
 
     .ba-Popup-arrow {
-        top: -#{$popup-arrow-size - 1};
-
         &::before,
         &::after {
             position: absolute;
diff --git a/src/components/Popups/PopupReply.tsx b/src/components/Popups/PopupReply.tsx
index f463a8e2c..1bc0c43ad 100644
--- a/src/components/Popups/PopupReply.tsx
+++ b/src/components/Popups/PopupReply.tsx
@@ -17,6 +17,32 @@ export type Props = {
     value?: string;
 };
 
+export const options = {
+    modifiers: [
+        {
+            name: 'arrow',
+            options: {
+                element: '.ba-Popup-arrow',
+                padding: 20,
+            },
+        },
+        {
+            name: 'flip',
+            options: {
+                altAxis: false,
+                fallbackPlacements: ['bottom', 'top', 'left', 'right'],
+                padding: 5,
+            },
+        },
+        {
+            name: 'offset',
+            options: {
+                offset: [0, 15],
+            },
+        },
+    ],
+};
+
 export default function PopupReply({
     isPending,
     onCancel,
@@ -54,7 +80,7 @@ export default function PopupReply({
     };
 
     return (
-        <PopupBase onKeyDown={handleKeyDown} {...rest}>
+        <PopupBase onKeyDown={handleKeyDown} options={options} {...rest}>
             <form className="ba-Popup-form" data-testid="ba-Popup-form" onSubmit={handleSubmit}>
                 <div className="ba-Popup-main">
                     <ReplyField
diff --git a/yarn.lock b/yarn.lock
index 543cce132..e6c0ce225 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1541,10 +1541,10 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@popperjs/core@^2.3.3":
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.3.3.tgz#8731722aeb7330e8fd9eb5d424be6b98dea7d6da"
-  integrity sha512-yEvVC8RfhRPkD9TUn7cFcLcgoJePgZRAOR7T21rcRY5I8tpuhzeWfGa7We7tB14fe9R7wENdqUABcMdwD4SQLw==
+"@popperjs/core@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
+  integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
 
 "@reduxjs/toolkit@^1.3.5":
   version "1.3.5"