feat(combobox): refactor CSS and clean up syntax

Author: aramos-adobe

.changeset/new-doors-fold.md

@@ -2,4 +2,4 @@
 "@spectrum-css/combobox": minor
 ---
 
-Adding read only state to combobox
+Combobox now includes a `read-only` state. Add the `is-readOnly` class to the Combobox to enable this feature.

components/combobox/index.css

@@ -220,6 +220,27 @@
 	.spectrum-Popover.is-open {
 		transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu)));
 	}
+
+	&.is-readOnly .spectrum-Combobox-textfield {
+		input:read-only {
+			background-color: var(--spectrum-combobox-readonly-input-background-color);
+			border-color: var(--spectrum-combobox-readonly-input-border-color);
+
+			&:hover {
+				background-color: revert;
+			}
+		}
+
+		&.is-invalid input:read-only {
+			border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
+		}
+
+		&.is-disabled input:read-only {
+			background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
+			border-color: transparent;
+			color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
+		}
+	}
 }
 
 /* LOADING INDICATOR */
@@ -321,8 +342,6 @@
 	font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size));
 	font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style));
 
-
-
 	&::placeholder {
 		--mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder);
 	}
@@ -378,49 +397,30 @@
 	}
 }
 
-/* Combobox Read-only */
-.spectrum-Textfield.is-readOnly {
-	input:read-only {
-		background-color: var(--spectrum-combobox-readonly-input-background-color);
-		border-color: var(--spectrum-combobox-readonly-input-border-color);
-
-		&:hover {
-			background-color: revert;
-			border-color: revert;
-		}
-	}
-
-	&.is-invalid input:read-only {
-		border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
-	}
-
-	&.is-disabled input:read-only {
-		background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
-		border-color: transparent;
-		color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
-	}
-
-	&.spectrum-Textfield--quiet {
-		input:read-only {
-			background-color: unset;
-			border-color: unset;
-		}
-
-		&.is-invalid input:read-only {
-			border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
-		}
-	}
-}
-
 /* QUIET VARIATION (no visible background) */
-/* stylelint-disable-next-line no-duplicate-selectors -- Combobox quiet variation and mods */
 .spectrum-Combobox--quiet {
 	border-radius: 0;
 
 	.spectrum-Combobox-textfield {
 		&.is-invalid .spectrum-Textfield-validationIcon {
 			inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width));
 		}
+
+		&.spectrum-Textfield--quiet {
+			input:read-only {
+				background-color: unset;
+				border-color: unset;
+			}
+
+			input:read-only:hover {
+				background-color: unset;
+				border-color: unset;
+			}
+
+			&.is-invalid input:read-only {
+				border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default)));
+			}
+		}
 	}
 
 	.spectrum-Combobox-input {

components/combobox/metadata/metadata.json

@@ -70,12 +70,6 @@
     ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield.is-readOnly input:read-only",
-    ".spectrum-Textfield.is-readOnly input:read-only:hover",
-    ".spectrum-Textfield.is-readOnly.is-disabled input:read-only",
-    ".spectrum-Textfield.is-readOnly.is-invalid input:read-only",
-    ".spectrum-Textfield.is-readOnly.spectrum-Textfield--quiet input:read-only",
-    ".spectrum-Textfield.is-readOnly.spectrum-Textfield--quiet.is-invalid input:read-only",
     "[dir=\"rtl\"] .spectrum-Combobox-progress-circle"
   ],
   "modifiers": [
@@ -287,8 +281,6 @@
   ],
   "high-contrast": [
     "--highcontrast-combobox-border-color-highlight",
-    "--highcontrast-combobox-border-color-invalid",
-    "--highcontrast-textfield-border-color-invalid-default",
-    "--highcontrast-textfield-text-color-disabled"
+    "--highcontrast-combobox-border-color-invalid"
   ]
 }

components/combobox/stories/combobox.test.js

@@ -49,10 +49,6 @@ export const ComboBoxGroup = Variants({
 			isQuiet: true,
 			value: "United States of America and to the republic",
 		},
-		{
-			testHeading: "Read-only",
-			isReadOnly: true
-		}
 	],
 	stateData: [
 		{
@@ -75,5 +71,9 @@ export const ComboBoxGroup = Variants({
 			testHeading: "Loading",
 			isLoading: true,
 		},
+		{
+			testHeading: "Read-only",
+			isReadOnly: true
+		},
 	],
 });

components/combobox/stories/template.js

@@ -43,6 +43,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)}
@@ -173,7 +174,7 @@ export const VariantGroup = (args, context) => {
 			args: {...args, showFieldLabel: true, fieldLabelText: "Country"},
 		},
 	];
-	
+
 	return Container({
 		direction: "row",
 		withHeading: false,