chore(popover): adjust/enhance popover spacing by default

castastrophe · castastrophe · commit 0b6bf81e1d80 · 2025-08-27T16:58:31.000-04:00
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
@@ -74,8 +74,6 @@ export const Template = ({
 						],
 					}, context),
 				],
-				popoverHeight: 42,
-				popoverWidth: 500,
 			}, context)}
 		</div>
 	`;
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
@@ -68,11 +68,6 @@ export default {
 			type: "figma",
 			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=21917-157",
 		},
-		docs: {
-			story: {
-				height: "300px",
-			}
-		},
 		packageJson,
 		metadata,
 		status: {
@@ -119,11 +114,6 @@ Information.args = {
 	content: "If you enjoy our app, would you mind taking a moment to rate it?",
 };
 Information.parameters = {
-	docs: {
-		story: {
-			height: "400px",
-		}
-	},
 	chromatic: { disableSnapshot: true },
 };
 
@@ -187,11 +177,6 @@ Overflow.args = {
 };
 Overflow.parameters = {
 	chromatic: { disableSnapshot: true },
-	docs: {
-		story: {
-			height: "525px",
-		},
-	},
 };
 
 /**
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
@@ -94,11 +94,6 @@ export default {
 		},
 		packageJson,
 		metadata,
-		docs: {
-			story: {
-				height: "525px",
-			},
-		},
 		status: {
 			type: "migrated",
 		},
@@ -121,11 +116,6 @@ Standard.parameters = {
 	chromatic: {
 		disableSnapshot: true,
 	},
-	docs: {
-		story: {
-			height: "475px",
-		},
-	},
 };
 Standard.args = {
 	imageSource: "example-card-landscape.png",
@@ -141,11 +131,6 @@ StandardNoMedia.parameters = {
 	chromatic: {
 		disableSnapshot: true,
 	},
-	docs: {
-		story: {
-			height: "250px",
-		},
-	},
 };
 
 /** Images and media have a minimum height and can grow with the parent component. Fixed height media is constrained to a 4:3 aspect ratio by applying the `spectrum-CoachMark-image-wrapper--fixedHeight` class. When this fixed height class is used, the height can be customized using the modifiable custom property `--mod-coachmark-media-fixed-height`.  */
@@ -155,11 +140,6 @@ MediaOptions.args = {
 	imageSource: "example-card-portrait.png",
 };
 MediaOptions.parameters = {
-	docs: {
-		story: {
-			height: "725px",
-		},
-	},
 	chromatic: {
 		disableSnapshot: true,
 	},
diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js
@@ -67,8 +67,6 @@ export const CoachContainer = (
 										label: "Reset tour",
 									},
 								],
-								popoverHeight: 68,
-								popoverWidth: 84,
 							},
 							context,
 						)}
@@ -165,15 +163,7 @@ export const CoachmarkMenuStatesTemplate = (args, context) =>
 			Container({
 				withBorder: false,
 				heading: "With action menu (closed) and media",
-				content: Template(
-					{
-						...args,
-						customStyles: {
-							"height": "265px"
-						}
-					},
-					context,
-				),
+				content: Template(args, context),
 			}),
 			Container({
 				withBorder: false,
@@ -183,10 +173,7 @@ export const CoachmarkMenuStatesTemplate = (args, context) =>
 						...args,
 						hasImage: false,
 						hasActionMenu: true,
-						isOpen: true,
-						customStyles: {
-							"height": "260px"
-						}
+						isOpen: true
 					},
 					context,
 				),
diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js
@@ -181,10 +181,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
-		tags: ["migrated"],
 		packageJson,
 		metadata,
 	},
+	tags: ["migrated"],
 	decorators: [
 		withDownStateDimensionCapture,
 	],
@@ -211,11 +211,6 @@ DefaultGroup.args = {
 DefaultGroup.tags = ["!dev"];
 DefaultGroup.parameters = {
 	chromatic: { disableSnapshot: true },
-	docs: {
-		story: {
-			height: "360px",
-		},
-	},
 };
 
 /**
diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js
@@ -16,9 +16,6 @@ export const ComboBoxGroup = Variants({
 		{
 			testHeading: "Open",
 			isOpen: true,
-			wrapperStyles: {
-				"min-block-size": "250px",
-			},
 		},
 		{
 			testHeading: "Help text with label",
diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js
@@ -56,9 +56,6 @@ export const Template = ({
 		}, 0);
 	}
 
-	const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m"
-	const adjustedPopoverHeight = showFieldLabel ? popoverHeight : popoverHeight + 32; // Subtract label height when no label
-
 	return html`
 		<div
 			class=${classMap({
@@ -78,10 +75,7 @@ export const Template = ({
 			})}
 			id=${ifDefined(id)}
 			data-testid=${ifDefined(testId ?? id)}
-			style=${styleMap({
-				...customStyles,
-				["margin-block-end"]: !isReadOnly && isOpen && !isDisabled ? `${adjustedPopoverHeight}px` : undefined,
-			})}
+			style=${styleMap(customStyles)}
 			role="combobox"
 			aria-expanded=${isOpen}
 			aria-haspopup="listbox"
@@ -150,7 +144,6 @@ export const Template = ({
 					"inline-size": size === "s" ? "192px" : size === "l" ? "224px" : size === "xl" ? "240px" : "208px",
 				},
 				content,
-				popoverHeight,
 			}, context)}
 			${when(helpText, () =>
 				HelpText({
diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js
@@ -1,10 +1,12 @@
 import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
+import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ContextualHelpGroup } from "./contextualhelp.test.js";
 import { Template } from "./template.js";
 
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Contextual help shows a user extra information in relation to another component or view.
  */
@@ -42,39 +44,8 @@ export default {
 		},
 		iconSet: { table: { disable: true } },
 		popoverPlacement: {
-			name: "Popover Placement",
-			type: { name: "string", required: true },
-			defaultValue: "bottom-start",
-			table: {
-				type: { summary: "string" },
-				category: "Component",
-				defaultValue: { summary: "Info" },
-			},
-			options: [
-				"top",
-				"top-left",
-				"top-right",
-				"top-start",
-				"top-end",
-				"bottom",
-				"bottom-left",
-				"bottom-right",
-				"bottom-start",
-				"bottom-end",
-				"left",
-				"left-top",
-				"left-bottom",
-				"start",
-				"start-top",
-				"start-bottom",
-				"right",
-				"right-top",
-				"right-bottom",
-				"end",
-				"end-top",
-				"end-bottom",
-			],
-			control: "select",
+			...Popover.argTypes.position,
+			name: "Popover placement",
 		},
 		link: {
 			name: "Has link",
@@ -107,11 +78,6 @@ export default {
 		},
 		packageJson,
 		metadata,
-		docs: {
-			story: {
-				height: "200px",
-			},
-		},
 		status: {
 			type: "migrated",
 		},
@@ -151,17 +117,9 @@ export const TopPopover = Template.bind({});
 TopPopover.tags = ["!dev"];
 TopPopover.args = {
 	popoverPlacement: "top",
-	customStyles: {
-		"margin-top": "170px",
-	},
 };
 TopPopover.parameters = {
 	chromatic: { disableSnapshot: true },
-	docs: {
-		story: {
-			height: "auto",
-		},
-	},
 };
 TopPopover.storyName = "Default - top popover";
 
diff --git a/components/contextualhelp/stories/contextualhelp.test.js b/components/contextualhelp/stories/contextualhelp.test.js
@@ -6,26 +6,14 @@ export const ContextualHelpGroup = Variants({
 	testData: [
 		{
 			testHeading: "Default",
-			customStyles: {
-				"inline-size": "275px",
-				"margin-bottom": "200px",
-			},
 		},
 		{
 			testHeading: "With link",
-			customStyles: {
-				"inline-size": "275px",
-				"margin-bottom": "200px",
-			},
 			link: true,
 		},
 		{
 			testHeading: "Help",
 			iconName: "HelpCircle",
-			customStyles: {
-				"inline-size": "275px",
-				"margin-bottom": "200px",
-			},
 		},
 	],
 });
diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js
@@ -43,8 +43,8 @@ export const Template = ({
 					customClasses: [`${rootClass}-button`],
 				}, context),
 				content: [
-					title ? html`<h2 class="${rootClass}-heading">${title}</h2>` : "",
-					body ? html`<p class="${rootClass}-body">${body}</p>` : "",
+					title ? html`<h2 class="${rootClass}-heading">${title}</h2>` : nothing,
+					body ? html`<p class="${rootClass}-body">${body}</p>` : nothing,
 					link
 						? Link({
 								text: "Link text",
@@ -56,8 +56,6 @@ export const Template = ({
 				position: popoverPlacement,
 				customClasses: [`${rootClass}-popover`],
 				customStyles,
-				popoverWidth: 275,
-				popoverHeight: 150,
 			}, context)}
 		</div>
 	`;
diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js
@@ -70,11 +70,6 @@ export default {
 				...(CalendarStories.parameters.actions.handles ?? [])
 			],
 		},
-		docs: {
-			story: {
-				height: "50px"
-			}
-		},
 		packageJson,
 		metadata,
 	},
@@ -101,11 +96,6 @@ DefaultGroup.args = {};
 DefaultGroup.tags = [ "!dev"];
 DefaultGroup.storyName = "Default";
 DefaultGroup.parameters = {
-	docs: {
-		story: {
-			height: "350px",
-		}
-	},
 	chromatic: { disableSnapshot: true },
 };
 
@@ -119,11 +109,6 @@ Quiet.args = {
 };
 Quiet.parameters = {
 	chromatic: { disableSnapshot: true },
-	docs: {
-		story: {
-			height: "350px",
-		}
-	},
 };
 
 /**
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
@@ -150,12 +150,6 @@ export default {
 		actions: {
 			handles: [],
 		},
-		docs: {
-			story: {
-				// TODO: restore `inline: false,`
-				height: "500px",
-			},
-		},
 		design: {
 			type: "figma",
 			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=839-1128",
@@ -236,11 +230,6 @@ export const WithHero = Template.bind({});
 WithHero.tags = ["!dev"];
 WithHero.storyName = "With hero image";
 WithHero.parameters = {
-	docs: {
-		story: {
-			height: "650px",
-		},
-	},
 	chromatic: { disableSnapshot: true },
 };
 WithHero.args = {
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
diff --git a/components/popover/index.css b/components/popover/index.css
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
diff --git a/components/popover/stories/popover.test.js b/components/popover/stories/popover.test.js
diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js

Original file line number	Diff line number	Diff line change
`@@ -16,9 +16,6 @@ export const ComboBoxGroup = Variants({`
`16`	`16`	`{`
`17`	`17`	`testHeading: "Open",`
`18`	`18`	`isOpen: true,`
`19`		`- wrapperStyles: {`
`20`		`- "min-block-size": "250px",`
`21`		`- },`
`22`	`19`	`},`
`23`	`20`	`{`
`24`	`21`	`testHeading: "Help text with label",`