feat(module:tag): support status colors (NG-ZORRO#4628)

close NG-ZORRO#4622, close NG-ZORRO#4413
Ricbet · Apr 9, 2020 · 0a1d0a6 · 0a1d0a6
1 parent 97c5b49
commit 0a1d0a6
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/components/tag/demo/status.md b/components/tag/demo/status.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 预设状态的标签
+  en-US: Status Tag
+---
+
+## zh-CN
+
+预设五种状态颜色，可以通过设置 `nzColor` 为 `success`、 `processing`、`error`、`default`、`warning` 来代表不同的状态。
+
+## en-US
+
+We preset five different colors, you can set `nzColor` property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status.
diff --git a/components/tag/demo/status.ts b/components/tag/demo/status.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-tag-status',
+  template: `
+    <nz-tag nzColor="success">success</nz-tag>
+    <nz-tag nzColor="processing">processing</nz-tag>
+    <nz-tag nzColor="error">error</nz-tag>
+    <nz-tag nzColor="default">default</nz-tag>
+    <nz-tag nzColor="warning">warning</nz-tag>
+  `
+})
+export class NzDemoTagStatusComponent {}
diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts
@@ -53,7 +53,11 @@ export class NzTagComponent implements OnInit, OnChanges {
     if (!color) {
       return false;
     }
-    return /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(color);
+
+    return (
+      /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(color) ||
+      /^(success|processing|error|default|warning)$/.test(color)
+    );
   }
 
   private updateClassMap(): void {

diff --git a/components/tag/nz-tag.spec.ts b/components/tag/nz-tag.spec.ts
@@ -74,6 +74,19 @@ describe('tag', () => {
       expect(tag.nativeElement.classList).toContain('ant-tag-green');
       expect(tag.nativeElement.style.backgroundColor).toBe('');
     });
+
+    it('should status color work', () => {
+      fixture.detectChanges();
+      testComponent.color = 'success';
+      fixture.detectChanges();
+      expect(tag.nativeElement.classList).toContain('ant-tag-success');
+      testComponent.color = 'processing';
+      fixture.detectChanges();
+      expect(tag.nativeElement.classList).toContain('ant-tag-processing');
+      testComponent.color = 'invalid';
+      fixture.detectChanges();
+      expect(tag.nativeElement.classList).not.toContain('ant-tag-invalid');
+    });
     it('issues #1176', () => {
       testComponent.color = 'green';
       fixture.detectChanges();