Add new Banner prop to handle actions layout edge cases

.changeset/grumpy-walls-cry.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add new `Banner` `actionsLayout` prop to handle actions layout edge cases

e2e/components/Banner.test.ts

@@ -70,6 +70,14 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
     id: 'components-banner-examples--multiline',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
+  {
+    title: 'ActionsInline',
+    id: 'components-banner-features--actions-layout-inline',
+  },
+  {
+    title: 'ActionsStacked',
+    id: 'components-banner-features--actions-layout-stacked',
+  },
 ]
 
 test.describe('Banner', () => {

packages/react/src/Banner/Banner.docs.json

@@ -6,49 +6,49 @@
   "importPath": "@primer/react",
   "stories": [
     {
-  "id": "components-banner--default"
+      "id": "components-banner--default"
     },
     {
-  "id": "components-banner-features--critical"
+      "id": "components-banner-features--critical"
     },
     {
-  "id": "components-banner-features--info"
+      "id": "components-banner-features--info"
     },
     {
-  "id": "components-banner-features--success"
+      "id": "components-banner-features--success"
     },
     {
-  "id": "components-banner-features--upsell"
+      "id": "components-banner-features--upsell"
     },
     {
-  "id": "components-banner-features--warning"
+      "id": "components-banner-features--warning"
     },
     {
-  "id": "components-banner-features--dismiss"
+      "id": "components-banner-features--dismiss"
     },
     {
-  "id": "components-banner-features--dismiss-with-actions"
+      "id": "components-banner-features--dismiss-with-actions"
     },
     {
-  "id": "components-banner-features--with-hidden-title"
+      "id": "components-banner-features--with-hidden-title"
     },
     {
-  "id": "components-banner-features--with-hidden-title-and-actions"
+      "id": "components-banner-features--with-hidden-title-and-actions"
     },
     {
-  "id": "components-banner-features--dismissible-with-hidden-title-and-actions"
+      "id": "components-banner-features--dismissible-with-hidden-title-and-actions"
     },
     {
-  "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"
+      "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action"
     },
     {
-  "id": "components-banner-features--with-actions"
+      "id": "components-banner-features--with-actions"
     },
     {
-  "id": "components-banner-features--custom-icon"
+      "id": "components-banner-features--custom-icon"
     },
     {
-  "id": "components-banner-examples--with-announcement"
+      "id": "components-banner-examples--with-announcement"
     }
   ],
   "props": [
@@ -106,6 +106,11 @@
       "name": "layout",
       "type": "'default' | 'compact'",
       "description": "Specify the layout of the Banner. Compact layout will reduce the padding."
+    },
+    {
+      "name": "actionsLayout",
+      "type": "'default' | 'inline' | 'stacked'",
+      "description": "Override the responsive layout of the action buttons. 'inline' layout will display the buttons inline with the title and description, while 'stacked' layout will always render the buttons in a new row."
     }
   ],
   "subcomponents": [

packages/react/src/Banner/Banner.features.stories.tsx

@@ -1,8 +1,12 @@
 import {CopilotIcon, GitPullRequestIcon} from '@primer/octicons-react'
 import {action} from 'storybook/actions'
 import type {Meta} from '@storybook/react-vite'
+import React from 'react'
 import {Banner} from '../Banner'
 import Link from '../Link'
+import {Dialog} from '../Dialog/Dialog'
+import {Stack} from '../Stack'
+import Heading from '../Heading'
 
 const meta = {
   title: 'Components/Banner/Features',
@@ -257,3 +261,138 @@ export const CustomIcon = () => {
     />
   )
 }
+
+export const InsideDialog = () => {
+  const onDialogClose = React.useCallback(() => {}, [])
+
+  return (
+    <Dialog title="Add issue fields" onClose={onDialogClose} width="small">
+      <Banner
+        title="Something went wrong adding fields."
+        hideTitle
+        description="Please try again."
+        variant="critical"
+        actionsLayout="inline"
+        primaryAction={<Banner.PrimaryAction onClick={action('Try again')}>Try again</Banner.PrimaryAction>}
+      />
+    </Dialog>
+  )
+}
+
+export const ActionsLayoutStacked = () => {
+  return (
+    <Stack gap="spacious">
+      <Stack style={{maxWidth: '320px'}}>
+        <Heading variant="small" as="h3">
+          Mobile (320px)
+        </Heading>
+        <Banner
+          title="Actions Layout: Stacked"
+          aria-label="Actions Layout Stacked Mobile"
+          description="Actions are displayed in a vertical stack on both mobile and desktop."
+          variant="info"
+          actionsLayout="stacked"
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary Action</Banner.PrimaryAction>}
+          secondaryAction={
+            <Banner.SecondaryAction onClick={action('Secondary')}>Secondary Action</Banner.SecondaryAction>
+          }
+        />
+        <Banner
+          title="Actions Layout: Stacked"
+          aria-label="Actions Layout Stacked Mobile Dismissible"
+          description="Actions are displayed in a vertical stack on both mobile and desktop."
+          variant="info"
+          actionsLayout="stacked"
+          onDismiss={action('onDismiss')}
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary Action</Banner.PrimaryAction>}
+          secondaryAction={
+            <Banner.SecondaryAction onClick={action('Secondary')}>Secondary Action</Banner.SecondaryAction>
+          }
+        />
+      </Stack>
+
+      <Stack style={{maxWidth: '768px'}}>
+        <Heading variant="small" as="h3">
+          Desktop (768px)
+        </Heading>
+        <Banner
+          title="Actions Layout: Stacked"
+          aria-label="Actions Layout Stacked Desktop"
+          description="Actions are displayed in a vertical stack on both mobile and desktop."
+          variant="info"
+          actionsLayout="stacked"
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary Action</Banner.PrimaryAction>}
+          secondaryAction={
+            <Banner.SecondaryAction onClick={action('Secondary')}>Secondary Action</Banner.SecondaryAction>
+          }
+        />
+        <Banner
+          title="Actions Layout: Stacked"
+          aria-label="Actions Layout Stacked Desktop Dismissible"
+          description="Actions are displayed in a vertical stack on both mobile and desktop."
+          variant="info"
+          actionsLayout="stacked"
+          onDismiss={action('onDismiss')}
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary Action</Banner.PrimaryAction>}
+          secondaryAction={
+            <Banner.SecondaryAction onClick={action('Secondary')}>Secondary Action</Banner.SecondaryAction>
+          }
+        />
+      </Stack>
+    </Stack>
+  )
+}
+
+export const ActionsLayoutInline = () => {
+  return (
+    <Stack gap="spacious">
+      <Stack style={{maxWidth: '320px'}}>
+        <Heading variant="small" as="h3">
+          Mobile (320px)
+        </Heading>
+        <Banner
+          title="A short title"
+          aria-label="Actions Layout Inline Mobile"
+          description="A very short message."
+          variant="warning"
+          actionsLayout="inline"
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary</Banner.PrimaryAction>}
+        />
+        <Banner
+          title="A short title"
+          aria-label="Actions Layout Inline Mobile Dismissible"
+          description="A very short message."
+          variant="warning"
+          actionsLayout="inline"
+          onDismiss={action('onDismiss')}
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary</Banner.PrimaryAction>}
+        />
+      </Stack>
+
+      <Stack style={{maxWidth: '768px'}}>
+        <Heading variant="small" as="h3">
+          Desktop (768px)
+        </Heading>
+        <Banner
+          title="A short title"
+          aria-label="Actions Layout Inline Desktop"
+          description="A very short message."
+          variant="warning"
+          actionsLayout="inline"
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary</Banner.PrimaryAction>}
+          secondaryAction={<Banner.SecondaryAction onClick={action('Secondary')}>Secondary</Banner.SecondaryAction>}
+        />
+        <Banner
+          title="A short title"
+          aria-label="Actions Layout Inline Desktop Dismissible"
+          description="A very short message."
+          variant="warning"
+          actionsLayout="inline"
+          onDismiss={action('onDismiss')}
+          primaryAction={<Banner.PrimaryAction onClick={action('Primary')}>Primary</Banner.PrimaryAction>}
+          secondaryAction={<Banner.SecondaryAction onClick={action('Secondary')}>Secondary</Banner.SecondaryAction>}
+        />
+      </Stack>
+    </Stack>
+  )
+}

packages/react/src/Banner/Banner.module.css

@@ -9,8 +9,42 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
 
-  @supports (container-type: inline-size) {
-    container: banner / inline-size;
+  &[data-actions-layout='default'] {
+    @supports (container-type: inline-size) {
+      container: banner / inline-size;
+    }
+  }
+
+  &[data-actions-layout='stacked'] {
+    & .BannerContainer {
+      flex-direction: column;
+    }
+
+    & .BannerActions :where([data-primary-action='trailing']) {
+      display: none;
+    }
+
+    & .BannerActions :where([data-primary-action='leading']) {
+      display: flex;
+    }
+  }
+
+  &[data-actions-layout='inline'] {
+    & .BannerContainer {
+      flex-wrap: nowrap;
+    }
+
+    & .BannerActions {
+      flex: 0 0 auto;
+    }
+
+    & .BannerActions :where([data-primary-action='trailing']) {
+      display: flex;
+    }
+
+    & .BannerActions :where([data-primary-action='leading']) {
+      display: none;
+    }
   }
 
   &[data-layout='compact'] {
@@ -64,7 +98,7 @@
   justify-content: space-between;
 }
 
-.Banner[data-dismissible]:not([data-title-hidden='']) .BannerContainer {
+.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerContainer {
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: auto;
@@ -148,27 +182,19 @@
   display: none;
 }
 
-@media screen and (--viewportRange-regular) {
-  .BannerActions :where([data-primary-action='trailing']) {
-    display: flex;
-  }
-
-  .BannerActions :where([data-primary-action='leading']) {
-    display: none;
-  }
-}
-
-.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions {
+.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerActions {
   margin-block-end: var(--base-size-6);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='trailing'] {
+.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])
+  .BannerActionsContainer[data-primary-action='trailing'] {
   display: none;
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='leading'] {
+.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])
+  .BannerActionsContainer[data-primary-action='leading'] {
   display: flex;
 }
 

packages/react/src/Banner/Banner.test.tsx

@@ -188,6 +188,21 @@ describe('Banner', () => {
     expect(screen.queryByTestId('icon')).toBe(null)
   })
 
+  it('should render data-actions-layout attribute with inline value', () => {
+    const {container} = render(<Banner title="test" actionsLayout="inline" />)
+    expect(container.firstChild).toHaveAttribute('data-actions-layout', 'inline')
+  })
+
+  it('should render data-actions-layout attribute with stacked value', () => {
+    const {container} = render(<Banner title="test" actionsLayout="stacked" />)
+    expect(container.firstChild).toHaveAttribute('data-actions-layout', 'stacked')
+  })
+
+  it('should render data-actions-layout attribute with default value when not specified', () => {
+    const {container} = render(<Banner title="test" />)
+    expect(container.firstChild).toHaveAttribute('data-actions-layout', 'default')
+  })
+
   describe('Banner.Title', () => {
     it('should render as a h2 element by default', () => {
       render(

packages/react/src/Banner/Banner.tsx

@@ -69,6 +69,11 @@ export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
    * Specify the layout of the Banner. Compact layout will reduce the padding.
    */
   layout?: 'default' | 'compact'
+
+  /**
+   * Override the default actions layout behavior
+   */
+  actionsLayout?: 'inline' | 'stacked' | 'default'
 }
 
 const iconForVariant: Record<BannerVariant, React.ReactNode> = {
@@ -101,6 +106,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
     secondaryAction,
     title,
     variant = 'info',
+    actionsLayout = 'default',
     ...rest
   },
   forwardRef,
@@ -143,6 +149,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
       data-dismissible={onDismiss ? '' : undefined}
       data-title-hidden={hideTitle ? '' : undefined}
       data-variant={variant}
+      data-actions-layout={actionsLayout}
       tabIndex={-1}
       ref={ref}
       data-layout={rest.layout || 'default'}