Skip to content

fix: forward textarea styles to BaseInput and correct typings#82

Open
QDyanbing wants to merge 1 commit intoreact-component:masterfrom
QDyanbing:clear-semantic
Open

fix: forward textarea styles to BaseInput and correct typings#82
QDyanbing wants to merge 1 commit intoreact-component:masterfrom
QDyanbing:clear-semantic

Conversation

@QDyanbing
Copy link
Copy Markdown

@QDyanbing QDyanbing commented Mar 17, 2026

背景

这个 PR 修复了 rc-textarea 中一个样式透传问题。

  • 此前 TextArea 会像 classNames 一样把语义化 class 透传给 BaseInput,但 styles 没有一起透传,导致诸如 styles.clear 这类语义化样式在运行时不会生效。
  • 同时,TextAreaProps['styles'] 的类型定义也不完整,没有继承 CommonInputProps['styles'] 中已有的语义化样式字段。

修改内容

  • 将 TextArea 的 styles 透传给 BaseInput
  • 修正 TextAreaProps['styles'] 类型,继承 CommonInputProps['styles']
  • 补充 allowClear 场景下 classNames/styles 的测试覆盖

Summary by CodeRabbit

  • Bug Fixes

    • 更新依赖版本以改进稳定性
    • TextArea 组件现支持更灵活的样式自定义,可对按钮和计数器等元素进行独立样式配置
  • Tests

    • 新增测试用例,验证自定义样式和交互功能的正确性

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 17, 2026

Walkthrough

升级了 @rc-component/input 依赖版本,扩展了 TextAreaProps 中 styles 属性的类型定义,使其支持更广泛的样式配置,并在 TextArea 组件中实现了该属性的转发。新增相关测试用例验证样式传递功能。

Changes

Cohort / File(s) Summary
Dependency Upgrade
package.json
升级 @rc-component/input 从 ~1.2.0 到 ~1.2.1。
Component and Interface Updates
src/TextArea.tsx, src/interface.ts
TextArea 组件添加了 styles 属性的转发至 BaseInput 组件;TextAreaProps 的 styles 类型扩展为 CommonInputProps['styles'] & { textarea?: CSSProperties; count?: CSSProperties; },实现了类型的统一和复用。
Test Enhancement
tests/index.spec.tsx
新增样式和结构测试用例,验证带有 showCount、suffix、allowClear 等属性的 TextArea 的清除图标样式应用是否正确,包括自定义类名和颜色验证。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

  • fix: resize is invalid in textarea #76: 两个 PR 都修改了 TextArea 组件样式的处理和转发机制,主 PR 扩展了 styles 属性类型定义并实现了转发,相关 PR 调整了 textarea resize 属性的样式优先级。

Suggested reviewers

  • afc163
  • zombieJ

Poem

🐰 样式之路更宽广,
Props 转发入 BaseInput 堂,
类型复用展风采,
清除图标穿新装,
测试验证心更强!✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了拉取请求的主要变更:解决样式转发问题并修正类型定义。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
📝 Coding Plan
  • Generate coding plan for human review comments

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.

@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

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

此 PR 旨在解决 rc-textarea 组件中样式未正确应用的问题。此前,TextArea 组件的 styles 属性未能像 classNames 一样透传给底层的 BaseInput 组件,导致部分语义化样式(如 styles.clear)无法生效。同时,TextAreaProps['styles'] 的类型定义也不够完善。本次修改通过确保 styles 属性的正确传递和完善类型定义,提升了组件样式的灵活性和准确性,并增加了相关测试覆盖。

Highlights

  • 样式透传修复: 修复了 rc-textarea 中样式透传问题,确保 styles 属性能正确传递给 BaseInput
  • 类型定义完善: 完善了 TextAreaProps['styles'] 的类型定义,使其继承 CommonInputProps['styles'],从而支持更多语义化样式字段。
  • 测试覆盖增强: 增加了 allowClear 场景下 classNamesstyles 的测试覆盖,提升了代码的健壮性。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • package.json
    • 更新了 @rc-component/input 依赖版本。
  • src/TextArea.tsx
    • styles 属性从 TextArea 透传给 BaseInput 组件。
  • src/interface.ts
    • 修正了 TextAreaProps['styles'] 类型定义,使其继承 CommonInputProps['styles']
  • tests/snapshots/index.spec.tsx.snap
    • 更新了快照,以反映 allowClear 场景下新的样式和清空按钮元素。
  • tests/index.spec.tsx
    • 新增了测试用例,验证 allowClear 功能下 classNamesstyles 的正确应用。
Activity
  • 目前没有与此拉取请求相关的活动。
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
Copy Markdown

@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

本次 PR 旨在修复 TextArea 组件的样式透传问题。核心改动包括:将 styles 属性从 TextArea 透传至 BaseInput 组件,修正了 TextAreaProps['styles'] 的 TypeScript 类型以继承 CommonInputProps['styles'],并更新了测试用例以覆盖 allowClear 场景下的 classNamesstyles。这些改动解决了 styles.clear 等语义化样式不生效的问题,并完善了类型定义。从代码层面看,改动是直接且有效的。

Copy link
Copy Markdown

@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: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@package.json`:
- Line 46: The dependency bump for "@rc-component/input" in package.json was
changed to "~1.2.1"; before merging, inspect the 1.2.1 changelog/commit diff
(via npm view, GitHub tags/releases, or the package repo) to confirm the patch
only contains the intended style-propagation fix and no breaking or behavioral
changes; if any unexpected changes exist, either pin to the previous version,
add compensating code (e.g., adjust style props handling in components
referencing the Input component), or document the risk in the PR description
referencing "@rc-component/input" and the specific 1.2.1 release notes.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 718dc6f9-46bf-4b7b-affd-7b26c9126e78

📥 Commits

Reviewing files that changed from the base of the PR and between 7251dae and b119de6.

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/index.spec.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (4)
  • package.json
  • src/TextArea.tsx
  • src/interface.ts
  • tests/index.spec.tsx

},
"dependencies": {
"@rc-component/input": "~1.2.0",
"@rc-component/input": "~1.2.1",
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

@rc-component/input 1.2.1 changelog release notes TextArea BaseInput styles clear suffix

💡 Result:

  • There is no @rc-component/input@1.2.1 release in the upstream react-component/input GitHub Releases list. The latest scoped release shown there is @rc-component/input@1.1.2 (Nov 10), so there are no 1.2.1 changelog/release notes for @rc-component/input. [1]
  • What @rc-component/input@1.1.2 release notes contain: only maintenance items (version bump, switching focus util to rc-util, deps cleanup, classnamesclsx, dev-deps bumps). Nothing specifically calling out TextArea, BaseInput, styles, allowClear, suffix, etc. [1]
  • If you’re actually looking for the TextArea/BaseInput “styles / allowClear / suffix” behavior, that API is reflected in the type surface:
    • BaseInputProps/CommonInputProps expose suffix, allowClear, plus classNames and styles for affix/prefix/suffix wrappers. [2]
    • rc-textarea’s TextArea props explicitly pick allowClear and suffix from rc-input’s BaseInputProps. [3]

If you confirm whether you meant rc-input@1.2.1 (unscoped) vs @rc-component/input, I can pull the exact matching release/tag notes for the right package.

Sources: [1] [2] [3]


🏁 Script executed:

# 查看 package.json 第 46 行及其周围上下文
cat -n package.json | sed -n '40,55p'

Repository: react-component/textarea

Length of output: 702


🏁 Script executed:

# 使用 npm 或 registry API 查询 `@rc-component/input` 的所有发布版本
npm view `@rc-component/input` versions --json 2>/dev/null | tail -20 || echo "npm view failed, trying alternative method"

Repository: react-component/textarea

Length of output: 147


依赖升级方向正确,建议确认 1.2.1 版本的具体变更内容。

@rc-component/input~1.2.0 升级至 ~1.2.1 系 patch 版本更新,与本次样式透传修复目标一致。建议在合并前确认该版本的变更内容(可通过 npm 或源代码仓库查看),确保无隐式行为回归。

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@package.json` at line 46, The dependency bump for "@rc-component/input" in
package.json was changed to "~1.2.1"; before merging, inspect the 1.2.1
changelog/commit diff (via npm view, GitHub tags/releases, or the package repo)
to confirm the patch only contains the intended style-propagation fix and no
breaking or behavioral changes; if any unexpected changes exist, either pin to
the previous version, add compensating code (e.g., adjust style props handling
in components referencing the Input component), or document the risk in the PR
description referencing "@rc-component/input" and the specific 1.2.1 release
notes.

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 17, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.00%. Comparing base (7251dae) to head (b119de6).

Additional details and impacted files
@@           Coverage Diff           @@
##           master      #82   +/-   ##
=======================================
  Coverage   99.00%   99.00%           
=======================================
  Files           3        3           
  Lines         201      201           
  Branches       62       61    -1     
=======================================
  Hits          199      199           
  Misses          2        2           

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

1 participant