feat(CheckableTagGroup): Support better customization with semantic classNames/styles as function#55796
Conversation
|
|
|
|
Visual Regression Build for PR #55796 Failed ❌Potential causes:
|
Summary of ChangesHello @meet-student, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the customization capabilities of the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughSummary by CodeRabbit发布说明
✏️ Tip: You can customize this high-level summary in your review settings. 总体概述CheckableTagGroup 组件进行了重构：替换为 Walkthrough该变更重构了 CheckableTagGroup 的语义样式/类名类型与合并流程，引入 useMergeSemantic，更新相关测试、文档与示例以支持对象与函数形式的 classNames/styles。 Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer Code (props)
participant Ctx as Component Config Context
participant Merge as useMergeSemantic
participant Comp as CheckableTagGroup (render)
Dev->>Comp: render with props (classNames/styles, ...)
Ctx->>Merge: provide contextClassNames/contextStyles + contextClassName/contextStyle
Dev->>Merge: provide local classNames/styles
Merge-->>Comp: mergedClassNames & mergedStyles
Note right of Comp#ffffff: Comp applies merged\nclassNames/styles to root and items
Comp->>Comp: render children with preserved item styles
Estimated code review effort🎯 3 (中等) | ⏱️ ~30 分钟 需要重点审查：
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a valuable feature to CheckableTagGroup, allowing classNames and styles to be passed as functions for more dynamic and powerful customization. The implementation is solid, correctly leveraging the useMergeSemantic hook and updating types, tests, and documentation accordingly. The changes align CheckableTagGroup with the customization patterns of other components in the library. I have one suggestion to improve the robustness of the new tests.
More templates
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #55796 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 803 803
Lines 14805 14804 -1
Branches 3915 3913 -2
=========================================
- Hits 14805 14804 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
meet-student
force-pushed
the
tag-group
branch
from
00e189b to
fa4d864
Compare
Bundle ReportChanges will decrease total bundle size by 1.57kB (-0.04%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
…lassNames/styles as function
meet-student
force-pushed
the
tag-group
branch
from
fa4d864 to
842c499
Compare
![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
♻️ Duplicate comments (1)
components/tag/__tests__/semantic.test.tsx (1)
158-173: 建议对根元素也使用toHaveStyle匹配器。根元素样式断言仍使用
getAttribute('style')和toContain，这与之前的审查建议相同。为保持一致性和健壮性，建议对根元素也使用toHaveStyle匹配器。- expect(groupElement).toHaveClass('multiple-group'); - expect(groupElement).toHaveAttribute('style'); - const rootStyle = groupElement?.getAttribute('style'); - expect(rootStyle).toContain('padding: 8px'); - expect(rootStyle).toContain('background-color: transparent'); + expect(groupElement).toHaveClass('multiple-group'); + expect(groupElement).toHaveStyle({ + padding: '8px', + backgroundColor: 'transparent', + });
🧹 Nitpick comments (2)
components/tag/__tests__/semantic.test.tsx (2)
40-55: 建议使用toHaveStyle匹配器。当前使用
getAttribute('style')和toContain检查样式较为脆弱，容易受样式顺序或空格变化影响。建议使用@testing-library/jest-dom的toHaveStyle匹配器，使测试更清晰且更健壮。- expect(tagElement).toHaveAttribute('style'); - const rootStyle = tagElement?.getAttribute('style'); - expect(rootStyle).toContain('background-color: lightblue'); - expect(rootStyle).toContain('border: 2px solid blue'); + expect(tagElement).toHaveStyle({ + backgroundColor: 'lightblue', + border: '2px solid blue', + }); - expect(iconElement).toHaveAttribute('style'); - const iconStyle = iconElement?.getAttribute('style'); - expect(iconStyle).toContain('color: red'); - expect(iconStyle).toContain('font-size: 16px'); + expect(iconElement).toHaveStyle({ + color: 'red', + fontSize: '16px', + }); - expect(contentElement).toHaveClass('custom-tag-content'); - expect(contentElement).toHaveAttribute('style'); - const contentStyle = contentElement?.getAttribute('style'); - expect(contentStyle).toContain('background-color: yellow'); - expect(contentStyle).toContain('color: green'); + expect(contentElement).toHaveClass('custom-tag-content'); + expect(contentElement).toHaveStyle({ + backgroundColor: 'yellow', + color: 'green', + });
93-107: 同样建议使用toHaveStyle匹配器。与前一个测试相同，建议改用
toHaveStyle匹配器以提高测试的健壮性和可读性。- expect(tagElement).toHaveAttribute('style'); - const rootStyle = tagElement?.getAttribute('style'); - expect(rootStyle).toContain('background-color: lightblue'); - expect(rootStyle).toContain('border-radius: 8px'); + expect(tagElement).toHaveStyle({ + backgroundColor: 'lightblue', + borderRadius: '8px', + }); - expect(iconElement).toHaveAttribute('style'); - const iconStyle = iconElement?.getAttribute('style'); - expect(iconStyle).toContain('color: blue'); - expect(iconStyle).toContain('font-size: 18px'); + expect(iconElement).toHaveStyle({ + color: 'blue', + fontSize: '18px', + }); - expect(contentElement).toHaveClass('content-enabled'); - expect(contentElement).toHaveAttribute('style'); - const contentStyle = contentElement?.getAttribute('style'); - expect(contentStyle).toContain('font-weight: bold'); - expect(contentStyle).toContain('color: darkblue'); + expect(contentElement).toHaveClass('content-enabled'); + expect(contentElement).toHaveStyle({ + fontWeight: 'bold', + color: 'darkblue', + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/tag/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/tag/__tests__/__snapshots__/demo.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (5)
components/tag/CheckableTagGroup.tsx(6 hunks)components/tag/__tests__/semantic.test.tsx(2 hunks)components/tag/demo/style-class.tsx(2 hunks)components/tag/index.en-US.md(3 hunks)components/tag/index.zh-CN.md(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- components/tag/index.en-US.md
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/tag/CheckableTagGroup.tsx
🧬 Code graph analysis (2)
components/tag/CheckableTagGroup.tsx (2)
components/_util/hooks/useMergeSemantic.ts (3)
SemanticClassNamesType(16-20)SemanticStylesType(22-26)useMergeSemantic(118-152)components/config-provider/context.ts (1)
useComponentConfig(561-575)
components/tag/demo/style-class.tsx (3)
components/tag/CheckableTagGroup.tsx (1)
CheckableTagGroupProps(59-63)components/tag/index.tsx (1)
CheckableTagGroupProps(23-23)components/index.ts (1)
GetProps(5-5)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)
- GitHub Check: build
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-node
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: build
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: lint
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: build preview
- GitHub Check: size
🔇 Additional comments (13)
components/tag/CheckableTagGroup.tsx (5)
7-8: 导入正确。新增的语义类型和 hook 导入正确，与工具库匹配。
35-63: 类型重构良好。将基础 props 抽取为
CheckableTagGroupBaseProps，并导出语义类型CheckableTagGroupClassNamesType和CheckableTagGroupStylesType，支持对象和函数形式的 classNames/styles 定制。类型定义正确且可组合。
93-100: 正确提取上下文配置。从
useComponentConfig提取contextClassName、contextStyle、contextClassNames和contextStyles，使组件能够合并全局配置和局部 props。
108-115: 语义合并实现正确。使用
useMergeSemantic正确合并上下文和局部的 classNames/styles，优先级顺序合理（上下文在前，局部在后）。
168-185: 渲染逻辑正确应用语义样式。正确将
contextClassName/contextStyle和合并后的语义 classNames/styles 应用到根元素，优先级顺序合理。components/tag/index.zh-CN.md (3)
42-42: Tag API 文档更新准确。classNames 和 styles 的描述正确说明支持对象或函数形式，类型签名完整。
Also applies to: 49-49
65-65: CheckableTagGroup API 文档更新完整。classNames/styles 描述正确引用 semantic-group 锚点，类型签名准确展示对象和函数两种形式。
Also applies to: 70-71
80-80: 语义分组锚点添加正确。添加
{#semantic-group}锚点使 API 表格能够正确链接到 CheckableTagGroup 的语义 DOM 结构说明。components/tag/demo/style-class.tsx (4)
3-7: 导入和类型定义正确。正确导入
Space用于布局，使用GetProps提取CheckableTagGroupProps类型用于样式定义。
44-56: 对象形式样式定义正确。
groupStyles定义了 root 和 item 的静态样式，类型正确且符合语义结构。
58-77: 函数形式样式定义正确。
groupStylesFn根据multipleprop 动态返回样式，演示了函数形式的灵活性。使用satisfies确保类型安全。
83-110: 演示 UI 更新合理。新增两个
Tag.CheckableTagGroup实例分别演示对象和函数形式的 styles，布局清晰，功能展示完整。components/tag/__tests__/semantic.test.tsx (1)
109-133: CheckableTagGroup 对象测试正确。正确使用
toHaveStyle匹配器验证样式，测试结构清晰且健壮。
3 participants
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log