new Tags component (#1550) (#1582)

Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>

.changeset/clean-carrots-sort.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add new `Tag` component

src/pages/_data/menu.yml

@@ -167,6 +167,9 @@ base:
     tabs:
       url: tabs.html
       title: Tabs
+    tags:
+      url: tags.html
+      title: Tags
     tables:
       url: tables.html
       title: Tables

src/pages/_includes/ui/badge.html

@@ -1,5 +1,6 @@
+{% removeemptylines %}
 {% assign el = 'span' %}
-<{{ el }} class="badge{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+<{{ el }} class="badge{% if include['size'] %} badge-{{ include['size'] }}{% endif %}{% if include.color %} bg-{{ include.color }} text-{{ include.color }}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 {% if include.person-id %}
     {% assign person-id = include.person-id | minus: 1 %}
     {% assign person = site.data.people[person-id] %}
@@ -16,3 +17,4 @@
 {% endif %}
 {% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}</{{ el }}>{% endif %}
 </{{ el }}>
+{% endremoveemptylines %}

src/pages/_includes/ui/dropdown-menu.html

@@ -33,7 +33,7 @@
 		<a class="dropdown-item" href="#">
 			{% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
 			Action
-			{% if include.badge %}<span class="badge bg-primary ms-auto">12</span>{% endif %}
+			{% if include.badge %}<span class="badge bg-primary text-primary-fg ms-auto">12</span>{% endif %}
 		</a>
 		<a class="dropdown-item" href="#">
 			{% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action

src/pages/_includes/ui/tag.html

@@ -0,0 +1,21 @@
+<span class="tag">
+	{% if include.flag %}
+		{% include ui/flag.html flag=include.flag size="xs" class="tag-flag" %}
+	{% elsif include.icon %}
+		{% include ui/icon.html icon=include.icon size="xs" class="tag-icon" %}
+	{% elsif include.person %}
+		{% include ui/avatar.html person=include.person size="xs" class="tag-avatar" %}
+	{% elsif include.status %}
+		{% include ui/badge.html color=include.status class="tag-status badge-empty" text="" %}
+	{% elsif include.legend %}
+		<span class="legend bg-{{ include.legend }}"></span>
+	{% elsif include.checkbox %}
+		<input type="checkbox" class="form-check-input tag-check"{% if include.checked %} checked{% endif %}/>
+	{% endif %}
+	{{ include.text }}
+	{% if include.badge %}
+		{% include ui/badge.html color=include.status class="tag-badge" text=include.badge size="sm" %}
+	{% endif %}
+
+	<a href="#" class="btn-close"></a>
+</span>

src/pages/badges.html

@@ -24,7 +24,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="badges-list">
 							{% for color in site.colors %}
-							<span class="badge bg-{{ color[0] }}">{{ color[1].title }}</span>
+							<span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg">{{ color[1].title }}</span>
 							{% endfor %}
 						</div>
 					</div>
@@ -64,7 +64,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="btn-list">
 							{% for color in site.colors %}
-							<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} ms-2">{{ forloop.index }}</span></button>
+							<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg ms-2">{{ forloop.index }}</span></button>
 							{% endfor %}
 						</div>
 					</div>
@@ -75,7 +75,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="btn-list">
 							{% for color in site.colors %}
-							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-pill">{{ forloop.index }}</span></button>
+							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg badge-notification badge-pill">{{ forloop.index }}</span></button>
 							{% endfor %}
 						</div>
 					</div>

src/pages/tags.html

@@ -0,0 +1,123 @@
+---
+title: Tags
+page-header: Tags
+menu: base.tags
+---
+
+{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus,ghost,star,script,photo,dog,piano" | split: "," %}
+
+<div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Default tags</h3>
+				<div class="tags-list">   
+					{% for i in (1..14) %}     
+					{% capture text %}Label {{ i }}{% endcapture %}
+					{% include ui/tag.html text=text %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Tags with flag</h3>
+				<div class="tags-list">   
+					{% for country in site.data.countries limit: 9 %}     
+					{% include ui/tag.html text=country.name flag=country.code %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Tags with icon</h3>
+				<div class="tags-list">   
+					{% for icon in icons %}     
+					{% include ui/tag.html text=icon icon=icon %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Tags with avatar</h3>
+				<div class="tags-list">   
+					{% for person in site.data.people limit: 8 %}     
+					{% include ui/tag.html text=person.full_name person=person %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Tags with status</h3>
+				<div class="tags-list">   
+					{% for color in site.colors %}
+					{% capture status %}{{ color[1].class }}{% endcapture %}
+					{% capture text %}{{ color[1].title }}{% endcapture %}
+					{% include ui/tag.html text=text status=status %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Tags with legend</h3>
+				<div class="tags-list">   
+					{% for color in site.colors %}
+					{% capture status %}{{ color[1].class }}{% endcapture %}
+					{% capture text %}{{ color[1].title }}{% endcapture %}
+					{% include ui/tag.html text=text legend=status %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Default tags</h3>
+				<div class="tags-list">   
+					{% for i in (1..6) %}     
+					{% capture text %}Label {{ i }}{% endcapture %}
+					{% include ui/tag.html text=text checkbox=true %}
+					{% endfor %}
+					{% for i in (7..12) %}     
+					{% capture text %}Label {{ i }}{% endcapture %}
+					{% include ui/tag.html text=text checkbox=true checked=true %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Default tags</h3>
+				<div class="tags-list">   
+					{% for i in (1..12) %}     
+					{% include ui/tag.html text="Label" badge=i %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/scss/_core.scss

@@ -53,6 +53,7 @@
 @import "ui/status";
 @import "ui/switch-icon";
 @import "ui/tables";
+@import "ui/tags";
 @import "ui/toasts";
 @import "ui/toolbar";
 @import "ui/tracking";
@@ -70,3 +71,6 @@
 @import "utils/text";
 
 @import "debug";
+
+
+@import "debug";

src/scss/_variables.scss

@@ -326,10 +326,10 @@ $kbd-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Avatars
-$avatar-size: 2.5rem !default;
+$avatar-size: 2rem !default;
 $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
-  "xs": 1.5rem,
+  "xs": 1rem,
   "sm": 2rem,
   "md": 4rem,
   "lg": 5.5rem,
@@ -515,6 +515,8 @@ $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $badge-padding-y: 0.25em !default;
 $badge-padding-x: 0.5em !default;
 $badge-empty-size: 0.5rem !default;
+$badge-color: var(--#{$prefix}secondary) !default;
+$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 
 // Buttons
 $input-btn-line-height: $line-height-base !default;
@@ -595,8 +597,10 @@ $carousel-indicator-thumb-width: 4rem !default;
 $carousel-indicator-dot-width: 0.5rem !default;
 
 // Close
-$btn-close-width: 0.75rem !default;
+$btn-close-width: 1em !default;
-$btn-close-opacity: 0.3 !default;
+$btn-close-opacity: 0.4 !default;
+$btn-close-color: $body-color !default;
+
 
 // Datagrid
 $datagrid-padding: 1.5rem !default;

src/scss/ui/_badges.scss

@@ -1,7 +1,7 @@
 .badge {
   justify-content: center;
   align-items: center;
-  background: $gray-500;
+  background: $badge-bg-color;
   overflow: hidden;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
@@ -14,17 +14,6 @@
     color: $card-bg;
   }
 
-  &:empty {
-    display: inline-block;
-    width: $badge-empty-size;
-    height: $badge-empty-size;
-    min-width: 0;
-    min-height: auto;
-    padding: 0;
-    border-radius: $border-radius-pill;
-    vertical-align: baseline;
-  }
-
   .avatar {
     box-sizing: content-box;
     width: 1.25rem;
@@ -40,6 +29,18 @@
   }
 }
 
+ .badge:empty,
+ .badge-empty {
+  display: inline-block;
+  width: $badge-empty-size;
+  height: $badge-empty-size;
+  min-width: 0;
+  min-height: auto;
+  padding: 0;
+  border-radius: $border-radius-pill;
+  vertical-align: baseline;
+}
+
 //
 // Outline badge
 //

src/scss/ui/_flags.scss

@@ -5,7 +5,7 @@ $countries: (
 .flag {
   position: relative;
   display: inline-block;
-  width: 1.5rem;
+  height: 1.5rem;
   aspect-ratio: 1.33333;
   background: no-repeat center/cover;
   box-shadow: $flag-box-shadow;
@@ -26,6 +26,6 @@ $countries: (
 
 @each $flag-size, $size in $flag-sizes {
   .flag-#{$flag-size} {
-    width: $size;
+    height: $size;
   }
 }

src/scss/ui/_legend.scss

@@ -8,4 +8,5 @@ Legend
   width: var(--#{$prefix}legend-size);
   height: var(--#{$prefix}legend-size);
   border-radius: $legend-border-radius;
+  border: 1px solid var(--#{$prefix}border-color-translucent);
 }

src/scss/ui/_tags.scss

@@ -0,0 +1,56 @@
+.tag {
+  --#{$prefix}tag-height: 1.5rem;
+  border: $border-width solid var(--#{$prefix}border-color);
+  display: flex;
+  align-items: center;
+  height: var(--#{$prefix}tag-height);
+  border-radius: var(--#{$prefix}border-radius);
+  padding: 0 0.5rem;
+  background: var(--#{$prefix}bg-surface);
+  box-shadow: var(--#{$prefix}box-shadow-input);
+  gap: .5rem;
+
+  .btn-close {
+    margin-right: -0.25rem;
+    margin-left: -0.125rem;
+    padding: 0;
+    width: 1rem;
+    height: 1rem;
+    font-size: .5rem;
+  }
+}
+
+.tag-badge {
+  --#{$prefix}badge-font-size: #{$h6-font-size};
+  --#{$prefix}badge-padding-x: .25rem;
+  --#{$prefix}badge-padding-y: .125rem;
+  margin-right: -.25rem;
+}
+
+.tag-avatar,
+.tag-flag,
+.tag-icon,
+.tag-check {
+  margin-left: -.25rem;
+}
+
+.tag-icon {
+  color: var(--#{$prefix}secondary);
+  margin-right: -0.125rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+.tag-check {
+  width: 1rem;
+  height: 1rem;
+  background-size: 1rem;
+}
+
+
+//
+// Tags list
+//
+.tags-list {
+  @include elements-list;
+}