feedback

@xen-orchestra/lite/src/stories/web-core/toaster/ui-toaster.story.vue

@@ -4,46 +4,37 @@
     :params="[
       prop('accent')
         .type('ToasterColor')
-        .enum('normal', 'success', 'warning', 'danger')
-        .preset('normal')
+        .enum('info', 'success', 'warning', 'danger')
+        .preset('info')
         .required()
         .widget(),
-      prop('actionType').type('Type').enum('button', 'link').preset('button').required().widget(),
       setting('label').widget(text()).preset('Migration successful!'),
       setting('description').widget(text()).preset('All went well. 3 VMs have been successfully migrate.'),
       setting('actions').widget(text()).preset('Label'),
+      setting('showLink').widget(boolean()),
+      slot(),
+      slot('description').help('Meant to display description under the label'),
+      slot('actions').help('Meant to receive UiButton or link components'),
     ]"
   >
     <UiToaster v-bind="properties">
       {{ settings.label }}
       <template #description>{{ settings.description }}</template>
       <template #actions>
-        <UiButton
-          v-if="properties.actionType === 'button'"
-          level="tertiary"
-          size="medium"
-          :color="properties.accent === 'danger' ? 'danger' : 'normal'"
-        >
+        <UiObjectLink v-if="settings.showLink" class="link typo p1-regular" route="#">See tasks</UiObjectLink>
+        <UiButton v-else level="tertiary" size="medium" :color="properties.accent === 'danger' ? 'danger' : 'normal'">
           {{ settings.actions }}
         </UiButton>
-        <ObjectLink v-else class="link typo p1-regular" route="#">See tasks</ObjectLink>
       </template>
     </UiToaster>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { prop, setting } from '@/libs/story/story-param'
-import { text } from '@/libs/story/story-widget'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import { boolean, text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/button/UiButton.vue'
-import ObjectLink from '@core/components/object-link/ObjectLink.vue'
+import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
 import UiToaster from '@core/components/ui/toaster/UiToaster.vue'
 </script>
-
-<style lang="postcss" scoped>
-.link {
-  gap: 0 !important;
-}
-</style>
-/

@xen-orchestra/web-core/lib/components/ui/toaster/UiToaster.vue

@@ -1,7 +1,8 @@
+<!-- v3 -->
 <template>
-  <div :class="toasterClass" class="ui-toaster">
+  <div :class="toVariants({ accent })" class="ui-toaster">
     <div class="label">
-      <VtsIcon class="information-icon" :accent="props.accent" :icon="faCircle" :overlay-icon="icon" />
+      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
       <div class="content">
         <div class="typo h5-semi-bold">
           <slot />
@@ -10,7 +11,7 @@
           <slot name="description" />
         </div>
       </div>
-      <UiButtonIcon class="close-icon" :icon="faXmark" :color="props.accent" />
+      <UiButtonIcon class="close-icon" :icon="faXmark" :accent size="medium" />
     </div>
     <div v-if="slots.actions" class="actions">
       <slot name="actions" />
@@ -19,14 +20,17 @@
 </template>
 
 <script setup lang="ts">
-import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark, faCheck, faCircle, faInfo, faExclamation } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
+type ToasterAccent = 'info' | 'success' | 'warning' | 'danger'
+
 const props = defineProps<{
-  accent: Color
+  accent: ToasterAccent
 }>()
 
 const slots = defineSlots<{
@@ -35,20 +39,14 @@ const slots = defineSlots<{
   actions?(): any
 }>()
 
-type Color = 'normal' | 'success' | 'warning' | 'danger'
-
-const states: Record<Color, { icon: IconDefinition; color: Color }> = {
-  normal: { icon: faInfo, color: 'normal' },
+const states: Record<ToasterAccent, { icon: IconDefinition; color: ToasterAccent }> = {
+  info: { icon: faInfo, color: 'info' },
   success: { icon: faCheck, color: 'success' },
   warning: { icon: faExclamation, color: 'warning' },
   danger: { icon: faXmark, color: 'danger' },
 }
 
 const icon = computed(() => states[props.accent].icon)
-
-const toasterClass = computed(() => {
-  return [props.accent]
-})
 </script>
 
 <style scoped lang="postcss">
@@ -59,14 +57,18 @@ const toasterClass = computed(() => {
   padding: 1.6rem;
   border: 0.1rem solid;
   border-radius: 0.4rem;
+  gap: 0.8rem;
 
   .label {
     display: flex;
 
+    .content {
+      margin-inline: 1.6rem 0.8rem;
+    }
+
     .information-icon {
       margin-bottom: auto;
       font-size: 2.7rem;
-      padding-right: 1.6rem;
     }
 
     .close-icon {
@@ -78,22 +80,22 @@ const toasterClass = computed(() => {
     margin-inline-start: auto;
   }
 
-  &.normal {
-    background-color: var(--color-normal-background-selected);
-    border-color: var(--color-normal-item-base);
+  &.accent--info {
+    background-color: var(--color-info-background-selected);
+    border-color: var(--color-info-item-base);
   }
 
-  &.success {
+  &.accent--success {
     background-color: var(--color-success-background-selected);
     border-color: var(--color-success-item-base);
   }
 
-  &.warning {
+  &.accent--warning {
     background-color: var(--color-warning-background-selected);
     border-color: var(--color-warning-item-base);
   }
 
-  &.danger {
+  &.accent--danger {
     background-color: var(--color-danger-background-selected);
     border-color: var(--color-danger-item-base);
   }