docs(popover): show all placement options

adobe · May 22, 2024 · c51f567 · c51f567
1 parent 392e28a
commit c51f567
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 25 deletions.
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
@@ -6,6 +6,31 @@ import { Template } from "./template";
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 
+const placementOptions = [
+	"top",
+	"top-left",
+	"top-right",
+	"top-start",
+	"top-end",
+	"bottom",
+	"bottom-left",
+	"bottom-right",
+	"bottom-start",
+	"bottom-end",
+	"right",
+	"right-bottom",
+	"right-top",
+	"left",
+	"left-bottom",
+	"left-top",
+	"start",
+	"start-top",
+	"start-bottom",
+	"end",
+	"end-top",
+	"end-bottom",
+];
+
 /**
  * A popover is used to display transient content (menus, options, additional actions etc.) and appears when clicking/tapping on a source (tools, buttons, etc.). It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface.
  */
@@ -44,20 +69,7 @@ export default {
 				category: "Component",
 			},
 			control: "select",
-			options: [
-				"top",
-				"top-start",
-				"top-end",
-				"bottom",
-				"bottom-start",
-				"bottom-end",
-				"left",
-				"left-top",
-				"left-bottom",
-				"right",
-				"right-top",
-				"right-bottom",
-			],
+			options: placementOptions,
 			if: { arg: "nested", truthy: false },
 		},
 	},

diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
@@ -60,49 +60,61 @@ export const Template = ({
 					const popWidth = popover.offsetWidth ?? 0;
 					const popHeight = popover.offsetHeight ?? 0;
 					const textDir = getComputedStyle(document.querySelector("html")).direction;
+
 					let x, y;
 					let xOffset = "+ 0px";
 					let yOffset = "+ 0px";
-					if (position.includes("top") || position.includes("bottom") && !(position.includes("-top") || position.includes("-bottom"))) {
+
+					if (position.startsWith("top") || position.startsWith("bottom")) {
 						x = triggerXCenter - (popWidth > 0 ? popWidth / 2 : popWidth);
 					}
-					if (position.includes("left") || position.includes("right")) {
+					if (position.includes("left") || position.includes("right") || position.startsWith("start") || position.startsWith("end")) {
 						y = triggerYCenter - (popHeight > 0 ? popHeight / 2 : popHeight);
 					}
-					if (position.includes("top") && !position.includes("-top")) {
+					if (position.startsWith("top")) {
 						y = rect.top - popHeight;
 						yOffset = withTip
 							? "- (var(--spectrum-popover-pointer-height) + var(--spectrum-popover-animation-distance) - 1px)"
 							: "- var(--spectrum-popover-animation-distance)";
 					}
- else if (position.includes("bottom") && !position.includes("-bottom")) {
+					else if (position.startsWith("bottom")) {
 						y = rect.bottom;
 						yOffset = "+ (var(--spectrum-popover-animation-distance))";
 					}
- else if (position.includes("left")) {
+					else if (position.includes("left")) {
 						if (textDir == "rtl") {
 							x = rect.right;
 							xOffset = withTip ? "+ 0px" : "+ var(--spectrum-popover-animation-distance)";
 						}
- else {
+						else {
 							x = rect.left - popWidth;
 							xOffset = withTip
 								? "- ((var(--spectrum-popover-pointer-width) / 2) + var(--spectrum-popover-animation-distance) - 2px)"
 								: "- var(--spectrum-popover-animation-distance)";
 						}
 					}
- else if (position.includes("right")) {
+					else if (position.includes("right")) {
 						if (textDir == "rtl") {
 							x = rect.left - popWidth;
 							xOffset = withTip
 								? "- ((var(--spectrum-popover-pointer-width) / 2) + var(--spectrum-popover-animation-distance) - 2px)"
 								: "- var(--spectrum-popover-animation-distance)";
 						}
- else {
+						else {
 							x = rect.right;
 							xOffset = withTip ? "+ 0px" : "+ var(--spectrum-popover-animation-distance)";
 						}
 					}
+					else if (position.includes("start")) {
+						x = rect.left - popWidth;
+						xOffset = withTip
+							? "- ((var(--spectrum-popover-pointer-width) / 2) + var(--spectrum-popover-animation-distance) - 2px)"
+							: "- var(--spectrum-popover-animation-distance)";
+					}
+					else if (position.includes("end")) {
+						x = rect.right;
+						xOffset = withTip ? "+ 0px" : "+ var(--spectrum-popover-animation-distance)";
+					}
 
 					if (x) transforms.push(`translateX(calc(var(--flow-direction) * calc(${parseInt(x, 10)}px ${xOffset})))`);
 					if (y) transforms.push(`translateY(calc(${y}px ${yOffset}))`);
@@ -111,13 +123,13 @@ export const Template = ({
 					if (position === "top-start" || position === "bottom-start") {
 						additionalStyles["inset-inline-start"] = "calc(" + (popWidth / 2) + "px - var(--spectrum-popover-pointer-edge-offset))";
 					}
- else if (position === "top-end" || position === "bottom-end") {
+					else if (position === "top-end" || position === "bottom-end") {
 						additionalStyles["inset-inline-start"] = "calc(-1 *" + (popWidth / 2) + "px + var(--spectrum-popover-pointer-edge-offset))";
 					}
- else if (position === "left-top" || position === "right-top") {
+					else if (position === "left-top" || position === "right-top" || position === "start-top" || position === "end-top") {
 						additionalStyles["inset-block-start"] = "calc(" + (popHeight / 2) + "px - var(--spectrum-popover-pointer-edge-offset))";
 					}
- else if (position === "left-bottom" || position === "right-bottom") {
+					else if (position === "left-bottom" || position === "right-bottom" || position === "start-bottom" || position === "end-bottom") {
 						additionalStyles["inset-block-start"] = "calc(-1 *" + (popHeight / 2) + "px + var(--spectrum-popover-pointer-edge-offset))";
 					}