fix(contextual-help): update border-radius passthrough

Author: cdransf

components/contextualhelp/dist/metadata.json

@@ -15,7 +15,6 @@
     "--mod-contextual-help-body-sans-serif-font-style",
     "--mod-contextual-help-body-sans-serif-font-weight",
     "--mod-contextual-help-body-size",
-    "--mod-contextual-help-border-radius",
     "--mod-contextual-help-content-spacing",
     "--mod-contextual-help-heading-size",
     "--mod-contextual-help-link-spacing",
@@ -58,6 +57,7 @@
     "--spectrum-line-height-200",
     "--spectrum-picker-popover-animation-distance",
     "--spectrum-sans-font-family-stack",
+    "--spectrum-spacing-100",
     "--spectrum-spacing-300",
     "--spectrum-spacing-400",
     "--spectrum-title-color",

components/contextualhelp/index.css

@@ -30,13 +30,13 @@
 	--spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300);
 	--spectrum-contextual-help-padding: var(--spectrum-spacing-400);
 
-	--spectrum-contextual-help-border-radius: var(--mod-contextual-help-border-radius, var(--mod-popover-corner-radius));
+	--spectrum-contextual-help-border-radius: var(--mod-popover-corner-radius);
 
 	/* @passthrough start */
 	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */
 	--spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium);
 
-	--mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance);
+	--mod-popover-animation-distance: var(--spectrum-spacing-100);
 	--mod-popover-corner-radius: var(--spectrum-corner-radius-large-default);
 	/* @passthrough end */
 }

components/contextualhelp/stories/contextualhelp.stories.js

@@ -95,7 +95,7 @@ export default {
 		link: false,
 		title: "Permission required",
 		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" },
+		customStyles: { "inline-size": "var(--spectrum-contextual-help-min-inline-size)" },
 	},
 	parameters: {
 		actions: {
@@ -144,28 +144,6 @@ WithLink.parameters = {
 };
 WithLink.storyName = "Default - info icon with link";
 
-/**
- * In order to further customize the contextual help popover, implementations can set `--mod-spectrum-contextual-help-popover-maximum-width` to their desired max width.
- */
-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";
-
 /**
  * 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).
  */
@@ -174,7 +152,6 @@ TopPopover.tags = ["!dev"];
 TopPopover.args = {
 	popoverPlacement: "top",
 	customStyles: {
-		"inline-size": "275px",
 		"margin-top": "170px",
 	},
 };
@@ -190,6 +167,8 @@ TopPopover.storyName = "Default - top popover";
 
 /**
  * When displaying help or resources to learn more, the contextual help should use the help icon. The content in this variant provides more detailed, in-depth guidance about a task, UI element, tool or keyboard shortcuts.
+ *
+ * All variants and positions of the contextual help component can be configured with a help icon.
  */
 export const HelpDefault = Template.bind({});
 HelpDefault.tags = ["!dev"];

components/contextualhelp/stories/contextualhelp.test.js

@@ -8,15 +8,7 @@ export const ContextualHelpGroup = Variants({
 			testHeading: "Default",
 			customStyles: {
 				"inline-size": "275px",
-				"margin-bottom": "170px",
-			},
-		},
-		{
-			testHeading: "Max-width popover",
-			customStyles: {
-				"inline-size": "275px",
-				"margin-bottom": "275px",
-				"--mod-spectrum-contextual-help-popover-maximum-width": "150px",
+				"margin-bottom": "200px",
 			},
 		},
 		{
@@ -32,7 +24,7 @@ export const ContextualHelpGroup = Variants({
 			iconName: "HelpCircle",
 			customStyles: {
 				"inline-size": "275px",
-				"margin-bottom": "170px",
+				"margin-bottom": "200px",
 			},
 		},
 	],