[PositionedHorizontal] Fix left positioning

Shopify · Jan 22, 2024 · 7756b09 · 7756b09
1 parent caf60f9
commit 7756b09
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/polaris-react/src/components/HoverCard/HoverCard.module.scss b/polaris-react/src/components/HoverCard/HoverCard.module.scss
@@ -41,9 +41,9 @@ $vertical-motion-offset: -5px;
   opacity: 1;
 
   transition: top var(--p-motion-duration-100) cubic-bezier(0.25, 0, 0.75, 1.35),
-    opacity var(--p-motion-duration-100) ease-in-out,
-    width var(--p-motion-duration-100) ease-in-out,
-    height var(--p-motion-duration-100) ease-in-out;
+    opacity var(--p-motion-duration-100) cubic-bezier(0.25, 0, 0.75, 1.35),
+    width var(--p-motion-duration-100) cubic-bezier(0.25, 0, 0.75, 1.35),
+    height var(--p-motion-duration-100) cubic-bezier(0.25, 0, 0.75, 1.35);
 }
 
 .measuring:not(.HoverCardOverlay-exited) {

diff --git a/polaris-react/src/components/HoverCard/HoverCard.stories.tsx b/polaris-react/src/components/HoverCard/HoverCard.stories.tsx
@@ -337,7 +337,7 @@ export function WithDynamicActivator() {
     activatorElement,
     handleMouseEnterActivator,
     handleMouseLeaveActivator,
-  } = useHoverCardActivatorWrapperProps({snapToParent: true, hoverDelay: 100});
+  } = useHoverCardActivatorWrapperProps({snapToParent: true});
 
   const handleMouseEnterCustomer = useCallback(
     (customer: CustomerDetailPreview) =>

diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx
@@ -317,41 +317,48 @@ export class PositionedOverlay extends PureComponent<
           topBarOffset,
         );
 
-        const positionHorizontal =
+        const positionedHorizontal =
           preferredPosition === 'left' || preferredPosition === 'right';
 
-        const horizontalPosition = calculateHorizontalPosition(
+        const calculatedHorizontalPosition = calculateHorizontalPosition(
           activatorRect,
           overlayRect,
           containerRect,
           overlayMargins,
           preferredAlignment,
           scrollableContainerRect,
-          positionHorizontal ? preferredPosition : undefined,
+          positionedHorizontal ? preferredPosition : undefined,
           overlayMinWidth,
         );
 
+        const horizontalPosition =
+          calculatedHorizontalPosition.left ??
+          calculatedHorizontalPosition.right;
+
         const chevronOffset =
           activatorRect.center.x -
-          horizontalPosition.left +
+          horizontalPosition +
           overlayMargins.horizontal * 2;
 
         let width = null;
 
         if (fullWidth) width = overlayRect.width;
-        else if (positionHorizontal) width = horizontalPosition.width;
+        else if (positionedHorizontal)
+          width = calculatedHorizontalPosition.width;
 
         this.setState(
           {
             measuring: false,
-            activatorRect: getRectForNode(activator),
+            activatorRect,
             left:
-              preferredAlignment !== 'right' || positionHorizontal
-                ? horizontalPosition.left
+              (preferredAlignment !== 'right' && !positionedHorizontal) ||
+              calculatedHorizontalPosition.left
+                ? horizontalPosition
                 : undefined,
             right:
-              preferredAlignment === 'right'
-                ? horizontalPosition.left
+              (preferredAlignment === 'right' && !positionedHorizontal) ||
+              calculatedHorizontalPosition.right !== undefined
+                ? horizontalPosition
                 : undefined,
             top: lockPosition ? top : verticalPosition.top,
             lockPosition: Boolean(fixed),

diff --git a/polaris-react/src/components/PositionedOverlay/utilities/math.ts b/polaris-react/src/components/PositionedOverlay/utilities/math.ts
@@ -115,7 +115,7 @@ export function calculateHorizontalPosition(
   preferredHorizontalPosition?: 'left' | 'right',
   overlayMinWidth = 0,
 ) {
-  const maximum = containerRect.width - overlayRect.width;
+  const maximumWidth = containerRect.width - overlayRect.width;
   const activatorRight =
     containerRect.width - (activatorRect.left + activatorRect.width);
 
@@ -132,15 +132,15 @@ export function calculateHorizontalPosition(
     if (preferredAlignment === 'left') {
       return {
         left: Math.min(
-          maximum,
+          maximumWidth,
           Math.max(0, activatorRect.left - minimumSurroundingSpace),
         ),
         width: null,
       };
     } else if (preferredAlignment === 'right') {
       return {
         left: Math.min(
-          maximum,
+          maximumWidth,
           Math.max(0, activatorRight - minimumSurroundingSpace),
         ),
         width: null,
@@ -149,10 +149,8 @@ export function calculateHorizontalPosition(
   }
 
   if (preferredHorizontalPosition) {
-    const positionIfRight =
-      activatorRect.left + activatorRect.width + containerRect.left;
-    const positionIfLeft =
-      activatorRect.left - overlayRect.width + containerRect.left;
+    const positionIfRight = activatorRect.left + activatorRect.width;
+    const positionIfLeft = containerRect.width - activatorRect.left;
 
     const widthIfLeft = Math.min(
       distanceToLeftEdge - minimumSurroundingSpace,
@@ -173,11 +171,11 @@ export function calculateHorizontalPosition(
                 ? overlayMinWidth
                 : null,
           }
-        : {left: positionIfLeft, width: null};
+        : {right: positionIfLeft, width: null};
     } else {
       return enoughSpaceFromLeftEdge
         ? {
-            left: positionIfLeft,
+            right: positionIfLeft,
             width:
               overlayMinWidth && widthIfLeft < overlayMinWidth
                 ? overlayMinWidth
@@ -193,7 +191,7 @@ export function calculateHorizontalPosition(
   return {
     width: null,
     left: Math.min(
-      maximum,
+      maximumWidth,
       Math.max(
         0,
         activatorRect.center.x - overlayRect.width / 2 + containerRect.left,