Skip to content

feat(descriptions): improve borderless layout aesthetics - #2577

Open
Actv6 wants to merge 1 commit into
Tencent:developfrom
Actv6:feature/web/descriptions
Open

Actv6 wants to merge 1 commit into
Tencent:developfrom
Actv6:feature/web/descriptions

Conversation

@Actv6

@Actv6 Actv6 commented Jul 1, 2026

Copy link
Copy Markdown
  • add label min-width to align label endings across columns
  • add label gap and color tokens for better visual hierarchy
  • adjust borderless padding for improved vertical rhythm

close #2431

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

close Tencent/tdesign-vue-next#2431

💡 需求背景和解决方案

问题:Descriptions 组件在无边框模式下存在三处美感缺陷,导致视觉与 antd / element-plus 差距明显:

  1. label 列没有统一最小宽度,多列布局下每行 label 结束边不对齐,视觉错乱。
  2. label 使用 @text-color-placeholder 过淡,识别度弱,不像"字段名"。
  3. size=m/s 上下 padding 过小,行与行贴太近,缺少呼吸感。

方案:仅修改 style/web/components/descriptions 下的样式与变量,向前兼容,不改 API:

  • _var.less 新增三个 token:
    • @descriptions-item-label-min-width: 96px(label 最小宽度)
    • @descriptions-item-label-gap: @comp-paddingLR-l(label 与 content 间距)
    • @descriptions-item-label-color: @text-color-secondary(label 颜色上调一档)
  • _var.less 调整无边框 padding:m 上调到 @comp-paddingTB-l 0,s 上调到 @comp-paddingTB-m 0。
  • _index.less 让 label 应用 min-width / vertical-align: top / white-space: nowrap;无边框分支用新 gap token。

兼容性:有边框模式(bordered)不受影响;fixed 与 column 用法不受影响;仅视觉密度与 label 视觉权重发生变化。

📝 更新日志

  • style(descriptions): 优化无边框模式下多列 label 结束边对齐、label 颜色识别度与行间距,提升视觉美感

  • 本条 PR 不需要纳入 Changelog

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

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

- add label min-width to align label endings across columns
- add label gap and color tokens for better visual hierarchy
- adjust borderless padding for improved vertical rhythm

close Tencent#2431
@Actv6

Actv6 commented Jul 1, 2026

Copy link
Copy Markdown
Author

本 PR 仅修改 tdesign-common 的 Less 样式(style/web/components/descriptions/),未涉及任何 .ts/.tsx 文件。

失败的 CI component-ci / tdesign-react (lint) 报错均来自 tdesign-react 仓库的 FormList.tsx / getScrollParent.ts / toolcall/types.ts,属于 tdesign-react 存量 prettier 债,与本 PR 无关,麻烦维护者判断是否可忽略此项,谢谢!

@Wesley-0808

Copy link
Copy Markdown
Collaborator

本 PR 仅修改 tdesign-common 的 Less 样式(style/web/components/descriptions/),未涉及任何 .ts/.tsx 文件。

失败的 CI component-ci / tdesign-react (lint) 报错均来自 tdesign-react 仓库的 FormList.tsx / getScrollParent.ts / toolcall/types.ts,属于 tdesign-react 存量 prettier 债,与本 PR 无关,麻烦维护者判断是否可忽略此项,谢谢!

ci应该是react仓库那边的问题

@Actv6

Actv6 commented Jul 1, 2026 via email

Copy link
Copy Markdown
Author

@liweijie0812

Copy link
Copy Markdown
Collaborator

本 PR 仅修改 tdesign-common 的 Less 样式(style/web/components/descriptions/),未涉及任何 .ts/.tsx 文件。

失败的 CI component-ci / tdesign-react (lint) 报错均来自 tdesign-react 仓库的 FormList.tsx / getScrollParent.ts / toolcall/types.ts,属于 tdesign-react 存量 prettier 债,与本 PR 无关,麻烦维护者判断是否可忽略此项,谢谢!

react那边在修复了,忽略它

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

TDesign Component Repositories CI Test Open

Component Lint Test Build Preview
tdesign-vue ✅ ✅ ✅ 👀
tdesign-vue-next ✅ ✅ ✅ 👀
tdesign-react ✅ ✅ ✅ 👀
tdesign-mobile-vue ✅ ✅ ✅ 👀
tdesign-mobile-react ✅ ✅ ✅ 👀

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

Labels

None yet

Projects

None yet

4 participants