Merge pull request #104 from CSCfi/tag-border-radius

fix: c-tag - expose the tag border radius as a css variable
CSCfi · Jan 24, 2024 · 875aaab · 875aaab
2 parents c87a35a + bb860de
commit 875aaab
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 24 deletions.
diff --git a/packages/csc-ui-documentation/components/examples/c-tags/Badge.vue b/packages/csc-ui-documentation/components/examples/c-tags/Badge.vue
@@ -0,0 +1,29 @@
+<template>
+  <component-example name="badge">
+    <template #title>Usage with badges</template>
+
+    <c-tags>
+      <c-tag :active="activeTags[0]" badge="0" @click="onToggleActive(0)">
+        One
+      </c-tag>
+
+      <c-tag :active="activeTags[1]" badge="125" @click="onToggleActive(1)">
+        Two
+      </c-tag>
+
+      <c-tag :active="activeTags[2]" badge="9" @click="onToggleActive(2)">
+        Three
+      </c-tag>
+    </c-tags>
+  </component-example>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activeTags = ref([false, true, false]);
+
+const onToggleActive = (index: number) => {
+  activeTags.value[index] = !activeTags.value[index];
+};
+</script>
diff --git a/packages/csc-ui-documentation/components/examples/c-tags/Index.vue b/packages/csc-ui-documentation/components/examples/c-tags/Index.vue
@@ -3,6 +3,8 @@
 
   <flat />
 
+  <badge />
+
   <closeable />
 
   <fit />
@@ -19,6 +21,7 @@ import Closeable from './Closeable.vue';
 import Fit from './Fit.vue';
 import Block from './Block.vue';
 import SmallVariant from './Small.vue';
+import Badge from './Badge.vue';
 
 defineOptions({
   inheritAttrs: false,

diff --git a/packages/csc-ui-documentation/components/examples/c-tags/Small.vue b/packages/csc-ui-documentation/components/examples/c-tags/Small.vue
@@ -2,23 +2,14 @@
   <component-example name="small">
     <template #title>Small variant</template>
 
-    <c-tags>
-      <c-tag
-        :active="activeTags[0]"
-        size="small"
-        badge="8"
-        @click="onToggleActive(0)"
-      >
+    <c-tags size="small">
+      <c-tag :active="activeTags[0]" badge="8" @click="onToggleActive(0)">
         One
       </c-tag>
 
-      <c-tag :active="activeTags[1]" size="small" @click="onToggleActive(1)">
-        Two
-      </c-tag>
+      <c-tag :active="activeTags[1]" @click="onToggleActive(1)">Two</c-tag>
 
-      <c-tag :active="activeTags[2]" size="small" @click="onToggleActive(2)">
-        Three
-      </c-tag>
+      <c-tag :active="activeTags[2]" @click="onToggleActive(2)">Three</c-tag>
     </c-tags>
   </component-example>
 </template>

diff --git a/packages/csc-ui/src/components/c-tag/c-tag.scss b/packages/csc-ui/src/components/c-tag/c-tag.scss
@@ -11,6 +11,7 @@
    * @prop --c-tag-border-color: Tag border color
    * @prop --c-tag-text-color-active: Active tag text color
    * @prop --c-tag-text-color: Tag text color
+   * @prop --c-tag-border-radius: Tag border radius
    */
   --_c-tag-background-color-active-hover: var(--c-tag-background-color-active-hover, var(--c-primary-400));
   --_c-tag-background-color-active: var(--c-tag-background-color-active, var(--_c-tag-text-color));
@@ -23,16 +24,19 @@
   --_c-tag-border-color: var(--c-tag-border-color, var(--_c-tag-text-color));
   --_c-tag-text-color-active: var(--c-tag-text-color-active, var(--c-white));
   --_c-tag-text-color: var(--c-tag-text-color, var(--c-primary-600));
+  --_c-tag-border-radius: var(--c-tag-border-radius, 999px);
 
   // private
   --c-tag-min-height: 28px;
-  --c-tag-padding: 4px 12px;
+  --c-tag-padding-y: 4px;
+  --c-tag-padding-x: 12px;
+  --c-tag-padding: var(--c-tag-padding-y) var(--c-tag-padding-x);
   --c-tag-badge-size: 20px;
   --c-tag-icon-button-offset: 0;
 
   align-items: center;
   background: var(--_c-tag-background-color);
-  border-radius: 999px;
+  border-radius: var(--_c-tag-border-radius);
   box-shadow: inset 0 0 0 1px var(--_c-tag-border-color);
   color: var(--_c-tag-text-color);
   cursor: pointer;
@@ -69,12 +73,12 @@
 }
 
 :host([data-badge]) {
-  padding-left: 4px;
+  padding-left: var(--c-tag-padding-y);
 
   &::before {
     content: attr(data-badge);
     background-color: var(--_c-tag-badge-background-color);
-    border-radius: 999px;
+    border-radius: calc(var(--_c-tag-border-radius) - var(--c-tag-padding-y));
     color: var(--_c-tag-badge-text-color);
     display: inline-grid;
     font-size: 12px;
@@ -94,7 +98,7 @@
 }
 
 :host(.c-tag--closeable) {
-  padding-right: 4px;
+  padding-right: var(--c-tag-padding-y);
 }
 
 :host(.c-tag--block) {
@@ -111,7 +115,8 @@
 
 :host(.c-tag--small) {
   --c-tag-min-height: 20px;
-  --c-tag-padding: 0 8px;
+  --c-tag-padding-y: 2px;
+  --c-tag-padding-x: 8px;
   --c-tag-badge-size: 16px;
   --c-tag-icon-button-offset: 1px 0 0;
 
@@ -122,11 +127,7 @@
 }
 
 :host([data-badge].c-tag--small) {
-  padding-left: 2px;
-}
-
-:host(.c-tag--small.c-tag--closeable) {
-  padding-right: 2px;
+  padding-left: var(--c-tag-padding-y);
 }
 
 :host(:focus) {

diff --git a/packages/csc-ui/src/components/c-tag/readme.md b/packages/csc-ui/src/components/c-tag/readme.md
@@ -45,6 +45,7 @@
 | `--c-tag-badge-text-color`              | Tag badge text color                 |
 | `--c-tag-badge-text-color-active`       | Active tag badge text color          |
 | `--c-tag-border-color`                  | Tag border color                     |
+| `--c-tag-border-radius`                 | Tag border radius                    |
 | `--c-tag-text-color`                    | Tag text color                       |
 | `--c-tag-text-color-active`             | Active tag text color                |