Merge pull request #2279 from miqh/fix/tag-disable

fix(tag): disable state (#2061)

Author: zvonimirfras

src/tag/tag-filter.component.spec.ts

@@ -0,0 +1,75 @@
+import { TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { Component } from "@angular/core";
+
+import { IconModule } from "../icon";
+import { TagFilter } from "./tag-filter.component";
+
+@Component({
+	template: `
+	<ibm-tag-filter [disabled]="disabled">TagFilter</ibm-tag-filter>`
+})
+class TagFilterTest {
+	disabled = false;
+}
+
+describe("TagFilter", () => {
+	let fixture, debugElement;
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [
+				TagFilter,
+				TagFilterTest
+			],
+			imports: [
+				IconModule
+			]
+		});
+	});
+
+	it("should call onClick on label click", () => {
+		fixture = TestBed.createComponent(TagFilterTest);
+		debugElement = fixture.debugElement.query(By.css(".bx--tag__label"));
+		fixture.detectChanges();
+		spyOn(debugElement.componentInstance.click, "emit");
+		debugElement.nativeElement.click();
+		fixture.detectChanges();
+		expect(debugElement.componentInstance.click.emit).toHaveBeenCalledWith({ action: "click" });
+	});
+
+	it("should call both onClick and onClose on close icon click", () => {
+		fixture = TestBed.createComponent(TagFilterTest);
+		debugElement = fixture.debugElement.query(By.css(".bx--tag__close-icon"));
+		fixture.detectChanges();
+		spyOn(debugElement.componentInstance.close, "emit");
+		spyOn(debugElement.componentInstance.click, "emit");
+		debugElement.nativeElement.click();
+		fixture.detectChanges();
+		expect(debugElement.componentInstance.close.emit).toHaveBeenCalled();
+		expect(debugElement.componentInstance.click.emit).toHaveBeenCalledWith({ action: "close" });
+	});
+
+	it("should not call onClick when disabled", () => {
+		fixture = TestBed.createComponent(TagFilterTest);
+		fixture.componentInstance.disabled = true;
+		debugElement = fixture.debugElement.query(By.css(".bx--tag__label"));
+		fixture.detectChanges();
+		spyOn(debugElement.componentInstance.click, "emit");
+		debugElement.nativeElement.click();
+		fixture.detectChanges();
+		expect(debugElement.componentInstance.click.emit).not.toHaveBeenCalled();
+	});
+
+	it("should not call onClick nor onClose when disabled", () => {
+		fixture = TestBed.createComponent(TagFilterTest);
+		fixture.componentInstance.disabled = true;
+		debugElement = fixture.debugElement.query(By.css(".bx--tag__close-icon"));
+		fixture.detectChanges();
+		spyOn(debugElement.componentInstance.close, "emit");
+		spyOn(debugElement.componentInstance.click, "emit");
+		debugElement.nativeElement.click();
+		fixture.detectChanges();
+		expect(debugElement.componentInstance.close.emit).not.toHaveBeenCalled();
+		expect(debugElement.componentInstance.click.emit).not.toHaveBeenCalled();
+	});
+});

src/tag/tag-filter.component.ts

@@ -48,7 +48,9 @@ export class TagFilter extends Tag {
 
 	onClick(event: any) {
 		event.stopImmediatePropagation();
-		this.click.emit({ action: "click" });
+		if (!this.disabled) {
+			this.click.emit({ action: "click" });
+		}
 	}
 
 	onClose(event: any) {
@@ -58,7 +60,7 @@ export class TagFilter extends Tag {
 	}
 
 	@HostBinding("attr.class") get attrClass() {
-		return `bx--tag bx--tag--filter bx--tag--${this.type} ${this.class}`;
+		return `bx--tag bx--tag--filter bx--tag--${this.type} ${this.class}${this.disabled ? " bx--tag--disabled" : ""}`;
 	}
 
 	@HostBinding("attr.aria-label") get attrAriaLabel() {

src/tag/tag.stories.ts

@@ -42,6 +42,12 @@ storiesOf("Components|Tag", module)
 				title="Filter"
 				closeButtonLabel="Clear"
 			>filter</ibm-tag-filter>
+			<ibm-tag-filter
+				type="blue"
+				title="Disabled filter"
+				closeButtonLabel="Clear"
+				[disabled]="true"
+			>disabled filter</ibm-tag-filter>
 		`
 	}))
 	.add("Documentation", () => ({