fix(sender): keep consistent gap for sender action tooltips#327
fix(sender): keep consistent gap for sender action tooltips#327SonyLeo wants to merge 1 commit intoopentiny:developfrom
Conversation
WalkthroughThis PR refactors tooltip styling in sender components by extracting hardcoded styles into a reusable LESS mixin system, introduces a CSS variable for configurable tooltip gap spacing, and enhances tooltip content normalization with wrapper div support. A new tooltip styles file centralizes all mixin definitions, replacing previous scattered declarations. Changes
Sequence Diagram(s)Sequence diagrams are not applicable to this change set as it primarily involves styling refactoring, CSS variable introduction, and utility function enhancements without introducing new multi-component interaction flows or significant control flow modifications. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/components/src/sender-actions/utils/tooltip.ts (1)
6-30: Optional: document the shallow VNode check.
hasTooltipInnerClassonly inspects the top-level VNode'sprops.class. Callers who already wrap their tooltip content intr-sender-tooltip-innerbut then nest it further (e.g. returnh('div', {}, h('div', { class: TOOLTIP_INNER_CLASS }, content))from a render function) will still be re-wrapped, leading to a double wrapper. This isn't reachable through current call sites (strings, plain VNodes fromdefaultActions.*.tooltip/VoiceButton/UploadButton.tooltip), but a brief JSDoc note onrenderTooltipInnerstating that the inner-class detection is shallow would help future consumers avoid the pitfall.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/components/src/sender-actions/utils/tooltip.ts` around lines 6 - 30, Add a brief JSDoc on renderTooltipInner explaining that hasTooltipInnerClass only checks the top-level VNode.props.class (it is a shallow check and does not traverse nested children or deeper VNode trees), so callers who nest a node with TOOLTIP_INNER_CLASS inside another element will still be re-wrapped; update the comments above renderTooltipInner and/or hasTooltipInnerClass (referencing those exact function names and TOOLTIP_INNER_CLASS) to state this limitation and recommend that callers place the TOOLTIP_INNER_CLASS on the outermost node if they want to avoid automatic wrapping.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/components/src/sender-actions/utils/tooltip.ts`:
- Around line 6-30: Add a brief JSDoc on renderTooltipInner explaining that
hasTooltipInnerClass only checks the top-level VNode.props.class (it is a
shallow check and does not traverse nested children or deeper VNode trees), so
callers who nest a node with TOOLTIP_INNER_CLASS inside another element will
still be re-wrapped; update the comments above renderTooltipInner and/or
hasTooltipInnerClass (referencing those exact function names and
TOOLTIP_INNER_CLASS) to state this limitation and recommend that callers place
the TOOLTIP_INNER_CLASS on the outermost node if they want to avoid automatic
wrapping.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 3889678a-4caa-4bf4-9924-30791caad4e0
📒 Files selected for processing (7)
docs/demos/sender/actions-config-basic.vuedocs/src/components/sender.mdpackages/components/src/sender-actions/action-button/index.vuepackages/components/src/sender-actions/clear-button/index.vuepackages/components/src/sender-actions/styles/tooltip.lesspackages/components/src/sender-actions/submit-button/index.vuepackages/components/src/sender-actions/utils/tooltip.ts
💤 Files with no reviewable changes (1)
- docs/demos/sender/actions-config-basic.vue
|
✅ Preview build completed successfully!
|
📦 Package Previewpnpm add https://pkg.pr.new/@opentiny/tiny-robot@fa70659 pnpm add https://pkg.pr.new/@opentiny/tiny-robot-kit@fa70659 pnpm add https://pkg.pr.new/@opentiny/tiny-robot-svgs@fa70659 commit: fa70659 |
1 participant
Background
Sender 的按钮 tooltip 在
bottom场景下与触发按钮距离过近，部分情况下会出现 tooltip 贴住按钮的问题。根因是 demo 中通过全局样式直接修改了 popper 定位结果，导致不同按钮、不同 placement 下的表现不一致。
What changed
top: -10px !important修正 tooltip 位置的样式top / bottom / left / right处理固定方向间距submit / clear / upload / voice的 tooltip 渲染结构clear按钮 tooltip 的重复包装问题--tr-sender-tooltip-gapCSS 变量说明，支持全局样式定制Result
bottom方向下 tooltip 不再贴住按钮Verification
submit / clear / upload / voice的 tooltip 展示top / bottom / left / right下的间距表现Summary by CodeRabbit
Documentation
--tr-sender-tooltip-gapCSS variable, enabling tooltip spacing customization with an 8px default.Style