Skip to content

Conversation

Arktomson
Copy link

@Arktomson Arktomson commented Sep 25, 2025

Summary by CodeRabbit

  • 新功能

    • 预览组件的关闭按钮支持自定义 className 与内联样式,便于个性化外观与布局。
    • 新增“close”语义名,可通过 classNames/styles 精准定制关闭按钮的样式与定位。
  • 测试

    • 更新/新增测试以覆盖关闭按钮的渲染和样式自定义行为。

Copy link

vercel bot commented Sep 25, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
image Error Error Sep 27, 2025 3:46am

Copy link

coderabbitai bot commented Sep 25, 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.

Walkthrough

为 Preview 的关闭按钮新增可选的 classNamestyle 透传;扩展 PreviewSemanticName,加入 'close';在 Preview 内将 classNames.closestyles.close 明确传递给 CloseBtn;同时更新测试以覆盖新的类名/样式钩子。

Changes

Cohort / File(s) Summary
CloseBtn 组件增强
src/Preview/CloseBtn.tsx
CloseBtn 增加可选 className?: stringstyle?: React.CSSProperties;引入 classnames 合并默认类名与外部 className;将 style 直接应用到按钮元素。
Preview 集成与语义类型扩展
src/Preview/index.tsx
扩展 PreviewSemanticName 增加 'close';在渲染 CloseBtn 时显式传入 className={classNames.close}style={styles.close}
测试更新
tests/preview.test.tsx
新增/更新测试以断言 classNames.popup.closestyles.popup.close.rc-image-preview-close 的渲染与样式生效。

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant App as App
  participant Preview as Preview
  participant CloseBtn as CloseBtn

  App->>Preview: render({ classNames, styles, ... })
  Preview->>CloseBtn: render({ className: classNames.close, style: styles.close, onClick, icon })
  Note over CloseBtn: 合并默认类名与传入 className\n应用传入 style
  CloseBtn-->>Preview: onClick()
  Preview-->>App: 触发关闭回调(交互逻辑不变)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • thinkasany
  • zombieJ

Poem

小兔携一缕光来,
按钮新衣静无哗。
class 与 style 轻相缀,
预览一合夜更雅。
(\/) (••) /︶\ — 代码细语花。

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed 此标题“feat: adapt semantic close”直接反映了此次 PR 的主要改动,即为关闭按钮引入语义化“close”槽位及相关自定义支持,与更改内容紧密对应且简洁明了。
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 82898fd and 7695726.

📒 Files selected for processing (1)
  • tests/preview.test.tsx (3 hunks)
🔇 Additional comments (1)
tests/preview.test.tsx (1)

1076-1118: 覆盖新增关闭按钮钩子👍

断言 classNames.popup.closestyles.popup.close 的透传行为,和 Preview 的实现保持一致,测试覆盖到位。


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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

Summary of Changes

Hello @Arktomson, 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 enhances the CloseBtn component by introducing support for custom className and style props, thereby increasing its reusability and styling flexibility. It also updates the Preview component to utilize these new capabilities, allowing for more granular control over the appearance of the close button within the preview interface.

Highlights

  • Close Button Customization: The CloseBtn component now accepts className and style props, allowing for more flexible styling and customization of the close button.
  • Semantic Name Extension: The PreviewSemanticName type has been updated to include 'close', enabling semantic targeting for the close button within the preview interface.
  • Integration of Styling Props: The Preview component now passes classNames.close and styles.close to the CloseBtn component, leveraging the newly added styling capabilities for the close button.
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

  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

This pull request introduces className and style props to the CloseBtn component, allowing for greater customization through semantic selectors. The Preview component is updated to leverage this new functionality. The implementation is solid. I've added one suggestion to explicitly set the type attribute on the button to prevent potential unintended form submissions, which is a good practice for button components.

Comment on lines +16 to 22
<button
className={classnames(`${prefixCls}-close`, className)}
style={style}
onClick={onClick}
>
{icon}
</button>
Copy link
Contributor

Choose a reason for hiding this comment

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

medium

It's a good practice to explicitly set the type of a <button> to "button". The default type is "submit", which can cause unexpected form submissions if this component is rendered within a <form> element. Adding type="button" prevents this behavior.

    <button
      type="button"
      className={classnames(`${prefixCls}-close`, className)}
      style={style}
      onClick={onClick}
    >
      {icon}
    </button>

// Note: if you want to add `action`,
// pls contact @zombieJ or @thinkasany first.
export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
export type PreviewSemanticName = 'root' | 'mask' | 'body' | 'close' | FooterSemanticName;

Choose a reason for hiding this comment

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

补一下测试用例

@li-jia-nan
Copy link
Member

同步一下上游分支

@Arktomson
Copy link
Author

Arktomson commented Sep 30, 2025 via email

Copy link

codecov bot commented Oct 1, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.41%. Comparing base (607cb16) to head (7695726).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #455   +/-   ##
=======================================
  Coverage   99.41%   99.41%           
=======================================
  Files          17       17           
  Lines         512      512           
  Branches      153      153           
=======================================
  Hits          509      509           
  Misses          3        3           

☔ 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.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants