fix: the invalid bubble typing token issue #1435
Conversation
📝 WalkthroughWalkthrough为 Bubble 添加可配置的打字光标：在演示中新增 Changes
Sequence Diagram(s)sequenceDiagram
participant Demo as Demo (animation.tsx)
participant Provider as XProvider (theme)
participant Bubble as Bubble component
participant Styles as CSS / Token layer
Demo->>Demo: 选择效果（e.g., "custom-typing"）
alt effect == custom-typing
Demo->>Provider: 用 theme 包裹 Bubble（{ Bubble: { typingContent: "💖" } }）
Provider->>Bubble: 提供主题 token（含 typingContent）
else other effect
Demo->>Bubble: 直接渲染 Bubble（无自定义 typingContent）
end
Bubble->>Styles: 读取 token.typingContent
Styles-->>Bubble: 将伪元素 content 设置为 token.typingContent
Bubble->>Demo: 渲染带/不带自定义光标的打字动画
Demo->>Demo: footer/Actions 在 provider 内（若包裹）渲染并触发 onTyping / onTypingComplete
预计代码审查工作量🎯 2 (简单) | ⏱️ ~10 分钟
诗
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (5)
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 |
|
|
Summary of ChangesHello @kimteayon, 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 resolves an issue where 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
|
Deploying ant-design-x with
|
| Latest commit: |
4648c20
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b2ea764a.ant-design-x.pages.dev |
| Branch Preview URL: | https://bubbletype.ant-design-x.pages.dev |
There was a problem hiding this comment.
Code Review
This pull request addresses an issue with an invalid bubble typing token. The primary fix correctly formats the CSS content property for the typing cursor as a valid string. The changes also involve utilizing this token within the bubble's styling and adding a demonstration to verify the token override. My review has pinpointed an issue in TypingContent.tsx where a class is being applied unconditionally, which results in the typing cursor showing up incorrectly during the fade-in animation. I have provided a suggestion to conditionally apply the class to resolve this.
I am having trouble creating individual review comments. Click here to see my feedback.
packages/x/components/bubble/TypingContent.tsx (37)
Using true here causes the ${prefixCls}-typing class to be applied unconditionally. This leads to the typing cursor being displayed even when the fade-in effect is active, which is not the intended behavior. To ensure the typing cursor only appears for the 'typing' effect, this condition should be changed to isTyping. This change will ensure that the typing and fade-in classes are mutually exclusive, depending on the selected animation effect.
[`${prefixCls}-typing`]: isTyping,
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/x/components/bubble/demo/animation.tsx(4 hunks)packages/x/components/bubble/style/bubble.ts(2 hunks)packages/x/components/bubble/style/index.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
📚 Learning: 2025-01-27T09:36:11.490Z
Learnt from: YumoImer
Repo: ant-design/x PR: 479
File: components/bubble/demo/debug-list.tsx:39-57
Timestamp: 2025-01-27T09:36:11.490Z
Learning: In the Bubble.List debug demo component, the different typing behavior between pushBubble (sets typing: true) and unshiftBubble (no typing property) operations is intentional to facilitate testing different scenarios.
Applied to files:
packages/x/components/bubble/demo/animation.tsxpackages/x/components/bubble/style/bubble.tspackages/x/components/bubble/style/index.ts
⏰ 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). (5)
- GitHub Check: build preview
- GitHub Check: size
- GitHub Check: test
- GitHub Check: Cloudflare Pages
- GitHub Check: test
🔇 Additional comments (4)
packages/x/components/bubble/style/index.ts (1)
11-15: 修复正确：CSS content 属性需要带引号的字符串。将
typingContent默认值设为'"|"'是正确的做法。因为在 CSS 中，content属性需要带引号的字符串值（如content: "|"），所以 token 值本身必须包含这些引号。packages/x/components/bubble/style/bubble.ts (2)
45-56: 核心修复：正确从 token 中解构并使用typingContent。将
typingContent从 token 中解构出来，这是修复的关键步骤，使得 token 配置能够真正生效。
93-103: typing 光标样式配置正确。使用 token 中的
typingContent替代之前可能硬编码的值，使得用户可以通过 theme 配置自定义打字光标内容。packages/x/components/bubble/demo/animation.tsx (1)
62-91: XProvider 集成和自定义 typing 内容演示实现正确。通过 XProvider 的 theme 配置来覆盖
Bubble.typingContent，很好地展示了 token 配置的使用方式。条件逻辑清晰：当选择custom-typing时应用自定义心形光标，否则使用默认配置。
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/x/components/bubble/demo/animation.tsx (1)
78-82:typing.effect映射可简化为直接复用状态值当前写法：
effect: effect === 'fade-in' ? 'fade-in' : 'typing',与下面这句是等价的，可以稍微精简一点：
effect: effect === 'fade-in' ? effect : 'typing',属于纯样式/可读性优化，按需采纳即可。
🧹 Nitpick comments (1)
packages/x/components/bubble/demo/animation.tsx (1)
62-73: 确认typingContent的引号语义以及避免覆盖上层 Bubble 组件主题这里的主题配置：
Bubble: effect === 'custom-typing' ? { typingContent: '"💖"', } : {},有两个点建议确认一下：
typingContent目前传的是带引号的字符串（实际值为"💖"）：
- 如果样式层是直接把该值作为 CSS
content使用（不再自动包引号），这种写法是合理的；- 如果实现中已经会为
typingContent自动包一层引号，那么这里可能会导致实际渲染出来的内容带上多余的双引号。可以结合样式实现再核对一下。当
effect !== 'custom-typing'时，这里仍然传入components: { Bubble: {} }。如果XProvider的 theme 合并是浅覆盖，这个空对象有可能把外层对Bubble的组件级主题覆盖掉。为了更稳妥，可以只在custom-typing时才传入components.Bubble，其他情况直接让其继承外层：- <XProvider - theme={{ - components: { - Bubble: - effect === 'custom-typing' - ? { - typingContent: '"💖"', - } - : {}, - }, - }} - > + <XProvider + theme={ + effect === 'custom-typing' + ? { + components: { + Bubble: { + typingContent: '"💖"', + }, + }, + } + : undefined + } + >如果确认
XProvider在theme={undefined}时会正常继承外层配置，这样既能避免空对象覆盖问题，也让逻辑更清晰。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/x/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snappackages/x/components/bubble/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
packages/x/components/bubble/demo/animation.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时，需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: YumoImer
Repo: ant-design/x PR: 479
File: components/bubble/demo/debug-list.tsx:39-57
Timestamp: 2025-01-27T09:36:11.490Z
Learning: In the Bubble.List debug demo component, the different typing behavior between pushBubble (sets typing: true) and unshiftBubble (no typing property) operations is intentional to facilitate testing different scenarios.
📚 Learning: 2025-01-27T09:36:11.490Z
Learnt from: YumoImer
Repo: ant-design/x PR: 479
File: components/bubble/demo/debug-list.tsx:39-57
Timestamp: 2025-01-27T09:36:11.490Z
Learning: In the Bubble.List debug demo component, the different typing behavior between pushBubble (sets typing: true) and unshiftBubble (no typing property) operations is intentional to facilitate testing different scenarios.
Applied to files:
packages/x/components/bubble/demo/animation.tsx
⏰ 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). (5)
- GitHub Check: size
- GitHub Check: test
- GitHub Check: build preview
- GitHub Check: test
- GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
packages/x/components/bubble/demo/animation.tsx (1)
2-2: 新增custom-typing效果与状态/Radio 配置整体合理引入
XProvider、扩展effect的字面量联合类型，并在Radio.Group中同步新增"custom-typing"选项三处逻辑是一致的，默认值和选项值对得上，切换动画效果的状态流转看起来是正确的。建议在文档站实际切一遍三种效果，确认没有遗漏的视觉/交互差异即可。Also applies to: 26-26, 50-53
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1435 +/- ##
=======================================
Coverage 94.24% 94.24%
=======================================
Files 144 144
Lines 3703 3703
Branches 1038 1037 -1
=======================================
Hits 3490 3490
Misses 211 211
Partials 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will increase total bundle size by 5.0MB (120.96%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: x-markdown-array-pushAssets Changed:
|
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit
发布说明
新功能
改进
✏️ Tip: You can customize this high-level summary in your review settings.