chore: Update ToolTip to default to be dismissed after parent target is clicked#3388
Open
LinKCoding wants to merge 14 commits into
Open
chore: Update ToolTip to default to be dismissed after parent target is clicked#3388LinKCoding wants to merge 14 commits into
LinKCoding wants to merge 14 commits into
Conversation
|
View your CI Pipeline Execution ↗ for commit 061b086 ☁️ Nx Cloud last updated this comment at |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #3388 +/- ##
==========================================
- Coverage 90.55% 90.10% -0.46%
==========================================
Files 398 270 -128
Lines 6586 5699 -887
Branches 2141 1924 -217
==========================================
- Hits 5964 5135 -829
+ Misses 613 555 -58
Partials 9 9
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
LinKCoding
force-pushed
the
kl-gmt-1666-gamut-tooltips-blur
branch
from
a9a3a7a to
2c47b8e
Compare
LinKCoding
commented
Jul 6, 2026
|
|
||
| return ( | ||
| <ToolTip info={tip} {...(tipProps as any)}> | ||
| <ToolTip closeOnClick info={tip} {...(tipProps as any)}> |
Contributor
Author
There was a problem hiding this comment.
very similar to still including info as a prop, where it gets overridden if tipProps includes info --
where if tipProps doesn't include closeOnClick, then closeOnClick becomes the default (the ToolTip disappears after the target is clicked)
LinKCoding
changed the title
LinKCoding
force-pushed
the
kl-gmt-1666-gamut-tooltips-blur
branch
from
e4cfa8d to
061b086
Compare
Collaborator
|
📬 Published Alpha Packages:
|
Contributor
|
🚀 Styleguide deploy preview ready! Preview URL: https://6a4eb53c587f953067800df9--gamut-preview.netlify.app |
There was a problem hiding this comment.
Pull request overview
Adds a closeOnClick capability to Gamut tooltips and wires it through key interactive components so hover-tooltips can be dismissed immediately after activation (with an opt-out for “copy → copied” style patterns).
Changes:
- Introduces
closeOnClickin tooltip types/components and implements dismiss/undismiss behavior for inline + floating tooltip variants. - Defaults IconButton tooltips to close on click; adds MenuItem support and updates related stories/docs.
- Adds Storybook stories + MDX docs and extends IconButton unit tests around click handling.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx | Adds “Close on Click” story variants for ToolTip (floating + inline). |
| packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.mdx | Documents close-on-click behavior and how to opt out. |
| packages/styleguide/src/lib/Molecules/Menu/Menu.stories.tsx | Updates Menu stories to demonstrate tooltip close-on-click behavior (and opt-out). |
| packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.stories.tsx | Adds IconButton “CloseOnClick” story variants and demonstrates tipProps.closeOnClick=false. |
| packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.mdx | Documents IconButton tooltip close-on-click default and opt-out usage. |
| packages/gamut/src/Tip/ToolTip/index.tsx | Adds closeOnClick prop to ToolTip public API (but needs defaulting in implementation). |
| packages/gamut/src/Tip/shared/types.tsx | Adds closeOnClick to shared placement component props. |
| packages/gamut/src/Tip/shared/InlineTip.tsx | Implements inline tooltip dismissal state + event handling for close-on-click. |
| packages/gamut/src/Tip/shared/FloatingTip.tsx | Implements click-to-close behavior for floating tooltip variant. |
| packages/gamut/src/Tip/shared/elements.tsx | Updates tooltip wrapper CSS selectors/state to support dismissal and focus-visible behavior. |
| packages/gamut/src/Menu/MenuItem.tsx | Adds closeOnClick to icon-only MenuItem tooltips (default true). |
| packages/gamut/src/Menu/elements.tsx | Forwards closeOnClick through MenuToolTipWrapper into ToolTip. |
| packages/gamut/src/Button/IconButton.tsx | Defaults IconButton tooltips to closeOnClick (with tipProps override). |
| packages/gamut/src/Button/tests/IconButton.test.tsx | Adds tests around click handling with closeOnClick. |
| .nx/version-plans/version-plan-1782928816938.md | Adds version plan for the patch release. |
Comment on lines
+1
to
+2
| import { useCallback, useState } from 'react'; | ||
|
|
Comment on lines
+16
to
+20
| /** | ||
| * If true, the tooltip closes immediately when the trigger is clicked or activated via keyboard. | ||
| * Pass `false` via `tipProps` on IconButton to opt out (e.g. copy → copied patterns). | ||
| */ | ||
| closeOnClick?: boolean; |
Comment on lines
+87
to
+93
| it('does not prevent button onClick when the floating tip click handler fires', async () => { | ||
| const { view } = renderFloatingView(); | ||
|
|
||
| await userEvent.click(view.getByRole('button', { name: label })); | ||
|
|
||
| expect(onClick).toHaveBeenCalledTimes(1); | ||
| }); |
| gamut: patch | ||
| --- | ||
|
|
||
| enable dismissable of ToolTip via onClick for interactive components like IconButton, MenuItem (icon-only), and FloatingToolTip + InlineToolTip |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Adds close-on-click behavior to
ToolTipandIconButtontooltips. By default, hovering over anIconButtonshows its tooltip — clicking the button now immediately hides it, requiring the cursor to leave and re-enter before it reappears. An opt-out (closeOnClick={false}) supports patterns like copy → copied where the tooltip should stay visible after the click.closeOnClickprop toToolTipPropsandTipPlacementComponentPropsInlineTipusing a CSSsuppressstate onToolTipWrapperthat overrides the base:hoverstyles by injection orderdata-tooltip-bodyattribute to target only the tooltip body element in the CSS selector, avoiding interference withTargetContainer:focus-withinto:has(:focus-visible)to prevent mouse-click focus from keeping the tooltip aliverelatedTarget instanceof Nodeguard ononMouseEnter/onMouseLeaveto skip synthetic events fired when tooltip visibility changesIconButtonnow passescloseOnClickby default; override viatipProps={{ closeOnClick: false }}FloatingTipto forwardcloseOnClickto the inner tipMenuItemtooltip element to align with blur-close behaviorIconButton.test.tsxcoveringcloseOnClickscenariosCloseOnClickstory to bothIconButton.stories.tsxandToolTip.stories.tsxwith floating/inline variants; updated corresponding MDX docsPR Checklist
Testing Instructions
Don't make me tap the sign.
IconButton— the tooltip should appear. Click the button; the tooltip should disappear immediately even though the cursor is still hovering. Move the cursor off and back on — the tooltip should reappear normally.closeOnClick={false}) stay open after clicking.StrokeButtonwrapped in<ToolTip>directly — two close on click, two stay open.IconButtonusing keyboard only — the tooltip should appear on:focus-visibleand should not be suppressed by a prior mouse click.PR Links and Envs