fix(combobox): corrects cases where open combobx stories and testing …

…previews could overlap adjacent components (#3568)
adobe · Feb 24, 2025 · d5e72d4 · d5e72d4
1 parent a25e0a9
commit d5e72d4
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js
@@ -1,7 +1,7 @@
 import { makeDecorator, useEffect } from "@storybook/preview-api";
 import { fetchContainers, toggleStyles } from "./helpers.js";
 
-import tokens from "@spectrum-css/tokens/dist/index.css?inline";
+import tokens from "@spectrum-css/tokens/dist/css/index.css?inline";
 
 /**
  * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework>

diff --git a/.storybook/package.json b/.storybook/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/preview",
-	"version": "11.0.1-next.2",
+	"version": "12.0.3",
 	"description": "A Spectrum CSS preview",
 	"license": "Apache-2.0",
 	"author": "Adobe",
@@ -40,7 +40,7 @@
 	},
 	"dependencies": {
 		"@adobe/spectrum-css-workflow-icons": "^4.0.0",
-		"@spectrum-css/bundle": "workspace:^",
+		"@spectrum-css/bundle": "1.0.0",
 		"@spectrum-css/tokens": "14.0.0-next.2",
 		"@spectrum-css/ui-icons": "1.1.2"
 	},

diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js
@@ -171,6 +171,11 @@ DefaultGroup.args = Default.args;
 DefaultGroup.tags = ["!dev"];
 DefaultGroup.parameters = {
 	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "360px",
+		},
+	},
 };
 
 export const QuietGroup = VariantGroup.bind({});
@@ -182,6 +187,11 @@ QuietGroup.args = {
 QuietGroup.tags = ["!dev"];
 QuietGroup.parameters = {
 	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "360px",
+		},
+	},
 };
 
 /**

diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js
@@ -4,9 +4,6 @@ import { Template } from "./template.js";
 export const ComboBoxGroup = Variants({
 	Template,
 	sizeDirection: "row",
-	wrapperStyles: {
-		"align-items": "flex-start",
-	},
 	testData: [
 		{
 			testHeading: "Default",
@@ -20,11 +17,17 @@ export const ComboBoxGroup = Variants({
 		{
 			testHeading: "Open",
 			isOpen: true,
+			wrapperStyles: {
+				"min-block-size": "250px",
+			},
 		},
 		{
 			testHeading: "Quiet + open",
 			isQuiet: true,
 			isOpen: true,
+			wrapperStyles: {
+				"min-block-size": "250px",
+			},
 		},
 		{
 			testHeading: "With field label top",