Fixed #6581 - Tree filter too close, visual bug

packages/primevue/src/tree/Tree.vue

@@ -8,7 +8,7 @@
                 </slot>
             </div>
         </template>
-        <IconField v-if="filter" :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
+        <IconField v-if="filter" :unstyled="unstyled" :pt="ptm('pcFilter')" :class="cx('pcFilter')">
             <InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" :unstyled="unstyled" @keydown="onFilterKeydown" :pt="ptm('pcFilterInput')" />
             <InputIcon :unstyled="unstyled" :pt="ptm('pcFilterIconContainer')">
                 <!--TODO: searchicon deprecated since v4.0-->

packages/primevue/src/tree/style/TreeStyle.js

@@ -116,6 +116,10 @@ const theme = ({ dt }) => `
     color: ${dt('tree.node.icon.selected.color')};
 }
 
+.p-tree-filter {
+    margin: ${dt('tree.filter.margin')};
+}
+
 .p-tree-filter-input {
     width: 100%;
 }
@@ -162,6 +166,7 @@ const classes = {
     ],
     mask: 'p-tree-mask p-overlay-mask',
     loadingIcon: 'p-tree-loading-icon',
+    pcFilter: 'p-tree-filter',
     pcFilterInput: 'p-tree-filter-input',
     wrapper: 'p-tree-root', //TODO: discuss
     rootChildren: 'p-tree-root-children',

packages/primevue/src/treeselect/style/TreeSelectStyle.js

@@ -107,7 +107,6 @@ const theme = ({ dt }) => `
     overflow: hidden;
 }
 
-
 .p-treeselect-tree-container {
     overflow: auto;
 }

packages/themes/src/presets/aura/tree/index.js

@@ -47,5 +47,8 @@ export default {
     },
     loadingIcon: {
         size: '2rem'
+    },
+    filter: {
+        margin: '0 0 0.5rem 0'
     }
 };

packages/themes/src/presets/lara/tree/index.js

@@ -47,5 +47,8 @@ export default {
     },
     loadingIcon: {
         size: '2rem'
+    },
+    filter: {
+        margin: '0 0 0.5rem 0'
     }
 };

packages/themes/src/presets/material/tree/index.js

@@ -48,6 +48,9 @@ export default {
     loadingIcon: {
         size: '2rem'
     },
+    filter: {
+        margin: '0 0 0.75rem 0'
+    },
     css: ({ dt }) => `
 .p-tree-node-content {
     transition: none;

packages/themes/src/presets/nora/tree/index.js

@@ -47,5 +47,8 @@ export default {
     },
     loadingIcon: {
         size: '2rem'
+    },
+    filter: {
+        margin: '0 0 0.5rem 0'
     }
 };