fix(ktoaster): icon, title and message styling

docs/components/toaster.md

@@ -62,7 +62,7 @@ KToaster is the underlying component rendered by the `ToastManager` instance, so
 ```ts
 interface Toast {
   key?: any
-  title: string
+  title?: string
   message?: string
   appearance?: ToasterAppearance
   timeoutMilliseconds?: number
@@ -71,38 +71,38 @@ interface Toast {
 
 ### title
 
-Notification title. When passing an object to `$toaster.open()` method, the `title` property is required. When passing only a string, the string will be rendered as the title.
+Notification title.
 
-<div class="horizontal-container">
-  <KButton @click="$toaster.open({ title: 'Long Title Gets Truncated With Ellipsis' })">Open Toaster</KButton>
-  <KButton @click="$toaster.open('String Will Become A Title')" appearance="secondary">Open Toaster</KButton>
-</div>
+<KButton @click="$toaster.open({ title: 'Notification Title' })">Open Toaster</KButton>
 
 ```html
-<KButton @click="$toaster.open({ title: 'Long Title Gets Truncated With Ellipsis' })">Open Toaster</KButton>
-<KButton @click="$toaster.open('String Will Become A Title')" appearance="secondary">Open Toaster</KButton>
+<KButton @click="$toaster.open({ title: 'Notification Title' })">Open Toaster</KButton>
 ```
 
 ### message
 
-The message prop allows for displaying longer strings of text to the user. This prop is good for more detailed messages, or displaying IDs, etc.
+The message string that allows for displaying longer strings of text to the user. This prop is good for more detailed messages.
 
-Because a long title gets truncated, it is only good for short notifications. When a longer notification needs to be shown to the user, the `message` property is ideal.
+Alternatively, if you provide a string as the only argument to the `open()` method, it will be treated as message.
 
-<KButton @click="$toaster.open({ 
-  title: 'Long Title Gets Truncated With Ellipsis',
-  message: 'Detailed message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' })"
->
-  Open Toaster
-</KButton>
+<div class="horizontal-container">
+  <KButton @click="$toaster.open({ 
+    title: 'Title',
+    message: 'Detailed message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' })"
+  >
+    Open Toaster
+  </KButton>
+  <KButton @click="$toaster.open('String will become a message.')" appearance="secondary">Open Toaster</KButton>
+</div>
 
 ```html
 <KButton @click="$toaster.open({ 
-  title: 'Long Title Gets Truncated With Ellipsis',
+  title: 'Title',
   message: 'Detailed message. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' })"
 >
   Open Toaster
 </KButton>
+<KButton @click="$toaster.open('String will become a message.')" appearance="secondary">Open Toaster</KButton>
 ```
 
 ### appearance

sandbox/pages/SandboxToaster.vue

@@ -102,7 +102,7 @@ const openToaster = (argument: string) => {
       break
     case 'title':
       options = {
-        title: 'Toast with truncated title and no message',
+        title: 'Toast with very long title and no message',
         appearance: 'system',
       }
       break

src/components/KToaster/KToaster.vue

@@ -11,33 +11,36 @@
       :class="`${toaster.appearance}`"
       role="alert"
     >
-      <div class="toaster-header">
-        <div class="toaster-icon-container">
-          <component
-            :is="getToastIcon(toaster.appearance)"
-            class="toaster-icon"
-            :color="KUI_COLOR_TEXT"
-          />
-        </div>
-        <span class="toaster-title">
+      <div class="toaster-icon-container">
+        <component
+          :is="getToastIcon(toaster.appearance)"
+          class="toaster-icon"
+          :color="KUI_COLOR_TEXT"
+        />
+      </div>
+      <div class="toaster-content">
+        <span
+          v-if="toaster.title"
+          class="toaster-title"
+        >
           {{ toaster.title }}
         </span>
-        <CloseIcon
-          class="toaster-close-icon"
-          :color="KUI_COLOR_TEXT_NEUTRAL_WEAK"
-          data-testid="toaster-close-icon"
-          role="button"
-          :size="KUI_ICON_SIZE_50"
-          tabindex="0"
-          @click="() => $emit('close', toaster.key)"
-        />
+        <p
+          v-if="toaster.message"
+          class="toaster-message"
+        >
+          {{ toaster.message }}
+        </p>
       </div>
-      <p
-        v-if="toaster.message"
-        class="toaster-message"
-      >
-        {{ toaster.message }}
-      </p>
+      <CloseIcon
+        class="toaster-close-icon"
+        :color="KUI_COLOR_TEXT_NEUTRAL_WEAK"
+        data-testid="toaster-close-icon"
+        role="button"
+        :size="KUI_ICON_SIZE_50"
+        tabindex="0"
+        @click="$emit('close', toaster.key)"
+      />
     </div>
   </TransitionGroup>
 </template>
@@ -92,64 +95,63 @@ const getToastIcon = (appearance?: ToasterAppearance): ToastIcon => {
   z-index: 10000;
 
   .toaster {
+    align-items: flex-start;
+    align-items: center;
     background-color: var(--kui-color-background-inverse, $kui-color-background-inverse);
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
     box-shadow: var(--kui-shadow, $kui-shadow);
     color: var(--kui-color-text-inverse, $kui-color-text-inverse);
     display: flex;
-    flex-direction: column;
-    gap: var(--kui-space-30, $kui-space-30);
+    gap: var(--kui-space-50, $kui-space-50);
     padding: var(--kui-space-50, $kui-space-50);
     width: 100%;
 
-    .toaster-header {
+    .toaster-icon-container {
       align-items: center;
+      background-color: var(--kui-color-background-primary-weak, $kui-color-background-primary-weak); // info appearance as default in case of invalid appearance
+      border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle);
       display: flex;
-      gap: var(--kui-space-50, $kui-space-50);
+      height: 32px;
+      justify-content: center;
+      width: 32px;
+    }
 
-      .toaster-icon-container {
-        align-items: center;
-        background-color: var(--kui-color-background-primary-weak, $kui-color-background-primary-weak); // info appearance as default in case of invalid appearance
-        border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle);
-        display: flex;
-        height: 32px;
-        justify-content: center;
-        width: 32px;
-      }
+    .toaster-content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--kui-space-30, $kui-space-30);
 
       .toaster-title {
-        @include truncate;
-
-        flex: 1;
         font-family: var(--kui-font-family-text, $kui-font-family-text);
         font-size: var(--kui-font-size-50, $kui-font-size-50);
         font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
         letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
         line-height: var(--kui-line-height-40, $kui-line-height-40);
       }
 
-      .toaster-close-icon {
-        border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-        cursor: pointer;
-        margin-left: var(--kui-space-auto, $kui-space-auto);
-        outline: none;
+      .toaster-message {
+        font-family: var(--kui-font-family-text, $kui-font-family-text);
+        font-size: var(--kui-font-size-30, $kui-font-size-30);
+        font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+        line-height: var(--kui-line-height-30, $kui-line-height-30);
+        margin: var(--kui-space-0, $kui-space-0);
+      }
+    }
 
-        &:hover, &:focus {
-          color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker) !important;
-        }
+    .toaster-close-icon {
+      border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+      cursor: pointer;
+      margin-left: var(--kui-space-auto, $kui-space-auto);
+      outline: none;
 
-        &:focus-visible {
-          box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
-        }
+      &:hover, &:focus {
+        color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker) !important;
       }
-    }
 
-    .toaster-message {
-      font-family: var(--kui-font-family-text, $kui-font-family-text);
-      font-size: var(--kui-font-size-30, $kui-font-size-30);
-      font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-      line-height: var(--kui-line-height-30, $kui-line-height-30);
-      margin: var(--kui-space-0, $kui-space-0);
+      &:focus-visible {
+        box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+      }
     }
 
     // appearances

src/components/KToaster/ToastManager.ts

@@ -57,14 +57,14 @@ export default class ToastManager {
     const _key: any = key || (this.toasters.value.length) + new Date().getTime()
     const _appearance: ToasterAppearance = (appearance && APPEARANCES.indexOf(appearance) !== -1) ? appearance : this.appearance
     const timer: number = this.setTimer(_key, timeoutMilliseconds || this.timeout)
-    const _title = typeof args === 'string' ? args : title
+    const _message = typeof args === 'string' ? args : message
 
     // Add toaster to state
     this.toasters.value.push({
       key: _key,
       appearance: _appearance,
-      title: _title,
-      message: message || '',
+      title,
+      message: _message,
       timer,
       timeoutMilliseconds: timeoutMilliseconds || this.timeout,
     })

src/types/toaster.ts

@@ -2,7 +2,7 @@ export type ToasterAppearance = 'info' | 'success' | 'danger' | 'warning' | 'sys
 
 export interface Toast {
   key?: any // unique identifier of toaster
-  title: string // Title of toaster
+  title?: string // Title of toaster
   message?: string // Text to display in toaster
   appearance?: ToasterAppearance
   timeoutMilliseconds?: number