diff --git a/.changeset/pink-rockets-win.md b/.changeset/pink-rockets-win.md new file mode 100644 index 00000000000..3e17a8f8ada --- /dev/null +++ b/.changeset/pink-rockets-win.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Update Tooltip component to no longer support sx. diff --git a/packages/react/src/Tooltip/Tooltip.docs.json b/packages/react/src/Tooltip/Tooltip.docs.json index 9d9be40a303..0273d91e2c5 100644 --- a/packages/react/src/Tooltip/Tooltip.docs.json +++ b/packages/react/src/Tooltip/Tooltip.docs.json @@ -31,12 +31,7 @@ "name": "wrap", "type": "boolean", "description": "Use `true` to allow text within tooltip to wrap." - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true } ], "subcomponents": [] -} +} \ No newline at end of file diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx index 06a17b47941..1701bb7528f 100644 --- a/packages/react/src/Tooltip/Tooltip.tsx +++ b/packages/react/src/Tooltip/Tooltip.tsx @@ -2,14 +2,12 @@ import {clsx} from 'clsx' import React, {useMemo} from 'react' import styled from 'styled-components' import {get} from '../constants' -import type {SxProp} from '../sx' -import sx from '../sx' import type {ComponentProps} from '../utils/types' import {useId} from '../hooks' /* Tooltip v1 */ -const TooltipBase = styled.span` +const TooltipBase = styled.span` position: relative; display: inline-block; @@ -182,8 +180,6 @@ const TooltipBase = styled.span` left: 0; margin-left: 0; } - - ${sx}; ` /** diff --git a/packages/react/src/TooltipV2/Tooltip.docs.json b/packages/react/src/TooltipV2/Tooltip.docs.json index 72d998f3e9f..439ad9ad165 100644 --- a/packages/react/src/TooltipV2/Tooltip.docs.json +++ b/packages/react/src/TooltipV2/Tooltip.docs.json @@ -57,12 +57,7 @@ "name": "keybindingHint", "type": "string", "description": "Optional keybinding hint to indicate the availability of a keyboard shortcut. Supported syntax is described in the docs for the `KeybindingHint` component." - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true } ], "subcomponents": [] -} +} \ No newline at end of file diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx index 8e7ed6afca8..a0479eb8f5c 100644 --- a/packages/react/src/TooltipV2/Tooltip.tsx +++ b/packages/react/src/TooltipV2/Tooltip.tsx @@ -1,5 +1,4 @@ import React, {Children, useEffect, useRef, useState, useMemo} from 'react' -import type {SxProp} from '../sx' import {useId, useProvidedRefOrCreate, useOnEscapePress, useIsMacOS} from '../hooks' import {invariant} from '../utils/invariant' import {warning} from '../utils/warning' @@ -11,17 +10,14 @@ import classes from './Tooltip.module.css' import {getAccessibleKeybindingHintString, KeybindingHint, type KeybindingHintProps} from '../KeybindingHint' import VisuallyHidden from '../_VisuallyHidden' import useSafeTimeout from '../hooks/useSafeTimeout' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' export type TooltipDirection = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' -export type TooltipProps = React.PropsWithChildren< - { - direction?: TooltipDirection - text: string - type?: 'label' | 'description' - keybindingHint?: KeybindingHintProps['keys'] - } & SxProp -> & +export type TooltipProps = React.PropsWithChildren<{ + direction?: TooltipDirection + text: string + type?: 'label' | 'description' + keybindingHint?: KeybindingHintProps['keys'] +}> & React.HTMLAttributes type TriggerPropsType = Pick< @@ -298,8 +294,7 @@ export const Tooltip = React.forwardRef( child.props.onMouseLeave?.(event) }, })} - + ) diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx new file mode 100644 index 00000000000..da923ed48b6 --- /dev/null +++ b/packages/styled-react/src/components/Tooltip.tsx @@ -0,0 +1,25 @@ +import {Tooltip as PrimerTooltip, type TooltipProps as PrimerTooltipProps, type SxProp} from '@primer/react' +import { + Tooltip as PrimerDeprecatedTooltip, + type TooltipProps as PrimerDeprecatedTooltipProps, +} from '@primer/react/deprecated' +import {Box} from './Box' +import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react' + +type TooltipProps = PrimerTooltipProps & SxProp + +const Tooltip: ForwardRefExoticComponent> = forwardRef< + HTMLDivElement, + TooltipProps +>(function Tooltip(props, ref) { + return +}) + +export {Tooltip, type TooltipProps} + +type DeprecatedTooltipProps = PrimerDeprecatedTooltipProps & SxProp + +function DeprecatedTooltip(props: DeprecatedTooltipProps) { + return +} +export {DeprecatedTooltip, type DeprecatedTooltipProps} diff --git a/packages/styled-react/src/deprecated.tsx b/packages/styled-react/src/deprecated.tsx index b5b2a030438..2c91cbbd61f 100644 --- a/packages/styled-react/src/deprecated.tsx +++ b/packages/styled-react/src/deprecated.tsx @@ -1,3 +1,4 @@ export {TabNav, type TabNavProps, type TabNavLinkProps} from './components/TabNav' export {Dialog, type DialogProps, type DialogHeaderProps} from './components/DialogV1' -export {Octicon, Tooltip, type TooltipProps} from '@primer/react/deprecated' +export {Octicon} from '@primer/react/deprecated' +export {DeprecatedTooltip as Tooltip, type DeprecatedTooltipProps as TooltipProps} from './components/Tooltip' diff --git a/packages/styled-react/src/experimental.tsx b/packages/styled-react/src/experimental.tsx index 19f620aff3c..f120240dc00 100644 --- a/packages/styled-react/src/experimental.tsx +++ b/packages/styled-react/src/experimental.tsx @@ -13,4 +13,7 @@ export { type UnderlinePanelsTabProps, type UnderlinePanelsPanelProps, } from './components/UnderlinePanels' -export {Table, Tooltip} from '@primer/react/experimental' + +export {Tooltip, type TooltipProps} from './components/Tooltip' + +export {Table} from '@primer/react/experimental' diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 830f612f911..6cb310daf60 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -10,7 +10,6 @@ export {Select} from '@primer/react' export {Text} from '@primer/react' export {Textarea} from '@primer/react' export {TextInput} from '@primer/react' -export {Tooltip} from '@primer/react' export {type TextInputProps} from '@primer/react' // theming depends on styled-components @@ -64,6 +63,7 @@ export { type TimelineBreakProps, } from './components/Timeline' export {ToggleSwitch, type ToggleSwitchProps} from './components/ToggleSwitch' +export {Tooltip, type TooltipProps} from './components/Tooltip' export {Token, type TokenProps} from './components/Token' export {Truncate, type TruncateProps} from './components/Truncate' export {UnderlineNav, type UnderlineNavProps, type UnderlineNavItemProps} from './components/UnderlineNav'