@dataloop-ai/components 0.20.224 → 0.20.226

package/package.json

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

package/src/components/basic/DlListItem/utils.ts

@@ -1,8 +1,8 @@
 export const itemHoverColor = (isActionable: boolean) =>
-    isActionable ? 'var(--dl-color-fill-hover)' : 'transparent'
+    isActionable ? 'var(--dell-blue-100)' : 'transparent'
 
 export const itemActiveColor = (isActionable: boolean) =>
-    isActionable ? 'var(--dl-color-fill)' : 'transparent'
+    isActionable ? 'var(--dell-blue-100)' : 'transparent'
 
 export const itemCursor = (actionable: boolean, disabled: boolean) =>
     actionable ? 'pointer' : disabled ? 'not-allowed' : 'cursor'

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

@@ -281,7 +281,7 @@ export default defineComponent({
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: var(--dl-backdrop-color);
+    background-color: var(--dell-overlay);
     z-index: var(
         --dialog-z-index
     ); // todo: check if this should be overlay instead.
@@ -292,7 +292,7 @@ export default defineComponent({
     width: 100%;
     background-color: var(--dl-color-panel-background);
     border: 1px solid var(--dl-color-separator);
-    color: var(--dell-gray-200);
+    color: var(--dell-gray-800);
     display: flex;
     flex-direction: column;
     z-index: var(--dialog-z-index);

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

@@ -177,7 +177,7 @@ export default defineComponent({
             }
         }
         &-active {
-            background-color: var(--dl-color-back-tint-light);
+            background-color: var(--dell-blue-200);
         }
     }
 

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

@@ -119,7 +119,7 @@ import { Animation } from '../types'
 import { v4 } from 'uuid'
 
 const DEFAULT_ACTION_BUTTON_STYLES =
-    'min-width:73px; max-width:100px; height:24px; max-height:24px; padding:0 8px; border-radius:2px;'
+    'min-width:73px; max-width:150px; height:24px; max-height:24px; padding:0 8px; border-radius:2px;'
 
 export default defineComponent({
     name: 'ToastComponent',

package/src/components/essential/DlIcon/DlIcon.vue

@@ -3,6 +3,8 @@
         v-if="!isSVG"
         :id="uuid"
         :style="[inlineStyles, computedStyles]"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
         @click="$emit('click', $event)"
         @mousedown="$emit('mousedown', $event)"
         @mouseup="$emit('mouseup', $event)"
@@ -26,6 +28,8 @@
         v-else
         :id="uuid"
         :style="[inlineStyles, computedStyles]"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
         @click="$emit('click', $event)"
         @mousedown="$emit('mousedown', $event)"
         @mouseup="$emit('mouseup', $event)"
@@ -46,6 +50,7 @@ import {
     onMounted,
     onUnmounted,
     ref,
+    useSlots,
     toRefs,
     watch
 } from 'vue-demi'
@@ -97,11 +102,34 @@ export default defineComponent({
         const { styles, color, size, icon, svg, inline, svgSource, tooltip } =
             toRefs(props)
 
+        const slots = useSlots()
         const svgIcon = ref(null)
         const isDestroyed = ref(false)
         const uuid = `dl-icon-${v4()}`
         const externalIconSource = 'material-icons'
         const logger = loggerFactory('dl-icon')
+        const isHovered = ref(false)
+
+        const hasDefaultSlot = computed<boolean>(() => {
+            const slot = slots.default
+            if (!slot) return false
+            return slot().length > 0
+        })
+
+        const isInfoDefault = computed<boolean>(() => {
+            return (
+                icon.value === 'icon-dl-info' &&
+                !color.value &&
+                !hasDefaultSlot.value
+            )
+        })
+
+        const effectiveColor = computed<string | null>(() => {
+            if (isInfoDefault.value) {
+                return isHovered.value ? 'dell-blue-600' : 'dell-blue-500'
+            }
+            return color.value
+        })
 
         const computedStyles = computed<Record<string, string>>(() => {
             const generatedStyles = isString(styles.value)
@@ -121,12 +149,12 @@ export default defineComponent({
         const cssIconVars = computed<Record<string, string>>(() => {
             return {
                 '--dl-icon-font-size': `${size.value}`,
-                '--dl-icon-color': color.value
+                '--dl-icon-color': effectiveColor.value
                     ? // todo: remove this. this is needed for now until the swap of DLBTN in OA
                       getColor(
-                          color.value === 'secondary'
+                          effectiveColor.value === 'secondary'
                               ? 'q-color-secondary'
-                              : color.value,
+                              : effectiveColor.value,
                           'dell-gray-800'
                       )
                     : 'inherit'
@@ -164,6 +192,18 @@ export default defineComponent({
             return { display: inline.value ? 'inline-flex' : 'flex' }
         })
 
+        const onMouseEnter = () => {
+            if (isInfoDefault.value) {
+                isHovered.value = true
+            }
+        }
+
+        const onMouseLeave = () => {
+            if (isInfoDefault.value) {
+                isHovered.value = false
+            }
+        }
+
         const loadSvg = () => {
             return new Promise<void>((resolve, reject) => {
                 const loadedIcon = icon.value
@@ -239,7 +279,9 @@ export default defineComponent({
             loadSvg,
             isDestroyed,
             externalIcon,
-            inlineStyles
+            inlineStyles,
+            onMouseEnter,
+            onMouseLeave
         }
     }
 })

package/src/demos/DlIconDemo.vue

@@ -26,6 +26,9 @@
             title="Custom Label"
         />
         <DlIcon size="50px" :icon="inputValue" />
+        <div style="margin-top: 24px">
+            <DlIcon size="24px" icon="icon-dl-info" />
+        </div>
     </div>
 </template>