From 3923b2395be53b17847552b0eee73d56f22a00c0 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 26 Dec 2024 17:34:28 +0300
Subject: [PATCH] feat(tag): use button for selectable tag

---
 src/components/tag/bl-tag.css |  4 +---
 src/components/tag/bl-tag.ts  | 29 ++++++++++++++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/tag/bl-tag.css b/src/components/tag/bl-tag.css
index ad289d5e..87f0a70c 100644
--- a/src/components/tag/bl-tag.css
+++ b/src/components/tag/bl-tag.css
@@ -48,14 +48,12 @@
   --color: var(--bl-color-neutral-full);
 }
 
-:host([variant="selectable"][disabled]) {
-  pointer-events: none;
-}
 
 :host([variant="selectable"][disabled]) .tag {
   background-color: var(--bl-color-neutral-lightest);
   border-color: var(--bl-color-neutral-lightest);
   color: var(--bl-color-neutral-light);
+  cursor: not-allowed;
 }
 
 :host([variant="removable"]) .remove-button {
diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
index 5939a8b8..d5c4f33c 100644
--- a/src/components/tag/bl-tag.ts
+++ b/src/components/tag/bl-tag.ts
@@ -1,6 +1,5 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { event, EventDispatcher } from "../../utilities/event";
 import "../button/bl-button";
 import "../icon/bl-icon";
@@ -58,14 +57,17 @@ export default class BlTag extends LitElement {
   icon?: BaklavaIcon;
 
   render(): TemplateResult {
-    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : "";
+    const removeIconSize = this.size === "large" ? "medium" : "small";
+    const icon = this.icon
+      ? html`<slot name="icon"><bl-icon name=${this.icon}></bl-icon></slot>`
+      : nothing;
 
     const removeButton =
       this.variant === "removable"
         ? html`
             <bl-button
               icon="close"
-              size=${this.size === "large" ? "medium" : "small"}
+              size=${removeIconSize}
               label="Remove"
               variant="tertiary"
               kind="neutral"
@@ -74,17 +76,26 @@ export default class BlTag extends LitElement {
               @bl-click=${this.handleClick}
             ></bl-button>
           `
-        : "";
+        : nothing;
 
-    return html`<div
+    const selectableVariant = html`<button
       class="tag"
-      @click=${this.variant === "selectable" ? this.handleClick : undefined}
-      role=${ifDefined(this.variant === "selectable" ? "checkbox" : undefined)}
+      role="checkbox"
+      @click=${this.handleClick}
+      ?disabled=${this.disabled}
     >
-      <slot name="icon">${icon}</slot>
+      ${icon}
+      <slot></slot>
+      ${removeButton}
+    </button>`;
+
+    const removableVariant = html`<div class="tag">
+      ${icon}
       <slot></slot>
       ${removeButton}
     </div>`;
+
+    return this.variant === "selectable" ? selectableVariant : removableVariant;
   }
 }