@spectrum-css/combobox - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+<a name="2.1.3"></a>
+##2.1.3
+🗓
[phone] • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.1.2...@spectrum-css/combobox@2.1.3)
+
+**Note:** Version bump only for package @spectrum-css/combobox
+
 <a name="2.1.2"></a>
@@ -8,0 +15,0 @@ ##2.1.2

package.json

 {
   "name": "@spectrum-css/combobox",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "The Spectrum CSS combobox component",
@@ -33,3 +33,3 @@ "license": "Apache-2.0",
   },
-  "gitHead": "21308ac4b92a5637eebea3e2a6611aab34a7a7b8"
+  "gitHead": "616560254051a50c30622af0ff39a8f76de328c1"
 }

stories/combobox.stories.js

@@ -1,2 +0,5 @@
-// Import the component markup template
+import isChromatic from "chromatic/isChromatic";
+
+import { html } from "lit";
+
 import { Template } from "./template";
@@ -40,13 +43,2 @@
 		},
-		isValid: {
-			name: "Valid",
-			type: { name: "boolean" },
-			table: {
-				disable: true,
-				type: { summary: "boolean" },
-				category: "State",
-			},
-			control: "boolean",
-			if: { arg: "isInvalid", truthy: false },
-		},
 		isInvalid: {
@@ -60,3 +52,2 @@ name: "Invalid",
 			control: "boolean",
-			if: { arg: "isValid", truthy: false },
 		},
@@ -118,2 +109,13 @@ isFocused: {
 		},
+		fieldLabelPosition: {
+			name: "Field label position",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["top", "left"],
+			control: "select",
+			if: { arg: "showFieldLabel", truthy: true },
+		},
 		content: { table: { disable: true } },
@@ -127,3 +129,2 @@ },
 		isInvalid: false,
-		isValid: false,
 		isFocused: false,
@@ -134,3 +135,30 @@ isKeyboardFocused: false,
 		showFieldLabel: false,
-		fieldLabelText: "Select location"
+		fieldLabelText: "Select location",
+		content: [
+			Menu({
+				role: "listbox",
+				subrole: "option",
+				isSelectable: true,
+				items: [
+					{
+						label: "Ballard",
+						isSelected: true,
+						isChecked: true,
+					},
+					{
+						label: "Fremont",
+					},
+					{
+						label: "Greenwood",
+					},
+					{
+						type: "divider",
+					},
+					{
+						label: "United States of America",
+						isDisabled: true,
+					},
+				],
+			}),
+		],
 	},
@@ -149,65 +177,76 @@ parameters: {
 
-export const Default = Template.bind({});
-Default.args = {
-	content: [
-		Menu({
-			role: "listbox",
-			subrole: "option",
-			isSelectable: true,
-			items: [
-				{
-					label: "Ballard",
-					isSelected: true,
-					isChecked: true,
-				},
-				{
-					label: "Fremont",
-				},
-				{
-					label: "Greenwood",
-				},
-				{
-					type: "divider",
-				},
-				{
-					label: "United States of America",
-					isDisabled: true,
-				},
-			],
-		}),
-	],
-};
+const defaultVariants = (args) => html`
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+		})}
+	</div>
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+			isFocused: true,
+		})}
+	</div>
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+			isKeyboardFocused: true,
+		})}
+	</div>
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+			isDisabled: true,
+		})}
+	</div>
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+			isLoading: true,
+		})}
+	</div>
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+			isInvalid: true,
+		})}
+	</div>
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+			showFieldLabel: true,
+			fieldLabelText: "Select location, this label should wrap",
+		})}
+	</div>
+	<div style=${args.isOpen && "padding-bottom: 10rem;"}>
+		${Template({
+			...args,
+			showFieldLabel: true,
+			fieldLabelText: "Select location, this label should wrap",
+			fieldLabelPosition: "left",
+		})}
+	</div>
+`;
 
-export const Quiet = Template.bind({});
+const closedVariants = (args) => defaultVariants({...args, isOpen: false});
+
+const chromaticKitchenSink = (args) => html`
+	<div style="display: flex; gap: 1rem; flex-direction: column;">
+		${closedVariants(args)}
+	</div>
+	<div style="display: flex; gap: 1rem; flex-direction: column; margin-top: 2rem;">
+		${defaultVariants(args)}
+	</div>
+`;
+
+export const Default = (args) => isChromatic() ? chromaticKitchenSink(args) : Template(args);
+Default.args = {};
+
+export const Quiet = (args) => isChromatic()
+	? chromaticKitchenSink(args)
+	: Template({
+		...args
+	});
 Quiet.args = {
 	isQuiet: true,
-	showFieldLabel: true,
-	fieldLabelText: "Select location, this label should wrap",
-	content: [
-		Menu({
-			role: "listbox",
-			subrole: "option",
-			isSelectable: true,
-			items: [
-				{
-					label: "Ballard",
-					isSelected: true,
-					isChecked: true,
-				},
-				{
-					label: "Fremont",
-				},
-				{
-					label: "Greenwood",
-				},
-				{
-					type: "divider",
-				},
-				{
-					label: "United States of America",
-					isDisabled: true,
-				},
-			],
-		}),
-	],
 };

stories/template.js

@@ -23,3 +23,2 @@ import { html } from "lit";
 	isInvalid = false,
-	isValid = false,
 	isQuiet = false,
@@ -29,2 +28,3 @@ isDisabled = false,
 	fieldLabelText = "Select location",
+	fieldLabelPosition = "top",
 	isFocused = false,
@@ -56,2 +56,3 @@ isKeyboardFocused = false,
 				style: { "max-inline-size": "100px"},
+				alignment: fieldLabelPosition === "left" && "left",
 			}) : null
@@ -67,3 +68,2 @@ }
 				"is-invalid": !isDisabled && isInvalid,
-				"is-valid": !isDisabled && isValid,
 				"is-focused": !isDisabled && isFocused,
@@ -83,3 +83,2 @@ "is-keyboardFocused": !isDisabled && isKeyboardFocused,
 					isDisabled,
-					isValid,
 					isInvalid,
@@ -109,3 +108,2 @@ isFocused,
 						... isInvalid ? ['is-invalid'] : [],
-						... isValid ? ['is-valid'] : [],
 					],
@@ -142,2 +140,3 @@ size,
 							...globals,
+							size,
 							items: [
@@ -144,0 +143,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

175302

increased by0.81%

Lines of code

1845

increased by1.82%

No dependency changes