refactor: Bubble style #314
Conversation
📝 Walkthrough📝 WalkthroughWalkthrough此次变更主要集中在 Changes
Assessment against linked issues
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
|
Bundle ReportBundle size has no change ✅ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
components/bubble/style/index.ts (1)
Line range hint
146-146: 建议添加组件 Token 相关文档虽然目前
prepareComponentToken返回空对象是合理的，但建议添加相关注释说明这个函数的用途，以及未来可能会支持的自定义 token。这样可以帮助其他开发者更好地理解和扩展组件样式系统。建议添加如下注释：
+// 为气泡组件预设默认 token。 +// 当前返回空对象，未来可能会支持更多自定义样式 token。 export const prepareComponentToken: GetDefaultToken<'Bubble'> = () => ({});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
components/bubble/style/index.ts(1 hunks)
🔇 Additional comments (2)
components/bubble/style/index.ts (2)
97-97: 添加 maxWidth 限制是个合适的解决方案！
通过设置 maxWidth: '100%' 可以有效防止内容溢出父容器，这是一个简单但有效的修复方案。
97-97: 建议验证样式变更的影响范围
这次更改虽然解决了宽度溢出问题，但建议验证是否会影响现有的使用场景。
Also applies to: 146-146
✅ Verification successful
样式变更的影响范围可控
根据代码分析，这个宽度限制的修改是安全的：
- 该修改仅影响气泡组件的基础样式，不会影响其他组件
- 从示例代码和测试用例来看，气泡组件已经考虑了多种布局场景
maxWidth: '100%'是一个标准的响应式约束，可以防止内容溢出
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索项目中使用到 Bubble 组件的地方
rg -l "(?:import|from).*['\"].*bubble" --type ts --type tsx
# 检查是否有自定义样式覆盖
rg "ant-bubble-content-wrapper" --type css --type less --type scss
Length of output: 187
Script:
#!/bin/bash
# 搜索使用 Bubble 组件的文件
rg -l "(?:import|from).*['\"].*[Bb]ubble"
# 搜索样式相关的文件
fd -e css -e less -e scss | xargs rg "bubble"
# 检查组件的使用方式
rg -A 3 "<.*[Bb]ubble"
Length of output: 66877
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #314 +/- ##
=======================================
Coverage 91.36% 91.36%
=======================================
Files 66 66
Lines 1447 1447
Branches 368 383 +15
=======================================
Hits 1322 1322
Misses 125 125 ☔ View full report in Codecov by Sentry. |
size-limit report 📦
|
Deploying ant-design-x with
|
| Latest commit: |
4e767d7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://549b9dca.ant-design-x.pages.dev |
| Branch Preview URL: | https://fix-bubble-style.ant-design-x.pages.dev |
- docs: add debug demo
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
components/bubble/demo/debug.tsx (3)
37-49: 建议：优化自定义属性的类型定义
customizationProps的类型定义可以更严格：- const customizationProps: BubbleProps = { + const customizationProps: Required<Pick<BubbleProps, 'header' | 'footer' | 'avatar' | 'classNames'>> = {这样可以：
- 明确表示这些属性是必需的
- 提供更好的类型检查
- 减少可能的运行时错误
51-76: 建议：将气泡变体配置抽离为常量
bubbleDict包含了重要的测试用例，建议：
- 将其抽离为单独的常量文件
- 添加更多边界情况的测试用例
- 为每个测试用例添加注释说明其目的
+ // 建议创建新文件：bubble-test-cases.ts + export const BUBBLE_TEST_CASES = { + string: { + content: 'string bubble', + variant: 'filled', + shape: 'corner', + }, + // ... 其他测试用例 + } as const;
97-118: 建议：增强列表测试用例当前的
Bubble.List测试用例可以更全面：
- 测试
autoScroll属性的行为- 添加更多的交互场景
- 验证长列表的性能表现
<Bubble.List + autoScroll={true} items={[ // 现有项目... + // 建议添加更多测试项 + { + ...bubbleDict.string, + content: '测试超长文本自动滚动...', + key: 'scroll-test' + }, ]} + // 建议添加性能测试用例 />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
components/bubble/demo/debug.md(1 hunks)components/bubble/demo/debug.tsx(1 hunks)components/bubble/index.en-US.md(1 hunks)components/bubble/index.zh-CN.md(1 hunks)components/bubble/style/index.ts(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- components/bubble/demo/debug.md
🚧 Files skipped from review as they are similar to previous changes (1)
- components/bubble/style/index.ts
🔇 Additional comments (3)
components/bubble/index.zh-CN.md (1)
22-22: 调试示例添加正确！
调试示例的位置放在所有示例的最前面是合适的，这样可以方便开发者快速找到并验证气泡组件的行为。
components/bubble/index.en-US.md (1)
21-21: 文档同步更新完成！
中英文文档保持了良好的一致性，调试示例在两个文档中的位置相同。
components/bubble/demo/debug.tsx (1)
28-31: 注意：固定宽度可能导致溢出问题
在 fixedWidthBlock 样式中使用固定宽度（1000px）可能会在某些视口大小下导致溢出。建议：
- 考虑使用相对单位（如
%或vw） - 添加
max-width属性 - 确保内容可以正确换行
让我们验证一下这个宽度设置在不同场景下的表现：
|
@tabzzz1 看下是否也可以解决你的问题 |
|
@ant-design/ant-design-x 需要大家帮 CR 下～感谢 |
可以的！效果非常好:) |
变更点
.ant-bubble-content-wrapper以及.ant-bubble-content的最大宽度限制，并保证其不出现溢出现象，稳定给子节点提供宽度属性用于继承。placement: 'end'时的样式问题修复
fix: #318
其他背景
目前 Bubble 组件的 dom 结构会根据 props 动态调整, 这会导致开发者不太容易进行样式复写「比如面对内容样式溢出的场景」。
Summary by CodeRabbit
Summary by CodeRabbit