fix(contextual-help): update metadata

Author: cdransf

components/contextualhelp/dist/metadata.json

@@ -15,6 +15,7 @@
     "--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",
@@ -34,9 +35,12 @@
     "--spectrum-contextual-help-body-sans-serif-font-style",
     "--spectrum-contextual-help-body-sans-serif-font-weight",
     "--spectrum-contextual-help-body-size",
+    "--spectrum-contextual-help-border-radius",
     "--spectrum-contextual-help-content-spacing",
+    "--spectrum-contextual-help-link-spacing",
     "--spectrum-contextual-help-min-inline-size",
     "--spectrum-contextual-help-minimum-width",
+    "--spectrum-contextual-help-padding",
     "--spectrum-contextual-help-title-color",
     "--spectrum-contextual-help-title-font-style",
     "--spectrum-contextual-help-title-font-weight",
@@ -48,16 +52,23 @@
     "--spectrum-body-color",
     "--spectrum-body-sans-serif-font-style",
     "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-heading-color",
+    "--spectrum-component-to-menu-large",
+    "--spectrum-component-to-menu-medium",
+    "--spectrum-corner-radius-large-default",
     "--spectrum-line-height-200",
+    "--spectrum-picker-popover-animation-distance",
     "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-300",
     "--spectrum-spacing-400",
+    "--spectrum-title-color",
     "--spectrum-title-line-height",
     "--spectrum-title-sans-serif-font-style",
     "--spectrum-title-sans-serif-font-weight"
   ],
-  "passthroughs": [],
+  "passthroughs": [
+    "--mod-popover-animation-distance",
+    "--mod-popover-corner-radius"
+  ],
   "high-contrast": [
     "--highcontrast-contextual-help-body-color",
     "--highcontrast-contextual-help-title-color"

components/contextualhelp/index.css

@@ -30,9 +30,14 @@
 	--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));
+
 	/* @passthrough start */
-	--mod-popover-corner-radius: var(--spectrum-corner-radius-large-default);
+	/* 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-corner-radius: var(--spectrum-corner-radius-large-default);
 	/* @passthrough end */
 }
 
@@ -46,9 +51,13 @@
 }
 
 .spectrum-ContextualHelp-popover {
+	/* 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-large);
+
 	padding: var(--mod-contextual-help-padding, var(--spectrum-contextual-help-padding));
 	font-size: var(--mod-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)));
+	border-radius: var(--spectrum-contextual-help-border-radius);
 
 	max-inline-size: var(--mod-contextual-help-popover-maximum-width);
 

components/contextualhelp/stories/template.js

@@ -21,6 +21,9 @@ export const Template = ({
 	customStyles = {},
 	customClasses = [],
 } = {}, context = {}) => {
+	const { globals = {} } = context;
+	const scale = globals.scale ?? "medium";
+
 	return html`
 		<div
 			class=${classMap({
@@ -34,7 +37,7 @@ export const Template = ({
 				isOpen: true,
 				trigger: (passthrough) => ActionButton({
 					...passthrough,
-					size: "xs",
+					size: scale === "medium" ? "xs" : "s",
 					iconName,
 					iconSet,
 					customClasses: [`${rootClass}-button`],