feat(picker): refactoring template markup, testing token passthroughs (#3792)

* feat(picker): add shirt size within template
* feat(picker): adjusting picker markup to higher level of template
* chore(picker): restore dropzone css file
* feat(picker): remove duplicate icon template
* feat(picker): fixing is quiet layout bugs
* fix(picker): remove duplicate border on WHCM
* feat(picker): readjusting picker popover mod passthroughs
* feat(picker): updating changeset, story, css
* feat(picker): update template and changeset

Author: aramos-adobe

.changeset/open-squids-refuse.md

@@ -0,0 +1,20 @@
+---
+"@spectrum-css/picker": major
+---
+
+### S2 Picker component refactor
+
+- Refactors Picker component to use proper custom property naming conventions
+- Adds size-specific animation distances for Popover component
+- Improves component structure with proper class by renaming `spectrum-Picker` to `spectrum-Picker-button`
+- `spectrum-Picker` now encapsulates help text, label, and popover components
+- Adds `flex-shrink` to progress circle for better layout control when truncation and loading is visible
+- Updates Popover animation distance to use `spectrum-Picker` custom properties
+
+#### New token
+
+`--spectrum-picker-popover-animation-distance`
+
+#### Renamed tokens
+
+`spectrum-picker-spacing-picker-to-popover` --> `--spectrum-picker-popover-animation-distance`

components/picker/dist/metadata.json

@@ -2,71 +2,72 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Picker",
-    ".spectrum-Picker + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker .spectrum-Picker-icon",
     ".spectrum-Picker .spectrum-Picker-label",
     ".spectrum-Picker .spectrum-ProgressCircle",
     ".spectrum-Picker--quiet",
-    ".spectrum-Picker--quiet.is-keyboardFocused:after",
+    ".spectrum-Picker--quiet .spectrum-Picker-button",
+    ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
+    ".spectrum-Picker--quiet .spectrum-Picker-button:after",
+    ".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after",
     ".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
-    ".spectrum-Picker--quiet:after",
-    ".spectrum-Picker--quiet:focus-visible:after",
+    ".spectrum-Picker--quiet.spectrum-Picker--sideLabel .spectrum-Picker-button",
     ".spectrum-Picker--sideLabel",
     ".spectrum-Picker--sizeL",
-    ".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker--sizeS",
-    ".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker--sizeXL",
-    ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open",
+    ".spectrum-Picker-button",
+    ".spectrum-Picker-button.is-disabled",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-icon",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon",
+    ".spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet)",
+    ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible",
+    ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover",
+    ".spectrum-Picker-button.is-keyboardFocused",
+    ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button.is-keyboardFocused:after",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
+    ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button::-moz-focus-inner",
+    ".spectrum-Picker-button:active",
+    ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:active:after",
+    ".spectrum-Picker-button:disabled",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-icon",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon",
+    ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)",
+    ".spectrum-Picker-button:focus",
+    ".spectrum-Picker-button:focus-visible",
+    ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button:focus-visible:after",
+    ".spectrum-Picker-button:hover",
+    ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon",
     ".spectrum-Picker-label",
     ".spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-label.is-placeholder:active",
     ".spectrum-Picker-label.is-placeholder:hover",
     ".spectrum-Picker-menuIcon",
     ".spectrum-Picker-menuIcon:active",
     ".spectrum-Picker-validationIcon",
-    ".spectrum-Picker.is-disabled",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-icon",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon",
-    ".spectrum-Picker.is-disabled:not(.spectrum-Picker--quiet)",
-    ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
-    ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)",
-    ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled)",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible",
-    ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover",
     ".spectrum-Picker.is-keyboardFocused",
-    ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-keyboardFocused:after",
     ".spectrum-Picker.is-loading",
     ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
-    ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
-    ".spectrum-Picker::-moz-focus-inner",
-    ".spectrum-Picker:active",
-    ".spectrum-Picker:active .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker:active:after",
     ".spectrum-Picker:after",
-    ".spectrum-Picker:disabled",
-    ".spectrum-Picker:disabled .spectrum-Picker-icon",
-    ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker:disabled .spectrum-Picker-menuIcon",
-    ".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
-    ".spectrum-Picker:disabled:not(.spectrum-Picker--quiet)",
-    ".spectrum-Picker:focus",
     ".spectrum-Picker:focus-visible",
-    ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon",
-    ".spectrum-Picker:focus-visible:after",
-    ".spectrum-Picker:hover",
-    ".spectrum-Picker:hover .spectrum-Picker-menuIcon",
     ".spectrum-Picker:lang(ja) .spectrum-Picker-label",
     ".spectrum-Picker:lang(ko) .spectrum-Picker-label",
     ".spectrum-Picker:lang(zh) .spectrum-Picker-label"
@@ -131,7 +132,6 @@
     "--mod-picker-spacing-icon-to-disclosure-icon",
     "--mod-picker-spacing-label-to-picker",
     "--mod-picker-spacing-label-to-picker-quiet",
-    "--mod-picker-spacing-picker-to-popover",
     "--mod-picker-spacing-starting-icon-to-text",
     "--mod-picker-spacing-text-to-icon-inline-end",
     "--mod-picker-spacing-top-to-alert-icon",
@@ -190,13 +190,13 @@
     "--spectrum-picker-min-inline-size",
     "--spectrum-picker-minimum-width-multiplier",
     "--spectrum-picker-placeholder-font-style",
+    "--spectrum-picker-popover-animation-distance",
     "--spectrum-picker-spacing-bottom-to-text",
     "--spectrum-picker-spacing-edge-to-disclosure-icon",
     "--spectrum-picker-spacing-edge-to-text",
     "--spectrum-picker-spacing-icon-to-disclosure-icon",
     "--spectrum-picker-spacing-label-to-picker",
     "--spectrum-picker-spacing-label-to-picker-quiet",
-    "--spectrum-picker-spacing-picker-to-popover",
     "--spectrum-picker-spacing-starting-icon-to-text",
     "--spectrum-picker-spacing-text-to-icon-inline-end",
     "--spectrum-picker-spacing-top-to-alert-icon",
@@ -302,7 +302,8 @@
   "passthroughs": [
     "--mod-button-animation-duration",
     "--mod-button-font-family",
-    "--mod-button-line-height"
+    "--mod-button-line-height",
+    "--mod-popover-animation-distance"
   ],
   "high-contrast": [
     "--highcontrast-picker-background-color",