feat(combobox): adding new s2 migration (#3683)

* feat(combobox): adding new s2 migration

* feat(combobox): refactoring field label and helptext

* feat(combobox): add metadata files

* feat(combobox): add changeset, more test cases and metadata

* chore(combobox): adding helptext metadata

* feat(combobox): add aria label, adjust story copy, and changeset

* chore(combobox): updating metadata files

* feat(combobox): add help text docs

* chore(combobox): restore some metadata files

* feat(combobox): adding new tests, fixing css and template

* feat(combobox): updating css classes, adding role to ifb, autocomplete

* chore(combobox): adding combobox metadata files

* feat(combobox): removing empty args for default combobox

* feat(combobox): refactor template, passing mods, adding more tests

* chore(combobox): restore helptext metadata

* feat(combobox): update template

* chore(combobox): adding metadata files

* feat(combobox): fix spacing issues

* feat(combobox): adjusting diacritics line height

* fix(combobox): restore border width subtraction

* feat(combobox): fixing autocomplete

* feat(combobox): adjusting WHCM autocomplete mode

Author: aramos-adobe

.changeset/four-lemons-warn.md

@@ -0,0 +1,30 @@
+---
+"@spectrum-css/combobox": major
+"@spectrum-css/helptext": minor
+---
+
+### Combobox S2 Migration
+
+#### New Changes
+
+- Removed quiet styling variant
+- Updated corner radius to match S2 specifications
+- Changed outline thickness for better visibility
+- Replaced picker button with in-field button component
+- Added help text along with invalid state
+- Modified the WHCM invalid/error state in help text
+
+### New tokens
+
+`--spectrum-combobox-font-weight`
+`--spectrum-combobox-line-height-cjk`
+`--spectrum-combobox-spacing-alert-icon-to-text`
+`--spectrum-combobox-spacing-to-help-text`
+
+### New mods
+
+`--mod-combobox-line-height-cjk`
+`--mod-combobox-popover-animation-distance`
+`--mod-combobox-spacing-alert-icon-to-text`
+`--mod-combobox-spacing-to-help-text`
+`--mod-combobox-textfield-background-color`

components/combobox/dist/metadata.json

@@ -4,19 +4,13 @@
     ".spectrum-Combobox",
     ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill",
     ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon",
-    ".spectrum-Combobox .spectrum-Popover.is-open",
-    ".spectrum-Combobox--quiet",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-input",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only",
-    ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only",
-    ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL",
-    ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM",
-    ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS",
-    ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL",
+    ".spectrum-Combobox .spectrum-Combobox-content",
+    ".spectrum-Combobox .spectrum-Combobox-label",
+    ".spectrum-Combobox .spectrum-Combobox-popover",
+    ".spectrum-Combobox--sideLabel .spectrum-Combobox-content",
+    ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext",
+    ".spectrum-Combobox--sideLabel .spectrum-Combobox-label",
+    ".spectrum-Combobox--sideLabel .spectrum-Combobox-textfield",
     ".spectrum-Combobox--sizeL",
     ".spectrum-Combobox--sizeS",
     ".spectrum-Combobox--sizeXL",
@@ -39,15 +33,33 @@
     ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible",
     ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover",
     ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
+    ".spectrum-Combobox-content",
+    ".spectrum-Combobox-helptext",
+    ".spectrum-Combobox-helptext .spectrum-HelpText-text",
     ".spectrum-Combobox-input",
+    ".spectrum-Combobox-input.spectrum-Combobox-autocomplete",
+    ".spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection",
+    ".spectrum-Combobox-input:-internal-autofill-selected",
+    ".spectrum-Combobox-input:-internal-autofill-selected::selection",
+    ".spectrum-Combobox-input:-webkit-autofill",
+    ".spectrum-Combobox-input:-webkit-autofill::selection",
+    ".spectrum-Combobox-input:-webkit-autofill:active",
+    ".spectrum-Combobox-input:-webkit-autofill:active::selection",
+    ".spectrum-Combobox-input:-webkit-autofill:focus",
+    ".spectrum-Combobox-input:-webkit-autofill:focus::selection",
+    ".spectrum-Combobox-input:-webkit-autofill:hover",
+    ".spectrum-Combobox-input:-webkit-autofill:hover::selection",
     ".spectrum-Combobox-input::placeholder",
     ".spectrum-Combobox-input:active",
     ".spectrum-Combobox-input:focus",
     ".spectrum-Combobox-input:focus:hover",
     ".spectrum-Combobox-input:hover",
+    ".spectrum-Combobox-input:lang(ja)",
+    ".spectrum-Combobox-input:lang(ko)",
+    ".spectrum-Combobox-input:lang(zh)",
+    ".spectrum-Combobox-label",
     ".spectrum-Combobox-progress-circle",
     ".spectrum-Combobox-progress-circle:dir(rtl)",
-    ".spectrum-Combobox-textfield",
     ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input",
     ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover",
     ".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input",
@@ -61,12 +73,12 @@
     ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".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",
-    ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
+    ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only:hover",
+    ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
+    ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only",
+    ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover",
+    ".spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
@@ -89,7 +101,7 @@
     "--mod-combobox-background-color-hover",
     "--mod-combobox-background-color-key-focus",
     "--mod-combobox-block-size",
-    "--mod-combobox-block-spacing-edge-to-alert",
+    "--mod-combobox-block-spacing-edge-to-icon",
     "--mod-combobox-block-spacing-edge-to-progress-circle",
     "--mod-combobox-border-color-default",
     "--mod-combobox-border-color-disabled",
@@ -104,7 +116,6 @@
     "--mod-combobox-border-color-key-focus",
     "--mod-combobox-border-radius",
     "--mod-combobox-border-width",
-    "--mod-combobox-button-inline-offset",
     "--mod-combobox-button-width",
     "--mod-combobox-focus-indicator-color",
     "--mod-combobox-focus-indicator-gap",
@@ -117,34 +128,32 @@
     "--mod-combobox-font-color-key-focus",
     "--mod-combobox-font-color-placeholder",
     "--mod-combobox-font-family",
-    "--mod-combobox-font-size",
-    "--mod-combobox-font-style",
-    "--mod-combobox-font-weight",
     "--mod-combobox-icon-size",
     "--mod-combobox-inline-size",
     "--mod-combobox-line-height",
+    "--mod-combobox-line-height-cjk",
     "--mod-combobox-min-inline-size",
+    "--mod-combobox-popover-animation-distance",
     "--mod-combobox-readonly-border-color-disabled",
-    "--mod-combobox-readonly-input-border-color",
+    "--mod-combobox-spacing-alert-icon-to-text",
     "--mod-combobox-spacing-block-end-edge-to-text",
     "--mod-combobox-spacing-block-start-edge-to-text",
-    "--mod-combobox-spacing-edge-to-menu",
-    "--mod-combobox-spacing-inline-end-edge-to-text",
     "--mod-combobox-spacing-inline-icon-to-button",
+    "--mod-combobox-spacing-inline-icon-to-text",
     "--mod-combobox-spacing-inline-start-edge-to-text",
-    "--mod-combobox-spacing-label-to-combobox"
+    "--mod-combobox-spacing-label-to-combobox",
+    "--mod-combobox-spacing-side-label-to-field",
+    "--mod-combobox-spacing-to-help-text",
+    "--mod-combobox-textfield-background-color"
   ],
   "component": [
     "--spectrum-combo-box-minimum-width-multiplier",
-    "--spectrum-combo-box-quiet-minimum-width-multiplier",
-    "--spectrum-combo-box-visual-to-field-button-extra-large",
-    "--spectrum-combo-box-visual-to-field-button-large",
-    "--spectrum-combo-box-visual-to-field-button-medium",
-    "--spectrum-combo-box-visual-to-field-button-quiet",
-    "--spectrum-combo-box-visual-to-field-button-small",
+    "--spectrum-combo-box-visual-to-field-button",
+    "--spectrum-combobox-background-color-autofill",
+    "--spectrum-combobox-background-color-default",
     "--spectrum-combobox-background-color-disabled",
     "--spectrum-combobox-block-size",
-    "--spectrum-combobox-block-spacing-edge-to-alert",
+    "--spectrum-combobox-block-spacing-edge-to-icon",
     "--spectrum-combobox-block-spacing-edge-to-progress-circle",
     "--spectrum-combobox-border-color-default",
     "--spectrum-combobox-border-color-disabled",
@@ -159,16 +168,17 @@
     "--spectrum-combobox-border-color-key-focus",
     "--spectrum-combobox-border-radius",
     "--spectrum-combobox-border-width",
-    "--spectrum-combobox-button-inline-offset",
     "--spectrum-combobox-button-width",
     "--spectrum-combobox-focus-indicator-color",
     "--spectrum-combobox-focus-indicator-gap",
     "--spectrum-combobox-focus-indicator-thickness",
     "--spectrum-combobox-font-size",
     "--spectrum-combobox-font-style",
+    "--spectrum-combobox-font-weight",
     "--spectrum-combobox-icon-size",
     "--spectrum-combobox-inline-size",
     "--spectrum-combobox-line-height",
+    "--spectrum-combobox-line-height-cjk",
     "--spectrum-combobox-min-inline-size",
     "--spectrum-combobox-readonly-background-color-disabled",
     "--spectrum-combobox-readonly-border-color-disabled",
@@ -178,14 +188,17 @@
     "--spectrum-combobox-readonly-text-color-disabled",
     "--spectrum-combobox-spacing-block-end-edge-to-text",
     "--spectrum-combobox-spacing-block-start-edge-to-text",
-    "--spectrum-combobox-spacing-edge-to-menu",
-    "--spectrum-combobox-spacing-inline-end-edge-to-text",
     "--spectrum-combobox-spacing-inline-icon-to-button",
+    "--spectrum-combobox-spacing-inline-icon-to-text",
     "--spectrum-combobox-spacing-inline-start-edge-to-text",
-    "--spectrum-combobox-spacing-label-to-combobox"
+    "--spectrum-combobox-spacing-label-to-combobox",
+    "--spectrum-combobox-spacing-side-label-to-field",
+    "--spectrum-combobox-spacing-to-help-text"
   ],
   "global": [
-    "--spectrum-border-width-100",
+    "--spectrum-blue-900-rgb",
+    "--spectrum-border-width-200",
+    "--spectrum-cjk-line-height-100",
     "--spectrum-component-bottom-to-text-100",
     "--spectrum-component-bottom-to-text-200",
     "--spectrum-component-bottom-to-text-300",
@@ -206,26 +219,27 @@
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-component-top-to-workflow-icon-100",
+    "--spectrum-component-top-to-workflow-icon-200",
+    "--spectrum-component-top-to-workflow-icon-300",
+    "--spectrum-component-top-to-workflow-icon-75",
+    "--spectrum-corner-radius-medium-size-extra-large",
+    "--spectrum-corner-radius-medium-size-large",
+    "--spectrum-corner-radius-medium-size-medium",
+    "--spectrum-corner-radius-medium-size-small",
     "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
-    "--spectrum-field-edge-to-text-quiet",
     "--spectrum-field-label-to-component",
-    "--spectrum-field-label-to-component-quiet-extra-large",
-    "--spectrum-field-label-to-component-quiet-large",
-    "--spectrum-field-label-to-component-quiet-medium",
-    "--spectrum-field-label-to-component-quiet-small",
-    "--spectrum-field-top-to-alert-icon-extra-large",
-    "--spectrum-field-top-to-alert-icon-large",
-    "--spectrum-field-top-to-alert-icon-medium",
-    "--spectrum-field-top-to-alert-icon-small",
     "--spectrum-field-top-to-progress-circle-extra-large",
     "--spectrum-field-top-to-progress-circle-large",
     "--spectrum-field-top-to-progress-circle-medium",
     "--spectrum-field-top-to-progress-circle-small",
-    "--spectrum-field-width",
+    "--spectrum-field-width-extra-large",
+    "--spectrum-field-width-large",
+    "--spectrum-field-width-medium",
+    "--spectrum-field-width-small",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
@@ -234,31 +248,38 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
     "--spectrum-gray-25",
-    "--spectrum-gray-50",
-    "--spectrum-gray-500",
-    "--spectrum-gray-600",
+    "--spectrum-gray-300",
+    "--spectrum-gray-400",
     "--spectrum-gray-800",
     "--spectrum-gray-900",
+    "--spectrum-help-text-to-component",
     "--spectrum-line-height-100",
     "--spectrum-negative-border-color-default",
     "--spectrum-negative-border-color-focus",
     "--spectrum-negative-border-color-focus-hover",
     "--spectrum-negative-border-color-hover",
     "--spectrum-negative-border-color-key-focus",
+    "--spectrum-neutral-content-color-default",
+    "--spectrum-regular-font-weight",
+    "--spectrum-spacing-200",
+    "--spectrum-text-to-visual-100",
+    "--spectrum-text-to-visual-200",
+    "--spectrum-text-to-visual-300",
+    "--spectrum-text-to-visual-75",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",
     "--spectrum-workflow-icon-size-75"
   ],
   "passthroughs": [
+    "--mod-divider-inline-minimum-size",
     "--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-disabled",
-    "--mod-picker-button-border-color-quiet",
     "--mod-picker-button-border-width",
     "--mod-picker-button-font-color-disabled",
+    "--mod-popover-animation-distance",
     "--mod-textfield-background-color",
     "--mod-textfield-background-color-disabled",
     "--mod-textfield-border-color",
@@ -273,12 +294,17 @@
     "--mod-textfield-border-color-invalid-keyboard-focus",
     "--mod-textfield-border-color-keyboard-focus",
     "--mod-textfield-border-width",
+    "--mod-textfield-corner-radius",
     "--mod-textfield-focus-indicator-color",
     "--mod-textfield-focus-indicator-gap",
     "--mod-textfield-focus-indicator-width",
     "--mod-textfield-font-family",
+    "--mod-textfield-font-size",
+    "--mod-textfield-font-style",
     "--mod-textfield-font-weight",
     "--mod-textfield-icon-color-invalid",
+    "--mod-textfield-spacing-block-end",
+    "--mod-textfield-spacing-block-start",
     "--mod-textfield-text-color-default",
     "--mod-textfield-text-color-disabled",
     "--mod-textfield-text-color-focus",
@@ -287,9 +313,12 @@
     "--mod-textfield-text-color-keyboard-focus"
   ],
   "high-contrast": [
+    "--highcontrast-combobox-background-color-default",
     "--highcontrast-combobox-border-color-highlight",
     "--highcontrast-combobox-border-color-invalid",
+    "--highcontrast-combobox-readonly-border-color",
     "--highcontrast-textfield-border-color-invalid-default",
+    "--highcontrast-textfield-text-color-default",
     "--highcontrast-textfield-text-color-disabled"
   ]
 }