Skip to content

feat(module:checkbox): redesign the checkbox group component#8932

Merged
Laffery merged 1 commit intoNG-ZORRO:masterfrom
HyperLife1119:feat/redesign-checkbox-group
Dec 15, 2024
Merged

feat(module:checkbox): redesign the checkbox group component#8932
Laffery merged 1 commit intoNG-ZORRO:masterfrom
HyperLife1119:feat/redesign-checkbox-group

Conversation

@HyperLife1119
Copy link
Copy Markdown
Collaborator

@HyperLife1119 HyperLife1119 commented Dec 14, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Application (the showcase website) / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: #4883

  • <nz-checkbox-group>ngModel 的类型为 NzCheckBoxOptionInterface[],与 antd 不一致
  • <nz-checkbox-group> 无法像 antd 那样自定义布局,需要借助 <nz-checkbox-wrapper> 组件实现自定义布局,但 <nz-checkbox-wrapper> 又不是一个控件组件,用途不大。实际上 <nz-checkbox-wrapper> 应该被实现为 <nz-checkbox-group>

What is the new behavior?

  • <nz-checkbox-group>ngModel 的类型修正为 NzCheckBoxOptionInterface['value'][]
  • <nz-checkbox-group> 支持自定义布局
  • <nz-checkbox-group> 新增 [nzOptions]
  • <nz-checkbox-group> 新增 [nzName]
  • [nz-checkbox] 新增 [nzName]
  • 弃用 <nz-checkbox-wrapper>
  • 弃用 NzCheckBoxOptionInterface,使用 NzCheckBoxOption 替代
<nz-checkbox-group [ngModel]="['A', 'B']">
  <nz-row>
    <nz-col nzSpan="8">
      <label nz-checkbox nzValue="A">A</label>
    </nz-col>
    <nz-col nzSpan="8">
      <label nz-checkbox nzValue="B">B</label>
    </nz-col>
    <nz-col nzSpan="8">
      <label nz-checkbox nzValue="C">C</label>
    </nz-col>
    <nz-col nzSpan="8">
      <label nz-checkbox nzValue="D">D</label>
    </nz-col>
    <nz-col nzSpan="8">
      <label nz-checkbox nzValue="E">E</label>
    </nz-col>
  </nz-row>
</nz-checkbox-group>

Does this PR introduce a breaking change?

  • Yes
  • No
  • <nz-checkbox-group>ngModel 的类型修改为 NzCheckBoxOptionInterface['value'][]
  • 移除 NzCheckBoxOptionInterface['checked']

Other information

@HyperLife1119 HyperLife1119 force-pushed the feat/redesign-checkbox-group branch from f6a04fc to 2dcbdd4 Compare December 14, 2024 10:15
@HyperLife1119 HyperLife1119 added Component: Checkbox 💔 Breaking Change This PR or the solution to this issue would introduce breaking changes PR: unreviewed PR: target-major labels Dec 14, 2024
@codecov
Copy link
Copy Markdown

codecov Bot commented Dec 14, 2024

Codecov Report

Attention: Patch coverage is 96.66667% with 2 lines in your changes missing coverage. Please review.

Project coverage is 91.91%. Comparing base (2e0c78d) to head (8ada51c).
Report is 12 commits behind head on master.

Files with missing lines Patch % Lines
components/checkbox/checkbox-group.component.ts 95.12% 2 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##           master    #8932   +/-   ##
=======================================
  Coverage   91.91%   91.91%           
=======================================
  Files         554      555    +1     
  Lines       19682    19697   +15     
  Branches     2936     2940    +4     
=======================================
+ Hits        18091    18105   +14     
- Misses       1265     1267    +2     
+ Partials      326      325    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@HyperLife1119 HyperLife1119 force-pushed the feat/redesign-checkbox-group branch 2 times, most recently from e6e7a6d to bff57eb Compare December 14, 2024 10:44
@HyperLife1119 HyperLife1119 added this to the v19 milestone Dec 14, 2024
Comment thread components/checkbox/checkbox-group.component.ts Outdated
Comment thread components/checkbox/tokens.ts Outdated
Comment thread components/checkbox/checkbox-group.component.ts Outdated
@HyperLife1119 HyperLife1119 force-pushed the feat/redesign-checkbox-group branch 2 times, most recently from 9b78ba2 to e124bf8 Compare December 14, 2024 14:47
@HyperLife1119 HyperLife1119 marked this pull request as draft December 14, 2024 14:54
@HyperLife1119 HyperLife1119 force-pushed the feat/redesign-checkbox-group branch from e124bf8 to a6c0a0c Compare December 14, 2024 15:14
@HyperLife1119 HyperLife1119 marked this pull request as ready for review December 14, 2024 15:14
Comment thread components/checkbox/checkbox-group.component.ts Outdated
@HyperLife1119 HyperLife1119 force-pushed the feat/redesign-checkbox-group branch from a6c0a0c to 8ada51c Compare December 15, 2024 02:37
Copy link
Copy Markdown
Collaborator

@Laffery Laffery left a comment

Choose a reason for hiding this comment

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

LGTM

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

Labels

💔 Breaking Change This PR or the solution to this issue would introduce breaking changes Component: Checkbox PR: reviewed-approved PR: target-major

Projects

None yet

Development

Successfully merging this pull request may close these issues.

nz-checkbox-wrapper 不支持 [formControlName] 这种响应表单的使用规范

2 participants