Add additional Tooltip support to ActionList and NavList - #8303
Conversation
🦋 Changeset detectedLatest commit: 33bb6a7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
🤖 Lint and formatting issues have been automatically fixed and committed to this PR. |
There was a problem hiding this comment.
Pull request overview
This PR expands existing Tooltip behavior in ActionList/NavList by allowing tooltips to be triggered via an explicit prop (instead of only via truncation), enabling tooltips to render inside list items without breaking list structure.
Changes:
- Added
tooltipTextsupport toNavList.Item, wiring it into the underlyingActionListitem/link implementations. - Introduced a private
_PrivateTooltipTextpathway inActionListto drive tooltip rendering for bothActionList.Item(button-semantics) andActionList.LinkItem. - Added unit tests covering tooltip rendering/association for
NavList.Itemin both link and expandable (subnav) variants.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/NavList/NavList.tsx | Adds tooltipText prop to NavList.Item and forwards it into underlying ActionList items. |
| packages/react/src/NavList/NavList.test.tsx | Adds tests ensuring tooltips render inside the correct list item and are associated via aria-describedby. |
| packages/react/src/ActionList/shared.ts | Adds private _PrivateTooltipText to ActionListItemProps. |
| packages/react/src/ActionList/LinkItem.tsx | Wraps link trigger in Tooltip when _PrivateTooltipText is provided. |
| packages/react/src/ActionList/Item.tsx | Allows private tooltip text to override truncation tooltip text for button-semantic items. |
| .changeset/warm-tools-smile.md | Declares a minor release for the new NavList tooltip prop. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 6/6 changed files
- Comments generated: 2
- Review effort level: Lite
|
Integration test results from github/github-ui PR:
All checks passed! |
Part of https://github.com/github/core-ux/issues/3279
Extends current
Tooltipsupport in ActionList to be prop-based. Previously, tooltips would only be rendered if content within the ActionList was truncated. This allows private usage of the tooltip via prop (_PrivateTooltipText)Why is this needed?
There isn't an accessible path to utilizing a custom tooltip with ActionList / NavList. This is because wrapping an ActionList item or NavList item in a tooltip will break the permitted parent/child structure of a list, as the tooltip
<span>is rendered directly within the list (<ul>) as a direct child.Since we already support tooltips in some capacity (truncated content), this makes internal usage with tooltips easier. We should consider if we want to keep this prop "private", or if we wanted to allow it publicly. I implemented it as private as tooltips should generally be used sparingly.
Changelog
New
Rollout strategy
Testing & Reviewing