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: 修复select-input使用valueDisplay渲染自定义tag筛选项展示居中错误 #1503

Merged
merged 2 commits into from
Sep 20, 2022
Merged

fix: 修复select-input使用valueDisplay渲染自定义tag筛选项展示居中错误 #1503

merged 2 commits into from
Sep 20, 2022

Conversation

AqingCyan
Copy link
Contributor

@AqingCyan AqingCyan commented Sep 19, 2022

tag组件采用display: inline-flex 布局,在selectinput使用valueDisplay渲染自定义tag筛选项时,没有父元素造成垂直居中失效

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

💡 需求背景和解决方案

tag组件的children使用了display: inline-flex属性,在selectinput中使用valueDisplay自定义筛选项存在居中展示错误。而直接使用tag属性则正常。
排查发现由于使用tag属性时,在外层包裹了span标签,保证了display: inline-flex展示不受影响。而且tag组件的源码中也有

{maxWidth ? <span className={`${tagClassPrefix}--text`}>{children || content}</span> : children || content}

使用span包裹children的写法,因此改为

<span className={maxWidth ? `${tagClassPrefix}--text` : undefined}>{children || content}</span>

既保证了居中展示稳定,且组件结构一致。

📝 更新日志

  • fix(SelectInput): 修复select-input使用valueDisplay渲染自定义tag筛选项展示居中错误

  • 本条 PR 不需要纳入 Changelog

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

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

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 19, 2022

完成

@honkinglin
Copy link
Collaborator

snapshot 似乎没更新完整

@AqingCyan
Copy link
Contributor Author

snapshot 似乎没更新完整

比较奇怪,我本地进行npm run test:update 的时候,总是在date-picker的 disableDate case出现问题。我不清楚这是否是我本机的问题。

@honkinglin
Copy link
Collaborator

snapshot 似乎没更新完整

比较奇怪,我本地进行npm run test:update 的时候,总是在date-picker的 disableDate case出现问题。我不清楚这是否是我本机的问题。

是最新的develop 分支切出来的吗,可以同步下远端代码重新切分支事实

@AqingCyan
Copy link
Contributor Author

snapshot 似乎没更新完整

比较奇怪,我本地进行npm run test:update 的时候,总是在date-picker的 disableDate case出现问题。我不清楚这是否是我本机的问题。

是最新的develop 分支切出来的吗,可以同步下远端代码重新切分支事实

好滴,我尝试一下。不过我的确是刚刚从develop分支checkout出来的。🫣

@AqingCyan
Copy link
Contributor Author

image

so sad,可能真的是我本机存在问题,我直接clone下了原仓库执行 `npm run test`,得到了如图错误。只有该case不通过。

我的电脑 MacBook Pro (13-inch, M1, 2020),node 版本 v18.5.0

@honkinglin
Copy link
Collaborator

image

so sad,可能真的是我本机存在问题,我直接clone下了原仓库执行 npm run test,得到了如图错误。只有该case不通过。
我的电脑 MacBook Pro (13-inch, M1, 2020),node 版本 v18.5.0

这个是dayjs的报错,难道是版本不对?有重新装一下依赖嘛

@honkinglin
Copy link
Collaborator

今天要发版本,我先自己处理了哈
#1507

AqingCyan and others added 2 commits September 20, 2022 12:38
tag组件采用display: inline-flex 布局,在selectinput使用valueDisplay渲染自定义tag筛选项时,没有父元素造成垂直居中失效

fix #1463
@uyarn
Copy link
Collaborator

uyarn commented Sep 20, 2022

今天要发版本,我先自己处理了哈 #1507

才看到 我帮他更新snapshot了.. @HQ-Lin 合他这个吧

@uyarn uyarn changed the title fix(tag component): 修复selectinput使用valueDisplay渲染自定义tag筛选项展示居中错误 fix: 修复select-input使用valueDisplay渲染自定义tag筛选项展示居中错误 Sep 20, 2022
@uyarn uyarn merged commit 8a50f86 into Tencent:develop Sep 20, 2022
@AqingCyan
Copy link
Contributor Author

今天要发版本,我先自己处理了哈 #1507

三克油,我再排查一下我本地的问题

@github-actions github-actions bot mentioned this pull request Sep 20, 2022
16 tasks
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.

3 participants