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