diff --git a/polaris-react/src/components/HoverCard/HoverCard.module.scss b/polaris-react/src/components/HoverCard/HoverCard.module.scss index d1ed72797da..d603372e16c 100644 --- 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 index 3c8423e780c..c338d9df2fd 100644 --- 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 index 59d2cf0165d..9468b008647 100644 --- 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 index 35a1b8d0ff5..44281c2bd8c 100644 --- 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,7 +132,7 @@ export function calculateHorizontalPosition( if (preferredAlignment === 'left') { return { left: Math.min( - maximum, + maximumWidth, Math.max(0, activatorRect.left - minimumSurroundingSpace), ), width: null, @@ -140,7 +140,7 @@ export function calculateHorizontalPosition( } 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,