From 89206a27d36f475fbcf5416958617412c0521923 Mon Sep 17 00:00:00 2001
From: Melissa Thompson <mthompson@heysparkbox.com>
Date: Mon, 30 Oct 2023 12:43:22 -0400
Subject: [PATCH] fix(popover): storybook examples have correct offset

---
 components/popover/stories/template.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
index b655352b6f6..050b055c101 100644
--- a/components/popover/stories/template.js
+++ b/components/popover/stories/template.js
@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import { useArgs } from "@storybook/client-api";
@@ -19,7 +19,6 @@ export const Template = ({
 	testId,
 	triggerId = "trigger",
 	customStyles = {
-		"--spectrum-popover-offset": "8px",
 		"inset-inline-start": "0px",
 		"inset-block-start": "0px",
 	},
@@ -72,31 +71,31 @@ export const Template = ({
 				let yOffset = "+ 0px";
 				if (position.includes("top") || position.includes("bottom") && !(position.includes("-top") || position.includes("-bottom"))) {
 					x = triggerXCenter - (popWidth > 0 ? popWidth / 2 : popWidth);
-				} 
+				}
 				if (position.includes("left") || position.includes("right")) {
 					y = triggerYCenter - (popHeight > 0 ? popHeight / 2 : popHeight);
 				}
 				if (position.includes("top") && !position.includes("-top")) {
 					y = rect.top - popHeight;
-					yOffset = "- var(--spectrum-popover-offset)";
+					yOffset = withTip ? "- (var(--spectrum-popover-offset) + var(--spectrum-popover-pointer-height))" : "- var(--spectrum-popover-offset)";
 				} else if (position.includes("bottom") && !position.includes("-bottom")) {
 					y = rect.bottom;
-					yOffset = "+ var(--spectrum-popover-offset)";
+					yOffset = "+ 0px";
 				} else if (position.includes("left")) {
 					if (textDir == 'rtl') {
 						x = rect.right;
-						xOffset = "+ var(--spectrum-popover-offset)";
+						xOffset = withTip ? "+ (var(--spectrum-popover-offset) + (var(--spectrum-popover-pointer-width) / 2))" : "+ var(--spectrum-popover-offset)";
 					} else {
 						x = rect.left - popWidth;
-						xOffset = "- var(--spectrum-popover-offset)";
+						xOffset = withTip ? "- (var(--spectrum-popover-offset) + (var(--spectrum-popover-pointer-width) / 2))" : "- var(--spectrum-popover-offset)";
 					}
 				} else if (position.includes("right")) {
 					if (textDir == 'rtl') {
 						x = rect.left - popWidth;
-						xOffset = "- var(--spectrum-popover-offset)";
+						xOffset = withTip ? "- (var(--spectrum-popover-offset) + (var(--spectrum-popover-pointer-width) / 2))" : "- var(--spectrum-popover-offset)";
 					} else {
 						x = rect.right;
-						xOffset = "+ var(--spectrum-popover-offset)";
+						xOffset = withTip? "+ 0px" : "+ 0px";
 					}
 				}