feat(tag): dynamically set size of remove button

Trendyol · Dec 26, 2024 · 02ebe75 · 02ebe75
1 parent 9f3c260
commit 02ebe75
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/components/tag/bl-tag.css b/src/components/tag/bl-tag.css
@@ -59,7 +59,7 @@
 }
 
 :host([variant="removeable"]) .remove-button {
-  --bl-border-radius-m: var(--bl-size-m);
+  --bl-border-radius-m: var(--bl-border-radius-circle);
 }
 
 :host([size="small"]) .tag {

diff --git a/src/components/tag/bl-tag.stories.mdx b/src/components/tag/bl-tag.stories.mdx
@@ -82,6 +82,9 @@ Tags are available in three sizes: small, medium (default), and large.
       <bl-tag size="small">Small</bl-tag>
       <bl-tag size="medium">Medium</bl-tag>
       <bl-tag size="large">Large</bl-tag>
+      <bl-tag size="small" variant="removeable">Small Removeable</bl-tag>
+      <bl-tag size="medium" variant="removeable">Medium Removeable</bl-tag>
+      <bl-tag size="large" variant="removeable">Large Removeable</bl-tag>
     `}
   </Story>
 </Canvas>

diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
@@ -65,6 +65,8 @@ export default class BlTag extends LitElement {
         ? html`
             <bl-button
               icon="close"
+              size=${this.size === "large" ? "medium" : "small"}
+              label="Remove"
               variant="tertiary"
               kind="neutral"
               class="remove-button"