feat(Textarea): add clearable styles to support clearing content#2608
Open
zjh0326 wants to merge 2 commits into
Open
feat(Textarea): add clearable styles to support clearing content#2608zjh0326 wants to merge 2 commits into
zjh0326 wants to merge 2 commits into
Conversation
- Add design tokens for clear button in _var.less - Add clear button styles in _index.less - Support hover and active states - Support dark mode with semantic variables Close Tencent#2566
16 tasks
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.
Close #2566
🤔 这个 PR 的性质是?
🔗 相关 Issue
技术规格书详见:
Textarea可清空内容功能-技术规格书.md
💡 需求背景和解决方案
问题背景
Textarea 组件目前没有清空按钮,用户需要手动全选删除,操作繁琐。与 Input 组件的
clearable功能不一致,用户体验割裂。解决方案
为 Textarea 组件添加清空按钮的样式支持,包括:
设计令牌(
_var.less):@textarea-clear-color:按钮默认颜色@textarea-clear-color-hover:按钮悬停颜色@textarea-clear-bg-color-hover:按钮悬停背景色@textarea-clear-bg-color-active:按钮点击背景色@textarea-clear-padding-right:输入框右侧内边距组件样式(
_index.less):scale(0.88)+ 背景加深API 变化
无(本 PR 只涉及样式,API 在 tdesign-vue-next 中定义)
视觉效果
效果演示
白天模式:


夜间模式:
📝 更新日志
feat(Textarea): 添加清空按钮样式支持
@textarea-clear-*.t-textarea__clear本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单