feat(textarea): add clearable icon styles and docs#2598
Open
ceilf6 wants to merge 3 commits into
Open
Conversation
Add shared styles for the Textarea `clearable` feature, bringing it to parity with Input. The clear icon is anchored to the top-right corner to avoid overlapping the native bottom-right resize drag handle, hidden by default and revealed on hover, mirroring the Input clearable pattern with BEM-like `.t-textarea__clear` / `--clearable` naming and component-level LESS tokens. Adds the "可清空内容 / Clearable Content" narrative section to the web API docs (zh + en-US), matching the Input documentation. Refs Tencent#2566. The `clearable` prop, template wiring and example demo live in the per-framework repos (e.g. tdesign-react#4319). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Author
|
@ceilf6/repo-guard CR |
There was a problem hiding this comment.
Pull request overview
This PR adds shared Web (LESS) styling tokens and rules for a Textarea “clearable” affordance (clear icon), and updates the Textarea API docs (zh/en) to include a clearable section, aligning Textarea documentation and styling capabilities with Input.
Changes:
- Added Textarea clear-icon design tokens in
style/web/components/textarea/_var.less. - Added
.t-textarea--clearable+.t-textarea__clearstyling instyle/web/components/textarea/_index.less. - Added “Clearable Content / 可清空内容” documentation sections in
docs/web/api/textarea(.en-US).md.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| style/web/components/textarea/_var.less | Introduces LESS tokens for clear icon color/size/position/transition. |
| style/web/components/textarea/_index.less | Adds clearable state styling and clear icon visibility/hover behavior. |
| docs/web/api/textarea.md | Adds zh “可清空内容” docs section referencing {{ clearable }}. |
| docs/web/api/textarea.en-US.md | Adds en-US “Clearable Content” docs section referencing {{ clearable }}. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+92
to
+115
| // 可清空内容：清空按钮固定在右上角，避开右下角的 native resize 拖拽手柄 | ||
| &--clearable { | ||
| .@{prefix}-textarea__clear { | ||
| position: absolute; | ||
| top: @textarea-clear-icon-top; | ||
| right: @textarea-clear-icon-right; | ||
| color: @textarea-clear-icon-color; | ||
| font-size: @textarea-clear-icon-font-size; | ||
| line-height: 1; | ||
| cursor: pointer; | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| transition: @textarea-clear-icon-transition; | ||
| } | ||
|
|
||
| &:hover .@{prefix}-textarea__clear { | ||
| opacity: 1; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .@{prefix}-textarea__clear:hover { | ||
| color: @textarea-clear-icon-color-hover; | ||
| } | ||
| } |
Author
代码评审报告: feat(textarea): add clearable icon styles and docs风险等级: 中 级联分析
问题发现
行级发现
Karpathy 评审
缺失覆盖
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Issue
Closes #2566 — [Textarea] 增加可清空内容
📝 背景
多行文本框（Textarea）目前不具备与 Input 一致的清空能力，用户需要手动全选并删除才能清空已输入的内容，交互效率较低。本 PR 在共享样式层补齐 Textarea 的
clearable视觉与交互，使两端体验对齐。🔨 方案
在
tdesign-common共享样式层新增 Textarea 清空按钮样式（各框架复用）：.t-textarea__clear元素类与.t-textarea--clearable修饰类，沿用 TDesign BEM 命名opacity: 0; visibility: hidden，在.t-textarea--clearable:hover时显示，与 Input 的--suffix:hover .t-input__clear行为一致resize拖拽手柄，避免遮挡 / 误触@textarea-clear-icon-color/@textarea-clear-icon-color-hover（对齐 Input suffix 图标色）@textarea-clear-icon-font-size（默认@font-size-l，16px）@textarea-clear-icon-top（与首行文本垂直居中：calc((@comp-size-m - icon-size) / 2)，首行中心位于@comp-size-m / 2）@textarea-clear-icon-right（与__inner水平内边距对齐）@textarea-clear-icon-transition文档同步新增「可清空内容 / Clearable Content」示例小节（zh + en-US），与 Input 文档对齐。
📦 范围说明
本 PR 仅包含
tdesign-common共享样式与文档。clearable属性定义、模板接线与_example/clearable示例属于各框架仓库，将在框架侧 PR 落地（如 tdesign-react#4319）。✅ 自测
npx lessc style/web/components/textarea/_index.less编译通过changelog
feat(textarea): 支持多行文本框清空图标样式与文档说明
🤖 Generated with Claude Code