fix(coachmark): enforces consistent spacing from image to header and header to text with action menu present

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: cdransf

components/coachmark/dist/metadata.json

@@ -8,6 +8,7 @@
     ".spectrum-CoachMark-content",
     ".spectrum-CoachMark-footer",
     ".spectrum-CoachMark-header",
+    ".spectrum-CoachMark-header:has(.spectrum-CoachMark-action-menu)",
     ".spectrum-CoachMark-image",
     ".spectrum-CoachMark-image-wrapper",
     ".spectrum-CoachMark-image-wrapper--fixedHeight",
@@ -28,6 +29,7 @@
     "--mod-coachmark-content-line-height",
     "--mod-coachmark-header-to-body",
     "--mod-coachmark-heading-to-action-button",
+    "--mod-coachmark-image-to-heading",
     "--mod-coachmark-max-width",
     "--mod-coachmark-media-fixed-height",
     "--mod-coachmark-media-min-height",
@@ -68,6 +70,7 @@
     "--spectrum-coachmark-content-font-weight",
     "--spectrum-coachmark-header-to-body",
     "--spectrum-coachmark-heading-to-action-button",
+    "--spectrum-coachmark-image-to-heading",
     "--spectrum-coachmark-max-width",
     "--spectrum-coachmark-media-fixed-height",
     "--spectrum-coachmark-media-min-height",
@@ -104,6 +107,7 @@
     "--spectrum-spacing-100",
     "--spectrum-spacing-200",
     "--spectrum-spacing-300",
+    "--spectrum-spacing-75",
     "--spectrum-title-line-height",
     "--spectrum-title-sans-serif-font-weight",
     "--spectrum-title-serif-font-style"

components/coachmark/index.css

@@ -24,6 +24,7 @@
 
 	/* layout */
 	--spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
+	--spectrum-coachmark-image-to-heading: var(--spectrum-coach-mark-edge-to-content);
 	--spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300);
 	--spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
 	--spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
@@ -97,13 +98,19 @@
 
 /* Wrapper contains title, action-menu */
 .spectrum-CoachMark-header {
-	padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
+	padding-block-start: var(--mod-coachmark-image-to-heading, var(--spectrum-coachmark-image-to-heading));
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
 }
 
+/* Enforces consistent spacing from image to header and header to text with action menu present */
+.spectrum-CoachMark-header:has(.spectrum-CoachMark-action-menu) {
+	--mod-coachmark-image-to-heading: calc(var(--spectrum-spacing-200) * 1.55);
+	--mod-coachmark-header-to-body: calc(var(--spectrum-spacing-75) * 1.6);
+}
+
 /* Text wrapper for the title content; sides besdie action menu if present */
 .spectrum-CoachMark-title {
 	color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color));