Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@IsDyh01
Copy link
Contributor

@IsDyh01 IsDyh01 commented Aug 29, 2025

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • [✅] 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ⌨️ Accessibility improvement
  • ❓ Other (about what?)

🔗 Related Issues

fix #543

  • Describe the source of related requirements, such as links to relevant issue discussions.
  • For example: close #xxxx, fix #xxxx

当前行为:
image

更新后的行为:
image

💡 Background and Solution

  • The specific problem to be addressed.
  • List the final API implementation and usage if needed.
  • If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Language Changelog
🇺🇸 English
🇨🇳 Chinese

Summary by CodeRabbit

  • Refactor
    • 调整加载按钮的图标提供方式,提升加载状态下的稳定性与一致性,交互不变。
  • Style
    • 统一加载图标的样式类名,确保外观与现有主题一致,无用户可感知的功能变化。

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 29, 2025

Note

Other AI code review bot(s) detected

CodeRabbit 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.

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (25)
  • components/actions/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/actions/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/attachments/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/bubble/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/prompts/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/prompts/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/prompts/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/sender/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/sender/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/suggestion/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/suggestion/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/thought-chain/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/use-x-chat/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/welcome/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/welcome/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/welcome/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/x-provider/__tests__/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
  • components/x-request/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • components/x-stream/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap
  • tests/__snapshots__/changelog.test.ts.snap is excluded by !**/*.snap
  • tests/__snapshots__/index.test.ts.snap is excluded by !**/*.snap

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

将 LoadingButton 中对加载图标的用法从作为 ActionButton 的子元素传递,改为通过 icon 属性传入,并将 ActionButton 改为自闭合。其他属性与行为未改动,导出接口未变化。

Changes

Cohort / File(s) Summary
Sender LoadingButton 图标传递方式调整
components/sender/components/LoadingButton.tsx
将 StopLoadingIcon 从子元素移除,改为通过 icon={<StopLoadingIcon className={${prefixCls}-loading-icon} />} 传递;原先的 icon={null} 删除;ActionButton 改为自闭合;其余 props 与 ref 保持不变。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective Addressed Explanation
修复自定义按钮时 LoadingButton 出现两个图片,仅显示用户自定义的 icon(#543 仅从 diff 看是更换图标传递方式,无法确认在自定义按钮场景下是否仍会并行渲染两个图标,或是否覆盖/尊重用户自定义的 icon。

Assessment against linked issues: Out-of-scope changes

(无)

Poem

我是代码兔,耳朵当天线,
一枚小图标,改走 icon 线。
不再孩子堆里挤,也不和你“撞脸”,
单影随风轻,双影不复现。
咔嗒一发,发送更清爽~ 🐇✨

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 29, 2025

Preview is ready

@dosubot dosubot bot added the bug Something isn't working label Aug 29, 2025
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of Changes

Hello @IsDyh01, 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!

此拉取请求旨在修复 LoadingButton 组件中的一个视觉缺陷。该缺陷导致在特定情况下,按钮会错误地显示两个图标。通过调整组件内部图标的渲染方式,确保了 LoadingButton 在任何情况下都能正确且一致地显示其加载图标,提升了用户界面的整洁性和准确性。

Highlights

  • 修复 LoadingButton 图标显示问题: 解决了当 LoadingButton 组件接收 icon 属性时,同时显示两个图标的错误行为。
  • 代码实现调整: 将 StopLoadingIcon 直接作为 ActionButtonicon 属性传入,而不是作为其子元素渲染,从而确保图标的正确显示。
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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

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 issue 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

  1. 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.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

您好,感谢您的贡献。本次提交正确地修复了 LoadingButton 在接收 icon 属性时会显示两个图标的 bug。将默认图标从 children 移至 icon 属性,可以确保外部传入的 icon 能够正确地覆盖默认值。我只发现了一个与 children 属性相关的潜在问题,并提供了一个建议来增强代码的健壮性。总体而言,这是一个很好的修复。

Comment on lines 12 to +21
<ActionButton
icon={null}
icon={<StopLoadingIcon className={`${prefixCls}-loading-icon`} />}
color="primary"
variant="text"
shape="circle"
{...props}
className={classNames(className, `${prefixCls}-loading-button`)}
action="onCancel"
ref={ref}
>
<StopLoadingIcon className={`${prefixCls}-loading-icon`} />
</ActionButton>
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

感谢您的修复,这确实解决了重复图标的问题。

不过,我注意到这个改动可能会引入一个未预期的行为变更。在之前的实现中,传递给 LoadingButtonchildren 属性会被忽略。但在修改后,如果外部给 LoadingButton 传递了 children,它们会被渲染出来。

考虑到 LoadingButton 是一个圆形的加载状态按钮,通常不应该包含除图标外的其他子元素。为了保持行为一致性并防止潜在的 UI 错乱,建议显式地覆盖 children 属性,以确保它不会被渲染。

    <ActionButton
      icon={<StopLoadingIcon className={`${prefixCls}-loading-icon`} />}
      color="primary"
      variant="text"
      shape="circle"
      {...props}
      className={classNames(className, `${prefixCls}-loading-button`)}
      action="onCancel"
      ref={ref}
      children={undefined}
    />

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
components/sender/components/LoadingButton.tsx (1)

13-21: 补充用例:自定义 icon 时应只渲染一个图标

请添加回归测试覆盖两种场景:1) 传入自定义 icon 时,不应再出现带有 -loading-icon 的默认图标;2) 不传入 icon 时,应渲染一次默认 StopLoadingIcon

我可以基于 React Testing Library 起草如下测试骨架:

import { render } from '@testing-library/react';
import LoadingButton from './LoadingButton';
import { ActionButtonContext } from './ActionButton';

const prefixCls = 'ant-x-sender';

test('renders only custom icon when provided', () => {
  const { container, getByTestId } = render(
    <ActionButtonContext.Provider value={{ prefixCls }}>
      <LoadingButton icon={<span data-testid="custom-icon" />} />
    </ActionButtonContext.Provider>,
  );
  expect(getByTestId('custom-icon')).toBeInTheDocument();
  expect(container.querySelectorAll(`.${prefixCls}-loading-icon`).length).toBe(0);
});

test('renders default loading icon when no custom icon', () => {
  const { container } = render(
    <ActionButtonContext.Provider value={{ prefixCls }}>
      <LoadingButton />
    </ActionButtonContext.Provider>,
  );
  expect(container.querySelectorAll(`.${prefixCls}-loading-icon`).length).toBe(1);
});

需要我直接提交一个测试 PR 吗?

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 232abe8 and 531ac1a.

📒 Files selected for processing (1)
  • components/sender/components/LoadingButton.tsx (1 hunks)
⏰ 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). (3)
  • GitHub Check: build preview
  • GitHub Check: test / react component workflow
  • GitHub Check: size
🔇 Additional comments (2)
components/sender/components/LoadingButton.tsx (2)

13-21: 修复点正确:用 icon 属性替代 children、自闭合标签,消除了“双图标”问题

同时将 {...props} 放在后面,确保用户传入的 icon 优先级更高,符合“自定义 icon 只显示一次”的预期。LGTM。


11-21: 建议显式合并用户 icon,避免依赖属性覆盖顺序的隐式语义

当前写法正确但可读性稍弱。建议解构 props.icon,显式计算 mergedIcon,并改用 restProps,读者一眼可见“用户 icon 优先,其次默认 StopLoadingIcon”。

[ suggest_optional_refactor ]
在本段范围内可按以下 diff 修改:

-    <ActionButton
-      icon={<StopLoadingIcon className={`${prefixCls}-loading-icon`} />}
+    <ActionButton
+      icon={mergedIcon}
       color="primary"
       variant="text"
       shape="circle"
-      {...props}
+      {...restProps}
       className={classNames(className, `${prefixCls}-loading-button`)}
       action="onCancel"
       ref={ref}
     />

此外,需要在本段之外补充两行(示例放在 Line 10 之后):

// outside this hunk
const { icon: userIcon, className, ...restProps } = props;
const mergedIcon =
  userIcon ?? <StopLoadingIcon className={`${prefixCls}-loading-icon`} />;

@IsDyh01
Copy link
Contributor Author

IsDyh01 commented Aug 29, 2025

@kimteayon 麻烦看下这个loadingButton可以这么改吗

@kimteayon
Copy link
Collaborator

@kimteayon 麻烦看下这个loadingButton可以这么改吗

当然可以这么修改,不过需要解决下test 失败问题

@codecov
Copy link

codecov bot commented Aug 30, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.45%. Comparing base (232abe8) to head (c7afaa5).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1145   +/-   ##
=======================================
  Coverage   92.45%   92.45%           
=======================================
  Files          69       69           
  Lines        1577     1577           
  Branches      426      410   -16     
=======================================
  Hits         1458     1458           
  Misses        119      119           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@IsDyh01
Copy link
Contributor Author

IsDyh01 commented Aug 30, 2025

@kimteayon 麻烦看下这个loadingButton可以这么改吗

当然可以这么修改,不过需要解决下test 失败问题

@kimteayon 嗯嗯解决了

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Aug 31, 2025
@kimteayon
Copy link
Collaborator

我将会尽快发新版本

@kimteayon kimteayon merged commit 538a2ee into ant-design:main Aug 31, 2025
10 checks passed
miownag pushed a commit to miownag/x that referenced this pull request Oct 15, 2025
* fix(sender): 修复loadingButton传入icon属性时同时显示两个图标

* chore: update snapshot

* chore: update snapshot
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working lgtm This PR has been approved by a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sender 组件设置自定义按钮时 LoadingButton 出现两个图片

2 participants