feat(checkbox): support button-style variant for checkbox group - #2600
feat(checkbox): support button-style variant for checkbox group#2600ceilf6 wants to merge 2 commits into
Conversation
Add a button variant for the checkbox group (issue Tencent#2562), mirroring the existing radio-button pattern so the two components stay consistent. - style: add t-checkbox-button + group modifiers (outline / filled / primary-filled / vertical), s/m/l sizes, and full states including checked / indeterminate / disabled / disabled-checked - style: reuse global tokens via new @checkbox-button-* semantics in _var.less; multi-select filled variant uses per-button background instead of radio's sliding bg-block - docs: add button-style sections to web api (zh/en) and design doc Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@ceilf6/repo-guard CR |
代码评审报告: feat(checkbox): support button-style variant for checkbox group风险等级: 中 级联分析
问题发现
行级发现
Karpathy 评审
缺失覆盖
|
There was a problem hiding this comment.
Pull request overview
This PR adds a button-style visual variant for checkbox groups at the tdesign-common layer by introducing the required Less tokens/styles and updating the design/API docs to include the new variant’s documentation placeholders, aligning behavior and naming with the existing radio-button patterns.
Changes:
- Added button-style checkbox group semantic variables (
@checkbox-button-*) to support outline/filled/primary-filled, sizes, and full state coverage. - Implemented button-style checkbox group styles in
checkbox/_index.less, including outline border-collapsing behavior, filled variants, and a vertical layout mode. - Updated checkbox design docs and API docs (CN/EN) with new sections and example placeholders for button-style checkbox groups.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| style/web/components/checkbox/_var.less | Introduces semantic tokens for button-style checkbox groups (colors/sizes/padding/transition). |
| style/web/components/checkbox/_index.less | Adds the core button-style checkbox group styling (outline/filled/primary-filled, vertical, sizes). |
| docs/web/design/checkbox.md | Documents button-style checkbox group usage scenarios and variant descriptions. |
| docs/web/api/checkbox.md | Adds CN API doc sections and placeholders for button-style group examples. |
| docs/web/api/checkbox.en-US.md | Adds EN API doc sections and placeholders for button-style group examples. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| width: 100%; | ||
| border-right: @checkbox-button-border; | ||
| border-right-color: @checkbox-button-border-color-default; | ||
| margin-top: -1px; | ||
|
|
||
| &:first-child { | ||
| margin-top: 0; | ||
| border-radius: @checkbox-button-border-radius @checkbox-button-border-radius 0 0; | ||
| } | ||
|
|
||
| &:last-child { | ||
| border-radius: 0 0 @checkbox-button-border-radius @checkbox-button-border-radius; | ||
| } | ||
|
|
||
| &.@{prefix}-is-checked, | ||
| &.@{prefix}-is-indeterminate { | ||
| border-color: @checkbox-button-border-color-checked; | ||
| border-right-color: @checkbox-button-border-color-checked; | ||
| z-index: 1; | ||
|
|
||
| +.@{checkbox-button--cls} { | ||
| border-left: @checkbox-button-border; | ||
| border-left-color: @checkbox-button-border-color-default; | ||
| } | ||
| } |
There was a problem hiding this comment.
Good catch — fixed in f704c64. The vertical+outline block no longer groups is-checked and is-indeterminate under the checked token. Instead:
- A shared rule handles only stacking + sibling border-left (
z-index: 1+ re-add next sibling's left border), applied to checked / indeterminate / disabled-checked / disabled-indeterminate. - Separate
&.is-checked:not(.is-disabled)and&.is-indeterminate:not(.is-disabled)rules set each state's own border-color token, so indeterminate uses@checkbox-button-border-color-indeterminateand disabled-checked is no longer overridden (it keeps the disabled border from the horizontal outline rule).
The :not(.is-disabled) raises specificity just enough to win over the vertical base's border-right-color: default (same 4-class specificity, source order) without touching the disabled branch.
- vertical outline: split is-checked / is-indeterminate so each uses its own border-color token; scope color override with :not(.is-disabled) so disabled-checked keeps its disabled border (Copilot review) - primary-filled indeterminate bg: use @brand-color-6 directly instead of reusing @brand-color-hover, decoupling indeterminate from hover semantics - document the button-variant class-naming contract (mirrors radio-button) to prevent consumers from mis-stitching __outline vs --filled prefixes - comment why vertical+filled :last-child uses border:0 vs outline's radius - verified alternating [checked, unchecked, checked] in filled/primary-filled Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Thanks for the detailed review — all findings addressed in `f704c640`. 1. [高] modifier class 命名契约不统一 2. [中] 交替选中态视觉验证 3. [中] indeterminate 复用 `@brand-color-hover` 语义 4. [低] vertical+filled `:last-child` 与 outline 不对称 Copilot inline (line 134) `stylelint` / `prettier` / `lessc` still pass. |
|
谢谢参与犀牛鸟活动，讨论后这个issue 决定采纳 #2618 继续推进 |
背景
Closes #2562
多选框组支持按钮风格——选项以标签式按钮横向/纵向排列，选中项以深色填充突出，未选中项为浅色描边。适用于 CRM/OA 系统的权限分配、功能开关等选项较多、需要强反馈的场景（见 issue 描述）。
改动内容
在
tdesign-common中补齐按钮风格的 样式与设计文档（UI 设计部分），参考已有的radio-button实现以保持两个组件一致。样式
style/web/components/checkbox/t-checkbox-button类，以及在t-checkbox-group上的修饰符：__outline（描边）、--filled（填充-默认）、--primary-filled（主色填充）、--vertical（纵向）@checkbox-button-*语义变量（命名与@radio-button-*对齐）brand-hover区分，反色字仍可读文档
docs/web/api/checkbox.md+checkbox.en-US.md：新增「按钮风格的多选框组」「不同尺寸」「不同形态」示例占位（{{ button }}/{{ button-size }}/{{ button-variant }}），具体_example/文件由各框架仓库填充docs/web/design/checkbox.md：新增按钮风格的使用场景与三种形态说明范围说明
按 tdesign-common 的职责划分，本仓库只承载样式与设计文档；组件的 props / template / example 代码将随后在
tdesign-vue-next/tdesign-react仓库消费这些样式（后续 PR）。校验
npx stylelint style/web/components/checkbox/*.less通过npx prettier --check通过（含 markdown）lessc编译通过，生成的 CSS 选择器符合预期🤖 Generated with Claude Code