From 26b5e303d1741e121f0e9f7d783b3bf998dbf306 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Wed, 12 Apr 2023 10:00:29 -0500
Subject: [PATCH 1/2] fix(Tooltip): update TypeScript types for TooltipProps

---
 src/Tooltip/Tooltip.tsx                      | 54 +++++++++++---------
 src/Tooltip/__tests__/Tooltip.types.test.tsx |  4 ++
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx
index 9be7dbf95f7..badfd7e7993 100644
--- a/src/Tooltip/Tooltip.tsx
+++ b/src/Tooltip/Tooltip.tsx
@@ -7,28 +7,9 @@ import {invariant} from '../utils/invariant'
 import styled from 'styled-components'
 import {get} from '../constants'
 import {useOnEscapePress} from '../hooks/useOnEscapePress'
+import {ComponentProps} from '../utils/types'
 
-export type TooltipProps = {
-  direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
-  text?: string
-  noDelay?: boolean
-  align?: 'left' | 'right'
-  wrap?: boolean
-  type?: 'label' | 'description'
-  'aria-label'?: React.AriaAttributes['aria-label']
-} & SxProp
-
-export type TriggerPropsType = {
-  'aria-describedby'?: string
-  'aria-labelledby'?: string
-  'aria-label'?: string
-  onBlur?: React.FocusEventHandler
-  onFocus?: React.FocusEventHandler
-  onMouseEnter?: React.MouseEventHandler
-  ref?: React.RefObject<HTMLElement>
-}
-
-const TooltipEL = styled.div<TooltipProps>`
+const StyledTooltip = styled.div`
   // tooltip element itself
   position: absolute;
   z-index: 1000000;
@@ -294,7 +275,30 @@ const TooltipEL = styled.div<TooltipProps>`
   ${sx};
 `
 
-export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
+export type TooltipProps = React.PropsWithChildren<
+  {
+    direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
+    text?: string
+    noDelay?: boolean
+    align?: 'left' | 'right'
+    wrap?: boolean
+    type?: 'label' | 'description'
+    'aria-label'?: React.AriaAttributes['aria-label']
+  } & SxProp &
+    ComponentProps<typeof StyledTooltip>
+>
+
+export type TriggerPropsType = {
+  'aria-describedby'?: string
+  'aria-labelledby'?: string
+  'aria-label'?: string
+  onBlur?: React.FocusEventHandler
+  onFocus?: React.FocusEventHandler
+  onMouseEnter?: React.MouseEventHandler
+  ref?: React.RefObject<HTMLElement>
+}
+
+export const Tooltip = ({
   direction = 'n',
   // used for description type
   text,
@@ -306,7 +310,7 @@ export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   type = 'label',
   children,
   ...rest
-}) => {
+}: TooltipProps) => {
   const id = useId()
   const triggerRef = useRef<HTMLElement>(null)
   const child = Children.only(children)
@@ -376,7 +380,7 @@ export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
             child.props.onMouseEnter?.(event)
           },
         })}
-      <TooltipEL
+      <StyledTooltip
         data-direction={direction}
         data-state={open ? 'open' : undefined}
         data-align={align}
@@ -390,7 +394,7 @@ export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
         id={id}
       >
         {text ?? label}
-      </TooltipEL>
+      </StyledTooltip>
     </Box>
   )
 }
diff --git a/src/Tooltip/__tests__/Tooltip.types.test.tsx b/src/Tooltip/__tests__/Tooltip.types.test.tsx
index 65d27666df2..758d05377e7 100644
--- a/src/Tooltip/__tests__/Tooltip.types.test.tsx
+++ b/src/Tooltip/__tests__/Tooltip.types.test.tsx
@@ -5,6 +5,10 @@ export function shouldAcceptCallWithNoProps() {
   return <Tooltip />
 }
 
+export function shouldAcceptAdditionalProps() {
+  return <Tooltip id="test" style={{}} className="test" />
+}
+
 export function shouldNotAcceptSystemProps() {
   // @ts-expect-error system props should not be accepted
   return <Tooltip backgroundColor="thistle" />

From 04638f947ab0dca9d4953bf68d37608855e9fa16 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Wed, 12 Apr 2023 10:02:50 -0500
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/dirty-files-talk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dirty-files-talk.md

diff --git a/.changeset/dirty-files-talk.md b/.changeset/dirty-files-talk.md
new file mode 100644
index 00000000000..e901486371a
--- /dev/null
+++ b/.changeset/dirty-files-talk.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update TooltipProps to extend from StyledTooltip props