Merge pull request #3055 from Akshat55/tag-components

feat: introduce selectable & operational tags
carbon-design-system · Nov 14, 2024 · 6b449df · 6b449df
2 parents a119742 + f25bfaa
commit 6b449df
Show file tree

Hide file tree

Showing 9 changed files with 283 additions and 28 deletions.
diff --git a/src/tag/index.ts b/src/tag/index.ts
@@ -1,3 +1,6 @@
 export * from "./tag-filter.component";
 export * from "./tag.component";
+export * from "./tag-icon.directive";
+export * from "./tag-selectable.component";
+export * from "./tag-operational.component";
 export * from "./tag.module";
diff --git a/src/tag/tag-filter.component.spec.ts b/src/tag/tag-filter.component.spec.ts
@@ -29,6 +29,7 @@ describe("TagFilter", () => {
 
 	it("should call onClick on label click", () => {
 		fixture = TestBed.createComponent(TagFilterTest);
+		fixture.detectChanges();
 		debugElement = fixture.debugElement.query(By.css(".cds--tag__label"));
 		fixture.detectChanges();
 		spyOn(debugElement.componentInstance.click, "emit");
@@ -39,6 +40,7 @@ describe("TagFilter", () => {
 
 	it("should call both onClick and onClose on close icon click", () => {
 		fixture = TestBed.createComponent(TagFilterTest);
+		fixture.detectChanges();
 		debugElement = fixture.debugElement.query(By.css(".cds--tag__close-icon"));
 		fixture.detectChanges();
 		spyOn(debugElement.componentInstance.close, "emit");
@@ -52,6 +54,7 @@ describe("TagFilter", () => {
 	it("should not call onClick when disabled", () => {
 		fixture = TestBed.createComponent(TagFilterTest);
 		fixture.componentInstance.disabled = true;
+		fixture.detectChanges();
 		debugElement = fixture.debugElement.query(By.css(".cds--tag__label"));
 		fixture.detectChanges();
 		spyOn(debugElement.componentInstance.click, "emit");
@@ -63,6 +66,7 @@ describe("TagFilter", () => {
 	it("should not call onClick nor onClose when disabled", () => {
 		fixture = TestBed.createComponent(TagFilterTest);
 		fixture.componentInstance.disabled = true;
+		fixture.detectChanges();
 		debugElement = fixture.debugElement.query(By.css(".cds--tag__close-icon"));
 		fixture.detectChanges();
 		spyOn(debugElement.componentInstance.close, "emit");

diff --git a/src/tag/tag-filter.component.ts b/src/tag/tag-filter.component.ts
@@ -3,32 +3,36 @@ import {
 	Output,
 	EventEmitter,
 	HostBinding,
-	Input
+	Input,
+	TemplateRef
 } from "@angular/core";
 import { Tag } from "./tag.component";
 
 @Component({
 	selector: "cds-tag-filter, ibm-tag-filter",
 	template: `
-		<span
-			class="cds--tag__label"
-			[attr.title]="title ? title : null"
-			(click)="onClick($event)">
-			<ng-content></ng-content>
-		</span>
-		<button
-			class="cds--tag__close-icon"
-			(click)="onClose($event)"
-			[disabled]="disabled"
-			[title]="closeButtonLabel">
-			<span class="cds--visually-hidden">{{closeButtonLabel}}</span>
-			<svg cdsIcon="close" size="16"></svg>
-		</button>
+		<ng-container *ngIf="!skeleton">
+			<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
+			<span
+				class="cds--tag__label"
+				[attr.title]="title ? title : null"
+				(click)="onClick($event)">
+				<ng-content></ng-content>
+			</span>
+			<button
+				class="cds--tag__close-icon"
+				(click)="onClose($event)"
+				[disabled]="disabled"
+				[title]="closeButtonLabel">
+				<span class="cds--visually-hidden">{{closeButtonLabel}}</span>
+				<svg cdsIcon="close" size="16"></svg>
+			</button>
+		</ng-container>
 	`
 })
 export class TagFilter extends Tag {
 	@Input() closeButtonLabel = "Clear Filter";
-	@Input() disabled: boolean;
+	@Input() disabled = false;
 	@Input() title: string;
 
 	/**
@@ -59,8 +63,16 @@ export class TagFilter extends Tag {
 		this.close.emit();
 	}
 
+	/**
+	 * @todo
+	 * Remove `cds--tag--${this.size}` in v7
+	 */
 	@HostBinding("attr.class") get attrClass() {
-		return `cds--tag cds--tag--filter cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}${this.disabled ? " cds--tag--disabled" : ""}`;
+		const disabledClass = this.disabled ? "cds--tag--disabled" : "";
+		const sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;
+		const skeletonClass = this.skeleton ? "cds--skeleton" : "";
+
+		return `cds--tag cds--tag--filter cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;
 	}
 
 	@HostBinding("attr.aria-label") get attrAriaLabel() {

diff --git a/src/tag/tag-icon.directive.ts b/src/tag/tag-icon.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, HostBinding } from "@angular/core";
+
+@Directive({
+	selector: "[cdsTagIcon], [ibmTagIcon]"
+})
+export class TagIconDirective {
+	@HostBinding("class.cds--tag__custom-icon") tagIcon = true;
+}
diff --git a/src/tag/tag-operational.component.ts b/src/tag/tag-operational.component.ts
@@ -0,0 +1,39 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	HostBinding,
+	Input
+} from "@angular/core";
+import { Tag } from "./tag.component";
+
+@Component({
+	selector: "cds-tag-operational, ibm-tag-operational",
+	template: `
+		<ng-container *ngIf="!skeleton">
+			<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
+			<span class="cds--tag__label">
+				<ng-content></ng-content>
+			</span>
+		</ng-container>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TagOperationalComponent extends Tag {
+	@HostBinding("attr.role") role = "button";
+	@HostBinding("attr.type") buttonType = "button";
+	@HostBinding("attr.tabindex") tabIndex = 0;
+
+	@Input() disabled = false;
+
+	/**
+	 * @todo
+	 * Remove `cds--tag--${this.size}` in v7
+	 */
+	@HostBinding("attr.class") get attrClass() {
+		const disabledClass = this.disabled ? "cds--tag--disabled" : "";
+		const sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;
+		const skeletonClass = this.skeleton ? "cds--skeleton" : "";
+
+		return `cds--tag cds--tag--operational cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;
+	}
+}
diff --git a/src/tag/tag-selectable.component.ts b/src/tag/tag-selectable.component.ts
@@ -0,0 +1,57 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	EventEmitter,
+	HostBinding,
+	HostListener,
+	Input,
+	Output
+} from "@angular/core";
+
+@Component({
+	selector: "cds-tag-selectable, ibm-tag-selectable",
+	template: `
+		<ng-container *ngIf="!skeleton">
+			<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
+			<span class="cds--tag__label">
+				<ng-content></ng-content>
+			</span>
+		</ng-container>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TagSelectableComponent {
+	@HostBinding("attr.role") role = "button";
+	@HostBinding("attr.type") buttonType = "button";
+	@HostBinding("attr.tabindex") tabIndex = 0;
+	@HostBinding("attr.aria-pressed") get ariaPressed() {
+		return this.selected;
+	}
+
+	@Input() size: "sm" | "md" | "lg" = "md";
+	@Input() skeleton = false;
+	@Input() disabled = false;
+	@Input() class = "";
+	@Input() selected = false;
+
+	@Output() selectedChange = new EventEmitter<boolean>();
+
+	@HostListener("click")
+	onClick() {
+		this.selected = !this.selected;
+		this.selectedChange.emit(this.selected);
+	}
+
+	/**
+	 * @todo
+	 * Remove `cds--tag--${this.size}` in v7
+	 */
+	@HostBinding("attr.class") get attrClass() {
+		const disabledClass = this.disabled ? "cds--tag--disabled" : "";
+		const sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;
+		const skeletonClass = this.skeleton ? "cds--skeleton" : "";
+		const selectedClass = this.selected ? "cds--tag--selectable-selected" : "";
+
+		return `cds--tag cds--tag--selectable ${selectedClass} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;
+	}
+}
diff --git a/src/tag/tag.component.ts b/src/tag/tag.component.ts
@@ -31,7 +31,14 @@ export type TagType = "red" |
  */
 @Component({
 	selector: "cds-tag, ibm-tag",
-	template: `<ng-content></ng-content>`
+	template: `
+		<ng-container *ngIf="!skeleton">
+			<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
+			<span class="cds--tag__label">
+				<ng-content></ng-content>
+			</span>
+		</ng-container>
+	`
 })
 export class Tag {
 	/**
@@ -42,11 +49,20 @@ export class Tag {
 	/**
 	 * Tag render size
 	 */
-	@Input() size: "sm" | "md" = "md";
+	@Input() size: "sm" | "md" | "lg" = "md";
 
 	@Input() class = "";
 
+	@Input() skeleton = false;
+
+	/**
+	 * @todo
+	 * Remove `cds--tag--${this.size}` in v7
+	 */
 	@HostBinding("attr.class") get attrClass() {
-		return `cds--tag cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}`;
+		const skeletonClass = this.skeleton ? "cds--skeleton" : "";
+		const sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;
+
+		return `cds--tag cds--tag--${this.type} ${sizeClass} ${skeletonClass} ${this.class}`;
 	}
 }
diff --git a/src/tag/tag.module.ts b/src/tag/tag.module.ts
@@ -4,10 +4,25 @@ import { CommonModule } from "@angular/common";
 import { Tag } from "./tag.component";
 import { TagFilter } from "./tag-filter.component";
 import { IconModule } from "carbon-components-angular/icon";
+import { TagIconDirective } from "./tag-icon.directive";
+import { TagSelectableComponent } from "./tag-selectable.component";
+import { TagOperationalComponent } from "./tag-operational.component";
 
 @NgModule({
-	declarations: [ Tag, TagFilter ],
-	exports: [ Tag, TagFilter ],
-	imports: [ CommonModule, IconModule ]
+	declarations: [
+		Tag,
+		TagFilter,
+		TagIconDirective,
+		TagSelectableComponent,
+		TagOperationalComponent
+	],
+	exports: [
+		Tag,
+		TagFilter,
+		TagIconDirective,
+		TagSelectableComponent,
+		TagOperationalComponent
+	],
+	imports: [CommonModule, IconModule]
 })
-export class TagModule { }
+export class TagModule {}