fix(storybook): updates to pass the correct content types to the dialog and popover components (#3143)

* fix(storybook): updates to pass the correct content types to the dialog and popover components

* fix(storybook): pass context through button + buttongroup templates

Author: cdransf

components/button/stories/template.js

@@ -110,7 +110,7 @@ export const Template = ({
 export const ButtonsWithIconOptions = ({
 	iconName,
 	...args
-}) => Container({
+}, context = {}) => Container({
 	withBorder: false,
 	direction: "row",
 	wrapperStyles: {
@@ -120,35 +120,35 @@ export const ButtonsWithIconOptions = ({
     ${Template({
       ...args,
       iconName: undefined,
-    })}
+    }, context)}
     ${Template({
       ...args,
       iconName: iconName ?? "Edit",
-    })}
+    }, context)}
     ${Template({
       ...args,
       hideLabel: true,
       iconName: iconName ?? "Edit",
-    })}
+    }, context)}
   `,
 });
 
 /**
  * Display the buttons with icon options for each treatment option.
  */
-export const TreatmentTemplate = (args) => Container({
+export const TreatmentTemplate = (args, context = {}) => Container({
 	withBorder: false,
 	direction: "column",
 	wrapperStyles: {
 		rowGap: "12px",
 	},
-	content: html`${["fill", "outline"].map((treatment) => ButtonsWithIconOptions({ ...args, treatment }))}`,
-});
+	content: html`${["fill", "outline"].map((treatment) => ButtonsWithIconOptions({ ...args, treatment }, context))}`,
+}, context);
 
 /**
  * Display the text overflow behavior of buttons.
  */
-export const TextOverflowTemplate = (args) => Container({
+export const TextOverflowTemplate = (args, context = {}) => Container({
 	withBorder: false,
 	direction: "column",
 	wrapperStyles: {
@@ -161,19 +161,19 @@ export const TextOverflowTemplate = (args) => Container({
         "max-inline-size": "480px",
       },
       label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
-    })}
+    }, context)}
     ${Template({
       ...args,
       customStyles: {
         "max-inline-size": "480px",
       },
       iconName: "Edit",
       label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
-    })}
+    }, context)}
   `,
-});
+}, context);
 
-export const TextWrapTemplate = (args) => Container({
+export const TextWrapTemplate = (args, context = {}) => Container({
 	direction: "column",
 	wrapperStyles: {
 		rowGap: "12px",
@@ -182,20 +182,18 @@ export const TextWrapTemplate = (args) => Container({
 	content: html`
     ${Template({
       ...args,
-      customStyles: {
-        
-      },
+      customStyles: {},
       label: "Be a premium member",
 			noWrap: true,
-    })}
+    }, context)}
     ${Template({
       ...args,
       customStyles: {
         "max-inline-size": "100%",
       },
       label: "Be a premium member",
 			noWrap: true,
-    })}
+    }, context)}
     ${Template({
       ...args,
       customStyles: {
@@ -204,6 +202,6 @@ export const TextWrapTemplate = (args) => Container({
       iconName: "Star",
 			label: "Be a premium member",
       noWrap: true,
-    })}
+    }, context)}
   `,
-});
+}, context);

components/buttongroup/stories/template.js

@@ -10,7 +10,8 @@ export const Template = ({
 	size = "m",
 	items = [],
 	vertical = false,
-}) => html`
+}, context = {}) => {
+	return html`
 	<div
 		class=${classMap({
 			[rootClass]: true,
@@ -25,7 +26,8 @@ export const Template = ({
 				...item,
 				size,
 				customClasses: [`${rootClass}-item`],
-			})
+			}, context)
 		)}
 	</div>
 `;
+};

components/dialog/stories/dialog.stories.js

@@ -114,7 +114,7 @@ export default {
 		},
 		docs: {
 			story: {
-				inline: false,
+				// TODO: restore `inline: false,`
 				height: "500px",
 			},
 		},
@@ -125,13 +125,7 @@ export default {
 	],
 };
 
-const ExampleContent = Typography({
-	semantics: "body",
-	size: "m",
-	content: [
-		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis."
-	]
-});
+const ExampleContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.";
 
 /**
  * The default size for dialog is medium.
@@ -143,7 +137,7 @@ Default.args = {
 		(passthroughs, context) => Typography({
 			semantics: "body",
 			size: "m",
-			content: ExampleContent,
+			content: [ ExampleContent ],
 			...passthroughs,
 		}, context),
 	],
@@ -256,7 +250,11 @@ FullscreenTakeover.parameters = {
 FullscreenTakeover.args = {
 	...Default.args,
 	layout: "fullscreenTakeover",
-	content: [ExampleContent, ExampleContent, ExampleContent, ExampleContent],
+	content: [ () => Typography({
+		semantics: "body",
+		size: "m",
+		content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ],
+	})],
 };
 
 // ********* VRT ONLY ********* //

components/popover/stories/popover.stories.js

@@ -281,7 +281,7 @@ Positioning.args = {
 	withTip: true,
 	isOpen: true,
 	trigger: () => null,
-	content: [html`<span style="padding: 0 7px">Basic text content, with some added padding.</span>`],
+	content: [() => html`<span style="padding: 0 7px">Basic text content, with some added padding.</span>`],
 	skipAlignment: true,
 	popoverWrapperStyles: {
 		"display": "block",
@@ -300,12 +300,12 @@ Positioning.parameters = {
  * #### Default tip positioning
  * - The tip position is centered on the edge for top, bottom, left, right, start, and end positions.
  * - The tip position distance from edge is equal to the popover corner radius for all other positions.
- * 
+ *
  * #### Centering the tip with the source
  * In implementations, the tip position can be overridden to center it with the source by setting the
  * custom property `--spectrum-popover-pointer-edge-offset` equal to half the width of the source for
- * top and bottom popovers, or half the height of the source for side popovers. The following 
- * example sets this custom property to `50px` for a source button that is `100px` wide. 
+ * top and bottom popovers, or half the height of the source for side popovers. The following
+ * example sets this custom property to `50px` for a source button that is `100px` wide.
  */
 export const TipOffset = FixedWidthSourceTemplate.bind({});
 TipOffset.storyName = "Tip positioning and inline offset";