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
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 (
-
- {children}
-
- )
-}
-
-const Tooltip = styled(TooltipBase)`
+const TooltipBase = styled.span`
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
+
+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 (
+
+ {children}
+
+ )
+}
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(, `tooltipped-${direction}`)).toBe(true)
+ expect(
+ rendersClass(, `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