fix(picker): update popover selector class

- with the new default position for popover, the selector class for the
popover in picker also needed to be updated. (--bottom-start)
- create changeset
- update content arg to be popoverContent (just for clarification)
- rebuild metadata.json

Author: marissahuysentruyt

.changeset/itchy-shrimps-help.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/picker": patch
+---
+
+S2 Popover has an updated default position, bottom-start. The correct `.spectrum-Popover--bottom-start` class was added to the open popover selector blocks for picker so that the spacing from the picker to the popover is correctly adjusted.

components/picker/index.css

@@ -52,7 +52,7 @@
 	--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
 	--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
 
-	& + .spectrum-Popover--bottom.is-open {
+	& + .spectrum-Popover--bottom-start.is-open {
 		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
 	}
 
@@ -124,7 +124,7 @@
 	--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.is-open {
+	& + .spectrum-Popover--bottom-start.is-open {
 		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small);
 	}
 }
@@ -146,7 +146,7 @@
 	--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.is-open {
+	& + .spectrum-Popover--bottom-start.is-open {
 		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large);
 	}
 }
@@ -168,7 +168,7 @@
 	--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.is-open {
+	& + .spectrum-Popover--bottom-start.is-open {
 		--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
 	}
 }
@@ -409,7 +409,7 @@
 	margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
 }
 
-.spectrum-Picker + .spectrum-Popover--bottom.is-open {
+.spectrum-Picker + .spectrum-Popover--bottom-start.is-open {
 	transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover)));
 }
 

components/picker/metadata/metadata.json

@@ -2,7 +2,7 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Picker",
-    ".spectrum-Picker + .spectrum-Popover--bottom.is-open",
+    ".spectrum-Picker + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker .spectrum-Picker-icon",
     ".spectrum-Picker .spectrum-Picker-label",
     ".spectrum-Picker .spectrum-ProgressCircle",
@@ -13,11 +13,11 @@
     ".spectrum-Picker--quiet:focus-visible:after",
     ".spectrum-Picker--sideLabel",
     ".spectrum-Picker--sizeL",
-    ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open",
+    ".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker--sizeS",
-    ".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open",
+    ".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker--sizeXL",
-    ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open",
+    ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open",
     ".spectrum-Picker-label",
     ".spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-label.is-placeholder:active",

components/picker/stories/picker.stories.js

@@ -97,7 +97,7 @@ export default {
 		},
 		isHovered,
 		isActive,
-		content: { table: { disable: true } },
+		popoverContent: { table: { disable: true } },
 	},
 	args: {
 		rootClass: "spectrum-Picker",

components/picker/stories/template.js

@@ -125,7 +125,7 @@ export const Template = ({
 		// Helps ensure that Popover appears below the Picker, with side labels layout.
 		display: "block",
 	},
-	content = [],
+	popoverContent = [],
 } = {}, context = {}) => {
 	const pickerMarkup = Picker({
 		size,
@@ -134,19 +134,22 @@ export const Template = ({
 		isInvalid,
 		isDisabled,
 		isLoading,
-		content,
+		popoverContent,
 		labelPosition,
 		ariaLabeledBy: fieldLabelId,
 	}, context);
 
-	const popoverMarkup = content.length !== 0 ? Popover({
+	const popoverMarkup = popoverContent.length !== 0 ? Popover({
 		isOpen: isOpen && !isDisabled && !isLoading,
 		withTip: false,
-		position: "bottom",
+		position: "bottom-start",
 		isQuiet,
-		content,
+		content: popoverContent,
 		size,
 		customStyles: customPopoverStyles,
+		popoverWrapperStyles: {
+			"display": "block",
+		},
 	}, context) : "";
 
 	const helpTextMarkup = helpText ? HelpText({