chore: spectrum-two fixes (#3514)

* docs(tooltip): add missing args to template

- Tooltip was missing the `variant = "neutral"` arg, so adding that back
in renders the component

* chore(picker): add/correct arg naming

- adds missing placeholder arg to template
- corrects content arg to popoverContent

* chore(picker): remove window.isChromatic calls and click event

Author: marissahuysentruyt

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

@@ -64,8 +64,7 @@ export const Picker = ({
 			id=${id}
 			style=${styleMap(customStyles)}
 			type="button"
-			@click=${() => {
-				if (window.isChromatic()) return;
+			@click=${function() {
 				updateArgs({ isOpen: !isOpen });
 			}}
 			aria-labelledby=${ifDefined(ariaLabeledBy)}
@@ -109,6 +108,7 @@ export const Template = ({
 	size = "m",
 	label,
 	labelPosition = "top",
+	placeholder,
 	helpText,
 	isQuiet = false,
 	isOpen = false,
@@ -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,17 +134,18 @@ export const Template = ({
 		isInvalid,
 		isDisabled,
 		isLoading,
-		content,
+		placeholder,
+		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",
 		isQuiet,
-		content,
+		content: popoverContent,
 		size,
 		customStyles: customPopoverStyles,
 	}, context) : "";
@@ -193,12 +194,6 @@ export const Template = ({
 				}, context)
 			)}
 		</div>`;
-
-	// Make sure there is a wrapper around sibling components when using the Chromatic
-	// template, so their layout is not affected by the flex and grid layouts used.
-	if (window.isChromatic()) {
-		return html`<div style="position: relative;">${markup}</div>`;
-	}
 	return markup;
 };
 

components/tooltip/stories/template.js

@@ -12,6 +12,7 @@ export const Template = ({
 	rootClass = "spectrum-Tooltip",
 	label,
 	placement,
+	variant = "neutral",
 	isOpen = true,
 	isFocused = false,
 	showOnHover = false,