fix(Banner): update alignment of actions when Banner is dismissible (#…

…4954) * fix(Banner): update alignment of actions when Banner is dismissible * chore: add changeset * test(vrt): update snapshots * fix(Banner): update actions order * test(vrt): update snapshots * Update .changeset/spicy-eggs-melt.md Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
primer · Sep 13, 2024 · af7f589 · af7f589
1 parent fda3031
commit af7f589
Show file tree

Hide file tree

Showing 15 changed files with 35 additions and 3 deletions.
diff --git a/.changeset/spicy-eggs-melt.md b/.changeset/spicy-eggs-melt.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Banner: Update alignment of actions when it is dismissible and has a hidden title
diff --git a/...snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png b/...snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png
diff --git a/....ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-dimmed-linux.png b/....ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-dimmed-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/...napshots/Banner-DismissibleWithHiddenTitleAndActions-light-colorblind-linux.png b/...napshots/Banner-DismissibleWithHiddenTitleAndActions-light-colorblind-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/...r.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-linux.png b/...r.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-light-linux.png
diff --git a/...napshots/Banner-DismissibleWithHiddenTitleAndActions-light-tritanopia-linux.png b/...napshots/Banner-DismissibleWithHiddenTitleAndActions-light-tritanopia-linux.png
diff --git a/...hots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-sm-linux.png b/...hots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-sm-linux.png
diff --git a/...hots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-xs-linux.png b/...hots/Banner-DismissibleWithHiddenTitleAndActions-primer-breakpoint-xs-linux.png
diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts
@@ -51,6 +51,11 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
     id: 'drafts-components-banner-features--with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
+  {
+    title: 'DismissibleWithHiddenTitleAndActions',
+    id: 'drafts-components-banner-features--dismissible-with-hidden-title-and-actions',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
   {
     title: 'InSidebar',
     id: 'drafts-components-banner-examples--in-sidebar',

diff --git a/packages/react/src/Banner/Banner.features.stories.tsx b/packages/react/src/Banner/Banner.features.stories.tsx
@@ -184,6 +184,28 @@ export const WithHiddenTitleAndActions = () => {
   )
 }
 
+export const DismissibleWithHiddenTitleAndActions = () => {
+  return (
+    <Banner
+      title="Warning"
+      hideTitle
+      description={
+        <>
+          GitHub users are{' '}
+          <Link inline underline href="#">
+            now required
+          </Link>{' '}
+          to enable two-factor authentication as an additional security measure.
+        </>
+      }
+      onDismiss={action('onDismiss')}
+      variant="warning"
+      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}
+      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}
+    />
+  )
+}
+
 export const WithActions = () => {
   return (
     <Banner

diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
@@ -248,7 +248,7 @@ const StyledBanner = styled.div`
     justify-content: space-between;
   }
 
-  &[data-dismissible] .BannerContainer {
+  &[data-dismissible]:not([data-title-hidden='']) .BannerContainer {
     display: grid;
     grid-template-columns: auto;
     grid-template-rows: auto;
@@ -304,11 +304,11 @@ const StyledBanner = styled.div`
     margin-block-end: var(--base-size-6, 0.375rem);
   }
 
-  &[data-dismissible] .BannerActionsContainer[data-primary-action='trailing'] {
+  &[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='trailing'] {
     display: none;
   }
 
-  &[data-dismissible] .BannerActionsContainer[data-primary-action='leading'] {
+  &[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='leading'] {
     display: flex;
   }