Added size property to oc-tag (#2011)

* Added size property to oc-tag * update changelog item * Add size examples to docs for OcTag * Fix OcTag size tests * Rethink sizing implementation in OcTag * Re-introduce min-height to OcTag sizes Co-authored-by: Pascal Wengerter <[email protected]>
owncloud · Mar 8, 2022 · 27ffb29 · 27ffb29
1 parent 2c44e4e
commit 27ffb29
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/changelog/unreleased/enhanchement-oc-tag-size b/changelog/unreleased/enhanchement-oc-tag-size
@@ -0,0 +1,5 @@
+Enhancement: Apply size property to oc-card
+
+We've added a size property to oc-tag
+
+https://github.com/owncloud/owncloud-design-system/pull/2011
diff --git a/src/components/atoms/OcTag/OcTag.vue b/src/components/atoms/OcTag/OcTag.vue
@@ -6,6 +6,8 @@
 </template>
 
 <script>
+import { getSizeClass } from "../../../utils/sizeClasses"
+
 export default {
   name: "OcTag",
   status: "ready",
@@ -31,11 +33,23 @@ export default {
       required: false,
       default: null,
     },
+
+    /**
+     * The size of the tag. Defaults to medium.
+     * `small, medium, large`
+     */
+    size: {
+      type: String,
+      default: "medium",
+      validator: value => {
+        return value.match(/(small|medium|large)/)
+      },
+    },
   },
 
   computed: {
     $_ocTag_class() {
-      const classes = ["oc-tag"]
+      const classes = ["oc-tag", `oc-tag-${getSizeClass(this.size)}`]
 
       this.type === "router-link" || this.type === "a"
         ? classes.push("oc-tag-link")
@@ -66,12 +80,26 @@ export default {
   box-sizing: border-box;
   color: var(--oc-color-text-muted);
   display: inline-flex;
-  font-size: 0.875rem;
   gap: var(--oc-space-xsmall);
-  min-height: $oc-size-icon-default + (2 * $oc-space-xsmall) + 2px;
-  padding: var(--oc-space-xsmall) var(--oc-space-small);
   text-decoration: none;
 
+  &-s {
+    font-size: 0.75rem;
+    padding: var(--oc-space-xsmall);
+  }
+
+  &-m {
+    font-size: 0.875rem;
+    min-height: 2.125rem;
+    padding: var(--oc-space-xsmall) var(--oc-space-small);
+  }
+
+  &-l {
+    font-size: 1.5rem;
+    min-height: 2.75rem;
+    padding: var(--oc-space-small) var(--oc-space-medium);
+  }
+
   .oc-icon > svg {
     fill: var(--oc-color-text-muted);
   }
@@ -106,6 +134,24 @@ Component to display various information.
   Shared via link
 </oc-tag>
 ```
+## Different sizes of the tag component
+
+```js
+<div>
+<oc-tag size="small">
+  <oc-icon name="links" size="small" />
+  Small tag
+</oc-tag>
+<oc-tag size="medium">
+  <oc-icon name="links" size="medium" />
+  Medium tag
+</oc-tag>
+<oc-tag size="large">
+  <oc-icon name="links" size="large" />
+  Large tag
+</oc-tag>
+</div>
+```
 ## Different types of the tag component
 The tag component can be rendered as a different element if desired. You can specify such element via property `type`.
 

diff --git a/src/components/atoms/OcTag/__snapshots__/OcTag.spec.js.snap b/src/components/atoms/OcTag/__snapshots__/OcTag.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OcTag uses correct component when type is specified 1`] = `<button class="oc-tag oc-tag-button"></button>`;
+exports[`OcTag uses correct component when type is specified 1`] = `<button class="oc-tag oc-tag-m oc-tag-button"></button>`;