From b0342289b729506db88e55f16f93e89fc3bd9840 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Wed, 25 Sep 2024 17:15:05 -0400
Subject: [PATCH] docs(picker): migrate docs to storybook

Migrates docs site information to Storybook for the Picker component.
Creates several docs-only stories to represent the missing examples.

Adds a control for value (currentValue), and separates the concept
of value and placeholder, which are different things with different
classes.

Adds a control for displaying the thumbnail variant (with a workflow
icon) from the docs site. This icon has a class associated with it that
was not previously represented in Storybook.

Renames "content" to "popoverContent" and refactors some of the iconName
code in the Picker template for clarity.

Updates the variants test.js data to add coverage for missing states
and variants.
---
 components/picker/CHANGELOG.md              |  54 +++-
 components/picker/stories/picker.stories.js | 302 +++++++++++++++++++-
 components/picker/stories/picker.test.js    |  81 +++++-
 components/picker/stories/template.js       | 145 +++++++---
 components/tabs/stories/template.js         |   2 +-
 5 files changed, 520 insertions(+), 64 deletions(-)

diff --git a/components/picker/CHANGELOG.md b/components/picker/CHANGELOG.md
index 52c9d82f9bd..eb124fdaf9c 100644
--- a/components/picker/CHANGELOG.md
+++ b/components/picker/CHANGELOG.md
@@ -383,11 +383,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 \*refactor(picker)!: remove focus-ring([e37b430](https://github.com/adobe/spectrum-css/commit/e37b430))
 
-    	###
-    	🛑 BREAKING CHANGES
+### 🛑 BREAKING CHANGES
 
-    		*
-    		Remove focus-ring pseudo class in favor of focus-visible
+#### Remove `focus-ring` class
+
+We've migrated away from the `focus-ring` class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 
 <a name="6.0.2"></a>
 
@@ -1379,6 +1379,52 @@ Co-authored-by: castastrophe <castastrophe@users.noreply.github.com>
 - correct icononly Picker width ([b165e11](https://github.com/adobe/spectrum-css/commit/b165e11))
 - updated icon sizes for picker examples ([ad054f6](https://github.com/adobe/spectrum-css/commit/ad054f6))
 
+### Migration guide
+
+#### Component renamed
+
+Dropdown is now known as Picker. Replace all `.spectrum-Dropdown*` classnames with `.spectrum-Picker*`.
+
+#### Markup change
+
+The outer `<div>` is now gone and `.spectrum-FieldButton` is no longer used. Instead, the outer tag is now `<button>` with the `.spectrum-Picker` classname.
+
+Additionally, `.spectrum-Picker` should not contain the `.spectrum-Popover` that it opens.
+
+In order to use a side label with a Picker, add the `spectrum-Picker--sideLabel` class to the Picker.
+
+#### Icon classname changes
+
+Each of the 3 possible icons now has its own specific classname:
+
+| Previous icon classname       | Workflow icon classname           |
+| ----------------------------- | --------------------------------- |
+| `.spectrum-Picker-icon`       | `.spectrum-Picker-menuIcon`       |
+| `.spectrum-Icon` (workflow)   | `.spectrum-Picker-icon`           |
+| `.spectrum-Icon` (validation) | `.spectrum-Picker-validationIcon` |
+
+#### `.is-selected` is now `.is-open`
+
+In order to more accurately reflect what's going on, you should add `.is-open` to `.spectrum-Picker` when the menu is shown.
+
+#### Change workflow icon size to medium
+
+If you use a `.spectrum-Picker-icon` in your markup, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
+
+#### T-shirt sizing
+
+Picker now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Picker--size*` class.
+Using the classes `.spectrum-Picker .spectrum-Picker--sizeM` will get result in the previous default picker size.
+
+Also, use the correct icon size for chevron icons:
+
+| T-shirt Size              | Icon Size                      |
+| ------------------------- | ------------------------------ |
+| `spectrum-Picker--sizeS`  | `spectrum-css-icon-Chevron75`  |
+| `spectrum-Picker--sizeM`  | `spectrum-css-icon-Chevron100` |
+| `spectrum-Picker--sizeL`  | `spectrum-css-icon-Chevron200` |
+| `spectrum-Picker--sizeXL` | `spectrum-css-icon-Chevron300` |
+
 <a name="1.0.0-beta.3"></a>
 
 ## 1.0.0-beta.3
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index 12a0100c8d2..a053583bc4f 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -1,11 +1,13 @@
 import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js";
+import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isDisabled, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
+import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
 import { PickerGroup } from "./picker.test.js";
+import { ClosedAndOpenTemplate, DisabledTemplate, Template } from "./template.js";
 
 /**
- * A picker outlines a set of options for a user.
+ * The picker component (sometimes known as a "dropdown" or "select") allows users to choose from a list of options in a limited space. The list of options can change based on the context.
  */
 export default {
 	title: "Picker",
@@ -14,6 +16,7 @@ export default {
 		size: size(["s", "m", "l", "xl"]),
 		label: {
 			name: "Label",
+			description: "The text for the field label",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
@@ -26,23 +29,55 @@ export default {
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
-				category: "Content",
+				category: "Component",
 			},
-			options: ["top", "left"],
+			options: ["top", "side"],
 			control: { type: "select" },
 		},
 		withSwitch: {
-			name: "Display with a switch component",
+			name: "Show switch component",
+			description: "Display a separate switch component after the picker. Helpful for testing alignment with the picker when using the side label.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
-				category: "Component",
+				category: "Advanced",
+			},
+			control: "boolean",
+			if: { arg: "labelPosition", eq: "side" },
+		},
+		showWorkflowIcon: {
+			name: "Show workflow icon",
+			description: "Display optional workflow icon before the value or placeholder",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Advanced",
 			},
 			control: "boolean",
-			if: { arg: "labelPosition", eq: "left" },
 		},
 		placeholder: {
 			name: "Placeholder",
+			description: "The placeholder text prompts a user to select an option from the picker menu. It disappears once a user selects an option. This will not be displayed if the `value` control is set.",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Content",
+			},
+			control: { type: "text" },
+		},
+		currentValue: {
+			name: "Value",
+			description: "The value shows the option that a user has selected.",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Content",
+			},
+			control: { type: "text" },
+		},
+		helpText: {
+			name: "Help text",
+			description: "Optional help text that can be informational or an error message. Displays a separate help text component after the picker. For error messages, the invalid control must also be set to true.",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
@@ -56,39 +91,60 @@ export default {
 		isDisabled,
 		isLoading,
 		isInvalid,
-		content: { table: { disable: true } },
+		isHovered,
+		isActive,
+		popoverContent: { table: { disable: true } },
 	},
 	args: {
 		rootClass: "spectrum-Picker",
 		size: "m",
 		label: "Country",
+		labelPosition: "top",
 		placeholder: "Select a country",
+		helpText: "",
+		currentValue: "",
+		showWorkflowIcon: false,
 		isQuiet: false,
 		isKeyboardFocused: false,
 		isLoading: false,
 		isDisabled: false,
 		isInvalid: false,
 		isOpen: false,
+		isHovered: false,
+		isActive: false,
 		withSwitch: false,
-		content: [
+		popoverContent: [
 			(passthrough, context) => MenuStories({
 				...passthrough,
 				...MenuStories.args,
+				items: [
+					{ label: "United States of America" },
+					{ label: "India" },
+					{ label: "Australia" },
+					{ label: "Brazil" },
+				],
 			}, context)
 		],
+		// Make sure container flex layout does not misalign sibling elements such as field label in Template()
+		wrapperStyles: {
+			display: "block",
+		},
 	},
 	parameters: {
-		docs: {
-			story: {
-				height: "400px"
-			}
-		},
 		packageJson: pkgJson,
 	},
 };
 
 export const Default = PickerGroup.bind({});
 Default.args = {};
+Default.tags = ["!autodocs"];
+Default.parameters = {
+	docs: {
+		story: {
+			height: "300px",
+		}
+	},
+};
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = PickerGroup.bind({});
@@ -100,3 +156,221 @@ WithForcedColors.parameters = {
 	},
 };
 WithForcedColors.args = {};
+
+// ********* DOCS ONLY ********* //
+
+/**
+ * The following example shows the picker with both a [field label](/docs/components-field-label--docs) and placeholder text.
+ * Pickers [should always have a label](https://spectrum.adobe.com/page/picker/#Usage-guidelines).
+ * The placeholder text can be displayed when it does not have a selected value.
+ */
+export const Standard = ClosedAndOpenTemplate.bind({});
+Standard.storyName = "Default";
+Standard.tags = ["!dev"];
+Standard.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "300px",
+		}
+	},
+};
+
+/**
+ * This example shows the picker with a selected value.
+ * A picker can also have [help text](?path=/docs/components-help-text--docs) below the field to give extra context or instruction about what a user should select. 
+ */
+export const SelectedValue = ClosedAndOpenTemplate.bind({});
+SelectedValue.storyName = "Default with value and help text";
+SelectedValue.args = {
+	currentValue: "United States of America",
+	helpText: "Additional field context",
+	popoverContent: [
+		(passthrough, context) => MenuStories({
+			...passthrough,
+			...MenuStories.args,
+			selectionMode: "single",
+			items: [
+				{ label: "United States of America", isSelected: true },
+				{ label: "India" },
+				{ label: "Australia" },
+				{ label: "Brazil" },
+			],
+		}, context)
+	],
+};
+SelectedValue.tags = ["!dev"];
+SelectedValue.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "300px",
+		}
+	},
+};
+
+/**
+ * Pickers come in four different sizes: small, medium, large, and extra-large. 
+ * 
+ * At each of these sizes, the following chevron UI icon should be used:
+ * 
+ * | Picker size    | UI icon size |
+ * |----------------|--------------|
+ * | small          | `Chevron75`  |
+ * | medium         | `Chevron100` |
+ * | large          | `Chevron200` |
+ * | extra-large    | `Chevron300` |
+ */
+export const Sizing = (args, context) => Sizes({
+	Template: Template,
+	withHeading: false,
+	withBorder: false,
+	direction: "column",
+	...args,
+}, context);
+Sizing.args = {
+	popoverContent: [],
+	onclick: () => {},
+};
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const Disabled = DisabledTemplate.bind({});
+Disabled.tags = ["!dev"];
+Disabled.args = {
+	isDisabled: true,
+};
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * A picker can be marked as having an error to show that a value needs to be entered in order to move forward or that a value that was entered is invalid.
+ * This example shows the optional error message within the help text area.
+ */
+export const Invalid = ClosedAndOpenTemplate.bind({});
+Invalid.storyName = "Invalid";
+Invalid.tags = ["!dev"];
+Invalid.args = {
+	isInvalid: true,
+	helpText: "Select a country.",
+};
+Invalid.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "300px",
+		}
+	},
+};
+
+export const Loading = Template.bind({});
+Loading.tags = ["!dev"];
+Loading.args = {
+	isLoading: true,
+	placeholder: "Loading...",
+	popoverContent: [],
+	onclick: () => {},
+};
+Loading.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * Quiet pickers have no visible background. This style works best when a clear layout (vertical stack, table, grid)
+ * makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read.
+ */
+export const Quiet = ClosedAndOpenTemplate.bind({});
+Quiet.tags = ["!dev"];
+Quiet.args = {
+	isQuiet: true,
+};
+Quiet.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "300px",
+		}
+	},
+};
+
+export const QuietDisabled = DisabledTemplate.bind({});
+QuietDisabled.storyName = "Quiet and disabled";
+QuietDisabled.tags = ["!dev"];
+QuietDisabled.args = {
+	isDisabled: true,
+	isQuiet: true,
+};
+QuietDisabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const QuietInvalid = ClosedAndOpenTemplate.bind({});
+QuietInvalid.storyName = "Quiet and invalid";
+QuietInvalid.tags = ["!dev"];
+QuietInvalid.args = {
+	isInvalid: true,
+	isQuiet: true,
+	helpText: "Select a country.",
+};
+QuietInvalid.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "300px",
+		}
+	},
+};
+
+/**
+ * The value and placeholder within the picker will truncate with an ellipsis when it is longer than the available horizontal space within the picker.
+ * The full text of the option can be shown in the menu.
+ */
+export const TextOverflow = Template.bind({});
+TextOverflow.storyName = "Text overflow";
+TextOverflow.tags = ["!dev"];
+TextOverflow.args = {
+	placeholder: "Some long text that will be cut off when displayed as the current value or placeholder",
+	popoverContent: [],
+	onclick: () => {},
+};
+TextOverflow.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * A workflow icon can be displayed before the value or placeholder. The class `.spectrum-Picker-icon` should be used with the icon.
+ */
+export const WithWorkflowIcon = Template.bind({});
+WithWorkflowIcon.storyName = "With workflow icon";
+WithWorkflowIcon.tags = ["!dev"];
+WithWorkflowIcon.args = {
+	showWorkflowIcon: true,
+	popoverContent: [],
+	onclick: () => {},
+};
+WithWorkflowIcon.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * Labels can be placed either on top or on the side. Top labels are the default and are recommended because
+ * they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical
+ * space is limited.
+ * 
+ * When using the side label, the `spectrum-Picker--sideLabel` class is added to the Picker.
+ */
+export const WithSideLabel = Template.bind({});
+WithSideLabel.storyName = "With side label";
+WithSideLabel.tags = ["!dev"];
+WithSideLabel.args = {
+	labelPosition: "side",
+	label: "Country",
+	popoverContent: [],
+	onclick: () => {},
+};
+WithSideLabel.parameters = {
+	chromatic: { disableSnapshot: true },
+};
\ No newline at end of file
diff --git a/components/picker/stories/picker.test.js b/components/picker/stories/picker.test.js
index c9ba6b44410..8d7e90b486e 100644
--- a/components/picker/stories/picker.test.js
+++ b/components/picker/stories/picker.test.js
@@ -9,24 +9,89 @@ export const PickerGroup = Variants({
 	},
 	testData: [
 		{
-			testHeading: "Default",
+			testHeading: "Default, with placeholder",
 		},
 		{
-			testHeading: "Explicit",
-			variant: "explicit",
+			testHeading: "Default, with value and text overflow",
+			currentValue: "The selected value of the picker, with long text the triggers the overflow behavior with ellipsis",
 		},
 		{
-			testHeading: "Button",
-			variant: "button",
+			testHeading: "Quiet",
+			isQuiet: true,
+		},
+		{
+			testHeading: "Side label",
+			labelPosition: "side",
+		},
+		{
+			testHeading: "Side label, alignment with switch",
+			labelPosition: "side",
+			withSwitch: true,
+		},
+		{
+			testHeading: "With thumbnail icon",
+			showWorkflowIcon: true,
 		},
 	],
 	stateData: [
+		{
+			testHeading: "Hovered",
+			isHovered: true,
+		},
+		{
+			testHeading: "Active",
+			isActive: true,
+		},
+		{
+			testHeading: "Keyboard focused",
+			isKeyboardFocused: true,
+		},
+		{
+			testHeading: "Invalid",
+			isInvalid: true,
+		},
+		{
+			testHeading: "Invalid + hovered",
+			isInvalid: true,
+			isHovered: true,
+		},
+		{
+			testHeading: "Loading",
+			isLoading: true,
+		},
+		{
+			testHeading: "Loading + hovered",
+			isLoading: true,
+			isHovered: true,
+		},
+		{
+			testHeading: "Disabled",
+			isDisabled: true,
+		},
+		{
+			testHeading: "Disabled + hovered",
+			isDisabled: true,
+			isHovered: true,
+		},
+		{
+			testHeading: "Disabled + invalid",
+			isInvalid: true,
+			isDisabled: true,
+		},
 		{
 			testHeading: "Open",
 			isOpen: true,
 			wrapperStyles: {
-				"min-block-size": "250px",
+				"min-block-size": "225px",
+			},
+		},
+		{
+			testHeading: "Open + hover",
+			isOpen: true,
+			isHovered: true,
+			wrapperStyles: {
+				"min-block-size": "225px",
 			},
-		}
-	]
+		},
+	],
 });
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 25efac5026c..a356b4aa44a 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -2,7 +2,7 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/templat
 import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
 import { Template as Switch } from "@spectrum-css/switch/stories/template.js";
 import { html } from "lit";
@@ -12,17 +12,24 @@ import { when } from "lit/directives/when.js";
 
 import "../index.css";
 
+/**
+ * Template for Picker only (no popover or help text).
+ */
 export const Picker = ({
 	rootClass = "spectrum-Picker",
 	size = "m",
 	labelPosition,
-	placeholder,
+	placeholder = "",
+	currentValue = "",
 	isQuiet = false,
 	isKeyboardFocused = false,
+	showWorkflowIcon = false,
 	isOpen = false,
 	isInvalid = false,
 	isLoading = false,
 	isDisabled = false,
+	isHovered = false,
+	isActive = false,
 	customClasses = [],
 	customStyles = {},
 	onclick,
@@ -38,6 +45,8 @@ export const Picker = ({
 				["is-invalid"]: isInvalid,
 				["is-open"]: isOpen,
 				["is-loading"]: isLoading,
+				["is-hover"]: isHovered,
+				["is-active"]: isActive,
 				["is-keyboardFocused"]: isKeyboardFocused,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
@@ -47,7 +56,20 @@ export const Picker = ({
 			type="button"
 			@click=${onclick}
 		>
-			<span class="${rootClass}-label is-placeholder">${placeholder}</span>
+			${when(showWorkflowIcon, () =>
+				Icon({
+					size,
+					setName: "workflow",
+					iconName: "Image",
+					customClasses: [`${rootClass}-icon`],
+				}, context)
+			)}
+			<span
+				class=${classMap({
+					[`${rootClass}-label`]: true,
+					["is-placeholder"]: !currentValue,
+				})}
+			>${currentValue ? currentValue : placeholder}</span>
 			${when(isLoading, () =>
 				ProgressCircle({
 					size: "s",
@@ -64,52 +86,49 @@ export const Picker = ({
 			)}
 			${Icon({
 				size,
-				iconName: "ChevronDown",
 				setName: "ui",
+				iconName: {
+					s:  "ChevronDown75",
+					m:  "ChevronDown100",
+					l:  "ChevronDown200",
+					xl: "ChevronDown300",
+				}[size ?? "m"],
 				customClasses: [`${rootClass}-menuIcon`],
 			}, context)}
 		</button>
 	`;
 };
 
+/**
+ * Picker template including adjacent popover and help text.
+ */
 export const Template = ({
 	rootClass = "spectrum-Picker",
 	size = "m",
 	label,
 	labelPosition = "top",
-	placeholder,
-	helpText,
+	placeholder = "",
+	currentValue = "",
+	helpText = "",
 	isQuiet = false,
 	isKeyboardFocused = false,
+	showWorkflowIcon = false,
 	isOpen = false,
 	isInvalid = false,
 	isLoading = false,
 	isDisabled = false,
 	isReadOnly = false,
+	isHovered = false,
+	isActive = false,
 	withSwitch = false,
 	fieldLabelStyle = {},
 	customClasses = [],
 	customStyles = {},
-	content = [],
+	popoverContent = [],
 	id = getRandomId("picker"),
 } = {}, context = {}) => {
 	const { updateArgs } = context;
 
-	let iconName = "ChevronDown200";
-	switch (size) {
-		case "s":
-			iconName = "ChevronDown75";
-			break;
-		case "m":
-			iconName = "ChevronDown100";
-			break;
-		case "xl":
-			iconName = "ChevronDown300";
-			break;
-		default:
-			iconName = "ChevronDown200";
-	}
-
 	return html`
 		${when(label, () =>
 			FieldLabel({
@@ -117,7 +136,7 @@ export const Template = ({
 				label,
 				isDisabled,
 				customStyles: fieldLabelStyle,
-				alignment: labelPosition,
+				alignment: labelPosition === "side" ? "left" : undefined,
 			}, context)
 		)}
 		${Popover({
@@ -129,27 +148,26 @@ export const Template = ({
 				rootClass,
 				size,
 				placeholder,
+				currentValue,
 				isQuiet,
+				showWorkflowIcon,
 				isKeyboardFocused,
 				isOpen,
 				isInvalid,
 				isLoading,
 				isDisabled,
 				isReadOnly,
+				isHovered,
+				isActive,
 				customClasses,
-				customStyles: {
-					"display": labelPosition == "left" ? "inline-block" : undefined,
-					...customStyles,
-				},
-				content,
-				iconName,
+				customStyles,
 				labelPosition,
 				id,
 				onclick: function() {
 					updateArgs({ isOpen: !isOpen });
 				},
 			}, context),
-			content,
+			content: popoverContent,
 		}, context)}
 		${when(helpText, () =>
 			HelpText({
@@ -158,12 +176,65 @@ export const Template = ({
 				hideIcon: true,
 			}, context)
 		)}
-		${when(withSwitch, () => Switch({
-			size,
-			label: "Toggle switch",
-			customStyles: {
-				"padding-inline-start": "15px"
-			}
-		}, context))}
+		${when(withSwitch, () =>
+			Switch({
+				size,
+				label: "Toggle switch",
+				customStyles: {
+					"padding-inline-start": "15px"
+				}
+			}, context)
+		)}
 	`;
 };
+
+/**
+ * Template showing both closed and open versions of the Picker.
+ */
+export const ClosedAndOpenTemplate = (args, context) => Container({
+	withBorder: false,
+	content: html`${[false, true].map((isOpen) => 
+		Container({
+			withBorder: false,
+			direction: "column",
+			heading: isOpen ? "Open" : "Closed",
+			containerStyles: {
+				rowGap: "8px",
+			},
+			// Make sure container flex layout does not misalign sibling elements such as field label in Template()
+			wrapperStyles: {
+				display: "block",
+			},
+			content: Template({
+				...args,
+				isOpen,
+			}, context),
+		})
+	)}`,
+});
+
+/**
+ * Template for the Disabled docs story.
+ */
+export const DisabledTemplate = (args, context) => Container({
+	withBorder: false,
+	content: html`${[false, true].map((isInvalid) => 
+		Container({
+			withBorder: false,
+			direction: "column",
+			heading: isInvalid ? "Invalid" : "Default",
+			containerStyles: {
+				rowGap: "8px",
+				overflow: "hidden",
+			},
+			// Make sure container flex layout does not misalign sibling elements such as field label in Template()
+			wrapperStyles: {
+				display: "block",
+			},
+			content: Template({
+				...args,
+				isInvalid,
+			}, context),
+		})
+	)}`,
+});
\ No newline at end of file
diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js
index 17c6a3e2585..2e5c4ee6d45 100644
--- a/components/tabs/stories/template.js
+++ b/components/tabs/stories/template.js
@@ -124,7 +124,7 @@ export const Template = ({
 					customPopoverStyles: {
 						insetBlockStart: "24px",
 					},
-					content: [
+					popoverContent: [
 						() => Menu({
 							selectionMode: "none",
 							size,