Update `PositionedOverlay` to support `HoverCard` positioning #11758

yurm04 · 2024-03-18T20:05:04Z

WHY are these changes introduced?

Pulls in the updates to PositionedOverlay that were originally going to go out as part of the AlphaHoverCard PR

WHAT is this pull request doing?

Adds left and right positioning support for overlays

How to 🎩

Check the local storybook and/or visit this spin and hover over the Destination cell to the the right positioned HoverCard

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested a snapshot
Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

yurm04 · 2024-03-18T20:05:25Z

/snapit

yurm04 · 2024-03-18T20:15:20Z

/snapit

github-actions · 2024-03-18T20:19:11Z

🫰✨ Thanks @yurm04! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

chloerice

Thanks @yurm04! Changes brought over all look correct, except where noted that one of Kyle's recent changes was accidentally reverted. Do you have a Spinstance we can tophat? We also need to bring over the Tooltip change to the preferredPosition prop that only allows it to be above or below.

.changeset/real-snails-turn.md

chloerice · 2024-03-18T22:16:56Z

polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -270,10 +289,9 @@ export class PositionedOverlay extends PureComponent<
          : this.firstScrollableContainer;
        const scrollableContainerRect = getRectForNode(scrollableElement);

-        const overlayRect =
-          fullWidth || preferredPosition === 'cover'


This we need to bring in--this was part of Kyle's recent addition of cover position.

great catch! ty @chloerice 🙏

@kyledurand adding you as a reviewer to make sure I didn't bulldoze any of your recent changes

chloerice · 2024-03-18T22:17:09Z

polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx

-          fullWidth || preferredPosition === 'cover'
-            ? new Rect({...currentOverlayRect, width: activatorRect.width})
-            : currentOverlayRect;
+        const overlayRect = fullWidth


Suggested change

const overlayRect = fullWidth

fullWidth || preferredPosition === 'cover'

yurm04 · 2024-03-19T16:27:27Z

/snapit

github-actions · 2024-03-19T16:30:47Z

🫰✨ Thanks @yurm04! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

kyledurand

Looks like this removes cover positioning. Might just be a bad rebase but not working when I tophat

kyledurand · 2024-03-19T16:29:21Z

polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -17,12 +17,15 @@ import {
 import type {PreferredPosition, PreferredAlignment} from './utilities/math';
 import styles from './PositionedOverlay.module.css';

-type Positioning = 'above' | 'below' | 'cover';
+type Positioning = 'above' | 'below' | 'left' | 'right' | 'cover';


Should these be start end?

This isn't a hard opinion, but I think left and right make sense here because it is relative to the activator 🤔 but I'm not married to that and happy to change it to be consistent with the rest of our positioning props

It matches with the actual css positioning as well so I'm fine with it

chloerice

Commented the missing logic to bring over for preferredPosition="cover" (locally tested diff of suggested changes for reference)

chloerice · 2024-03-25T22:28:31Z

polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx


        const chevronOffset =
          activatorRect.center.x -
          horizontalPosition +
          overlayMargins.horizontal * 2;

+        let width = null;
+
+        if (fullWidth) width = overlayRect.width;


Suggested change

if (fullWidth) width = overlayRect.width;

if (fullWidth || preferredPosition === 'cover') width = overlayRect.width;

chloerice · 2024-03-25T22:33:04Z

polaris-react/src/components/PositionedOverlay/utilities/math.ts

+    : spaceAbove - minimumSurroundingSpace;
+  const heightIfBelow = enoughSpaceFromBottomEdge
+    ? desiredHeight - verticalMargins
+    : spaceBelow - minimumSurroundingSpace;


Suggested change

: spaceBelow - minimumSurroundingSpace;

: spaceBelow - minimumSurroundingSpace;

const heightIfAboveCover = Math.min(

spaceAbove + activatorRect.height,

desiredHeight,

);

const heightIfBelowCover = Math.min(

spaceBelow + activatorRect.height,

desiredHeight,

);

const positionIfCoverBelow = {

height: heightIfBelowCover - verticalMargins,

top: activatorTop + containerRectTop,

positioning: 'cover',

};

const positionIfCoverAbove = {

height: heightIfAboveCover - verticalMargins,

top:

activatorTop +

containerRectTop -

heightIfAbove +

activatorRect.height +

verticalMargins,

positioning: 'cover',

};

if (preferredPosition === 'cover') {

return (enoughSpaceFromBottomEdge ||

(mostSpaceOnBottom &&

spaceBelow + activatorRect.height > desiredHeight) ||

spaceBelow > spaceAbove)

? positionIfCoverBelow

: positionIfCoverAbove;

}

chloerice · 2024-03-25T22:47:53Z

polaris-react/src/components/PositionedOverlay/utilities/math.ts

@@ -20,133 +28,210 @@ export function calculateVerticalPosition(
  fixed: boolean | undefined,
  topBarOffset = 0,
 ) {


Make TS happy in PositionedOverlay.tsx

Suggested change

) {

: {

top?: number;

bottom?: number;

height: number;

positioning: string;

}

chloerice · 2024-04-02T11:55:52Z

@yurm04, please make sure to prevent Tooltip from supporting left and right, as that is not UX that we want.

TooltipOverlay.jsx

preferredPosition?: 'above' | 'below';

Co-authored-by: Chloe Rice <[email protected]> Co-authored-by: Charles Lee <[email protected]>

Co-authored-by: Chloe Rice <[email protected]>

chloerice · 2024-04-17T20:47:55Z

/snapit

github-actions · 2024-04-17T20:50:15Z

🫰✨ Thanks @chloerice! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240417204842"

translation-platform · 2024-04-19T21:54:49Z

Localization quality issues found

The following issues may affect the quality of localized translations if they are not addressed:

The value Clear for key Polaris.ActionList.SearchField.clearButtonLabel is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
The value Search for key Polaris.ActionList.SearchField.search is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
The value Search actions for key Polaris.ActionList.SearchField.placeholder is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.

Please look out for other instances of this issue in your PR and fix them as well if possible.

Questions about these messages? Hop in the #help-localization Slack channel.

github-actions · 2024-10-18T03:37:52Z

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

chloerice reviewed Mar 18, 2024

View reviewed changes

yurm04 requested review from chloerice and kyledurand March 19, 2024 16:25

yurm04 marked this pull request as ready for review March 19, 2024 16:27

kyledurand requested changes Mar 19, 2024

View reviewed changes

chloerice reviewed Mar 25, 2024

View reviewed changes

Yuraima Estevez and others added 6 commits April 17, 2024 16:46

Update PositionedOverlay to support HoverCard

32e4f60

Co-authored-by: Chloe Rice <[email protected]> Co-authored-by: Charles Lee <[email protected]>

--allow-empty

5e0102a

add cover

0b7c788

update .scss to .css file in test file

38b5b8a

bring back cover position

5b42ee5

Update .changeset/real-snails-turn.md

ed1f843

Co-authored-by: Chloe Rice <[email protected]>

chloerice force-pushed the positioned-overlay-hovercard branch from f9c8d99 to fa4d0a7 Compare April 17, 2024 20:46

aaronccasanova force-pushed the positioned-overlay-hovercard branch from fa4d0a7 to ed1f843 Compare April 19, 2024 21:52

yurm04 requested review from alex-page and sam-b-rose as code owners April 19, 2024 21:52

github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 19, 2024

aaronccasanova force-pushed the main branch from 9f6fc03 to b71eff5 Compare April 20, 2024 02:33

github-actions bot added the no-pr-activity label Oct 18, 2024

chloerice closed this Oct 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update `PositionedOverlay` to support `HoverCard` positioning #11758

Update `PositionedOverlay` to support `HoverCard` positioning #11758

yurm04 commented Mar 18, 2024 •

edited

Loading

yurm04 commented Mar 18, 2024

yurm04 commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

chloerice left a comment •

edited

Loading

chloerice Mar 18, 2024

yurm04 Mar 19, 2024

chloerice Mar 18, 2024

yurm04 commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

kyledurand left a comment

kyledurand Mar 19, 2024

yurm04 Mar 19, 2024

kyledurand Mar 20, 2024

chloerice left a comment •

edited

Loading

chloerice Mar 25, 2024

chloerice Mar 25, 2024 •

edited

Loading

chloerice Mar 25, 2024 •

edited

Loading

chloerice commented Apr 2, 2024 •

edited

Loading

chloerice commented Apr 17, 2024

github-actions bot commented Apr 17, 2024

translation-platform bot commented Apr 19, 2024

github-actions bot commented Oct 18, 2024

	const overlayRect = fullWidth
	fullWidth \|\| preferredPosition === 'cover'

	if (fullWidth) width = overlayRect.width;
	if (fullWidth \|\| preferredPosition === 'cover') width = overlayRect.width;

-    : spaceBelow - minimumSurroundingSpace;
+    : spaceBelow - minimumSurroundingSpace;
+  const heightIfAboveCover = Math.min(
+    spaceAbove + activatorRect.height,
+    desiredHeight,
+  );
+  const heightIfBelowCover = Math.min(
+    spaceBelow + activatorRect.height,
+    desiredHeight,
+  );
+  const positionIfCoverBelow = {
+    height: heightIfBelowCover - verticalMargins,
+    top: activatorTop + containerRectTop,
+    positioning: 'cover',
+  };
+  const positionIfCoverAbove = {
+    height: heightIfAboveCover - verticalMargins,
+    top:
+      activatorTop +
+      containerRectTop -
+      heightIfAbove +
+      activatorRect.height +
+      verticalMargins,
+    positioning: 'cover',
+  };
+ if (preferredPosition === 'cover') {
+    return (enoughSpaceFromBottomEdge ||
+      (mostSpaceOnBottom &&
+      spaceBelow + activatorRect.height > desiredHeight) ||
+        spaceBelow > spaceAbove)
+      ? positionIfCoverBelow
+      : positionIfCoverAbove;
+  }

-) {
+: {
+  top?: number;
+  bottom?: number;
+  height: number;
+  positioning: string;
+}

Update PositionedOverlay to support HoverCard positioning #11758

Update PositionedOverlay to support HoverCard positioning #11758

Conversation

yurm04 commented Mar 18, 2024 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

yurm04 commented Mar 18, 2024

yurm04 commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

chloerice left a comment • edited Loading

Choose a reason for hiding this comment

chloerice Mar 18, 2024

Choose a reason for hiding this comment

yurm04 Mar 19, 2024

Choose a reason for hiding this comment

chloerice Mar 18, 2024

Choose a reason for hiding this comment

yurm04 commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

kyledurand left a comment

Choose a reason for hiding this comment

kyledurand Mar 19, 2024

Choose a reason for hiding this comment

yurm04 Mar 19, 2024

Choose a reason for hiding this comment

kyledurand Mar 20, 2024

Choose a reason for hiding this comment

chloerice left a comment • edited Loading

Choose a reason for hiding this comment

chloerice Mar 25, 2024

Choose a reason for hiding this comment

chloerice Mar 25, 2024 • edited Loading

Choose a reason for hiding this comment

chloerice Mar 25, 2024 • edited Loading

Choose a reason for hiding this comment

chloerice commented Apr 2, 2024 • edited Loading

chloerice commented Apr 17, 2024

github-actions bot commented Apr 17, 2024

translation-platform bot commented Apr 19, 2024

github-actions bot commented Oct 18, 2024

Update `PositionedOverlay` to support `HoverCard` positioning #11758

Update `PositionedOverlay` to support `HoverCard` positioning #11758

yurm04 commented Mar 18, 2024 •

edited

Loading

chloerice left a comment •

edited

Loading

chloerice left a comment •

edited

Loading

chloerice Mar 25, 2024 •

edited

Loading

chloerice Mar 25, 2024 •

edited

Loading

chloerice commented Apr 2, 2024 •

edited

Loading