chore(storybook): align display viewports for stories (#3131)

.changeset/ten-olives-call.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/modal": patch
+---
+
+The `-moz-available` prefix as an alias for the block-size: stretch property is not behaving as intended. This removes that prefix and forces FF to fallback to the 100vh property which is aligning as intended.

.storybook/assets/base.css

@@ -39,8 +39,9 @@ svg:has(symbol):not(:has(use)) {
 }
 
 /* --- DOCS STYLES --- */
-.innerZoomElementWrapper .sb-story {
-	padding: 10px !important;
+.docs-story > *:first-child {
+	background-color: var(--spectrum-background-layer-1-color);
+	overflow: hidden;
 }
 
 /* Make sure heading provided by <Stories/> doc block uses styles consistent with the default H2. */

.storybook/decorators/index.js

@@ -20,7 +20,6 @@ export { withTestingPreviewWrapper } from "./testing-preview.js";
 export { withTextDirectionWrapper } from "./text-direction.js";
 
 /* This is exported but must be opted-into on a component-by-component basis */
-export { withSizingWrapper } from "./sizing.js";
 export { withUnderlayWrapper } from "./underlay.js";
 
 /* External decorators exported for use in stories */

.storybook/decorators/utilities.js

@@ -16,7 +16,7 @@ import { capitalize } from "lodash-es";
 const Heading = ({
 	type = "heading",
 	content,
-	size = "m",
+	size = "l",
 	weight,
 	customClasses = [],
 } = {}) => {
@@ -28,7 +28,7 @@ const Heading = ({
 		skipLineBreak: true,
 		customClasses: ["chromatic-ignore", ...customClasses],
 		customStyles: {
-			"color": type !== "code" ? "var(--spectrum-gray-600)" : undefined,
+			"color": type !== "code" ? "var(--spectrum-heading-color)" : undefined,
 		}
 	});
 };
@@ -79,8 +79,8 @@ export const Container = ({
 		<div
 			data-outer-container
 			style=${styleMap({
-        "z-index": "1",
-        "position": "relative",
+				"z-index": "1",
+				"position": "relative",
 				"display": "flex",
 				"flex-direction": "column",
 				"flex-wrap": "nowrap",
@@ -273,7 +273,6 @@ export const Sizes = ({
 		withBorder,
 		heading: withHeading ? "Sizing" : undefined,
 		argKey: "size",
-		level: 3,
 		labels: {
 			xxs: "Extra-extra-small",
 			xs: "Extra-small",
@@ -325,14 +324,19 @@ export const Variants = ({
 	}
 
 	return (args, context) => {
+		// Fetch any docs configurations from the context to use for VRT
 		const { parameters = {} } = context;
-		const storyHeight = parameters.docs?.story?.height;
+
+		const height = parameters?.docs?.story?.height;
+		const width = parameters?.docs?.story?.width;
 
 		return html`
 			<!-- Simple, clean template preview for non-testing grid views -->
 			<div
 				style=${styleMap({
 					"padding": "12px",
+					"min-block-size": typeof height === "number" ? `${height}px` : height,
+					"min-inline-size": typeof width === "number" ? `${width}px` : width,
 					...wrapperStyles,
 					"display": window.isChromatic() ? "none" : wrapperStyles.display,
 				})}
@@ -388,14 +392,12 @@ export const Variants = ({
 						}
 
 						const combinedStyles = {
-							"min-block-size": storyHeight,
 							...wrapperStyles,
 							...testWrapperStyles,
 						};
 
 						return Container({
 							heading: testHeading,
-							level: withStates ? 1 : 3,
 							withBorder,
 							containerStyles: {
 								// the z-index is necessary to ensure elements always appear above the overlay

.storybook/modes/index.js

@@ -39,15 +39,3 @@ export const disableDefaultModes = {
         return acc;
     }, {}),
 };
-
-export const mobile = {
-    "Mobile": {
-        scale: "large",
-    },
-};
-
-export const viewports = {
-    small: {
-        width: 480,
-    },
-};

.storybook/preview.js

@@ -36,8 +36,8 @@ setConsoleOptions({
 });
 
 /** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */
-const parameters = {
-	layout: "padded",
+export const parameters = {
+	layout: "centered",
 	showNav: true,
 	showTabs: true,
 	showPanel: true,

components/alertbanner/stories/alertbanner.stories.js

@@ -64,6 +64,7 @@ export default {
 		showCloseButton: true,
 	},
 	parameters: {
+		layout: "padded",
 		actions: {
 			handles: ["click .spectrum-AlertBanner button"],
 		},
@@ -133,7 +134,7 @@ Negative.parameters = {
  * The alert banner component can contain both an icon-only close button and a button with a contextual action to
  * take. Whenever possible, include the in-line action button if there's a way for a user to quickly address the issue
  * associated with an alert. There should never be more than one button with a contextual action in an alert banner.
- * 
+ *
  * The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert.
  */
 export const ActionableOptions = ActionableOptionsTemplate.bind({});
@@ -160,4 +161,4 @@ TextOverflow.args = {
 };
 TextOverflow.parameters = {
 	chromatic: { disableSnapshot: true },
-};
+};

components/alertbanner/stories/template.js

@@ -31,7 +31,10 @@ export const Template = ({
 				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
-			style=${styleMap(customStyles)}
+			style=${styleMap({
+				"min-inline-size": "500px",
+				...customStyles,
+			})}
 			id=${id}
 			data-testid=${ifDefined(testId)}
 		>
@@ -172,4 +175,4 @@ export const ActionableOptionsTemplate = (args, context) => Container({
 			}, context),
 		})}
 	`,
-});
+});

components/alertdialog/stories/alertdialog.stories.js

@@ -40,6 +40,7 @@ export default {
 		variant: "confirmation",
 	},
 	parameters: {
+		layout: "fullscreen",
 		actions: {
 			handles: ["click .spectrum-AlertDialog button"],
 		},

components/coachindicator/stories/coachindicator.stories.js

@@ -6,7 +6,7 @@ import { AllVariantsCoachIndicatorGroup } from "./template";
 
 /**
  * The coach indicator component can be used to bring added attention to specific parts of a page.
- * 
+ *
  * Coach indicator is primarily used along with the [coach mark](/docs/components-coach-mark--docs) component.
  */
 export default {
@@ -41,6 +41,12 @@ Default.parameters = {
 	chromatic: {
 		prefersReducedMotion: "reduce",
 		pauseAnimationAtEnd: true,
+		modes: {
+			// Skips the dark mode/RTL b/c no changes are made to the component
+			"Dark | RTL": {
+				disable: true,
+			},
+		},
 	},
 };
 Default.tags = ["!autodocs"];

components/coachmark/stories/coachmark.stories.js

@@ -1,6 +1,6 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
-import { disableDefaultModes, mobile } from "@spectrum-css/preview/modes";
+import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import pkgJson from "../package.json";
 import { CoachMarkGroup } from "./coachmark.test.js";
 import { Template } from "./template.js";
@@ -47,16 +47,14 @@ export default {
 		hasImage: false,
 	},
 	parameters: {
+		layout: "padded",
 		actions: {
 			handles: [
 				...(ActionButton.parameters?.actions?.handles ?? []),
 				...(Menu.parameters?.actions?.handles ?? []),
 			],
 		},
 		packageJson: pkgJson,
-		chromatic: {
-			modes: mobile,
-		},
 		docs: {
 			story: {
 				height: "300px",
@@ -80,8 +78,7 @@ WithMedia.parameters = {
 	},
 	docs: {
 		story: {
-			inline: false,
-			height: "475px",
+			height: "500px",
 		},
 	},
 };

components/coachmark/stories/template.js

@@ -118,9 +118,7 @@ export const Template = (args, context) => {
 				customClasses: [`${args.rootClass}-popover`],
 				isOpen: true,
 				position: "right-top",
-				trigger: (passthrough) => CoachIndicator({
-					...passthrough,
-				}, context),
+				trigger: (passthrough) => CoachIndicator(passthrough, context),
 				content: [
 					CoachContainer(args, context)
 				],

components/colorarea/stories/colorarea.test.js

@@ -3,7 +3,6 @@ import { Template } from "./template.js";
 
 export const ColorAreaGroup = Variants({
 	Template,
-	skipBorders: true,
 	testData: [
 		{
 			testHeading: "Default",
@@ -19,11 +18,9 @@ export const ColorAreaGroup = Variants({
 		{
 			testHeading: "Disabled",
 			isDisabled: true,
-			isFocused: false,
 		},
 		{
 			testHeading: "Focused",
-			isDisabled: false,
 			isFocused: true,
 		},
 	],

components/colorhandle/stories/colorhandle.stories.js

@@ -70,12 +70,6 @@ WithColorLoupe.args = {
 WithColorLoupe.tags = ["!dev"];
 WithColorLoupe.parameters = {
 	chromatic: { disableSnapshot: true },
-	docs: {
-		story: {
-			inline: false,
-			height: "150px",
-		},
-	},
 };
 
 // ********* VRT ONLY ********* //

components/contextualhelp/stories/contextualhelp.stories.js

@@ -91,8 +91,12 @@ export default {
 			],
 		},
 		packageJson: pkgJson,
+		docs: {
+			story: {
+				height: "200px",
+			},
+		},
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = ContextualHelpGroup.bind({});
@@ -124,6 +128,11 @@ TopPopover.args = {
 };
 TopPopover.parameters = {
 	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "auto",
+		},
+	},
 };
 
 export const HelpDefault = Template.bind({});
@@ -162,6 +171,11 @@ HelpTopPopover.args = {
 };
 HelpTopPopover.parameters = {
 	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "auto",
+		},
+	},
 };
 
 // ********* VRT ONLY ********* //

components/dialog/stories/dialog.stories.js

@@ -109,6 +109,7 @@ export default {
 		layout: "default",
 	},
 	parameters: {
+		layout: "fullscreen",
 		actions: {
 			handles: ["click .spectrum-Dialog button"],
 		},