feat(combobox): updating disabled styles

Author: aramos-adobe

.changeset/new-doors-fold.md

@@ -2,4 +2,4 @@
 "@spectrum-css/combobox": minor
 ---
 
-Combobox now includes a `read-only` state. Add the `is-readOnly` class to the Combobox to enable this feature.
+Combobox now includes a `read-only` state. Add the `is-readOnly` class to the Combobox to enable this feature. By doing so, this also activates the `readonly` attribute in the `Textfield` component. To ensure the intended user experience please make sure the readonly state in the textfield is enabled by adding the `is-readOnly` class and `readonly` attribute on the input element for this component as well.

components/combobox/index.css

@@ -240,6 +240,10 @@
 			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)));
+
+			&:hover {
+				background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
+			}
 		}
 	}
 }
@@ -412,14 +416,14 @@
 				border-block-end: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) solid var(--mod-combobox-readonly-input-border-color, var(--spectrum-combobox-readonly-input-border-color));
 			}
 
+			&.is-invalid > .spectrum-Combobox-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 .spectrum-Combobox-input:read-only {
 				color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
 				border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
 			}
-
-			&.is-invalid > .spectrum-Combobox-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)));
-			}
 		}
 	}
 

components/combobox/metadata/metadata.json

@@ -63,6 +63,7 @@
     ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover",
     ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover",

components/combobox/stories/combobox.stories.js

@@ -18,7 +18,7 @@ import { Template, VariantGroup } from "./template.js";
  *   - `.spectrum-Combobox-textfield` is required on the Textfield outer element (`.spectrum-Textfield`)
  *   - `.spectrum-Combobox-input` is required on the `<input>` element inside of Textfields (`.spectrum-Textfield-input`)
  *   - `.spectrum-Combobox-button` is required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`)
- * 
+ *
  * ### Indicating validity and focus
  *
  * Validity and focus must be bubbled up to the parent so descendants siblings can be styled. Implementations should add the following classes to the `.spectrum-Combobox` parent class in the following situations:
@@ -171,7 +171,7 @@ QuietGroup.parameters = {
 };
 
 /**
- * Comboboxes 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 combobox does not have a read-only option if no selection has been made.
+ * Comboboxes 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 combobox does not have a read-only option if no selection has been made. To enable this feature, add `isReadOnly` class to the Combobox. Then within the Textfield component add `isReadOnly` class and `readonly` attribute to the `<input>`.
 */
 export const ReadOnly = Template.bind({});
 ReadOnly.tags = ["!dev"];

components/combobox/stories/template.js

@@ -118,6 +118,7 @@ export const Template = ({
 				FieldLabel({
 					size,
 					label: fieldLabelText,
+					isDisabled,
 					customStyles: { "max-inline-size": "100px"},
 					alignment: fieldLabelPosition === "left" && "left",
 				}, context)