Skip to content

Commit 3c09507

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:button): support standalone component (#8275)
1 parent d2f1d30 commit 3c09507

7 files changed

Lines changed: 58 additions & 70 deletions

File tree

‎components/button/button-group.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ export type NzButtonGroupSize = 'large' | 'default' | 'small';
3030
'[class.ant-btn-group-rtl]': `dir === 'rtl'`
3131
},
3232
preserveWhitespaces: false,
33-
template: ` <ng-content></ng-content> `
33+
template: ` <ng-content></ng-content> `,
34+
standalone: true
3435
})
3536
export class NzButtonGroupComponent implements OnDestroy, OnInit {
3637
@Input() nzSize: NzButtonGroupSize = 'default';

‎components/button/button-group.spec.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { NzButtonGroupComponent, NzButtonGroupSize } from './button-group.compon
99

1010
describe('button-group', () => {
1111
it('should button group size work', () => {
12-
const testBed = createComponentBed(TestButtonGroupComponent, { declarations: [NzButtonGroupComponent] });
12+
const testBed = createComponentBed(TestButtonGroupComponent, { imports: [NzButtonGroupComponent] });
1313
const buttonGroupElement = testBed.debugElement.query(By.directive(NzButtonGroupComponent)).nativeElement;
1414
expect(buttonGroupElement.className).toBe('ant-btn-group');
1515
testBed.component.nzSize = 'large';
@@ -22,8 +22,7 @@ describe('button-group', () => {
2222

2323
it('should RTL classname work', fakeAsync(() => {
2424
const testBed = createComponentBed(NzTestButtonGroupRtlComponent, {
25-
declarations: [NzButtonGroupComponent],
26-
imports: [BidiModule]
25+
imports: [BidiModule, NzButtonGroupComponent]
2726
});
2827
const buttonGroupElement = testBed.debugElement.query(By.directive(NzButtonGroupComponent)).nativeElement;
2928
expect(buttonGroupElement.className).toBe('ant-btn-group ant-btn-group-rtl');

‎components/button/button.component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7+
import { NgIf } from '@angular/common';
78
import {
89
AfterContentInit,
910
AfterViewInit,
@@ -28,7 +29,7 @@ import { filter, startWith, takeUntil } from 'rxjs/operators';
2829
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
2930
import { BooleanInput } from 'ng-zorro-antd/core/types';
3031
import { InputBoolean } from 'ng-zorro-antd/core/util';
31-
import { NzIconDirective } from 'ng-zorro-antd/icon';
32+
import { NzIconDirective, NzIconModule } from 'ng-zorro-antd/icon';
3233

3334
export type NzButtonType = 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
3435
export type NzButtonShape = 'circle' | 'round' | null;
@@ -65,7 +66,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
6566
'[class.ant-btn-icon-only]': `iconOnly`,
6667
'[attr.tabindex]': 'disabled ? -1 : (tabIndex === null ? null : tabIndex)',
6768
'[attr.disabled]': 'disabled || null'
68-
}
69+
},
70+
imports: [NzIconModule, NgIf],
71+
standalone: true
6972
})
7073
export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, AfterContentInit, OnInit {
7174
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

‎components/button/button.module.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,16 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { CommonModule } from '@angular/common';
86
import { NgModule } from '@angular/core';
97

108
import { ɵNzTransitionPatchModule as NzTransitionPatchModule } from 'ng-zorro-antd/core/transition-patch';
119
import { NzWaveModule } from 'ng-zorro-antd/core/wave';
12-
import { NzIconModule } from 'ng-zorro-antd/icon';
1310

1411
import { NzButtonGroupComponent } from './button-group.component';
1512
import { NzButtonComponent } from './button.component';
1613

1714
@NgModule({
18-
declarations: [NzButtonComponent, NzButtonGroupComponent],
19-
exports: [NzButtonComponent, NzButtonGroupComponent, NzTransitionPatchModule, NzWaveModule],
20-
imports: [BidiModule, CommonModule, NzWaveModule, NzIconModule, NzTransitionPatchModule]
15+
imports: [NzButtonComponent, NzButtonGroupComponent],
16+
exports: [NzButtonComponent, NzButtonGroupComponent, NzTransitionPatchModule, NzWaveModule]
2117
})
2218
export class NzButtonModule {}

‎components/button/button.spec.ts‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe('button', () => {
1313
let testBed: ComponentBed<TestButtonComponent>;
1414
let buttonElement: HTMLButtonElement;
1515
beforeEach(() => {
16-
testBed = createComponentBed(TestButtonComponent, { declarations: [NzButtonComponent] });
16+
testBed = createComponentBed(TestButtonComponent, { imports: [NzButtonComponent] });
1717
buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
1818
});
1919

@@ -87,8 +87,7 @@ describe('button', () => {
8787
describe('loading icon', () => {
8888
it('should hide icon when loading correct', fakeAsync(() => {
8989
const testBed = createComponentBed(TestButtonBindingComponent, {
90-
imports: [NzIconTestModule],
91-
declarations: [NzButtonComponent]
90+
imports: [NzIconTestModule, NzButtonComponent]
9291
});
9392
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
9493
expect(buttonElement.classList.contains('ant-btn-loading')).toBe(false);
@@ -111,8 +110,7 @@ describe('button', () => {
111110
describe('insert span', () => {
112111
it('should insert span correctly', fakeAsync(() => {
113112
const testBed = createComponentBed(TestButtonWithIconComponent, {
114-
imports: [NzIconTestModule],
115-
declarations: [NzButtonComponent]
113+
imports: [NzIconTestModule, NzButtonComponent]
116114
});
117115
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
118116
testBed.fixture.detectChanges();
@@ -125,53 +123,47 @@ describe('button', () => {
125123
describe('icon only', () => {
126124
it('should icon only works correctly', fakeAsync(() => {
127125
const testBed = createComponentBed(TestButtonIconOnlyComponent, {
128-
imports: [NzIconTestModule],
129-
declarations: [NzButtonComponent]
126+
imports: [NzIconTestModule, NzButtonComponent]
130127
});
131128
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
132129
testBed.fixture.detectChanges();
133130
expect(buttonElement.classList).toContain('ant-btn-icon-only');
134131
}));
135132
it('should icon only works correctly with any tag', fakeAsync(() => {
136133
const testBed = createComponentBed(TestButtonIconOnlyWithAnyTagComponent, {
137-
imports: [NzIconTestModule],
138-
declarations: [NzButtonComponent]
134+
imports: [NzIconTestModule, NzButtonComponent]
139135
});
140136
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
141137
testBed.fixture.detectChanges();
142138
expect(buttonElement.classList).toContain('ant-btn-icon-only');
143139
}));
144140
it('should icon only works correctly with any Comment', fakeAsync(() => {
145141
const testBed = createComponentBed(TestButtonIconOnlyWithCommentComponent, {
146-
imports: [NzIconTestModule],
147-
declarations: [NzButtonComponent]
142+
imports: [NzIconTestModule, NzButtonComponent]
148143
});
149144
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
150145
testBed.fixture.detectChanges();
151146
expect(buttonElement.classList).toContain('ant-btn-icon-only');
152147
}));
153148
it('should icon only works correctly with any text', fakeAsync(() => {
154149
const testBed = createComponentBed(TestButtonIconOnlyWithTextComponent, {
155-
imports: [NzIconTestModule],
156-
declarations: [NzButtonComponent]
150+
imports: [NzIconTestModule, NzButtonComponent]
157151
});
158152
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
159153
testBed.fixture.detectChanges();
160154
expect(buttonElement.classList).not.toContain('ant-btn-icon-only');
161155
}));
162156
it('should icon only works correctly without nz-icon', fakeAsync(() => {
163157
const testBed = createComponentBed(TestButtonIconOnlyWithoutIconComponent, {
164-
imports: [NzIconTestModule],
165-
declarations: [NzButtonComponent]
158+
imports: [NzIconTestModule, NzButtonComponent]
166159
});
167160
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
168161
testBed.fixture.detectChanges();
169162
expect(buttonElement.classList).not.toContain('ant-btn-icon-only');
170163
}));
171164
it('should icon only loading works correctly', () => {
172165
const testBed = createComponentBed(TestButtonIconOnlyLoadingComponent, {
173-
imports: [NzIconTestModule],
174-
declarations: [NzButtonComponent]
166+
imports: [NzIconTestModule, NzButtonComponent]
175167
});
176168
testBed.fixture.detectChanges();
177169
const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
@@ -184,8 +176,7 @@ describe('button', () => {
184176
let buttonElement: HTMLButtonElement;
185177
beforeEach(() => {
186178
testBed = createComponentBed(TestButtonRtlComponent, {
187-
declarations: [NzButtonComponent],
188-
imports: [BidiModule]
179+
imports: [BidiModule, NzButtonComponent, NzButtonComponent]
189180
});
190181
buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
191182
});
@@ -204,7 +195,7 @@ describe('button', () => {
204195
let buttonElement: HTMLButtonElement;
205196

206197
beforeEach(() => {
207-
testBed = createComponentBed(TestButtonComponent, { declarations: [NzButtonComponent] });
198+
testBed = createComponentBed(TestButtonComponent, { imports: [NzButtonComponent] });
208199
buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
209200
});
210201

@@ -235,7 +226,7 @@ describe('anchor', () => {
235226
let anchorElement: HTMLAnchorElement;
236227

237228
beforeEach(() => {
238-
testBed = createComponentBed(TestAnchorComponent, { declarations: [NzButtonComponent] });
229+
testBed = createComponentBed(TestAnchorComponent, { imports: [NzButtonComponent] });
239230
anchorElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
240231
});
241232

‎components/button/doc/index.en-US.md‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,25 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
3232

3333
## API
3434

35-
### [nz-button]
35+
### [nz-button]:standalone
3636

3737
> Note：nz-button is a Directive, it accepts all props which are supported by [native button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).
3838
3939
To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`disabled`.
4040

41-
| Property | Description | Type | Default | Global Config |
42-
| -------- | ----------- | ---- | ------- | ------------- |
43-
| `[disabled]` | prevents a user from interacting with the button | `boolean` | `false` |
44-
| `[nzGhost]` | make background transparent and invert text and border colors | `boolean` | `false` |
45-
| `[nzLoading]` | set the loading status of button | `boolean` | `false` |
46-
| `[nzShape]` | can be set to `circle` `round` or omitted | `'circle'\|'round'` | - | |
47-
| `[nzSize]` | can be set to `small` `large` or omitted | `'large'\|'small'\|'default'` | `'default'` | ✅ |
48-
| `[nzType]` | can be set to `primary` `dashed` `text` `link` or omitted (meaning `default`) | `'primary'\|'dashed'\|'link'\|'text'` | - |
49-
| `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` |
50-
| `[nzDanger]` | set the danger status of button | boolean | `false` | |
51-
52-
53-
### nz-button-group
54-
55-
| Property | Description | Type | Default | Global Config |
56-
| -------- | ----------- | ---- | ------- | ------------- |
57-
| `[nzSize]` | can be set to `small` `large` or omitted | `'large'\|'small'\|'default'` | `'default'` | - |
41+
| Property | Description | Type | Default | Global Config |
42+
| ------------- | ----------------------------------------------------------------------------- | ------------------------------------- | ----------- | ------------- |
43+
| `[disabled]` | prevents a user from interacting with the button | `boolean` | `false` |
44+
| `[nzGhost]` | make background transparent and invert text and border colors | `boolean` | `false` |
45+
| `[nzLoading]` | set the loading status of button | `boolean` | `false` |
46+
| `[nzShape]` | can be set to `circle` `round` or omitted | `'circle'\|'round'` | - | |
47+
| `[nzSize]` | can be set to `small` `large` or omitted | `'large'\|'small'\|'default'` | `'default'` | ✅ |
48+
| `[nzType]` | can be set to `primary` `dashed` `text` `link` or omitted (meaning `default`) | `'primary'\|'dashed'\|'link'\|'text'` | - |
49+
| `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` |
50+
| `[nzDanger]` | set the danger status of button | boolean | `false` | |
51+
52+
### nz-button-group:standalone
53+
54+
| Property | Description | Type | Default | Global Config |
55+
| ---------- | ---------------------------------------- | ----------------------------- | ----------- | ------------- |
56+
| `[nzSize]` | can be set to `small` `large` or omitted | `'large'\|'small'\|'default'` | `'default'` | - |

‎components/button/doc/index.zh-CN.md‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ title: Button
55
subtitle: 按钮
66
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
77
---
8+
89
按钮用于开始一个即时操作。
910

1011
## 何时使用
@@ -32,29 +33,27 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
3233

3334
## API
3435

35-
### [nz-button]
36+
### [nz-button]:standalone
3637

3738
> 注意：nz-button 是一个 Directive，除以下表格之外还支持例如 disabled 等原生 button 的[所有属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button)。
3839
3940
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`nzType` -> `nzShape` -> `nzSize` -> `nzLoading` -> `disabled`
4041

4142
按钮的属性说明如下：
4243

43-
44-
| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
45-
| --- | --- | --- | --- | --- |
46-
| `[disabled]` | 禁止与button交互 | `boolean` | `false` |
47-
| `[nzGhost]` | 幽灵属性，使按钮背景透明 | `boolean` | `false` |
48-
| `[nzLoading]` | 设置按钮载入状态 | `boolean` | `false` |
49-
| `[nzShape]` | 设置按钮形状，可选值为 `circle` `round` 或者不设 | `'circle'\|'round'` | - | |
50-
| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'\|'small'\|'default'` | `'default'` | ✅ |
51-
| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `text` `link` 或者不设 | `'primary'\|'dashed'\|'link'\|'text'` | - |
52-
| `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` |
53-
| `[nzDanger]` | 设置危险按钮 | boolean | `false` | |
54-
55-
56-
### nz-button-group
57-
58-
| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
59-
| --- | --- | --- | --- | --- |
60-
| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'\|'small'\|'default'` | `'default'` | - |
44+
| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
45+
| ------------- | ---------------------------------------------------------------- | ------------------------------------- | ----------- | ------------ |
46+
| `[disabled]` | 禁止与 button 交互 | `boolean` | `false` |
47+
| `[nzGhost]` | 幽灵属性，使按钮背景透明 | `boolean` | `false` |
48+
| `[nzLoading]` | 设置按钮载入状态 | `boolean` | `false` |
49+
| `[nzShape]` | 设置按钮形状，可选值为 `circle` `round` 或者不设 | `'circle'\|'round'` | - | |
50+
| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'\|'small'\|'default'` | `'default'` | ✅ |
51+
| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `text` `link` 或者不设 | `'primary'\|'dashed'\|'link'\|'text'` | - |
52+
| `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` |
53+
| `[nzDanger]` | 设置危险按钮 | boolean | `false` | |
54+
55+
### nz-button-group:standalone
56+
57+
| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
58+
| ---------- | ----------------------------------------------- | ----------------------------- | ----------- | ------------ |
59+
| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'\|'small'\|'default'` | `'default'` | - |

0 commit comments

Comments
 (0)