@dataloop-ai/components 0.20.266 → 0.20.268

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -570,7 +570,7 @@ export default defineComponent({
     margin: var(--dl-button-margin);
     border-radius: var(--dl-button-border-radius);
     font-family: var(--dl-typography-body-body2-font-family);
-    font-size: var(--dl-button-font-size);
+    font-size: var(--dl-typography-body-body2-font-size);
     font-weight: var(--dl-typography-body-body2-font-weight);
     cursor: var(--dl-button-cursor);
     color: var(--dl-button-text-color);

package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue

@@ -26,6 +26,7 @@
             <slot name="actions" />
             <dl-button
                 v-if="closeButton"
+                class="close-button"
                 icon="icon-dl-close"
                 icon-size="16px"
                 flat
@@ -68,7 +69,7 @@ export default defineComponent({
     setup(props, { slots }) {
         const hasTitle = computed(() => !!props.title || !!slots.title)
         const hasSubtitle = computed(() => !!props.subtitle || !!slots.subtitle)
-        const closeIconSizePadding = `0 0 0 0`
+        const closeIconSizePadding = `4px`
         return { hasTitle, hasSubtitle, closeIconSizePadding }
     }
 })
@@ -105,8 +106,10 @@ export default defineComponent({
     display: flex;
     gap: var(--dl-dialog-box-header-actions-gap, 4px);
     align-items: flex-start;
-    ::v-deep button.dl-button {
+    .close-button ::v-deep button.dl-button {
         --dl-button-border-radius: 0;
+        border: none;
+        --dl-button-border: none;
         &:focus-visible {
             --dl-button-border-radius: 2px;
         }

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -1277,7 +1277,9 @@ export default defineComponent({
         background-color: var(--dl-color-panel-background);
         cursor: text;
 
-        font-size: 12px;
+        font-family: var(--dl-typography-body-body2-font-family);
+        font-size: var(--dl-typography-body-body2-font-size);
+        font-weight: var(--dl-typography-body-body2-font-weight);
         line-height: 14px;
 
         border: 1px solid var(--dl-color-separator);
@@ -1338,10 +1340,10 @@ export default defineComponent({
     }
 
     &__textarea {
-        font-size: 12px;
-        font-weight: 400;
+        font-size: var(--dl-typography-body-body2-font-size);
+        font-weight: var(--dl-typography-body-body2-font-weight);
         line-height: 14px;
-        font-family: 'Roboto', sans-serif;
+        font-family: var(--dl-typography-body-body2-font-family);
         width: 100%;
         border: none;
         outline: none;
@@ -1366,6 +1368,10 @@ export default defineComponent({
             color: var(--dl-color-lighter);
             /* In case this causes render shadowing move to use html/injection approach */
             content: attr(placeholder);
+            display: inline-block;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         & > * {
             display: flex;

package/src/components/compound/DlStepper/components/DlStepperHeader.vue

@@ -7,10 +7,16 @@
         </slot>
         <dl-button
             v-if="!hideCloseButton"
-            text-color="dl-color-darker"
-            flat
+            class="close-button"
             icon="icon-dl-close"
-            size="xl"
+            icon-size="16px"
+            flat
+            size="m"
+            text-color="var(--dell-gray-600)"
+            hover-bg-color="var(--dell-gray-100)"
+            pressed-bg-color="var(--dell-gray-200)"
+            hover-text-color="var(--dell-gray-800)"
+            pressed-text-color="var(--dell-gray-800)"
             :padding="closeIconSizePadding"
             @click="$emit('close')"
         />
@@ -38,7 +44,7 @@ export default defineComponent({
     },
     emits: ['close'],
     setup() {
-        const closeIconSizePadding = `0 0 0 0`
+        const closeIconSizePadding = `4px`
         return { closeIconSizePadding }
     }
 })
@@ -51,4 +57,13 @@ export default defineComponent({
     padding: 16px;
     border-bottom: 1px solid var(--dl-color-separator);
 }
+.close-button {
+    ::v-deep button.dl-button {
+        --dl-button-border-radius: 0;
+        border: none;
+        &:focus-visible {
+            --dl-button-border-radius: 2px;
+        }
+    }
+}
 </style>

package/src/components/compound/DlToast/components/ToastComponent.vue

@@ -71,6 +71,7 @@
                 </template>
                 <dl-badge
                     v-if="count"
+                    class="toast-counter"
                     with-border
                     floating
                     align="top"
@@ -80,14 +81,6 @@
                             ? 'var(--dl-color-alert-text)'
                             : 'var(--dl-color-text-buttons)'
                     "
-                    style="
-                        display: grid;
-                        text-align: center;
-                        width: fit-content;
-                        padding: 3px;
-                        min-width: 1em;
-                        top: -5px;
-                    "
                 >
                     {{ count + 1 }}
                 </dl-badge>
@@ -358,6 +351,21 @@ export default defineComponent({
     font-size: inherit;
 }
 
+.toast-counter.toast-counter {
+    display: grid;
+    text-align: center;
+    width: fit-content;
+    padding: 1px 3px;
+    min-width: 20px;
+    min-height: 20px;
+    top: -5px;
+    right: -8px;
+    font-family: var(--dl-typography-body-body3-font-family);
+    font-size: var(--dl-typography-body-body3-font-size);
+    line-height: var(--dl-typography-body-body3-line-height);
+    font-weight: var(--dl-typography-body-body3-font-weight);
+}
+
 .toast-message--pre-line {
     white-space: pre-line;
 }