feat(contextualhelp): add mod to allow max-width (#3523)

* feat(contextualhelp): add mod to allow max-width on popover

Added `--mod-spectrum-contextual-help-popover-maximum-width` to customize popover max-width via `max-inline-size`. SWC had a feature request from the express team to support long text in the contextual-help popover. Jira ticket: [SWC-509](https://jira.corp.adobe.com/browse/SWC-509)
---------

Co-authored-by: [ Cassondra ] <[email protected]>

Author: TarunAdobe

.changeset/spicy-boats-repair.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/contextualhelp": patch
+---
+
+Added `--mod-spectrum-contextual-help-popover-maximum-width` to customize popover max-width via `max-inline-size`. SWC had a feature request from the express team to support long text in the contextual-help popover. Jira ticket: [SWC-509](https://jira.corp.adobe.com/browse/SWC-509)

components/contextualhelp/dist/metadata.json

@@ -16,7 +16,8 @@
     "--mod-spectrum-contextual-help-heading-size",
     "--mod-spectrum-contextual-help-link-spacing",
     "--mod-spectrum-contextual-help-minimum-width",
-    "--mod-spectrum-contextual-help-padding"
+    "--mod-spectrum-contextual-help-padding",
+    "--mod-spectrum-contextual-help-popover-maximum-width"
   ],
   "component": [
     "--spectrum-contextual-help-body-size",

components/contextualhelp/index.css

@@ -26,6 +26,8 @@
 	font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
 	color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-body-color)));
 
+	max-inline-size: var(--mod-spectrum-contextual-help-popover-maximum-width);
+
 	.spectrum-ContextualHelp-heading,
 	.spectrum-ContextualHelp-body {
 		margin: 0;

components/contextualhelp/stories/contextualhelp.stories.js

@@ -84,14 +84,12 @@ export default {
 		iconSet: "workflow",
 		popoverPlacement: "bottom-start",
 		title: "Permission required",
-		body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+		body: "Your admin must grant you permission before you can create a new document. Please contact your admin for more information.",
 		customStyles: { "inline-size": "275px" },
 	},
 	parameters: {
 		actions: {
-			handles: [
-				...(ActionButtonStories?.parameters?.actions?.handles ?? [])
-			],
+			handles: [...(ActionButtonStories?.parameters?.actions?.handles ?? [])],
 		},
 		design: {
 			type: "figma",
@@ -132,9 +130,25 @@ WithLink.parameters = {
 };
 WithLink.storyName = "Default - info icon with link";
 
-/**
- * This is an example of the contextual help component within a popover with a placement of `top`. Read more about the 22 available placement positions in the [popover documentation](/docs/components-popover--docs).
- */
+export const MaxWidthPopover = Template.bind({});
+MaxWidthPopover.tags = ["!dev"];
+MaxWidthPopover.args = {
+	customStyles: {
+		"inline-size": "275px",
+		"--mod-spectrum-contextual-help-popover-maximum-width": "180px",
+		"margin-bottom": "270px",
+	},
+};
+MaxWidthPopover.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "auto",
+		},
+	},
+};
+MaxWidthPopover.storyName = "Default - max width popover";
+
 export const TopPopover = Template.bind({});
 TopPopover.tags = ["!dev"];
 TopPopover.args = {
@@ -143,8 +157,6 @@ TopPopover.args = {
 		"inline-size": "275px",
 		"margin-top": "170px",
 	},
-	title: "Top popover example of text wrapping in the title",
-	body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 };
 TopPopover.parameters = {
 	chromatic: { disableSnapshot: true },
@@ -163,6 +175,7 @@ export const HelpDefault = Template.bind({});
 HelpDefault.tags = ["!dev"];
 HelpDefault.args = {
 	iconName: "Help",
+	title: "Need help?",
 };
 HelpDefault.parameters = {
 	chromatic: { disableSnapshot: true },
@@ -177,6 +190,8 @@ HelpWithLink.args = {
 		url: "#",
 	},
 	iconName: "Help",
+	title: "Need help?",
+	body: "Reach out to your admin for help regarding the document you are trying to create.",
 };
 HelpWithLink.parameters = {
 	chromatic: { disableSnapshot: true },
@@ -191,8 +206,8 @@ HelpTopPopover.args = {
 		"inline-size": "275px",
 		"margin-top": "170px",
 	},
-	title: "Top popover example of text wrapping in the title",
-	body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+	title: "Need help?",
+	body: "Reach out to your admin for help regarding the document you are trying to create.",
 	iconName: "Help",
 };
 HelpTopPopover.parameters = {
@@ -205,13 +220,35 @@ HelpTopPopover.parameters = {
 };
 HelpTopPopover.storyName = "Help icon - top popover";
 
+export const HelpMaxWidthPopover = Template.bind({});
+HelpMaxWidthPopover.tags = ["!dev"];
+HelpMaxWidthPopover.args = {
+	customStyles: {
+		"inline-size": "275px",
+		"--mod-spectrum-contextual-help-popover-maximum-width": "180px",
+		"margin-bottom": "270px",
+	},
+	title: "Need help?",
+	body: "Reach out to your admin for help regarding the document you are trying to create.",
+	iconName: "Help",
+};
+HelpMaxWidthPopover.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "auto",
+		},
+	},
+};
+HelpMaxWidthPopover.storyName = "Help icon - max width popover";
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ContextualHelpGroup.bind({});
 WithForcedColors.args = Default.args;
 WithForcedColors.tags = ["!autodocs", "!dev"];
 WithForcedColors.parameters = {
 	chromatic: {
 		forcedColors: "active",
-		modes: disableDefaultModes
+		modes: disableDefaultModes,
 	},
 };