docs(popover): increase chromatic coverage for tip position

components/popover/stories/popover.stories.js

@@ -1,7 +1,9 @@
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { userEvent, within } from "@storybook/testing-library";
 import { html } from "lit";
+import { when } from "lit/directives/when.js";
 
-import { Template } from "./template";
+import { SourcelessTemplate, 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";
@@ -125,18 +127,67 @@ export default {
 		},
 	},
 	decorators: [
-		(Story, context) => html`<div style="padding: 16px">${Story(context)}</div>`
+		(Story, context) => html`
+			<style>
+				.spectrum-Detail { display: inline-block; }
+				.spectrum-Typography > div {
+					/* Why seafoam? Because it separates it from the component styles. */
+					--mod-detail-font-color: var(--spectrum-seafoam-900);
+				}
+			</style>
+			<div style="padding: 16px">${Story(context)}</div>
+		`,
 	],
 };
 
+
+const ChromaticTipPlacementVariants = (args) => html`
+	${placementOptions.map(option => {
+		const optionDescription = () => {
+			if (option.startsWith("start") || option.startsWith("end"))
+				return "Changes side with text direction (like a logical property)";
+			if (option.startsWith("left") || option.startsWith("right"))
+				return "Text direction does not effect the position";
+			return null;
+		};
+
+		return html`
+			<div class="spectrum-Typography" style="padding-bottom: 12rem;">
+				${Typography({
+					semantics: "detail",
+					size: "l",
+					content: [`${option}`],
+				})}
+				<div>
+					${when(optionDescription() !== null, () => html`
+						${Typography({
+							semantics: "detail",
+							size: "s",
+							content: [`${optionDescription()}`],
+						})}
+					`)}
+					</div>
+				<div style="padding-top: 2rem">
+					${SourcelessTemplate({
+						...args,
+						position: option,
+					})}
+				</div>
+			</div>
+		`;
+	})}
+`;
+
 export const Default = Template.bind({});
 Default.play = async ({ canvasElement }) => {
 	const canvas = within(canvasElement);
 	await userEvent.click(canvas.getByRole("button"));
 };
 Default.args = {};
 
-export const WithTip = Template.bind({});
+export const WithTip = (args) => html`
+	${window.isChromatic() ? ChromaticTipPlacementVariants(args) : Template(args)}
+`;
 WithTip.play = async ({ canvasElement }) => {
 	const canvas = within(canvasElement);
 	await userEvent.click(canvas.getByRole("button"));

components/popover/stories/template.js

@@ -171,3 +171,39 @@ export const Template = ({
 		</div>
 	`;
 };
+
+export const SourcelessTemplate = ({
+	rootClass = "spectrum-Popover",
+	size = "m",
+	isOpen = false,
+	withTip = false,
+	position = "top",
+	customClasses = [],
+	id = "popover-1",
+	testId,
+	customStyles = {},
+	content = [],
+}) => html`
+	<div
+		class=${classMap({
+			[rootClass]: true,
+			"is-open": isOpen,
+			[`${rootClass}--size${size?.toUpperCase()}`]:
+				typeof size !== "undefined",
+			[`${rootClass}--withTip`]: withTip,
+			[`${rootClass}--${position}`]: typeof position !== "undefined",
+			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+		})}
+		style=${ifDefined(styleMap(customStyles))}
+		role="presentation"
+		id=${ifDefined(id)}
+		data-testid=${ifDefined(testId)}
+	>
+		${content.map((c) => (typeof c === "function" ? c({}) : c))}
+		${withTip
+			? position && ["top", "bottom"].some((e) => position.startsWith(e))
+				? html`<svg class="${rootClass}-tip" viewBox="0 -0.5 16 9" width="10"><path class="${rootClass}-tip-triangle" d="M-1,-1 8,8 17,-1"></svg>`
+				: html`<svg class="${rootClass}-tip" viewBox="0 -0.5 9 16" width="10"><path class="${rootClass}-tip-triangle" d="M-1,-1 8,8 -1,17"></svg>`
+			: ""}
+	</div>
+`;