From c641c1dbfe9bf5fce2fe2a05de99ad124f1e117a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Feb 2021 20:40:43 -0800
Subject: [PATCH 1/2] =?UTF-8?q?Tooltip.js=20=E2=86=92=20Tooltip.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{Tooltip.js => Tooltip.tsx}               | 47 +++++++++++--------
 src/__tests__/{Tooltip.js => Tooltip.tsx}     |  6 ++-
 .../{Tooltip.js.snap => Tooltip.tsx.snap}     |  0
 3 files changed, 31 insertions(+), 22 deletions(-)
 rename src/{Tooltip.js => Tooltip.tsx} (89%)
 rename src/__tests__/{Tooltip.js => Tooltip.tsx} (89%)
 rename src/__tests__/__snapshots__/{Tooltip.js.snap => Tooltip.tsx.snap} (100%)

diff --git a/src/Tooltip.js b/src/Tooltip.tsx
similarity index 89%
rename from src/Tooltip.js
rename to src/Tooltip.tsx
index 3515e985a25..e6219037e39 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.tsx
@@ -2,26 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import styled from 'styled-components'
-import {COMMON, get} from './constants'
+import {COMMON, get, SystemCommonProps} from './constants'
 import theme from './theme'
-import sx from './sx'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
-function TooltipBase({direction, children, className, text, noDelay, align, wrap, theme, ...rest}) {
-  const classes = classnames(
-    className,
-    `tooltipped-${direction}`,
-    align && `tooltipped-align-${align}-2`,
-    noDelay && 'tooltipped-no-delay',
-    wrap && 'tooltipped-multiline'
-  )
-  return (
-    <span aria-label={text} {...rest} className={classes}>
-      {children}
-    </span>
-  )
-}
-
-const Tooltip = styled(TooltipBase)`
+const TooltipBase = styled.span<SystemCommonProps & SxProp>`
   position: relative;
 
   &::before {
@@ -249,13 +235,34 @@ const Tooltip = styled(TooltipBase)`
   ${sx};
 `
 
+export type TooltipProps = {
+  direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
+  text?: string
+  noDelay?: boolean
+  align?: 'left' | 'right'
+  wrap?: boolean
+} & ComponentProps<typeof TooltipBase>
+
+function Tooltip({direction = 'n', children, className, text, noDelay, align, wrap, ...rest}: TooltipProps) {
+  const classes = classnames(
+    className,
+    `tooltipped-${direction}`,
+    align && `tooltipped-align-${align}-2`,
+    noDelay && 'tooltipped-no-delay',
+    wrap && 'tooltipped-multiline'
+  )
+  return (
+    <TooltipBase aria-label={text} {...rest} className={classes}>
+      {children}
+    </TooltipBase>
+  )
+}
 Tooltip.alignments = ['left', 'right']
 
 Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw']
 
 Tooltip.defaultProps = {
-  theme,
-  direction: 'n'
+  theme
 }
 
 Tooltip.propTypes = {
diff --git a/src/__tests__/Tooltip.js b/src/__tests__/Tooltip.tsx
similarity index 89%
rename from src/__tests__/Tooltip.js
rename to src/__tests__/Tooltip.tsx
index b97d9458ba9..32cb1e7c044 100644
--- a/src/__tests__/Tooltip.js
+++ b/src/__tests__/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Tooltip} from '..'
+import Tooltip, {TooltipProps} from '../Tooltip'
 import {render, renderClasses, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
 import {COMMON} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
@@ -33,7 +33,9 @@ describe('Tooltip', () => {
 
   it('respects the "direction" prop', () => {
     for (const direction of Tooltip.directions) {
-      expect(rendersClass(<Tooltip direction={direction} />, `tooltipped-${direction}`)).toBe(true)
+      expect(
+        rendersClass(<Tooltip direction={direction as TooltipProps['direction']} />, `tooltipped-${direction}`)
+      ).toBe(true)
     }
   })
 
diff --git a/src/__tests__/__snapshots__/Tooltip.js.snap b/src/__tests__/__snapshots__/Tooltip.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/Tooltip.js.snap
rename to src/__tests__/__snapshots__/Tooltip.tsx.snap

From ff02c038cdeef9cbeb8d050b3c5a951ccdbb9574 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Feb 2021 20:42:21 -0800
Subject: [PATCH 2/2] Create odd-weeks-rescue.md

---
 .changeset/odd-weeks-rescue.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/odd-weeks-rescue.md

diff --git a/.changeset/odd-weeks-rescue.md b/.changeset/odd-weeks-rescue.md
new file mode 100644
index 00000000000..49bf6e7c2c0
--- /dev/null
+++ b/.changeset/odd-weeks-rescue.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Tooltip` to TypeScript