Add rounded property for tags (#2284)

* Add rounded property for tags * add changelog * Fix linting * Add property description
owncloud · Aug 4, 2022 · 6e655d1 · 6e655d1
1 parent f3700f9
commit 6e655d1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/changelog/unreleased/enhancement-add-rounded-oc-tag b/changelog/unreleased/enhancement-add-rounded-oc-tag
@@ -0,0 +1,5 @@
+Enhancement: Add rounded prop to OcTag
+
+We've added a rounded property to the OcTag component
+
+https://github.com/owncloud/owncloud-design-system/pull/2284
diff --git a/src/components/atoms/OcTag/OcTag.vue b/src/components/atoms/OcTag/OcTag.vue
@@ -45,6 +45,15 @@ export default {
         return value.match(/(small|medium|large)/)
       },
     },
+
+    /**
+     * Enables fully rounded borders
+     */
+    rounded: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
 
   computed: {
@@ -55,6 +64,10 @@ export default {
         ? classes.push("oc-tag-link")
         : classes.push(`oc-tag-${this.type}`)
 
+      if (this.rounded) {
+        classes.push("oc-tag-rounded")
+      }
+
       return classes
     },
   },
@@ -100,6 +113,12 @@ export default {
     padding: var(--oc-space-small) var(--oc-space-medium);
   }
 
+  &-rounded {
+    border-radius: 99px;
+    padding-left: var(--oc-space-small);
+    padding-right: var(--oc-space-small);
+  }
+
   .oc-icon > svg {
     fill: var(--oc-color-text-muted);
   }