diff --git a/.changeset/wild-aliens-itch.md b/.changeset/wild-aliens-itch.md new file mode 100644 index 00000000000..abd2cec8445 --- /dev/null +++ b/.changeset/wild-aliens-itch.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +IconButton: Hide tooltip when popup is open via new `closeTooltip` prop in `Tooltip`. diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx index 7bb580691e7..818eb029f9c 100644 --- a/packages/react/src/Button/IconButton.tsx +++ b/packages/react/src/Button/IconButton.tsx @@ -28,7 +28,14 @@ const IconButton = forwardRef( const {tooltipId} = React.useContext(TooltipContext) // Tooltip v2 const {tooltipId: tooltipIdV1} = React.useContext(TooltipContextV1) // Tooltip v1 + const {'aria-expanded': isExpanded, 'aria-haspopup': hasPopup} = props + const hasExternalTooltip = tooltipId || tooltipIdV1 + + // If the button has an active "popup" (like a menu), we don't want to show the tooltip. + // This is mostly for `ActionMenu`, but could be applicable elsewhere. + const hasActivePopup = (isExpanded === true || isExpanded === 'true') && hasPopup === 'true' + const withoutTooltip = unsafeDisableTooltip || disabled || ariaLabel === undefined || ariaLabel === '' || hasExternalTooltip @@ -55,6 +62,7 @@ const IconButton = forwardRef( type={description ? undefined : 'label'} direction={tooltipDirection} keybindingHint={keybindingHint ?? keyshortcuts} + _privateDisableTooltip={hasActivePopup} > & React.HTMLAttributes @@ -107,6 +117,7 @@ export const Tooltip: ForwardRefExoticComponent< className, keybindingHint, delay = 'short', + _privateDisableTooltip = false, ...rest }: TooltipProps, forwardedRef, @@ -130,7 +141,8 @@ export const Tooltip: ForwardRefExoticComponent< tooltipElRef.current && triggerRef.current && tooltipElRef.current.hasAttribute('popover') && - !tooltipElRef.current.matches(':popover-open') + !tooltipElRef.current.matches(':popover-open') && + !_privateDisableTooltip ) { const tooltip = tooltipElRef.current const trigger = triggerRef.current