feat: arrow config support style #573
Conversation
Walkthrough为 Popup 的 Arrow 增加可选的内联样式支持：在 ArrowTypeOuter 接口中新增 style 属性，并在 Arrow 组件中将该 style 与计算得到的 alignStyle 合并应用到根 div。新增测试覆盖无/有 autoArrow 时样式合并与覆盖行为。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant T as Trigger
participant A as Arrow(组件)
participant S as Style(alignStyle + style)
participant D as DOM(.rc-trigger-popup-arrow)
T->>A: 渲染 Arrow，传入 arrow 对象（含 style?）
A->>A: 计算 alignStyle（基于对齐/autoArrow）
A->>S: 合并 { ...alignStyle, ...style }
A->>D: 以合并后的样式渲染根 div
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @zombieJ, 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!
此拉取请求旨在增强组件的灵活性，通过引入对箭头样式的直接配置支持，允许开发者更精细地控制箭头的外观。这一改动使得箭头可以根据需求应用自定义的 CSS 样式，并且这些样式会与组件内部的对齐样式无缝融合，从而提升了组件的可定制性和视觉表现力。
Highlights
- 箭头样式配置: 为
Arrow组件引入了style属性，允许通过arrowprop 直接配置箭头的 CSS 样式。 - 样式合并逻辑: 确保自定义的
style属性能够与现有的alignStyle正确合并，从而在保持对齐逻辑的同时，提供灵活的样式定制能力。 - 类型定义更新: 在
ArrowTypeOuter接口中添加了style?: React.CSSProperties;类型定义，以支持新的样式属性。 - 新增测试用例: 增加了两个测试用例，分别验证了箭头样式能够独立应用以及与对齐样式正确合并的功能。
Using Gemini Code Assist
The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in pull request comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #573 +/- ##
=======================================
Coverage 95.72% 95.72%
=======================================
Files 17 17
Lines 936 936
Branches 274 274
=======================================
Hits 896 896
Misses 40 40 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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 (3)
src/interface.ts (1)
91-95: 为style补充 JSDoc，并在文档/变更记录中声明该 API建议明确说明合并与优先级，避免误用覆盖定位属性；同时这是对外 API 增补，建议在 CHANGELOG/README 标注为 minor 版本变更。
export interface ArrowTypeOuter { - style?: React.CSSProperties; + /** Inline 样式，最终会与对齐样式合并（用户样式后置覆盖）。 + * 建议仅设置展示类属性（如 color/background），避免覆盖定位相关属性（position/left/top/right/bottom）。 */ + style?: React.CSSProperties; className?: string; content?: React.ReactNode; }src/Popup/Arrow.tsx (1)
61-62: 防止外部样式覆盖position，保证箭头绝对定位当前合并顺序允许
style.position改写alignStyle.position，可能导致错位。建议在合并末尾强制position: 'absolute'。- style={{ ...alignStyle, ...style }} + // 防止外部 style 覆盖定位方式，保持箭头正确对齐 + style={{ ...alignStyle, ...style, position: 'absolute' }}tests/arrow.test.jsx (1)
221-250: 补充断言：确保定位不被外部样式改写为防回归，建议额外断言
position: absolute存在（与实现侧的“强制 absolute”建议一致）。const arrowDom = document.querySelector('.rc-trigger-popup-arrow'); // Should have both align style (left: 0) and custom style expect(arrowDom).toHaveStyle({ left: 0, color: 'red', backgroundColor: 'blue', }); + expect(arrowDom).toHaveStyle({ position: 'absolute' });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/Popup/Arrow.tsx(2 hunks)src/interface.ts(1 hunks)tests/arrow.test.jsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
tests/arrow.test.jsx (1)
tests/util.tsx (1)
awaitFakeTimer(97-104)
🔇 Additional comments (2)
src/Popup/Arrow.tsx (1)
15-16: 解构新增style字段，合并思路清晰，LGTMtests/arrow.test.jsx (1)
192-219: 覆盖“非 autoArrow”场景的样式注入，LGTM
上游语义化结构支持 arrow 样式配置，底层支持一下
Summary by CodeRabbit