feat(popups): Add x-axis fallback positions to support tall regions (#…

…467)
box · Apr 29, 2020 · 6049741 · 6049741
1 parent 2b75297
commit 6049741
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"