Merge pull request #1055 from PrefectHQ/fix/tags-input-display

Fix: tags input not taking advantage of available width
PrefectHQ · Dec 18, 2023 · b98be7e · b98be7e
2 parents af55b6f + 2897328
commit b98be7e
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 130 deletions.
diff --git a/demo/sections/components/Tags.vue b/demo/sections/components/Tags.vue
@@ -7,6 +7,7 @@
       { title: 'Multiple' },
       { title: 'Using p-tag-wrapper' },
     ]"
+    use-resizable
   >
     <template #basic>
       <div class="tags__list">
@@ -34,9 +35,9 @@
 
     <template #using-p-tag-wrapper>
       <div class="flex flex-col gap-3">
-        <p-tag-wrapper class="h-[48px]" :tags="numberArr" justify="left" />
+        <p-tag-wrapper :tags="numberArr" justify="left" />
 
-        <p-tag-wrapper class="h-[48px]" :tags="numberArr">
+        <p-tag-wrapper :tags="numberArr">
           <template #tag="{ tag }">
             <p-tag icon="Prefect">
               {{ tag }}
@@ -50,11 +51,18 @@
           </template>
         </p-tag-wrapper>
 
-        <p-tag-wrapper class="h-[48px]" justify="right">
+        <p-tag-wrapper justify="right">
           <p-tag v-for="i in 20" :key="i">
             Tag {{ i }}
           </p-tag>
         </p-tag-wrapper>
+
+        <div>
+          <p>Inline</p>
+          <div class="border border-default p-2 max-w-full">
+            <p-tag-wrapper :tags="numberArr" justify="left" inline class="border border-default" />
+          </div>
+        </div>
       </div>
     </template>
   </ComponentPage>

diff --git a/demo/sections/components/TagsInput.vue b/demo/sections/components/TagsInput.vue
@@ -6,7 +6,7 @@
 
     <template #tags-input>
       <div class="tags-input__demo">
-        <p-tags-input v-model="exampleTagsValue" :disabled="disabled" :state="exampleState" />
+        <p-tags-input v-model="exampleTagsValue" empty-message="All tags" :disabled="disabled" :state="exampleState" />
 
         <p-code inline>
           value: {{ JSON.stringify(exampleTagsValue) }}

diff --git a/src/components/Select/PSelect.vue b/src/components/Select/PSelect.vue
@@ -29,7 +29,7 @@
             </template>
 
             <template v-else-if="multiple">
-              <PTagWrapper :tags="tags">
+              <PTagWrapper :tags="tags" inline>
                 <template #tag="{ tag }">
                   <slot name="tag" :label="tag.label" :value="tag.value" :dismiss="() => dismissTag(tag)">
                     <PTag :dismissible="isDismissible(tag)" @dismiss="dismissTag(tag)">