feat(combobox): adding new s2 migration

.changeset/four-lemons-warn.md

@@ -0,0 +1,28 @@
+---
+"@spectrum-css/combobox": major
+---
+
+### 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
+
+### 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,22 +4,17 @@
     ".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-Popover.is-open",
+    ".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--sizeL ~ .spectrum-Combobox-popover",
     ".spectrum-Combobox--sizeS",
+    ".spectrum-Combobox--sizeS ~ .spectrum-Combobox-popover",
     ".spectrum-Combobox--sizeXL",
+    ".spectrum-Combobox--sizeXL ~ .spectrum-Combobox-popover",
     ".spectrum-Combobox-button",
     ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
@@ -39,15 +34,21 @@
     ".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::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 +62,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)",
@@ -123,25 +124,24 @@
     "--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-start-edge-to-text",
-    "--mod-combobox-spacing-label-to-combobox"
+    "--mod-combobox-spacing-label-to-combobox",
+    "--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-default",
     "--spectrum-combobox-background-color-disabled",
     "--spectrum-combobox-block-size",
     "--spectrum-combobox-block-spacing-edge-to-alert",
@@ -159,33 +159,36 @@
     "--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",
     "--spectrum-combobox-readonly-border-color-invalid-default",
     "--spectrum-combobox-readonly-input-background-color",
     "--spectrum-combobox-readonly-input-border-color",
     "--spectrum-combobox-readonly-text-color-disabled",
+    "--spectrum-combobox-spacing-alert-icon-to-text",
     "--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-start-edge-to-text",
-    "--spectrum-combobox-spacing-label-to-combobox"
+    "--spectrum-combobox-spacing-label-to-combobox",
+    "--spectrum-combobox-spacing-to-help-text"
   ],
   "global": [
-    "--spectrum-border-width-100",
+    "--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 +209,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,17 +238,22 @@
     "--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-regular-font-weight",
+    "--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",
@@ -253,12 +262,11 @@
   "passthroughs": [
     "--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",
@@ -287,8 +295,10 @@
     "--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-disabled"
   ]