feat: adapt semantic close

[Arktomson]

Summary by CodeRabbit

• 新功能

  • 预览组件的关闭按钮新增可传入 className 与 style，支持外观与布局定制。
  • 引入“close”语义名，可通过 classNames/styles 精准定制关闭按钮的样式与定位。

• 测试

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

[vercel[bot]]

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

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

[coderabbitai[bot]]

[!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 的关闭按钮新增可选的 className 与 style 透传；扩展 PreviewSemanticName，加入 'close'；在 Preview 内将 classNames.close 与 styles.close 明确传递给 CloseBtn；同时更新测试以覆盖新的类名/样式钩子。

Changes

Cohort / File(s)	Summary
CloseBtn 组件增强 src/Preview/CloseBtn.tsx	为 CloseBtn 的 props 增加 className?: string 与 style?: React.CSSProperties；引入 clsx（或 classnames）合并默认类名与外部 className；将 style 应用于按钮元素，并保留 onClick 与图标渲染。
Preview 集成与语义类型扩展 src/Preview/index.tsx	扩展 PreviewSemanticName，加入 'close'；在渲染 CloseBtn 时显式传入 className={classNames.close} 与 style={styles.close}。
测试更新 tests/preview.test.tsx	新增/更新测试以断言 classNames.popup.close 与 styles.popup.close 对 .rc-image-preview-close 的类名与样式生效；更新公共类型声明以暴露 classNames.popup.close 与 styles.popup.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: 触发关闭回调（交互逻辑不变）

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• react-component/image#404: 与本次将 preview 样式/类名路径调整到 popup 命名空间并扩展语义命名的工作直接相关。
• react-component/image#378: 早前对 Preview 层 classNames/styles 透传的改动，与此次为 close 控件补齐钩子密切相关.

Suggested reviewers

• thinkasany
• zombieJ

Poem

小兔轻踱代码畔，
按钮新衣随风暖。
class 与 style 悄相连，
预览关闭更从容。
(\_/) (•ᴥ•) ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title Check	❓ Inconclusive	标题“feat: adapt semantic close”用词含糊，没有清晰地概括此次 PR 的核心改动，例如为 CloseBtn 添加 className 和 style 属性并在预览组件中引入新的语义名称 “close”，因此难以让团队成员一眼就了解主要变更。	建议将标题修改为更具描述性的短语，例如“feat: 为 CloseBtn 添加 className/style 并引入语义名称 ‘close’”，以准确传达此次更新的重点。

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] 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 7695726ee91ba1c7541ae8ec6a2059a5294039d0 and aa53013d294b62df0880a469c88bcf0635bcb1d7.

📒 Files selected for processing (2)

• src/Preview/CloseBtn.tsx (1 hunks)
• src/Preview/index.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/Preview/index.tsx
• src/Preview/CloseBtn.tsx

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist[bot]]

Summary of Changes

Hello @Arktomson, I'm Gemini Code Assist[^1]! 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 :thumbsup: and :thumbsdown: 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.

[^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.

[li-jia-nan]

同步一下上游分支

[Arktomson]

ok

---Original--- From: @.> Date: Tue, Sep 30, 2025 02:05 AM To: @.>; Cc: "sheng @.@.>; Subject: Re: [react-component/image] feat: adapt semantic close (PR #455)

li-jia-nan left a comment (react-component/image#455)

同步一下上游分支

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 99.41%. Comparing base (7025e2d) to head (aa53013).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #455   +/-   ##
=======================================
  Coverage   99.41%   99.41%           
=======================================
  Files          17       17           
  Lines         511      511           
  Branches      152      152           
=======================================
  Hits          508      508           
  Misses          3        3           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[vercel[bot]]

@Arktomson is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[Arktomson]

已修改

---Original--- From: @.> Date: Wed, Oct 8, 2025 19:36 PM To: @.>; Cc: "sheng @.@.>; Subject: Re: [react-component/image] feat: adapt semantic close (PR #455)

@li-jia-nan commented on this pull request.

In src/Preview/CloseBtn.tsx: > @@ -1,16 +1,23 @@ +import classnames from 'classnames';
classNames 这个库已经删掉了

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[Arktomson]

@coding-ice 合一下不

[coding-ice]

要等豆酱，他最近比较忙～