Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: input 输入框添加clearable属性并输入内容,hover时宽度进行变化 #1419

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

blank-peas
Copy link

@blank-peas blank-peas commented Jun 23, 2023

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

#3001

💡 需求背景和解决方案

修复前:

  • hover时会使得clear图标显示,宽度突然增加
    ioeu4-bm845

修复后:

  • js代码中对图标永久存在,css中对clear图标使用visibility:hidden进行显隐
    5d8n7-vuwu0

📝 更新日志

  • fix(input): input 输入框添加clearable属性并输入内容,hover时宽度进行变化

  • 本条 PR 不需要纳入 Changelog

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

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

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

opacity: 1;
visibility: visible;
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

这个 common 因为涉及到 Vue2/Vue3/React 多个框架,所以变更需谨慎。
看了下当前的变更,存在 Breaking Change,会影响 Vue2/React。有种选择:

  1. 选择一:基于当前的 CSS 内容实现效果
  2. 选择二:实在要调整 CSS,是否可以兼容变更
  3. 选择三:实在要调整 CSS,且一定存在不兼容变更(BreakingChange),则需要 3 个框架一起提 PR

Copy link
Author

Choose a reason for hiding this comment

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

选择二。发现react版本也存在此问题,故修改了公共样式,初步测了一下,可以兼容此变更。react故障演示如下:https://codesandbox.io/s/tdesign-react-demo-7ytwwz?file=/src/main.jsx

@blank-peas blank-peas force-pushed the fix/input组件clearable属性,hover时宽变化 branch from 909dbc5 to 7f58649 Compare June 25, 2023 16:57
@@ -50,3 +50,6 @@
@input-box-shadow-color-warning-focus: @warning-color-focus;
@input-border-color-error: @error-color;
@input-box-shadow-color-error-focus: @error-color-focus;

// inline
@form-inline-content-width: 200px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

改动不符合预期,会导致 autoWidth 失效

@blank-peas blank-peas force-pushed the fix/input组件clearable属性,hover时宽变化 branch from 7f58649 to f695f9d Compare June 26, 2023 14:43
@github-actions
Copy link

tdesign-vue preview 地址:(如果你有 DOM 变动请自行在对应技术栈仓库中发起 PR)
完成

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.

2 participants