@dataloop-ai/components 0.16.55 → 0.16.57

package/package.json

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

package/src/components/basic/DlAlert/DlAlert.vue

@@ -8,16 +8,13 @@
         data-test="root"
     >
         <div>
-            <div
-                :style="iconStyle"
+            <dl-icon
                 data-test="icon"
-            >
-                <dl-icon
-                    :icon="icon"
-                    :color="iconColor"
-                    size="24px"
-                />
-            </div>
+                :style="iconStyle"
+                :icon="icon"
+                :color="iconColor"
+                size="24px"
+            />
             <span
                 class="text"
                 :style="textStyle"
@@ -27,6 +24,7 @@
             v-if="closable"
             class="close-btn"
             data-test="close-btn"
+            :style="closeButtonStyle"
         >
             <dl-icon
                 class="close-btn-icon"
@@ -127,6 +125,7 @@ export default defineComponent({
         const rootRef = ref(null)
         const rootStyle = ref()
         const iconStyle = ref()
+        const closeButtonStyle = ref()
 
         onMounted(() => {
             normalizeStyles(props.fluid)
@@ -157,7 +156,7 @@ export default defineComponent({
                 const rootS: Record<string, any> = {
                     backgroundColor: getColor(typeToBackgroundMap[type])
                 }
-                if (height > 36) {
+                if (height > 46) {
                     iconS.alignSelf = 'flex-start'
                 } else {
                     iconS.alignSelf = 'center'
@@ -169,6 +168,7 @@ export default defineComponent({
                 }
                 iconStyle.value = iconS
                 rootStyle.value = rootS
+                closeButtonStyle.value = iconS
             })
         }
 
@@ -185,6 +185,7 @@ export default defineComponent({
             iconColor,
             rootStyle,
             iconStyle,
+            closeButtonStyle,
             textStyle,
             handleClose
         }
@@ -218,7 +219,7 @@ export default defineComponent({
     }
 
     .close-btn {
-        padding-right: 16px;
+        padding-right: 10px;
         padding-left: 10px;
         align-items: var(--dl-alert-align-button, start);
     }

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

@@ -10,7 +10,7 @@
             :tabindex="tabIndex"
             :aria-disabled="disabled ? 'true' : 'false'"
             :disabled="disabled"
-            :style="[cssButtonVars, computedStyles]"
+            :style="[computedStyles]"
             style="pointer-events: auto"
             class="dl-button"
             @click="onClick"

package/src/components/compound/DlSearches/DlSearch/DlSearch.vue

@@ -14,7 +14,7 @@
             :placeholder="placeholder"
             :auto-suggest-items="autoSuggestItems"
             :highlight-matches="highlightMatches"
-            :without-root-padding="withoutRootPadding"
+            :dense="dense"
             :suggest-menu-width="suggestMenuWidth"
             @input="onChange"
             @focus="onFocus"
@@ -81,7 +81,7 @@ export default defineComponent({
             default: (): string[] => []
         },
         highlightMatches: { type: Boolean, default: false },
-        withoutRootPadding: { type: Boolean, default: false },
+        dense: { type: Boolean, default: false },
         withSearchBtn: { type: Boolean, default: false },
         suggestMenuWidth: { type: String, default: 'auto' }
     },

package/src/demos/DlAlertDemo.vue

@@ -35,6 +35,7 @@
         <DlAlert
             type="info"
             text="Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
+            :closable="true"
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>

package/src/demos/DlInputDemo.vue

@@ -90,13 +90,16 @@
             error-message="Error message is the strongest."
         />
         <p>input in a row with button</p>
-        <div class="row">
+        <div
+            class="row"
+            style="align-items: center"
+        >
             <dl-input
                 class="input-parts"
                 style="width: 440px"
                 placeholder="Select option"
                 title="Min"
-                without-root-padding
+                dense
                 size="s"
             />
             <dl-button

package/src/demos/DlStepperDemo/steps/DataStep.vue

@@ -69,7 +69,7 @@
                         v-model="percentage"
                         style="width: 60px; margin: 0 10px 0 15px"
                         size="m"
-                        without-root-padding
+                        dense
                         disable-clear-btn
                     />
                     <dl-typography color="dl-color-medium">Items Limit</dl-typography>

package/src/demos/DlStepperDemo/steps/GeneralStep.vue

@@ -23,7 +23,7 @@
         </div>
         <div class="inputs-container">
             <dl-input
-                without-root-padding
+                dense
                 required
                 title="Name"
             />
@@ -58,7 +58,7 @@
                 :options="['High', 'Medium', 'Low']"
             />
             <dl-input
-                without-root-padding
+                dense
                 title="Completion Due Date"
                 placeholder="dd/mm/yy"
             />

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -3,7 +3,7 @@
         <div style="margin: 40px 0">
             <dl-checkbox
                 v-model="switchState"
-                without-root-padding
+                dense
                 label="Disabled"
             />
         </div>