feat(picker-markup): add shirt size within template

Author: aramos-adobe

components/dropzone/index.css

@@ -68,7 +68,7 @@
 
 	&.is-dragged {
 		--mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
-		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
+		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color)));
 		--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
 
 		/* Updated values for a nested illustrated message when state changes */
@@ -83,7 +83,7 @@
 
 	&.is-filled {
 		/* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */
-		--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
+		--mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled)));
 
 		/* Updated values for a nested illustrated message when state changes */
 		--mod-illustrated-message-display: none;

components/picker/dist/metadata.json

@@ -2,7 +2,6 @@
   "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",
@@ -13,17 +12,15 @@
     ".spectrum-Picker--quiet:focus-visible:after",
     ".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-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-popover",
     ".spectrum-Picker-validationIcon",
     ".spectrum-Picker.is-disabled",
     ".spectrum-Picker.is-disabled .spectrum-Picker-icon",
@@ -123,6 +120,7 @@
     "--mod-picker-min-inline-size-quiet",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
+    "--mod-picker-popover-animation-distance",
     "--mod-picker-spacing-bottom-to-text",
     "--mod-picker-spacing-edge-to-disclosure-icon",
     "--mod-picker-spacing-edge-to-disclosure-icon-quiet",
@@ -131,7 +129,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",
@@ -196,7 +193,6 @@
     "--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",
@@ -227,9 +223,7 @@
     "--spectrum-component-size-difference-down",
     "--spectrum-component-size-width-ratio-down",
     "--spectrum-component-to-menu-extra-large",
-    "--spectrum-component-to-menu-large",
     "--spectrum-component-to-menu-medium",
-    "--spectrum-component-to-menu-small",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
@@ -302,7 +296,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",

components/picker/index.css

@@ -102,10 +102,6 @@
 	--spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
 	--spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
-	}
 }
 
 .spectrum-Picker--sizeS {
@@ -124,10 +120,6 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small);
-	}
 }
 
 .spectrum-Picker--sizeL {
@@ -146,10 +138,6 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large);
-	}
 }
 
 .spectrum-Picker--sizeXL {
@@ -168,10 +156,7 @@
 	--spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
-
-	& + .spectrum-Popover--bottom-start.is-open {
-		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
-	}
+	--mod-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large);
 }
 
 .spectrum-Picker--quiet {
@@ -410,8 +395,8 @@
 	margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
 }
 
-.spectrum-Picker + .spectrum-Popover--bottom-start.is-open {
-	transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover)));
+.spectrum-Picker-popover {
+	--mod-popover-animation-distance: var(--mod-picker-popover-animation-distance, var(--spectrum-component-to-menu-medium));
 }
 
 .spectrum-Picker--quiet {

components/picker/stories/template.js

@@ -176,6 +176,7 @@ export const Template = ({
 		content: popoverContent,
 		size,
 		customStyles: customPopoverStyles,
+		customClasses: [`${rootClass}-popover`],
 		popoverWrapperStyles: {
 			"display": "block",
 		},
@@ -189,6 +190,13 @@ export const Template = ({
 		isDisabled,
 	}, context) : "";
 
+	const sizeMap = {
+		s: "small",
+		m: "medium",
+		l: "large",
+		xl: "extra-large",
+	};
+
 	const markup = html`
 		<div
 			style=${styleMap({
@@ -197,7 +205,8 @@ export const Template = ({
 				...(labelPosition == "side") && {
 					display: "flex",
 					flexWrap: "nowrap",
-				}
+				},
+				"--mod-picker-popover-animation-distance": `var(--spectrum-component-to-menu-${sizeMap[size] || "medium" })`,
 			})}
 		>
 			${when(label, () =>