From 6e655d1c9fb0b79ee20a5618bbc0b8c09067664d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <pneubauer@owncloud.com>
Date: Thu, 4 Aug 2022 11:00:12 +0200
Subject: [PATCH] Add rounded property for tags (#2284)

* Add rounded property for tags

* add changelog

* Fix linting

* Add property description
---
 .../unreleased/enhancement-add-rounded-oc-tag |  5 +++++
 src/components/atoms/OcTag/OcTag.vue          | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-add-rounded-oc-tag

diff --git a/changelog/unreleased/enhancement-add-rounded-oc-tag b/changelog/unreleased/enhancement-add-rounded-oc-tag
new file mode 100644
index 000000000..fba991538
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/src/components/atoms/OcTag/OcTag.vue b/src/components/atoms/OcTag/OcTag.vue
index af407bc48..4ab097cbb 100644
--- 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);
   }