@spectrum-css/combobox - npm Package Compare versions

Comparing version 4.0.0-s2-foundations.13 to 4.0.0-s2-foundations.14

CHANGELOG.md

 # Change Log
 
+## 4.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#3036](https://github.com/adobe/spectrum-css/pull/3036) [`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - [CSS-890]: adjusts --mods to be applied inside of index.css
+
+### Patch Changes
+
+- Updated dependencies [[`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221)]:
+  - @spectrum-css/tokens@15.0.0-s2-foundations.18
+
 ## 4.0.0-s2-foundations.13
@@ -4,0 +15,0 @@

metadata/mods.md

@@ -53,34 +53,1 @@ | Modifiable custom properties                           |
 | `--mod-combobox-spacing-label-to-combobox`             |
-| `--mod-picker-button-background-color`                 |
-| `--mod-picker-button-background-color-disabled`        |
-| `--mod-picker-button-background-color-quiet`           |
-| `--mod-picker-button-border-color`                     |
-| `--mod-picker-button-border-color-quiet`               |
-| `--mod-picker-button-border-width`                     |
-| `--mod-picker-button-font-color-disabled`              |
-| `--mod-textfield-background-color`                     |
-| `--mod-textfield-background-color-disabled`            |
-| `--mod-textfield-border-color`                         |
-| `--mod-textfield-border-color-disabled`                |
-| `--mod-textfield-border-color-focus`                   |
-| `--mod-textfield-border-color-focus-hover`             |
-| `--mod-textfield-border-color-hover`                   |
-| `--mod-textfield-border-color-invalid-default`         |
-| `--mod-textfield-border-color-invalid-focus`           |
-| `--mod-textfield-border-color-invalid-focus-hover`     |
-| `--mod-textfield-border-color-invalid-hover`           |
-| `--mod-textfield-border-color-invalid-keyboard-focus`  |
-| `--mod-textfield-border-color-keyboard-focus`          |
-| `--mod-textfield-border-width`                         |
-| `--mod-textfield-focus-indicator-color`                |
-| `--mod-textfield-focus-indicator-gap`                  |
-| `--mod-textfield-focus-indicator-width`                |
-| `--mod-textfield-font-family`                          |
-| `--mod-textfield-font-weight`                          |
-| `--mod-textfield-icon-color-invalid`                   |
-| `--mod-textfield-text-color-default`                   |
-| `--mod-textfield-text-color-disabled`                  |
-| `--mod-textfield-text-color-focus`                     |
-| `--mod-textfield-text-color-focus-hover`               |
-| `--mod-textfield-text-color-hover`                     |
-| `--mod-textfield-text-color-keyboard-focus`            |

package.json

 {
 	"name": "@spectrum-css/combobox",
-	"version": "4.0.0-s2-foundations.13",
+	"version": "4.0.0-s2-foundations.14",
 	"description": "The Spectrum CSS combobox component",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

stories/template.js

@@ -5,2 +5,3 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
+import { getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
@@ -10,2 +11,3 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
@@ -17,6 +19,8 @@
 
-export const Template = ({
+const Combobox = ({
 	rootClass = "spectrum-Combobox",
-	id,
+	id = getRandomId("combobox"),
+	testId,
 	customClasses = [],
+	customStyles = {},
 	size = "m",
@@ -27,5 +31,2 @@ isOpen = true,
 	isDisabled = false,
-	showFieldLabel = false,
-	fieldLabelText = "Select location",
-	fieldLabelPosition = "top",
 	isFocused = false,
@@ -37,2 +38,3 @@ isKeyboardFocused = false,
 	const { globals = {}, updateArgs } = context;
+
 	const lang = globals.lang ?? "en-US";
@@ -46,9 +48,2 @@
 	return html`
-		${when(showFieldLabel, () =>
-			FieldLabel({
-				size,
-				label: fieldLabelText,
-				customStyles: { "max-inline-size": "100px"},
-				alignment: fieldLabelPosition === "left" && "left",
-			}, context))}
 		<div
@@ -69,58 +64,90 @@ class=${classMap({
 			id=${ifDefined(id)}
+			data-testid=${ifDefined(testId ?? id)}
+			style=${styleMap(customStyles)}
 		>
+			${TextField({
+				size,
+				isQuiet,
+				isDisabled,
+				isInvalid,
+				isFocused,
+				isKeyboardFocused,
+				customClasses: [
+					`${rootClass}-textfield`,
+					...(isLoading ? ["is-loading"] : []),
+				],
+				customInputClasses: [`${rootClass}-input`],
+				isLoading,
+				customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
+				placeholder: "Type here this text should truncate",
+				name: "field",
+				value: selectedDay
+					? new Date(selectedDay).toLocaleDateString(lang)
+					: undefined,
+				onclick: function () {
+					if (!isOpen) updateArgs({ isOpen: true });
+				},
+			}, context)}
+			${PickerButton({
+				customClasses: [
+					`${rootClass}-button`,
+					... isInvalid ? ["is-invalid"] : [],
+				],
+				size,
+				iconType: "ui",
+				iconName: "ChevronDown",
+				isQuiet,
+				id: getRandomId("picker"),
+				isOpen,
+				isFocused,
+				isKeyboardFocused,
+				isDisabled,
+				position: "right",
+				onclick: function () {
+					updateArgs({ isOpen: !isOpen });
+				},
+			}, context)}
+		</div>
+	`;
+};
+
+export const Template = ({
+	size = "m",
+	isOpen = true,
+	isQuiet = false,
+	isDisabled = false,
+	showFieldLabel = false,
+	fieldLabelText = "Select location",
+	fieldLabelPosition = "top",
+	...args
+} = {}, context = {}) => {
+	const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m"
+	return html`
+		<div style=${styleMap({
+			// This accounts for the height of the popover when it is open to prevent testing issues
+			// and allow docs containers to be the right height
+			["margin-block-end"]: isOpen && !isDisabled ? `${popoverHeight}px` : undefined,
+		})}>
+			${when(showFieldLabel, () =>
+				FieldLabel({
+					size,
+					label: fieldLabelText,
+					customStyles: { "max-inline-size": "100px"},
+					alignment: fieldLabelPosition === "left" && "left",
+				}, context)
+			)}
 			${[
-				TextField({
-					size,
-					isQuiet,
-					isDisabled,
-					isInvalid,
-					isFocused,
-					isKeyboardFocused,
-					customClasses: [
-						`${rootClass}-textfield`,
-						...(isLoading ? ["is-loading"] : []),
-					],
-					customInputClasses: [`${rootClass}-input`],
-					isLoading,
-					customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
-					placeholder: "Type here this text should truncate",
-					name: "field",
-					value: selectedDay
-						? new Date(selectedDay).toLocaleDateString(lang)
-						: undefined,
-					onclick: function () {
-						if (!isOpen) updateArgs({ isOpen: true });
-					},
-				}, context),
-				PickerButton({
-					customClasses: [
-						`${rootClass}-button`,
-						... isInvalid ? ["is-invalid"] : [],
-					],
-					size,
-					iconType: "ui",
-					iconName: "ChevronDown",
-					isQuiet,
-					isOpen,
-					isFocused,
-					isKeyboardFocused,
-					isDisabled,
-					position: "right",
-					onclick: function () {
-						updateArgs({ isOpen: !isOpen });
-					},
-				}, context),
 				Popover({
 					isOpen: isOpen && !isDisabled,
 					withTip: false,
-					position: "bottom",
+					position: "bottom-start",
 					isQuiet,
-					customStyles: isOpen
-						? {
-								position: "absolute",
-								top: "100%",
-								left: "0",
-								width: "100%",
-						}
-						: {},
+					trigger: (passthrough) => Combobox({
+						size,
+						isOpen,
+						isQuiet,
+						isDisabled,
+						...args,
+						...passthrough,
+					}, context),
 					content: [
@@ -146,2 +173,4 @@ Menu({
 					],
+					popoverWidth: size === "s" ? 140 : size === "l" ? 191 : size === "xl" ? 192 : 166, // default value is "m"
+					popoverHeight,
 				}, context),
@@ -148,0 +177,0 @@ ]}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

125066

decreased by-32.04%

Number of package files

11

decreased by-8.33%

Lines of code

1128

decreased by-34.72%

No dependency changes