@dataloop-ai/components 0.20.219 → 0.20.220

package/package.json

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

package/src/components/basic/DlAlert/DlAlert.vue

@@ -8,7 +8,7 @@
             :style="rootStyle"
             data-test="root"
         >
-            <div>
+            <div class="content">
                 <dl-icon
                     data-test="icon"
                     :style="iconStyle"
@@ -16,12 +16,12 @@
                     :color="iconColor"
                     :size="iconSize"
                 />
-                <span class="text" :style="textStyle">
+                <div class="text" :style="textStyle">
                     <slot v-if="!text" />
                     <span v-else>
                         {{ text }}
                     </span>
-                </span>
+                </div>
             </div>
             <div
                 v-if="$slots.actions"
@@ -250,7 +250,7 @@ export default defineComponent({
                 const iconS: Record<string, any> = {
                     display: 'flex',
                     alignSelf: 'flex-start',
-                    paddingTop: '2px'
+                    marginTop: '2px'
                 }
                 const closeS: Record<string, any> = {
                     display: 'flex',
@@ -277,7 +277,7 @@ export default defineComponent({
                 if (padding.value) {
                     rootS['--dl-alert-padding'] = padding.value
                 } else {
-                    rootS['--dl-alert-padding'] = '8px 16px'
+                    rootS['--dl-alert-padding'] = '8px 16px 8px 12px'
                 }
 
                 iconStyle.value = iconS
@@ -335,6 +335,7 @@ export default defineComponent({
     display: inline-flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: stretch;
     min-height: 36px;
     border-left: 4px solid var(--dl-alert-indicator-color, transparent);
     border-top: 1px solid var(--dl-alert-border-color, transparent);
@@ -363,22 +364,24 @@ export default defineComponent({
         text-decoration: underline;
     }
 
-    > div {
+    .content {
         display: flex;
         flex-direction: row;
-        padding: var(--dl-alert-padding, 10px 16px);
+        align-items: center;
+        gap: 8px;
+        padding: var(--dl-alert-padding);
+        min-width: 0;
+        flex: 1 1 auto;
     }
 
     .text {
-        padding-left: 8px;
-        padding-top: 2px;
-        font-size: var(--dl-font-size-body);
-        line-height: normal;
-        align-self: flex-start;
+        color: var(--dell-gray-800);
+        align-self: center;
         font-size: 14px;
-        line-height: 16px;
+        line-height: 20px;
         font-weight: 400;
         word-break: break-word;
+        min-width: 0;
     }
 
     .close-button {

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

@@ -342,12 +342,15 @@ export default defineComponent({
 .toast-text {
     min-width: 0;
     flex: 1 1 auto;
+    display: inline-block;
+    vertical-align: top;
 }
 
 .toast-title {
-    font-size: var(--dl-font-size-alert-title, 16px);
+    color: var(--dell-gray-800);
+    font-size: 16px;
+    font-weight: 400;
     line-height: 150%;
-    margin-bottom: 2px;
 }
 
 .toast-text--single {
@@ -358,7 +361,7 @@ export default defineComponent({
 
 .toast-caption {
     margin-top: 2px;
-    opacity: 0.8;
+    font-size: inherit;
 }
 
 .toast-message--pre-line {

package/src/demos/DlToastDemo.vue

@@ -104,6 +104,12 @@
                 :left-label="htmlEnabled ? 'HTML true' : 'HTML false'"
             />
         </div>
+        <dl-button @click="showToastWithTitleTextCaption" style="margin-top: 8px">
+            Toast with Title + Text + Caption
+        </dl-button>
+        <dl-button style="margin-top: 8px" @click="showToastWithTwoActions">
+            Toast with buttons
+        </dl-button>
     </div>
 </template>
 
@@ -139,6 +145,33 @@ export default defineComponent({
         const width = ref('auto')
         const collapseCount = ref(null)
         const htmlEnabled = ref(false)
+
+        function showToastWithTwoActions() {
+            DlToast.open({
+                message: '',
+                caption: 'This is a single-line caption toast with 2 actions.',
+                multiLine: false,
+                position: position.value as DlToastPositions,
+                type: type.value as DlToastTypes,
+                duration: Number(duration.value) || 1000,
+                closable: closable.value,
+                width: width.value,
+                collapseCount: collapseCount.value,
+                actions: [
+                    {
+                        label: 'Action 1',
+                        closeOnClick: true,
+                        handler: () => undefined
+                    },
+                    {
+                        label: 'Action 2',
+                        closeOnClick: true,
+                        handler: () => undefined
+                    }
+                ]
+            })
+        }
+
         function showToastMessage() {
             DlToast.open({
                 message: message.value,
@@ -202,11 +235,27 @@ export default defineComponent({
                 multiLine: true
             } as any)
         }
+
+        function showToastWithTitleTextCaption() {
+            DlToast.open({
+                title: 'Toast Title',
+                message: 'This is the main message text that appears in the toast.',
+                caption: 'This is the caption that appears below the message.',
+                position: position.value as DlToastPositions,
+                type: type.value as DlToastTypes,
+                duration: Number(duration.value) || 1000,
+                closable: closable.value,
+                width: width.value,
+                collapseCount: collapseCount.value
+            })
+        }
         return {
             showToastMessageCustom,
             showToastMessage,
             showToastMultiLine,
             showToastWithLink,
+            showToastWithTitleTextCaption,
+            showToastWithTwoActions,
             message,
             duration,
             type,