Merge 3a81b51 into 954170b

primer · Sep 25, 2024 · a2532c3 · a2532c3
2 parents 954170b + 3a81b51
commit a2532c3
Show file tree

Hide file tree

Showing 16 changed files with 34 additions and 1 deletion.
diff --git a/.changeset/flat-weeks-battle.md b/.changeset/flat-weeks-battle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Banner: Fix alignment of secondary action without primary action
diff --git a/...s/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png b/...s/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png
diff --git a/...shots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-dimmed-linux.png b/...shots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-dimmed-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/.../Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-colorblind-linux.png b/.../Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-colorblind-linux.png
diff --git a/...nner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png b/...nner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png
diff --git a/...s-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-linux.png b/...s-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-linux.png
diff --git a/.../Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-tritanopia-linux.png b/.../Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-tritanopia-linux.png
diff --git a/...ner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-sm-linux.png b/...ner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-sm-linux.png
diff --git a/...ner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-xs-linux.png b/...ner-DismissibleWithHiddenTitleAndSecondaryAction-primer-breakpoint-xs-linux.png
diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts
@@ -56,6 +56,11 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
     id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-actions',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
+  {
+    title: 'DismissibleWithHiddenTitleAndSecondaryAction',
+    id: 'experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
   {
     title: 'InSidebar',
     id: 'experimental-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
@@ -1,5 +1,5 @@
 import React from 'react'
-import {CopilotIcon} from '@primer/octicons-react'
+import {CopilotIcon, GitPullRequestIcon} from '@primer/octicons-react'
 import {action} from '@storybook/addon-actions'
 import type {Meta} from '@storybook/react'
 import {Banner} from '../Banner'
@@ -206,6 +206,27 @@ export const DismissibleWithHiddenTitleAndActions = () => {
   )
 }
 
+export const DismissibleWithHiddenTitleAndSecondaryAction = () => {
+  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"
+      secondaryAction={<Banner.SecondaryAction leadingVisual={GitPullRequestIcon}>Button</Banner.SecondaryAction>}
+    />
+  )
+}
+
 export const WithActions = () => {
   return (
     <Banner

diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css
@@ -186,6 +186,7 @@
 
   .BannerActions [data-primary-action='trailing'] {
     display: flex;
+    min-height: var(--base-size-32, 2rem);
   }
 
   .BannerActions [data-primary-action='leading'] {

diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
@@ -393,6 +393,7 @@ const BannerContainerQuery = `
 
     .BannerActions [data-primary-action="trailing"] {
       display: flex;
+      min-height: var(--base-size-32, 2rem);
     }
 
     .BannerActions [data-primary-action="leading"] {