feat(combobox): adding read only state to combobox

.changeset/new-doors-fold.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/combobox": major
+---
+
+Adding read only state to combobox

components/combobox/index.css

@@ -90,6 +90,10 @@
 	--mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
 	--mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
 	/* @passthroughs end -- settings for nested Picker Button component */
+
+	&.is-readOnly {
+		pointer-events: none;
+	}
 }
 
 .spectrum-Combobox--sizeS {
@@ -318,6 +322,8 @@
 		--mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder);
 	}
 
+
+
 	/* Hover */
 	.spectrum-Combobox-textfield:hover &,
 	&:hover,

components/combobox/stories/combobox.mdx

@@ -90,6 +90,12 @@ Validity and focus must be bubbled up to the parent so descendants siblings can
 
 <Canvas of={ComboboxStories.QuietDisabled} />
 
+## Read-only
+
+Combo boxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combo box does not have a read-only option if no selection has been made.
+
+<Canvas of={ComboboxStories.ReadOnly} />
+
 ## Properties
 
 The component accepts the following inputs (properties):

components/combobox/stories/combobox.stories.js

@@ -1,6 +1,6 @@
 import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
+import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
 import { ComboBoxGroup } from "./combobox.test.js";
 import { Template } from "./template.js";
@@ -13,13 +13,18 @@ export default {
 	component: "Combobox",
 	argTypes: {
 		size: size(["s", "m", "l", "xl"]),
-		isOpen,
+		isOpen: {
+			name: "Open",
+			table: { category: "State" },
+			if: { arg: "isReadOnly", truthy: false },
+		},
 		isQuiet,
 		isInvalid,
 		isFocused,
 		isKeyboardFocused,
 		isLoading,
 		isDisabled,
+		isReadOnly,
 		showFieldLabel: {
 			name: "Show field label",
 			type: { name: "boolean" },
@@ -62,6 +67,7 @@ export default {
 		isKeyboardFocused: false,
 		isLoading: false,
 		isDisabled: false,
+		isReadOnly: false,
 		showFieldLabel: false,
 		testId: "combobox",
 	},
@@ -212,6 +218,12 @@ QuietDisabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+export const ReadOnly = Template.bind({});
+ReadOnly.tags = ["!dev"];
+ReadOnly.args = {
+	isReadOnly: true,
+};
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ComboBoxGroup.bind({});
 WithForcedColors.tags = ["!autodocs", "!dev"];

components/combobox/stories/template.js

@@ -26,6 +26,7 @@ const Combobox = ({
 	isFocused = false,
 	isKeyboardFocused = false,
 	isLoading = false,
+	isReadOnly = false,
 	selectedDay,
 } = {}, context = {}) => {
 	const { globals = {}, updateArgs } = context;
@@ -49,6 +50,7 @@ const Combobox = ({
 				"is-keyboardFocused": !isDisabled && isKeyboardFocused,
 				"is-loading": isLoading,
 				"is-disabled": isDisabled,
+				"is-readOnly": isReadOnly,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
@@ -94,7 +96,7 @@ const Combobox = ({
 				isDisabled,
 				position: "right",
 				onclick: function () {
-					updateArgs({ isOpen: !isOpen });
+					if (!isReadOnly) updateArgs({ isOpen: !isOpen });
 				},
 			}, context)}
 		</div>
@@ -107,6 +109,7 @@ export const Template = ({
 	isQuiet = false,
 	isDisabled = false,
 	showFieldLabel = false,
+	isReadOnly = false,
 	fieldLabelText = "Select location",
 	fieldLabelPosition = "top",
 	...args
@@ -116,7 +119,7 @@ export const Template = ({
 		<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,
+			["margin-block-end"]: !isReadOnly && isOpen && !isDisabled ? `${popoverHeight}px` : undefined,
 		})}>
 			${when(showFieldLabel, () =>
 				FieldLabel({
@@ -128,7 +131,7 @@ export const Template = ({
 			)}
 			${[
 				Popover({
-					isOpen: isOpen && !isDisabled,
+					isOpen: isOpen && !isDisabled && !isReadOnly,
 					withTip: false,
 					position: "bottom-start",
 					isQuiet,
@@ -137,11 +140,12 @@ export const Template = ({
 						isOpen,
 						isQuiet,
 						isDisabled,
+						isReadOnly,
 						...args,
 						...passthrough,
 					}, context),
 					content: [
-						Menu({
+						!isReadOnly && Menu({
 							size,
 							items: [
 								{