@dataloop-ai/components 0.20.229 → 0.20.231

package/package.json

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

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

@@ -253,6 +253,9 @@ export default defineComponent({
             ]
         },
         getIconColor(): string {
+            if (this.flat && this.hasIcon && !this.hasContent && this.icon === 'icon-dl-info') {
+                return null
+            }
             if (this.disabled) {
                 if (this.disabledIconColor) {
                     return this.disabledIconColor
@@ -303,7 +306,15 @@ export default defineComponent({
                 return this.textColor
             }
 
-            return null
+            return setTextColor({
+                disabled: this.disabled,
+                outlined: this.outlined,
+                flat: this.flat,
+                color: this.color,
+                filled: this.filled,
+                shaded: this.shaded,
+                textColor: this.textColor
+            })
         },
         computedStyles(): Record<string, string> {
             return isString(this.styles)

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

@@ -110,17 +110,10 @@ export default defineComponent({
         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
+                !color.value
             )
         })
 

package/src/components/essential/DlTypography/DlTypography.vue

@@ -129,7 +129,7 @@ export default defineComponent({
     }
 
     &:active {
-        color: var(--dl-typography-color-active);
+        color: var(--dl-typography-color-active, var(--dl-typography-color));
     }
 }
 </style>

package/src/demos/DlButtonDemo.vue

@@ -339,6 +339,30 @@
                 tooltip="test me please"
             />
         </div>
+        <div style="display: flex; justify-content: center; margin-top: 50px">
+            <dl-button
+                id="import-info-dl-button"
+                flat
+                icon="icon-dl-info"
+                size="s"
+            />
+        </div>
+        <div style="display: flex; justify-content: center; margin-top: 20px">
+            <dl-button
+                flat
+                icon="icon-dl-info"
+                size="s"
+                icon-color="dell-green-200"
+                text-color="dell-yellow-800"
+            >
+                Info Button
+                <dl-menu hover-group="info-menu">
+                    <div style="padding: 10px; text-align: center">
+                        Hello World
+                    </div>
+                </dl-menu>
+            </dl-button>
+        </div>
     </div>
 </template>