@spectrum-css/combobox - npm Package Compare versions

Comparing version 2.0.47 to 2.0.48

CHANGELOG.md

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

metadata/mods.md

@@ -1,2 +0,2 @@
-| Modifiable Custom Properties                           |
+| Modifiable custom properties                           |
 | ------------------------------------------------------ |
@@ -3,0 +3,0 @@ | `--mod-combobox-alert-icon-color`                      |

package.json

 {
   "name": "@spectrum-css/combobox",
-  "version": "2.0.47",
+  "version": "2.0.48",
   "description": "The Spectrum CSS combobox component",
@@ -33,3 +33,3 @@ "license": "Apache-2.0",
   },
-  "gitHead": "e978397c22cf2813262f5a326491f5e485adff03"
+  "gitHead": "f9f5d7b93201c84c774486b7c66c29745d16c8d8"
 }

project.json

@@ -9,2 +9,4 @@ {
 		"compare": {},
+		"lint": {},
+
 		"test": {
@@ -11,0 +13,0 @@ "defaultConfiguration": "scope"

stories/combobox.stories.js

@@ -97,2 +97,21 @@ // Import the component markup template
 		},
+		showFieldLabel: {
+			name: "Show field label",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+		},
+		fieldLabelText: {
+			name: "Field label text",
+			type: { name: "text" },
+			table: {
+				type: { summary: "text" },
+				category: "Component",
+			},
+			control: "text",
+			if: { arg: "showFieldLabel", truthy: true },
+		},
 		content: { table: { disable: true } },
@@ -111,2 +130,4 @@ },
 		isDisabled: false,
+		showFieldLabel: false,
+		fieldLabelText: "Select location"
 	},
@@ -155,1 +176,35 @@ parameters: {
 };
+
+export const Quiet = Template.bind({});
+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

@@ -5,6 +5,7 @@ import { html } from "lit";
 
+import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
+import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js";
+import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
-import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
-import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js";
 
@@ -26,2 +27,4 @@ import { useArgs, useGlobals } from "@storybook/client-api";
 	isDisabled = false,
+	showFieldLabel = false,
+	fieldLabelText = "Select location",
 	isFocused = false,
@@ -47,2 +50,10 @@ isKeyboardFocused = false,
 	return html`
+		${showFieldLabel ?
+			FieldLabel({
+				...globals,
+				size,
+				label: fieldLabelText,
+				style: { "max-inline-size": "100px"},
+			}) : null
+		}
 		<div
@@ -82,3 +93,3 @@ class=${classMap({
 					customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
-					placeholder: "Type here",
+					placeholder: "Type here this text should truncate",
 					name: "field",
@@ -94,3 +105,7 @@ value: globals.selectedDay
 					...globals,
-					customClasses: [`${rootClass}-button`],
+					customClasses: [
+						`${rootClass}-button`,
+						... isInvalid ? ['is-invalid'] : [],
+						... isValid ? ['is-valid'] : [],
+					],
 					size,
@@ -101,4 +116,2 @@ iconType: "workflow",
 					isOpen,
-					isInvalid,
-					isValid,
 					isFocused,
@@ -105,0 +118,0 @@ isKeyboardFocused,

No alert changes

Worsened metrics

Total package byte prevSize

172198

decreased by-12.88%

Lines of code

1843

decreased by-11.35%

No dependency changes