@dataloop-ai/components 0.16.43 → 0.16.45

package/package.json

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

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

@@ -25,7 +25,6 @@
                     v-if="hasIcon"
                     :size="iconSizePX"
                     :color="iconColor || textColor"
-                    :class="{ 'dl-button-icon': hasContent }"
                     :icon="icon"
                     :style="cssButtonVars"
                 />
@@ -33,11 +32,17 @@
                     v-if="hasLabel"
                     ref="buttonLabelRef"
                     class="dl-button-label"
-                    :class="{ 'dl-button-no-wrap': noWrap }"
+                    :class="{
+                        'dl-button-no-wrap': noWrap
+                    }"
                 >
                     {{ buttonLabel }}
                 </span>
-                <slot />
+                <slot
+                    :class="{
+                        'dl-button-label--icon-sibling': hasIcon
+                    }"
+                />
             </span>
         </button>
         <dl-tooltip
@@ -293,6 +298,7 @@ export default defineComponent({
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
 .dl-button {
     padding: var(--dl-button-padding);
     border-radius: var(--dl-button-border-radius);
@@ -313,25 +319,30 @@ export default defineComponent({
     vertical-align: middle;
     transition: all ease-in 0.15s;
     justify-content: center;
+
     &:active {
         transition: all ease-in 0.15s;
         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;
         }
     }
+
     &:hover:enabled:not(:active) {
         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;
             color: var(--dl-button-color-hover);
         }
     }
 }
+
 .dl-button-content {
     display: flex;
     text-align: center;
@@ -344,11 +355,12 @@ export default defineComponent({
     z-index: 0;
     user-select: none !important;
     min-width: 1.5em;
+    gap: var(--dl-button-gap, 7px);
 }
 
-.dl-button-icon {
-    margin: var(--dl-button-icon-margin, 0px 7px 0px 0px);
-}
+//.dl-button-label--icon-sibling {
+//  margin: var(--dl-button-icon-margin, 0px 0px 0px 7px);
+//}
 
 .dl-button-container {
     display: inline-block;

package/src/components/basic/DlChip/DlChip.vue

@@ -217,13 +217,6 @@ export default defineComponent({
     background-color: var(--dl-chip-bg-color);
     border: var(--dl-chip-border);
 
-    .first-letter-capitalized {
-        &::first-letter,
-        & > *::first-letter {
-            text-transform: capitalize;
-        }
-    }
-
     &--content {
         cursor: default;
         width: auto;
@@ -237,6 +230,14 @@ export default defineComponent({
         overflow: hidden;
     }
 }
+
+.dl-chip.first-letter-capitalized {
+    &::first-letter,
+    & > *::first-letter {
+        text-transform: capitalize;
+    }
+}
+
 .dl-chip-remove-icon-container {
     cursor: var(--dl-chip-left-icon-cursor);
     position: absolute;

package/src/demo/DlButtonDemo.vue

@@ -10,7 +10,7 @@
                     <DlButton
                         :size="buttonSize"
                         color="dl-color-negative"
-                        label="COntained text filled"
+                        label="Contained text filled"
                         @click="log"
                     />
                     <DlButton
@@ -230,6 +230,18 @@
                 />
             </dl-button>
         </div>
+        <div>
+            <h3>Button with icon no label and menu</h3>
+            <p>should not have extra margin in right</p>
+            <dl-button icon="icon-dl-search">
+                <dl-menu>
+                    <dl-list>
+                        <dl-list-item>item 1</dl-list-item>
+                        <dl-list-item> item 2</dl-list-item>
+                    </dl-list>
+                </dl-menu>
+            </dl-button>
+        </div>
     </div>
 </template>
 
@@ -237,9 +249,16 @@
 import { defineComponent, reactive } from 'vue-demi'
 import { DlButton, DlBadge, DlIcon } from '../components'
 import { ButtonSizes } from '../components/basic/DlButton/utils'
+import DlMenu from '../components/essential/DlMenu/DlMenu.vue'
+import DlList from '../components/essential/DlList/DlList.vue'
+import DlListItem from '../components/basic/DlListItem/DlListItem.vue'
+
 export default defineComponent({
     name: 'DlButtonDemo',
     components: {
+        DlListItem,
+        DlList,
+        DlMenu,
         DlButton,
         DlBadge,
         DlIcon
@@ -260,6 +279,7 @@ export default defineComponent({
     flex-wrap: wrap;
     min-width: 0;
     max-width: 100%;
+
     & > button,
     & > div.dl-chip {
         margin: 0 0 0 8px;

package/src/demo/DlChipDemo.vue

@@ -66,7 +66,7 @@
             <DlChip
                 removable
                 icon="icon-dl-search"
-                label="Chip filled"
+                label="chip filled"
                 @remove="log('test')"
             />
             <DlChip
@@ -78,19 +78,19 @@
                 removable
                 icon="icon-dl-search"
                 outlined
-                label="Chip outlined"
+                label="chip outlined"
                 @remove="log('test')"
             />
             <DlChip
                 removable
                 icon="icon-dl-search"
                 disabled
-                label="Chip disabled"
+                label="chip disabled"
                 @remove="log('test')"
             />
             <DlChip
                 removable
-                label="Ellipsed Chip with a multiple words"
+                label="ellipsed Chip with a multiple words"
                 icon="icon-dl-search"
                 @remove="log('test')"
             />
@@ -130,7 +130,17 @@
             <DlChip
                 ref="removableChip"
                 removable
-                label="Ellipsed Chip with a multiple words"
+                label="ellipsed Chip with a multiple words"
+            />
+        </div>
+        <h4>Chips with no text transform</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                label="ellipsed Chip with a multiple words"
+                transform="none"
             />
         </div>
         <div class="col">