fix(module:tag): fix default color when empty color values (#1256)

NG-ZORRO · Apr 4, 2018 · ba3a323 · ba3a323
1 parent 7b3d70c
commit ba3a323
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts
@@ -124,10 +124,11 @@ export class NzTagComponent implements OnInit, AfterViewInit {
   }
 
   updateClassMap(): void {
+    const isPresetColor = this.isPresetColor(this.nzColor);
     this.classMap = {
       [ `ant-tag` ]                  : true,
-      [ `ant-tag-has-color` ]        : this.isPreset === false,
-      [ `ant-tag-${this.nzColor}` ]  : this.isPreset === true,
+      [ `ant-tag-has-color` ]        : this.nzColor && !isPresetColor,
+      [ `ant-tag-${this.nzColor}` ]  : isPresetColor,
       [ `ant-tag-checkable` ]        : this.nzMode === 'checkable',
       [ `ant-tag-checkable-checked` ]: this.nzChecked
     };

diff --git a/components/tag/nz-tag.spec.ts b/components/tag/nz-tag.spec.ts
@@ -60,7 +60,7 @@ describe('tag', () => {
     }));
     it('should color work', () => {
       fixture.detectChanges();
-      expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-has-color');
+      expect(tag.nativeElement.firstElementChild.classList).not.toContain('ant-tag-has-color');
       testComponent.color = 'green';
       fixture.detectChanges();
       expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-green');
@@ -73,6 +73,17 @@ describe('tag', () => {
       expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-green');
       expect(tag.nativeElement.firstElementChild.style.backgroundColor).toBe('');
     });
+    it('issues #1176', () => {
+      testComponent.color = 'green';
+      fixture.detectChanges();
+      expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-green');
+      testComponent.color = '';
+      fixture.detectChanges();
+      expect(tag.nativeElement.firstElementChild.classList).not.toContain('ant-tag-has-color');
+      testComponent.color = undefined;
+      fixture.detectChanges();
+      expect(tag.nativeElement.firstElementChild.classList).not.toContain('ant-tag-has-color');
+    });
   });
   describe('prevent tag', () => {
     let fixture;