feat(actions): support customizing the tooltip of each action item - #2004
Open
Y-MuYi wants to merge 2 commits into
Open
feat(actions): support customizing the tooltip of each action item#2004Y-MuYi wants to merge 2 commits into
Y-MuYi wants to merge 2 commits into
Conversation
Add `tooltip?: string | TooltipProps | false` to each action item so the
Tooltip can be customized or disabled (`false` skips rendering the Tooltip
entirely). Defaults to the existing `title={label}` behavior. Applied to both
the `items` render path (Item.tsx) and the standalone `Actions.Item` component
(ActionsItem.tsx).
Closes ant-design#1952
Contributor
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
Contributor
📝 WalkthroughWalkthroughActions 的每个操作项新增 ChangesActions Tooltip 功能
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant 操作项
participant Tooltip配置解析
participant Tooltip
操作项->>Tooltip配置解析: 传入 tooltip
Tooltip配置解析->>Tooltip配置解析: 默认使用 label
Tooltip配置解析->>Tooltip: 非移动端且未禁用时传入配置
Tooltip-->>操作项: 显示提示内容
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Warning |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/x/components/actions/__tests__/action-item.test.tsx`:
- Around line 33-37: Update the tests at
packages/x/components/actions/__tests__/action-item.test.tsx:33-37 and
packages/x/components/actions/__tests__/index.test.tsx:111-116 to trigger each
rendered icon and assert that no Tooltip overlay containing the label appears
when tooltip={false}, using fake timers or the existing Tooltip mock as
appropriate.
- Around line 17-30: Update the tooltip-opening calls in the ActionsItem tests
to pass the element returned by screen.getByText('icon') directly, rather than
its parentElement. Apply this to all three positive tooltip tests, including the
additional case around the third occurrence, so hover events reach the Tooltip
trigger node.
In `@packages/x/components/actions/index.en-US.md`:
- Line 49: Update the Version column for the tooltip property in ItemType and
Actions.Item across packages/x/components/actions/index.en-US.md lines 49 and
83, and packages/x/components/actions/index.zh-CN.md lines 50 and 84, replacing
“-” with the actual version in which this public API was first released. Keep
all other documentation unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 36ff8c15-9fd2-4d40-b6c5-c006f9679cfc
📒 Files selected for processing (8)
packages/x/components/actions/ActionsItem.tsxpackages/x/components/actions/Item.tsxpackages/x/components/actions/__tests__/action-item.test.tsxpackages/x/components/actions/__tests__/index.test.tsxpackages/x/components/actions/demo/custom-tooltip.tsxpackages/x/components/actions/index.en-US.mdpackages/x/components/actions/index.zh-CN.mdpackages/x/components/actions/interface.ts
Comment on lines
+17
to
+30
| it('renders tooltip with label by default', async () => { | ||
| render(<ActionsItem defaultIcon="icon" label="Default Label" />); | ||
| openTooltip(screen.getByText('icon').parentElement!); | ||
| await waitFor(() => { | ||
| expect(screen.getByText('Default Label')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| it('uses a custom string as the tooltip title', async () => { | ||
| render(<ActionsItem defaultIcon="icon" label="Label" tooltip="Custom Tooltip" />); | ||
| openTooltip(screen.getByText('icon').parentElement!); | ||
| await waitFor(() => { | ||
| expect(screen.getByText('Custom Tooltip')).toBeInTheDocument(); | ||
| }); |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
向 Tooltip 触发节点发送 hover 事件。
screen.getByText('icon') 已经是 <Tooltip> 的子节点。parentElement 是测试容器，不会触发 Tooltip 的事件处理器。因此这些正向测试会在可执行 Jest 后失败，或无法验证 Tooltip 行为。
建议修改
- openTooltip(screen.getByText('icon').parentElement!);
+ openTooltip(screen.getByText('icon'));对第 19、27、41 行分别应用此修改。
Also applies to: 39-45
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/x/components/actions/__tests__/action-item.test.tsx` around lines 17
- 30, Update the tooltip-opening calls in the ActionsItem tests to pass the
element returned by screen.getByText('icon') directly, rather than its
parentElement. Apply this to all three positive tooltip tests, including the
additional case around the third occurrence, so hover events reach the Tooltip
trigger node.
Comment on lines
+33
to
+37
| it('renders no tooltip when tooltip is false', () => { | ||
| const { container } = render(<ActionsItem defaultIcon="icon" label="Label" tooltip={false} />); | ||
| // icon renders without a Tooltip wrapper | ||
| expect(container.textContent).toContain('icon'); | ||
| }); |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
验证 tooltip={false} 实际禁用 Tooltip。
这两项测试只验证图标仍然存在。即使组件仍渲染 <Tooltip>，该断言也会通过。触发图标后，使用 fake timers 或 Tooltip mock 断言不会出现 label 对应的浮层。
packages/x/components/actions/__tests__/action-item.test.tsx#L33-L37: 触发 standaloneActionsItem，并断言 Tooltip 浮层不出现。packages/x/components/actions/__tests__/index.test.tsx#L111-L116: 触发items渲染路径中的图标，并断言 Tooltip 浮层不出现。
📍 Affects 2 files
packages/x/components/actions/__tests__/action-item.test.tsx#L33-L37(this comment)packages/x/components/actions/__tests__/index.test.tsx#L111-L116
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/x/components/actions/__tests__/action-item.test.tsx` around lines 33
- 37, Update the tests at
packages/x/components/actions/__tests__/action-item.test.tsx:33-37 and
packages/x/components/actions/__tests__/index.test.tsx:111-116 to trigger each
rendered icon and assert that no Tooltip overlay containing the label appears
when tooltip={false}, using fake timers or the existing Tooltip mock as
appropriate.
| | --- | --- | --- | --- | --- | | ||
| | key | Unique identifier for custom action | string | - | - | | ||
| | label | Display label for custom action | string | - | - | | ||
| | tooltip | Tooltip of the action item, set to `false` to disable the Tooltip | string \| TooltipProps \| false | label | - | |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: 查找包版本信息，确定新特性应标注的版本号。
fd package.json --exec grep -n '"version"' {} \; -path '*/x/*'Repository: ant-design/x
Length of output: 342
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== candidate package manifests =="
find . -path '*/x/*' -maxdepth 4 -name package.json -print | sort
echo
echo "== version declarations in x manifests =="
find . -path '*/x/*' -maxdepth 4 -name package.json -print | sort | while read -r f; do
echo "--- ${f#$PWD/}"
node -e 'const fs=require("fs"); const p=process.argv[1]; const j=JSON.parse(fs.readFileSync(p,"utf8")); if(j.packages && Object.keys(j.packages).length) { fs.writeFileSync(process.stdout.fd+1, JSON.stringify(j.packages,null,2)) } else { delete j.dependencies; delete j.devDependencies; delete j.scripts; console.log(JSON.stringify({path:p, version:j.version},null,2))}' "$f"
done
echo
echo "== actions docs tooltip entries =="
for f in packages/x/components/actions/index.en-US.md packages/x/components/actions/index.zh-CN.md; do
echo "--- $f"
grep -nE '^(#\s*|\|[^|]*tooltip[^|]*\|)' "$f" || true
done
echo
echo "== nearby doc Version entries for comparison =="
sed -n '35,90p' packages/x/components/actions/index.en-US.md
sed -n '35,90p' packages/x/components/actions/index.zh-CN.md
echo
echo "== x package files =="
git ls-files | rg '(^|/)x/(packages/|component|package\.json$|README)' | head -80Repository: ant-design/x
Length of output: 10898
为新增的 tooltip 属性填写正确的版本号。
tooltip 是新增公开 API，当前英文版和中文版的 ItemType.tooltip / Actions.Item.tooltip 文档都未填写 Version。请将两处英文文档与对应中文文档中该属性的 Version 列从 - 改为该属性首次发布对应的实际版本号。
📍 Affects 2 files
packages/x/components/actions/index.en-US.md#L49-L49(this comment)packages/x/components/actions/index.en-US.md#L83-L83packages/x/components/actions/index.zh-CN.md#L50-L50packages/x/components/actions/index.zh-CN.md#L84-L84
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/x/components/actions/index.en-US.md` at line 49, Update the Version
column for the tooltip property in ItemType and Actions.Item across
packages/x/components/actions/index.en-US.md lines 49 and 83, and
packages/x/components/actions/index.zh-CN.md lines 50 and 84, replacing “-” with
the actual version in which this public API was first released. Keep all other
documentation unchanged.
Author
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
1 participant
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.
Closes #1952
背景
Actions操作项的 Tooltip 当前固定为title={label}，无法自定义文案，也无法关闭（例如在z-index很高的容器里 tooltip 可能被遮住、或场景上根本不需要提示）。改动
为每个操作项新增 `tooltip` 配置：
```ts
tooltip?: string | TooltipProps | false
```
验证
Summary by CodeRabbit
新功能
false禁用提示。文档