@dataloop-ai/components 0.20.3 → 0.20.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.3",
+  "version": "0.20.4",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -1,11 +1,10 @@
 <template>
-    <div style="width: 200px">
+    <div class="dl-label-picker">
         <dl-input
             v-model="inputValue"
             :placeholder="placeHolderText"
-            size="l"
+            size="m"
             has-prepend
-            padding-prop="0px 0px 0px 0px"
             :style="inputStyles"
             @focus="onFocus"
             @blur="onBlur"
@@ -13,7 +12,7 @@
         >
             <template #prepend>
                 <dl-icon
-                    style="margin-bottom: 5px"
+                    color="dl-color-lighter"
                     icon="icon-dl-search"
                     size="12px"
                 />
@@ -142,7 +141,7 @@ export default defineComponent({
 
         const placeHolderText = computed(() => {
             if (!currentSelectedLabel.value) {
-                return `No items selected`
+                return 'Search a label'
             }
 
             return currentSelectedLabel.value.displayLabel
@@ -239,7 +238,25 @@ export default defineComponent({
 </script>
 
 <style scope>
+.dl-label-picker {
+    width: 200px;
+}
 .dl-label-picker-item {
     cursor: pointer;
+    height: 32px;
+    line-height: 30px;
+}
+</style>
+
+<style>
+.dl-label-picker .dl-table thead tr,
+.dl-label-picker .dl-table .inner-th-wrapper {
+    height: 10px;
+}
+.dl-label-picker .dl-table tbody tr {
+    height: auto;
+}
+.dl-label-picker .dl-table tbody tr td {
+    padding: 2px 0;
 }
 </style>

package/src/components/compound/DlInput/DlInput.vue

@@ -1563,9 +1563,9 @@ export default defineComponent({
 
     &__adornment-container {
         display: flex;
-        justify-content: center;
+        justify-content: end;
         align-items: var(--dl-input-align-items);
-        width: 30px;
+        flex: 0 0 22px;
         &--expandable {
             margin-top: 3px;
             margin-right: 3px;