From 73135c1c57a02e35d33ae6ffba16784043dcabb8 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Tue, 8 Oct 2024 14:01:26 -0400
Subject: [PATCH] fix(Banner): rewrite PrimaryAction & SecondaryAction types
 (#5055)

* fix(Banner): rewrite PrimaryAction & SecondaryAction types

* Create modern-cooks-invite.md
---
 .changeset/modern-cooks-invite.md    |  5 +++++
 packages/react/src/Banner/Banner.tsx | 27 +++++++++++++++++----------
 2 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/modern-cooks-invite.md

diff --git a/.changeset/modern-cooks-invite.md b/.changeset/modern-cooks-invite.md
new file mode 100644
index 00000000000..df4fde36b37
--- /dev/null
+++ b/.changeset/modern-cooks-invite.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Banner): rewrite PrimaryAction & SecondaryAction types
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index cf2a27a6336..6b85cf67c5e 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -1,14 +1,15 @@
 import {clsx} from 'clsx'
-import React, {useEffect} from 'react'
+import React, {forwardRef, useEffect} from 'react'
 import styled from 'styled-components'
 import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react'
-import {Button, IconButton} from '../Button'
+import {Button, IconButton, type ButtonProps} from '../Button'
 import {get} from '../constants'
 import {VisuallyHidden} from '../VisuallyHidden'
 import {useMergedRefs} from '../internal/hooks/useMergedRefs'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Banner.module.css'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning'
 
@@ -474,22 +475,28 @@ export function BannerActions({primaryAction, secondaryAction}: BannerActionsPro
   )
 }
 
-export type BannerPrimaryActionProps = Omit<React.ComponentPropsWithoutRef<typeof Button>, 'variant'>
+export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>
 
-export function BannerPrimaryAction({children, className, ...rest}: BannerPrimaryActionProps) {
+const BannerPrimaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button className={clsx('BannerPrimaryAction', className)} variant="default" {...rest}>
+    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="default" {...rest}>
       {children}
     </Button>
   )
-}
+}) as PolymorphicForwardRefComponent<'button', BannerPrimaryActionProps>
+
+BannerPrimaryAction.displayName = 'BannerPrimaryAction'
 
-export type BannerSecondaryActionProps = Omit<React.ComponentPropsWithoutRef<typeof Button>, 'variant'>
+export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>
 
-export function BannerSecondaryAction({children, className, ...rest}: BannerSecondaryActionProps) {
+const BannerSecondaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button className={clsx('BannerPrimaryAction', className)} variant="link" {...rest}>
+    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="link" {...rest}>
       {children}
     </Button>
   )
-}
+}) as PolymorphicForwardRefComponent<'button', BannerSecondaryActionProps>
+
+BannerSecondaryAction.displayName = 'BannerSecondaryAction'
+
+export {BannerPrimaryAction, BannerSecondaryAction}