@dataloop-ai/components 0.17.74 → 0.17.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.74",
+  "version": "0.17.75",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -24,6 +24,7 @@
   "dependencies": {
     "@dataloop-ai/icons": "^3.0.6",
     "@types/lodash": "^4.14.184",
+    "@types/flat": "^5.0.2",
     "chart.js": "^3.9.1",
     "flat": "^5.0.2",
     "lodash": "^4.17.21",
@@ -46,7 +47,6 @@
     "@storybook/client-api": "^7.0.4",
     "@storybook/vue3": "^7.0.4",
     "@storybook/vue3-vite": "^7.0.4",
-    "@types/flat": "^5.0.2",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^18.7.18",
     "@types/resize-observer-browser": "^0.1.7",

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

@@ -24,6 +24,7 @@
             <div class="dl-button-content dl-anchor--skip">
                 <dl-icon
                     v-if="hasIcon"
+                    class="dl-button-icon"
                     :size="iconSizePX"
                     :color="iconColor || textColor"
                     :icon="icon"
@@ -135,7 +136,6 @@ export default defineComponent({
         /**
          * The width of the button will take that of its container
          */
-        shaded: { type: Boolean, default: false },
         fluid: Boolean,
         /**
          * The button will not have an outline
@@ -154,7 +154,6 @@ export default defineComponent({
             validator: (value: string): boolean =>
                 transformOptions.includes(value)
         },
-        outlined: Boolean,
         /**
          * Doesn't allow the button's text to be wrapped along multiple rows
          */
@@ -172,7 +171,9 @@ export default defineComponent({
          * The button will maintain the styles it has when it's pressed if this prop is active
          */
         active: { type: Boolean, default: false, required: false },
-        styles: { type: [Object, String], default: null }
+        styles: { type: [Object, String], default: null },
+        shaded: { type: Boolean, default: false },
+        outlined: Boolean
     },
     emits: ['click', 'mousedown'],
     setup(props) {
@@ -334,6 +335,8 @@ export default defineComponent({
             }
 
             return {
+                '--dl-button-transition-duration': 'all ease 0.15s',
+                '--dl-button-text-transition-duration': 'all ease 0.05s',
                 '--dl-button-container-width': this.fluid ? '100%' : 'auto',
                 '--dl-button-padding': this.dense
                     ? '0'
@@ -416,27 +419,28 @@ export default defineComponent({
     align-items: stretch;
     position: relative;
     vertical-align: middle;
-    transition: all ease-in 0.15s;
+    transition: var(--dl-button-transition-duration);
     justify-content: center;
 
     &:active {
-        transition: all ease-in 0.15s;
+        transition: var(--dl-button-transition-duration);
         color: var(--dl-button-text-color-pressed) !important;
         background-color: var(--dl-button-bg-pressed) !important;
         border-color: var(--dl-button-border-pressed) !important;
 
         & > span > i {
-            transition: all ease-in 0.15s;
+            transition: var(--dl-button-text-transition-duration);
         }
     }
 
     &:hover:enabled:not(:active) {
+        transition: var(--dl-button-transition-duration);
         color: var(--dl-button-text-color-hover);
         background-color: var(--dl-button-bg-hover);
         border-color: var(--dl-button-border-hover);
 
         & .dl-button-label {
-            transition: all ease-in 0.15s;
+            transition: var(--dl-button-text-transition-duration);
             color: var(--dl-button-color-hover);
         }
     }
@@ -456,6 +460,10 @@ export default defineComponent({
     gap: var(--dl-button-content-gap, 7px);
 }
 
+.dl-button-icon {
+    transition: var(--dl-button-text-transition-duration);
+}
+
 .dl-button-container.first-letter-capitalized {
     &::first-letter,
     & > *::first-letter {
@@ -472,9 +480,11 @@ export default defineComponent({
     color: var(--dl-button-text-color-hover);
     background-color: var(--dl-button-bg-hover);
     border-color: var(--dl-button-border-hover);
+    transition: var(--dl-button-transition-duration);
+
     & .dl-button-label {
-        transition: all ease-in 0.15s;
         color: var(--dl-button-color-hover);
+        transition: var(--dl-button-text-transition-duration);
     }
 }
 </style>

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

@@ -71,7 +71,7 @@ export const setTextColor = ({
         return getColor('', 'dl-color-disabled')
     }
     if (shaded && outlined) {
-        return 'var(--dl-color-text-darker-buttons)'
+        return getColor(textColor, 'dl-color-text-darker-buttons')
     }
     if (outlined) {
         return getColor(textColor, 'dl-color-secondary')

package/src/components/basic/DlEllipsis/DlEllipsis.vue

@@ -82,7 +82,7 @@ export default defineComponent({
         }
     },
     // TODO: fix type issue here
-    setup(props: any, { slots }) {
+    setup(props: any, { slots }: any) {
         const dlEllipsisRef = ref(null)
         const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
 

package/src/demos/DlButtonDemo.vue

@@ -284,6 +284,16 @@
                 </div>
             </dl-button>
         </div>
+        <div>
+            <h3>Shaded and outlined</h3>
+            <dl-button
+                :active="activeButtonState"
+                icon="icon-dl-search"
+                label="test me"
+                shaded
+                outlined
+            />
+        </div>
     </div>
 </template>