Skip to content

feat(textarea): support clearable styles#2583

Open
AriaLEntropy wants to merge 2 commits into
Tencent:developfrom
AriaLEntropy:fix/textarea-clearable
Open

feat(textarea): support clearable styles#2583
AriaLEntropy wants to merge 2 commits into
Tencent:developfrom
AriaLEntropy:fix/textarea-clearable

Conversation

@AriaLEntropy

@AriaLEntropy AriaLEntropy commented Jul 1, 2026

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

#2566

关联框架实现 PR:

💡 需求背景和解决方案

1、Textarea 当前缺少与 Input 一致的可清空能力。用户在输入多行文本后,需要通过手动选择或删除内容完成清空,操作成本较高。

2、本 PR 在 common 侧补充 Textarea clearable 的公共样式和文档示例入口,为 Vue / React 等框架实现提供统一视觉基础。

实现内容:

  • 新增 Textarea clearable 相关样式变量
  • 新增 .t-textarea--clearable.t-textarea__clear.t-textarea__clear--visible 样式
  • 清除图标的颜色、尺寸、间距与 hover 态复用现有 TDesign token
  • 图标位置基于 Textarea 内边距与基础行高推导,使其与首行文本视觉中心对齐
  • 在 common API 文档中新增 clearable 示例入口,由各框架仓库提供对应 demo 实现

样式方案对齐现有 Input clearable 的视觉语言。由于 Textarea 不具备 Input 的 suffix 区域,无法直接复用 Input suffix 布局,因此在 Textarea 中补充 clearable modifier,用于处理清除图标定位与文本避让。

效果展示:

vue-next

vue

react

react

📝 更新日志

  • feat(Textarea): 支持 clearable 可清空样式

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants