fix above math, apply fillwidth styles if covering

Shopify · Mar 6, 2024 · 9c34526 · 9c34526
1 parent f004e68
commit 9c34526
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/polaris-react/playground/components/ComplexSingleSelect/ComplexSingleSelect.tsx b/polaris-react/playground/components/ComplexSingleSelect/ComplexSingleSelect.tsx
@@ -112,12 +112,17 @@ export function ComplexSingleSelect({
         preferredPosition="cover"
         activator={activator}
       >
-        <Box paddingInline="200" paddingBlock="050" paddingBlockStart="200">
-          <Box paddingInlineStart="050">
-            <Text as="span" tone="subdued" variant="bodySm">
-              {resourceTitle}
-            </Text>
-          </Box>
+        <Box
+          paddingInline="200"
+          paddingBlock="050"
+          paddingBlockStart="200"
+          paddingInlineStart="300"
+          borderColor="transparent"
+          borderInlineStartWidth="025"
+        >
+          <Text as="span" tone="subdued" variant="bodySm">
+            {resourceTitle}
+          </Text>
         </Box>
         <Combobox
           variant="experimental-inline"

diff --git a/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
@@ -215,11 +215,11 @@ export class PopoverOverlay extends PureComponent<PopoverOverlayProps, State> {
       autofocusTarget,
       captureOverscroll,
     } = this.props;
-
+    const isCovering = positioning === 'cover';
     const className = classNames(
       styles.Popover,
-      fullWidth && styles.fullWidth,
       measuring && styles.measuring,
+      (fullWidth || isCovering) && styles.fullWidth,
       hideOnPrint && styles['PopoverOverlay-hideOnPrint'],
       positioning && styles[variationName('positioned', positioning)],
     );

diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx
@@ -270,9 +270,10 @@ export class PositionedOverlay extends PureComponent<
           : this.firstScrollableContainer;
         const scrollableContainerRect = getRectForNode(scrollableElement);
 
-        const overlayRect = fullWidth
-          ? new Rect({...currentOverlayRect, width: activatorRect.width})
-          : currentOverlayRect;
+        const overlayRect =
+          fullWidth || preferredPosition === 'cover'
+            ? new Rect({...currentOverlayRect, width: activatorRect.width})
+            : currentOverlayRect;
 
         // If `body` is 100% height, it still acts as though it were not constrained to that size. This adjusts for that.
         if (scrollableElement === document.body) {
@@ -331,7 +332,10 @@ export class PositionedOverlay extends PureComponent<
             top: lockPosition ? top : verticalPosition.top,
             lockPosition: Boolean(fixed),
             height: verticalPosition.height || 0,
-            width: fullWidth ? overlayRect.width : null,
+            width:
+              fullWidth || preferredPosition === 'cover'
+                ? overlayRect.width
+                : null,
             positioning: verticalPosition.positioning as Positioning,
             outsideScrollableContainer:
               onScrollOut != null &&

diff --git a/polaris-react/src/components/PositionedOverlay/utilities/math.ts b/polaris-react/src/components/PositionedOverlay/utilities/math.ts
@@ -73,7 +73,12 @@ export function calculateVerticalPosition(
 
   const positionIfCoverAbove = {
     height: heightIfAbove - verticalMargins,
-    top: activatorTop + containerRectTop - heightIfAbove + activatorRect.height,
+    top:
+      activatorTop +
+      containerRectTop -
+      heightIfAbove +
+      activatorRect.height +
+      verticalMargins,
     positioning: 'cover',
   };