feat(bubble): add extra content support to Bubble component #930
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthrough本次更改为 Bubble 组件引入了新的 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Bubble
participant ExtraSlot
User->>Bubble: 传递 extra 属性（ReactNode 或函数）
Bubble->>Bubble: 判断是否存在 extra
alt extra 存在
Bubble->>ExtraSlot: 渲染 extra 内容
ExtraSlot-->>Bubble: 返回 extra 节点
end
Bubble->>User: 渲染完整 Bubble 组件（含 extra 区域）
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes（未发现超出关联 issue 889 需求范围的代码变更） Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
dosubot
bot
added
documentation
Bundle ReportChanges will increase total bundle size by 2.43kB (1.78%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antdx-array-pushAssets Changed:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (11)
components/bubble/demo/extra.md (1)
1-8: 中英文描述缺少完整句号，建议补全以保持文档风格一致当前中英文描述均无结尾标点，AntD 现有 demo 多数在句末使用句号或感叹号，建议保持一致。
-自定义扩展内容。 +自定义扩展内容。 ... -Customize extra content +Customize extra content.components/bubble/demo/extra.tsx (1)
1-18: demo 代码整体 OK，仅建议为列表子项显式添加key（可选）虽然此处 Flex 嵌套两个静态
Bubble不会触发 React 列表 diff 警告，但示例通常遵循最佳实践，添加key能避免用户拷贝后遗漏。- <Flex vertical gap="small"> - <Bubble content="Hello ice !" extra={<LoadingOutlined spin />} /> - <Bubble + <Flex vertical gap="small"> + <Bubble key="example-1" content="Hello ice !" extra={<LoadingOutlined spin />} /> + <Bubble + key="example-2" placement="end" @@ - /> + /> </Flex>components/bubble/__tests__/index.test.tsx (1)
74-85: 函数式extra断言类型同样应放宽为一致性，建议将
HTMLSpanElement改为HTMLElement，以免实际节点类型变化导致 TS 不匹配，但并非阻塞问题。- const element = container.querySelector<HTMLSpanElement>( + const element = container.querySelector<HTMLElement>( '.ant-bubble .ant-bubble-extra .test-extra', );components/bubble/Bubble.tsx (2)
21-24: 使用SlotRenderType可减少冗余类型定义
RenderSlotNode实际上只是把三个完全相同的字段联合在一起，等价于SlotRenderType<any> | undefined。直接复用公共类型可以少维护一层别名。-type RenderSlotNode = - | BubbleProps<any>['footer'] - | BubbleProps<any>['header'] - | BubbleProps<any>['extra']; +type RenderSlotNode = SlotRenderType<any> | undefined;这样后续如果再增加槽位，只需在
BubbleProps中声明即可，无需同步修改这里。
126-128:renderSlot的参数类型遗漏undefined当前的
RenderSlotNode已包含undefined，但renderSlot形参未显式接收可空类型，TypeScript 会推断为never→ 编译通过但 IDE 提示不友好。建议补充可空标注，或在函数体内提前返回。-const renderSlot = (node: RenderSlotNode) => +const renderSlot = (node: RenderSlotNode | undefined) => typeof node === 'function' ? node(typedContent, { key: _key }) : node;components/bubble/index.en-US.md (2)
24-24: 示例顺序建议保持语义一致Demo 列表一直以功能复杂度递增排序，
extra功能应放到 “Header and footer” 之后更自然，可考虑调整。
50-52: 参数顺序建议统一为 header → footer → extra文档与代码接口中均是
header、footer、extra的语义顺序，这里将footer放在第一列容易造成阅读困惑。components/bubble/index.zh-CN.md (2)
25-25: 示例排序保持一致性同英文文档，
extra示例建议放在“头和尾”之后，保持阅读节奏一致。
51-53: 属性顺序保持一致建议将表格列顺序调整为
header→footer→extra，与实现及英文文档保持一致。components/bubble/interface.ts (2)
27-30: 范型参数在联合类型左侧未被使用
SlotRenderType<ContentType>左侧的React.ReactNode无法携带范型信息，实际编译后ContentType只对函数分支生效。可以接受，但如需严格类型，可改为：type SlotRenderType<ContentType> = | React.ReactElement | string | number | boolean | null | undefined | ((content: ContentType, info: SlotInfoType) => React.ReactNode);或直接使用
ReactNode并在函数分支上做范型约束。
48-51: 接口字段顺序建议保持一致保持
header、footer、extra的先后顺序，便于查阅与文档对应。当前顺序与文档不一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/bubble/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (9)
components/bubble/Bubble.tsx(4 hunks)components/bubble/__tests__/index.test.tsx(1 hunks)components/bubble/demo/_semantic.tsx(4 hunks)components/bubble/demo/extra.md(1 hunks)components/bubble/demo/extra.tsx(1 hunks)components/bubble/index.en-US.md(3 hunks)components/bubble/index.zh-CN.md(3 hunks)components/bubble/interface.ts(2 hunks)components/bubble/style/index.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
components/bubble/Bubble.tsx (1)
components/bubble/interface.ts (1)
BubbleProps(31-51)
components/bubble/__tests__/index.test.tsx (1)
components/bubble/interface.ts (1)
BubbleContentType(21-21)
components/bubble/interface.ts (1)
components/_util/type.ts (1)
AnyObject(1-1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: test / react component workflow
- GitHub Check: build preview
- GitHub Check: size
🔇 Additional comments (4)
components/bubble/demo/_semantic.tsx (3)
14-22: 语义字段新增 “extra” 👍新增的中英文语义字段与
semantics数组保持一致，未发现问题。
38-39:semantics顺序保持一致性目前顺序为 avatar→header→content→footer→extra，与组件视觉自左至右/上至下顺序一致，可读性良好。无动作建议。
51-52: demo 中extra使用 LoadingOutlined 直观易懂实现方式清晰，无明显问题。
components/bubble/interface.ts (1)
19-20:SemanticType扩展后需同步文档锚点已经增加
'extra'，请确认样式文档及Design Token表格是否也同步包含该语义节点，避免漏掉主题变量。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature #930 +/- ##
===========================================
- Coverage 92.78% 92.53% -0.26%
===========================================
Files 69 69
Lines 1608 1554 -54
Branches 411 419 +8
===========================================
- Hits 1492 1438 -54
Misses 116 116 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@afc163 有空帮忙 CR 下，刚好我司有这个需求 |
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
close: #889
Summary by CodeRabbit
extra插槽属性，支持自定义扩展内容，可为 React 节点或渲染函数。extra属性的说明与示例。extra插槽的样式，支持在气泡两侧正确定位扩展内容。extra属性及类型说明，完善英文和中文文档。extra属性的单元测试用例，确保其渲染正确。