feat(tag-component): tag component

[dilandoogan]

Figma Design Document

https://www.figma.com/design/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25001-1763&t=xA7DTWjCkA2EqaDc-1

Implementation

General usage example:

<bl-tag>In Progress</bl-tag>

Usage Examples

Selectable variant usage:

<bl-tag @bl-tag-click="handleTagClick" selected>Selectable tag</bl-tag>

The removable variant can be set like this:

const handleTagClick=(event)=>{
   tags.filter((tag)=>tag.value!==event.value)
}
<bl-tag variant="removable" @bl-tag-click="handleTagClick">Removable tag</bl-tag>

The icon can be set like this:

<bl-tag icon="info">Default</bl-tag>

The size and disabled attributes can be set like this:

<bl-tag size="large" disabled>In Progress</bl-tag>

API Reference:

Slots

Name	Description	Default Content
icon slot	Icon of the tag	-

Attributes

Attribute	Description	Default Value
size (string)	Size of tag(small,medium,large)	medium
icon (bl-icon)	Name of the icon that will be shown in tag	-
variant (string)	Variants of the tag(selectable,removable)	selectable
disabled (boolean)	Makes tag disabled	false
selected (boolean)	Makes tag selected	false
value (string)	Sets tags value	-

Events

Name	Description	Payload
bl-tag-click	Fires when tag is clicked	{value:string,selected:boolean}

[erbilnas]

In my opinion we should also add a tag-group wrapper to get all selected tags' ids. Also using bl-click instead of bl-tag-click is enough I guess

[AykutSarac]

In my opinion we should also add a tag-group wrapper to get all selected tags' ids. Also using bl-click instead of bl-tag-click is enough I guess

Yes, that's in the roadmap but we decided to develop the tag first and group element later.

[buseselvi]

There have been changes in the paddings in the design, can you check them? 🙏

[github-actions]

🎉 This PR is included in version 3.3.0-beta.24 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 3.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀