Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wild-aliens-itch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

IconButton: Hide tooltip when popup is open via new `closeTooltip` prop in `Tooltip`.
8 changes: 8 additions & 0 deletions packages/react/src/Button/IconButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -55,6 +62,7 @@ const IconButton = forwardRef(
type={description ? undefined : 'label'}
direction={tooltipDirection}
keybindingHint={keybindingHint ?? keyshortcuts}
_privateDisableTooltip={hasActivePopup}
>
<ButtonBase
icon={Icon}
Expand Down
14 changes: 13 additions & 1 deletion packages/react/src/TooltipV2/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ export type TooltipProps = React.PropsWithChildren<{
* long (1200ms)
*/
delay?: 'short' | 'medium' | 'long'
/**
* Private API for use internally only. Prevents the tooltip from opening if `true`.
*
* Accessibility note: This prop should be used with caution. Only use when needing to
* programmatically close the tooltip in response to a specific user action, such as
* opening a menu, or content where the tooltip could overlap with interactive content.
*
* @default false
*/
_privateDisableTooltip?: boolean
}> &
React.HTMLAttributes<HTMLElement>

Expand Down Expand Up @@ -107,6 +117,7 @@ export const Tooltip: ForwardRefExoticComponent<
className,
keybindingHint,
delay = 'short',
_privateDisableTooltip = false,
...rest
}: TooltipProps,
forwardedRef,
Expand All @@ -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
Expand Down
Loading