@dataloop-ai/components 0.18.61 → 0.18.62

package/package.json

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

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

@@ -16,6 +16,8 @@
             @click="onClick"
             @dblclick="onDblClick"
             @mousedown="onMouseDown"
+            @mouseenter="mouseOver = true"
+            @mouseleave="mouseOver = false"
         >
             <dl-tooltip
                 v-if="!tooltip && overflow && isOverflowing && hasLabel"
@@ -182,6 +184,7 @@ export default defineComponent({
         const { active } = toRefs(props)
         const buttonLabelRef = ref(null)
         const { hasEllipsis } = useSizeObserver(buttonLabelRef)
+        const mouseOver = ref(false)
 
         const buttonClass = computed(() => {
             const classes = ['dl-button']
@@ -195,7 +198,8 @@ export default defineComponent({
             uuid: `dl-button-${v4()}`,
             buttonLabelRef,
             isOverflowing: hasEllipsis,
-            buttonClass
+            buttonClass,
+            mouseOver
         }
     },
     computed: {
@@ -206,6 +210,10 @@ export default defineComponent({
             ]
         },
         getIconColor(): string {
+            if (this.mouseOver) {
+                return 'dl-color-hover'
+            }
+
             if (this.iconColor) {
                 return this.iconColor
             }
@@ -464,6 +472,9 @@ export default defineComponent({
             transition: var(--dl-button-text-transition-duration);
             color: var(--dl-button-color-hover);
         }
+        .dl-icon {
+            color: var(--dl-button-text-color-hover) !important;
+        }
     }
 }
 

package/src/demos/DlButtonDemo.vue

@@ -287,13 +287,23 @@
         <div>
             <h3>Shaded and outlined</h3>
             <dl-button
-                :active="activeButtonState"
                 icon="icon-dl-search"
                 label="test me"
                 shaded
                 outlined
             />
         </div>
+        <div>
+            <h3>button with icon color</h3>
+            <dl-button
+                icon="icon-dl-search"
+                :icon-color="'red'"
+                label="test me"
+                size="s"
+                shaded
+                outlined
+            />
+        </div>
     </div>
 </template>