feat: improve Semantic for collapse #358
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
概述演练这个拉取请求涉及对折叠组件的类名、接口和测试进行了语义化和灵活性增强。主要变更包括在 变更
诗歌
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 (
|
![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
🧹 Nitpick comments (1)
src/PanelContent.tsx (1)
49-49: 语义化命名改动。将原本的
${prefixCls}-content-box更新为${prefixCls}-body，并附加customizeClassNames?.body，符合更语义化的 class 名约定，让整体代码风格更加统一。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (5)
assets/index.less(1 hunks)src/Panel.tsx(3 hunks)src/PanelContent.tsx(1 hunks)src/interface.ts(1 hunks)tests/index.spec.tsx(7 hunks)
🔇 Additional comments (18)
src/PanelContent.tsx (2)
38-38: 更灵活的内容区自定义处理方式。此处将
customizeClassNames?.content与默认的${prefixCls}-content一并使用，可让外部使用者灵活地指定自定义样式类。此实现方式可读性较好，并与其他语义化配置保持一致。
45-45: 统一合并样式，保持一致性。通过
style={{ ...style, ...styles?.content }}将传入的 style 与内容区的样式合并，能确保自定义样式与默认样式不冲突，建议保持此写法并在文档中提示。src/interface.ts (3)
42-42: 新增语义名类型，提升可扩展性。新增
SemanticName类型可统一管理组件中各语义部分的样式以及对应的 className，有助于后续扩展。
50-50: 使用Partial<Record<SemanticName, string>>为 classNames 添加更多灵活性。此方式能让外部根据语义键自由传入自定义类名，结构更清晰，减少潜在的字段冲突。
52-52: 使用Partial<Record<SemanticName, React.CSSProperties>>管理样式。此写法保证了对各语义部分样式的可选配置，并且避免一次性在接口里硬编码过多字段，扩展性更好。
src/Panel.tsx (4)
55-56: 可选图标样式提升灵活性。使用
customizeClassNames?.icon与styles?.icon来允许对图标进行自定义，增强定制能力。此处写法清晰易读。
78-78: 新增customizeClassNames?.header的可选链优化。在 header 区增加了自定义类名，且对空值有良好保护，可有效避免运行时错误。
84-84: 安全获取 Header 样式。通过
style={styles?.header}在无styles传入的情况下不会报错，逻辑健壮性得到提升。
94-95: 标题区自定义类名与样式处理。将默认 class 跟
customizeClassNames?.title结合，并使用styles?.title，可帮助使用者细化到标题级别进行样式定制，设计合理。tests/index.spec.tsx (8)
89-89: 测试用例内容区变更检查。断言内容中出现
rc-collapse-body，与新语义保持一致，可正确验证更新后的类名。测试用例范围合适。
531-531: 标题选择器校验。这里增加了对
.rc-collapse-title的查询，以便确认标题 DOM 是否生成，与新语义化后的标题类名对应。测试思路清晰。
543-543: 额外的标题类名测试。再次验证
.rc-collapse-title是否存在，可确保折叠面板标题的渲染正确。
546-546: 只点击标题即可触发事件。通过点击
.rc-collapse-title来测试可用性，满足可点击区域细分需求，此处逻辑合理。
572-572: 禁用面板验证。配合
.rc-collapse-item-disabled断言，可确认禁用状态下无法被打开，测试逻辑无误。
586-586: 保证.rc-collapse-title存在的重复检测。测试若能正常通过，进一步说明标题区 DOM 的渲染可靠。
616-616: 图标触发与标题触发分离测试。点击标题不再触发收展操作，这与
"collapsible": "icon"的逻辑吻合。
864-910: 批量测试自定义样式与类名。此测试集中检查了 header、body、content、title、icon 各部分的自定义类名与内联样式，覆盖度全面，有助于保证组件自定义扩展的健壮性。
assets/index.less (1)
64-66: 命名更改提高了语义化！将
header-text更改为title使类名更具语义化，这是一个很好的改进。保持了指针样式，确保了交互行为的一致性。让我们验证一下整个代码库中类名的一致性：
✅ Verification successful
类名更改已完全且一致地实施！
经过仔细验证，确认：
- 旧的
header-text类名已完全移除- 新的
title类名在组件代码、样式、测试和类型定义中都得到了一致的应用- 变更符合组件的语义化设计
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：检查整个代码库中是否还存在旧的类名引用 # 搜索可能存在的旧类名引用 rg -l "header-text" # 检查新类名的使用情况 rg -l "title"Length of output: 304
Script:
#!/bin/bash # 搜索更具体的类名模式 rg -l "header-text|headerText" --type=tsx --type=less --type=ts # 检查完整的类名引用 rg -A 2 "\-title\b" --type=tsx --type=less --type=ts # 检查 React 组件中的相关属性 ast-grep --pattern 'interface $_ { $$$ title $$$ }'Length of output: 236
Script:
#!/bin/bash # 使用正确的文件扩展名搜索 rg -l "header-text|headerText" -g "*.{tsx,ts,less}" # 检查标题相关的类名引用 rg -A 2 "title" -g "*.{tsx,ts,less}" # 检查组件接口定义 rg -A 5 "interface.*Props" -g "*.{tsx,ts}"Length of output: 6387
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #358 +/- ##
=======================================
Coverage 99.12% 99.12%
=======================================
Files 5 5
Lines 114 114
Branches 43 43
=======================================
Hits 113 113
Misses 1 1 ☔ View full report in Codecov by Sentry. |
src/PanelContent.tsx
Outdated
| @@ -35,17 +35,18 @@ const PanelContent = React.forwardRef< | |||
| ref={ref} | |||
| className={classnames( | |||
| `${prefixCls}-content`, | |||
| customizeClassNames?.content, | |||
There was a problem hiding this comment.
content 总是在 body 下面，这里可以不要加 content 的语义化。
There was a problem hiding this comment.
那我的想法是，修正他的 dom 结构，这边变成 body，下面 content-box 变成 content， content-box的语义太差了。而且其他组件基本上都是body content 对应的。 就在大版本中纠正它吧。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/index.spec.tsx (1)
890-905: 测试断言完整且准确！测试验证了：
- 自定义类名正确应用
- 自定义样式正确渲染
- 所有语义化部分（header、body、title、icon）都得到验证
建议添加边界情况的测试：
- 样式覆盖的优先级
- 部分属性缺失的情况
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/PanelContent.tsx(1 hunks)src/interface.ts(1 hunks)tests/index.spec.tsx(7 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/PanelContent.tsx
🔇 Additional comments (3)
src/interface.ts (2)
42-42: 语义化命名类型定义清晰明确！类型定义涵盖了组件的所有关键部分，使代码更具可维护性。
50-52: 类型安全性得到提升！使用
Partial<Record<SemanticName, string>>和Partial<Record<SemanticName, React.CSSProperties>>确保了类型安全性，同时保持了灵活性。tests/index.spec.tsx (1)
864-875: 测试用例结构清晰，覆盖全面！自定义样式和类名的测试用例设计合理，包含了所有语义化部分。
Summary by CodeRabbit
样式更新
接口改进
SemanticName测试调整