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

.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

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',

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

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;
   }