Banner: Fix margin for inline actions (#5053)

* we don't need margin when actions are inline * Create wet-otters-pull.md * test(vrt): update snapshots * there are 2 css files!! --------- Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
primer · Oct 1, 2024 · 2703d0c · 2703d0c
1 parent cff067a
commit 2703d0c
Show file tree

Hide file tree

Showing 13 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/wet-otters-pull.md b/.changeset/wet-otters-pull.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Banner: Fix margin for inline actions
diff --git a/...snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png b/...snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png
diff --git a/...pshots/Banner-DismissibleWithHiddenTitleAndActions-dark-high-contrast-linux.png b/...pshots/Banner-DismissibleWithHiddenTitleAndActions-dark-high-contrast-linux.png
diff --git a/...er.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-linux.png b/...er.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-linux.png
diff --git a/...snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-tritanopia-linux.png b/...snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-tritanopia-linux.png
diff --git a/...shots/Banner-DismissibleWithHiddenTitleAndActions-light-high-contrast-linux.png b/...shots/Banner-DismissibleWithHiddenTitleAndActions-light-high-contrast-linux.png
diff --git a/...s/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png b/...s/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png
diff --git a/...anner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png b/...anner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png
diff --git a/...ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-linux.png b/...ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-linux.png
diff --git a/...s/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png b/...s/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png
diff --git a/...nner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png b/...nner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png
diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css
@@ -143,7 +143,7 @@
   }
 }
 
-.Banner[data-dismissible] .BannerActions {
+.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions {
   margin-block-end: var(--base-size-6);
 }
 

diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
@@ -338,7 +338,7 @@ const StyledBanner = toggleStyledComponent(
       }
     }
 
-    &[data-dismissible] .BannerActions {
+    &[data-dismissible]:not([data-title-hidden]) .BannerActions {
       margin-block-end: var(--base-size-6, 0.375rem);
     }