feat(tooltips): add toggletip support#2136
Open
jgorfine-zendesk wants to merge 4 commits into
Open
Conversation
Add an isToggletip prop that switches Tooltip to click-to-toggle behavior backed by the container's toggletip API. The role="status" live region is applied to the always-mounted wrapper while the visible bubble is gated on isAnnouncementReady, preventing an empty-bubble flash on open. Add toggletip control to the Tooltip story and Toggletip, Toggletip-with-anchor, and info-toggletip patterns. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Temporarily depend on the @zendeskgarden/container-tooltip 2.2.3-alpha.1 tarball so CI can install it and build the Storybook preview for manual testing of the toggletip feature. TEMPORARY: once the react-containers PR merges and the container is published, remove the tarball and depend on the released @zendeskgarden/container-tooltip instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop prose comments that don't match the codebase's sparse commenting convention. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Coverage is 95.863% — jgorfine/toggletip into v9. No base build found for |
Cover the integration glue that lives in Tooltip: role="status" live region, aria-expanded/aria-controls passthrough on the trigger, the gated bubble that mounts only when open, and type/size styling in toggletip mode. Behavioral coverage (click, Escape, outside-click, re-announcement) stays in the container spec to avoid duplication. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
2 participants
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.
Description
Adds toggletip support to the
Tooltipcomponent via a newisToggletipprop, backed by the toggletip API in@zendeskgarden/container-tooltip. When enabled, the tooltip switches from hover/focus behavior to click-to-toggle: it opens and closes on click, dismisses on outside click orEscape, and announces its content through arole="status"live region. The trigger must be a<button>element.Detail
isToggletipis threaded throughTooltipintouseTooltip. The render tree stays unified — the toggletip path applies the live-region props to the always-mounted wrapper and gates the visible bubble onisAnnouncementReady, while the tooltip path keeps its hover handlers on the bubble.Tooltipstory exposesisToggletipas a control (defaultfalse).[patterns]demos: Toggletip, Toggletip with anchor (interactive content), and Info toggletip (icon-onlyIconButtontrigger with an explicitaria-label).Checklist
npm start)?bedrock)