From 16495eeff8bed7c4107659209f8cc11938691ca9 Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Wed, 20 Dec 2023 12:39:52 -0500
Subject: [PATCH 1/3] Add XS size for tags.

---
 demo/sections/components/Tags.vue |  9 +++++++++
 src/components/Tag/PTag.vue       | 23 +++++++++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/demo/sections/components/Tags.vue b/demo/sections/components/Tags.vue
index 5682b2e87..a1c7fde46 100644
--- a/demo/sections/components/Tags.vue
+++ b/demo/sections/components/Tags.vue
@@ -3,6 +3,7 @@
     title="Tags"
     :demos="[
       { title: 'Basic' },
+      { title: 'Size XS' },
       { title: 'Using Slot' },
       { title: 'Multiple' },
       { title: 'Using p-tag-wrapper' },
@@ -17,6 +18,14 @@
       </div>
     </template>
 
+    <template #size-xs>
+      <div class="tags__list">
+        <p-tag v-for="index in 3" :key="index" size="xs">
+          {{ index }}
+        </p-tag>
+      </div>
+    </template>
+
     <template #using-slot>
       <div class="tags__list">
         <p-tag v-for="item in classes" :key="item.name" :class="item.className" class="tag" icon="TagIcon">
diff --git a/src/components/Tag/PTag.vue b/src/components/Tag/PTag.vue
index 56d41b91f..4efe049b0 100644
--- a/src/components/Tag/PTag.vue
+++ b/src/components/Tag/PTag.vue
@@ -23,12 +23,13 @@
   import { Icon } from '@/types/icon'
   import { TagValue, normalize } from '@/types/tag'
 
-  const props = defineProps<{
+  const props = withDefaults(defineProps<{
     icon?: Icon,
     label?: string,
     value?: string | TagValue,
     dismissible?: boolean,
-  }>()
+    size?: 'xs' | 'sm',
+  }>(), { icon: undefined, label: undefined, value: undefined, size: 'sm' })
 
   const emits = defineEmits<{
     (event: 'dismiss', value: TagValue): void,
@@ -41,6 +42,7 @@
   const classes = computed(() => ({
     root: {
       'p-tag--dismissible': props.dismissible,
+      [`p-tag--${props.size}`]: true,
     },
   }))
 </script>
@@ -50,10 +52,7 @@
   gap-1
   inline-flex
   items-center
-  rounded-default
-  px-2.5
-  py-0.5
-  text-sm;
+  rounded-default;
   background-color: var(--p-color-tag-bg);
   border-color: var(--p-color-tag-border);
   color: var(--p-color-tag-text);
@@ -66,4 +65,16 @@
 .p-tag__dismiss {
   color: var(--p-color-tag-text);
 }
+
+.p-tag--sm { @apply
+  text-sm
+  px-2.5
+  py-0.5
+}
+
+.p-tag--xs { @apply
+  text-xs
+  px-1.5
+  py-0.5
+}
 </style>
\ No newline at end of file

From fb98d3529a95146d06d21d53bf31c2a75b9e6052 Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Wed, 20 Dec 2023 12:42:50 -0500
Subject: [PATCH 2/3] Add PTag props to PTags.

---
 src/components/Tags/PTags.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Tags/PTags.vue b/src/components/Tags/PTags.vue
index cf0c31dc2..ffc0ff9ad 100644
--- a/src/components/Tags/PTags.vue
+++ b/src/components/Tags/PTags.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-tags">
-    <PTag v-for="tag in tags" :key="tag.label">
+    <PTag v-for="tag in tags" :key="tag.label" :dismissible="dismissible" :size="size">
       <slot :tag="tag">
         {{ tag.label }}
       </slot>
@@ -15,6 +15,8 @@
 
   const props = defineProps<{
     tags: (string | TagValue)[],
+    dismissible?: boolean,
+    size?: 'xs' | 'sm',
   }>()
 
   const tags = computed(() => props.tags.map(normalize))

From 37378d31be0ecaef0f6345faa78cf33b1a012ae5 Mon Sep 17 00:00:00 2001
From: Collin Choy <collin@prefect.io>
Date: Wed, 20 Dec 2023 13:06:56 -0500
Subject: [PATCH 3/3] Refactor size prop to small for consistency with
 p-button.

---
 demo/sections/components/Tags.vue |  8 +++++---
 src/components/Tag/PTag.vue       | 21 +++++++++------------
 src/components/Tags/PTags.vue     |  4 ++--
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/demo/sections/components/Tags.vue b/demo/sections/components/Tags.vue
index a1c7fde46..0809f791f 100644
--- a/demo/sections/components/Tags.vue
+++ b/demo/sections/components/Tags.vue
@@ -3,7 +3,7 @@
     title="Tags"
     :demos="[
       { title: 'Basic' },
-      { title: 'Size XS' },
+      { title: 'Small' },
       { title: 'Using Slot' },
       { title: 'Multiple' },
       { title: 'Using p-tag-wrapper' },
@@ -18,9 +18,9 @@
       </div>
     </template>
 
-    <template #size-xs>
+    <template #small>
       <div class="tags__list">
-        <p-tag v-for="index in 3" :key="index" size="xs">
+        <p-tag v-for="index in 3" :key="index" small>
           {{ index }}
         </p-tag>
       </div>
@@ -40,6 +40,8 @@
           Number {{ tag.label }}
         </template>
       </p-tags>
+
+      <p-tags :tags="numberArr" small />
     </template>
 
     <template #using-p-tag-wrapper>
diff --git a/src/components/Tag/PTag.vue b/src/components/Tag/PTag.vue
index 4efe049b0..61e99442b 100644
--- a/src/components/Tag/PTag.vue
+++ b/src/components/Tag/PTag.vue
@@ -23,13 +23,13 @@
   import { Icon } from '@/types/icon'
   import { TagValue, normalize } from '@/types/tag'
 
-  const props = withDefaults(defineProps<{
+  const props = defineProps<{
     icon?: Icon,
     label?: string,
     value?: string | TagValue,
     dismissible?: boolean,
-    size?: 'xs' | 'sm',
-  }>(), { icon: undefined, label: undefined, value: undefined, size: 'sm' })
+    small?: boolean,
+  }>()
 
   const emits = defineEmits<{
     (event: 'dismiss', value: TagValue): void,
@@ -42,7 +42,7 @@
   const classes = computed(() => ({
     root: {
       'p-tag--dismissible': props.dismissible,
-      [`p-tag--${props.size}`]: true,
+      'p-tag--small': props.small,
     },
   }))
 </script>
@@ -52,7 +52,10 @@
   gap-1
   inline-flex
   items-center
-  rounded-default;
+  rounded-default
+  text-sm
+  px-2.5
+  py-0.5;
   background-color: var(--p-color-tag-bg);
   border-color: var(--p-color-tag-border);
   color: var(--p-color-tag-text);
@@ -66,13 +69,7 @@
   color: var(--p-color-tag-text);
 }
 
-.p-tag--sm { @apply
-  text-sm
-  px-2.5
-  py-0.5
-}
-
-.p-tag--xs { @apply
+.p-tag--small { @apply
   text-xs
   px-1.5
   py-0.5
diff --git a/src/components/Tags/PTags.vue b/src/components/Tags/PTags.vue
index ffc0ff9ad..2075ce1cc 100644
--- a/src/components/Tags/PTags.vue
+++ b/src/components/Tags/PTags.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-tags">
-    <PTag v-for="tag in tags" :key="tag.label" :dismissible="dismissible" :size="size">
+    <PTag v-for="tag in tags" :key="tag.label" :dismissible="dismissible" :small="small">
       <slot :tag="tag">
         {{ tag.label }}
       </slot>
@@ -16,7 +16,7 @@
   const props = defineProps<{
     tags: (string | TagValue)[],
     dismissible?: boolean,
-    size?: 'xs' | 'sm',
+    small?: boolean,
   }>()
 
   const tags = computed(() => props.tags.map(normalize))