diff --git a/.changeset/clean-carrots-sort.md b/.changeset/clean-carrots-sort.md new file mode 100644 index 000000000..ba4ba19e8 --- /dev/null +++ b/.changeset/clean-carrots-sort.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Add new `Tag` component diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 6fdf14fac..19eb69bff 100644 --- a/src/pages/_data/menu.yml +++ b/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 diff --git a/src/pages/_includes/ui/badge.html b/src/pages/_includes/ui/badge.html index 69eaf8c30..ace6c16c3 100644 --- a/src/pages/_includes/ui/badge.html +++ b/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 }}{% endif %} +{% endremoveemptylines %} diff --git a/src/pages/_includes/ui/dropdown-menu.html b/src/pages/_includes/ui/dropdown-menu.html index 7c05c37b0..81911e21d 100644 --- a/src/pages/_includes/ui/dropdown-menu.html +++ b/src/pages/_includes/ui/dropdown-menu.html @@ -33,7 +33,7 @@ {% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %} Action - {% if include.badge %}12{% endif %} + {% if include.badge %}12{% endif %} {% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action diff --git a/src/pages/_includes/ui/tag.html b/src/pages/_includes/ui/tag.html new file mode 100644 index 000000000..6a05cf953 --- /dev/null +++ b/src/pages/_includes/ui/tag.html @@ -0,0 +1,21 @@ + + {% 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 %} + + {% elsif include.checkbox %} + + {% endif %} + {{ include.text }} + {% if include.badge %} + {% include ui/badge.html color=include.status class="tag-badge" text=include.badge size="sm" %} + {% endif %} + + + \ No newline at end of file diff --git a/src/pages/badges.html b/src/pages/badges.html index 418da3685..3bdfecc80 100644 --- a/src/pages/badges.html +++ b/src/pages/badges.html @@ -24,7 +24,7 @@ menu: base.badges
{% for color in site.colors %} - {{ color[1].title }} + {{ color[1].title }} {% endfor %}
@@ -64,7 +64,7 @@ menu: base.badges
{% for color in site.colors %} - + {% endfor %}
@@ -75,7 +75,7 @@ menu: base.badges
{% for color in site.colors %} - + {% endfor %}
diff --git a/src/pages/tags.html b/src/pages/tags.html new file mode 100644 index 000000000..d9e841b3d --- /dev/null +++ b/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: "," %} + +
+
+
+
+

Default tags

+
+ {% for i in (1..14) %} + {% capture text %}Label {{ i }}{% endcapture %} + {% include ui/tag.html text=text %} + {% endfor %} +
+
+
+
+ +
+
+
+

Tags with flag

+
+ {% for country in site.data.countries limit: 9 %} + {% include ui/tag.html text=country.name flag=country.code %} + {% endfor %} +
+
+
+
+ +
+
+
+

Tags with icon

+
+ {% for icon in icons %} + {% include ui/tag.html text=icon icon=icon %} + {% endfor %} +
+
+
+
+ +
+
+
+

Tags with avatar

+
+ {% for person in site.data.people limit: 8 %} + {% include ui/tag.html text=person.full_name person=person %} + {% endfor %} +
+
+
+
+ +
+
+
+

Tags with status

+
+ {% 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 %} +
+
+
+
+ +
+
+
+

Tags with legend

+
+ {% 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 %} +
+
+
+
+ +
+
+
+

Default tags

+
+ {% 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 %} +
+
+
+
+ +
+
+
+

Default tags

+
+ {% for i in (1..12) %} + {% include ui/tag.html text="Label" badge=i %} + {% endfor %} +
+
+
+
+
\ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 1f89d4176..495f10620 100644 --- a/src/scss/_core.scss +++ b/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"; \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index bbe01523d..2c43b0832 100644 --- a/src/scss/_variables.scss +++ b/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-opacity: 0.3 !default; +$btn-close-width: 1em !default; +$btn-close-opacity: 0.4 !default; +$btn-close-color: $body-color !default; + // Datagrid $datagrid-padding: 1.5rem !default; diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss index 2a0b0cde5..2e0aa0eeb 100644 --- a/src/scss/ui/_badges.scss +++ b/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 // diff --git a/src/scss/ui/_flags.scss b/src/scss/ui/_flags.scss index 13718d74b..090798115 100644 --- a/src/scss/ui/_flags.scss +++ b/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; } } diff --git a/src/scss/ui/_legend.scss b/src/scss/ui/_legend.scss index 0d7d236c7..03a8e5023 100644 --- a/src/scss/ui/_legend.scss +++ b/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); } diff --git a/src/scss/ui/_tags.scss b/src/scss/ui/_tags.scss new file mode 100644 index 000000000..40abc626b --- /dev/null +++ b/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; +}