feat(xo-core): update UiIcon component

vatesfr · Sep 23, 2024 · 620d1ee · 620d1ee
1 parent 19d4f85
commit 620d1ee
Show file tree

Hide file tree

Showing 34 changed files with 223 additions and 123 deletions.
diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -3,7 +3,7 @@
     <TreeItemLabel :icon="faServer" :route="{ name: 'host.dashboard', params: { uuid: host.uuid } }" @toggle="toggle()">
       {{ host.name_label || '(Host)' }}
       <template #addons>
-        <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
+        <VtsIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
         <VtsCounter
           v-if="isReady"
           v-tooltip="$t('running-vm', { count: vmCount })"
@@ -29,7 +29,7 @@ import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'

diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md
@@ -2,8 +2,8 @@ ComplexIcon component usage:
 
 ```vue-template
 <ComplexIcon>
-  <UiIcon :icon="faRotateRight" />
-  <UiIcon :icon="faLightbulb" />
+  <UiIcon :icon="faRotateRight" accent="current" />
+  <UiIcon :icon="faLightbulb" accent="current" />
 </ComplexIcon>
 ```
 

diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue
@@ -7,8 +7,8 @@
     ]"
   >
     <ComplexIcon v-bind="properties">
-      <UiIcon :icon="faRotateRight" />
-      <UiIcon :icon="faLightbulb" />
+      <VtsIcon :icon="faRotateRight" accent="current" />
+      <VtsIcon :icon="faLightbulb" accent="current" />
     </ComplexIcon>
   </ComponentStory>
 </template>
@@ -17,6 +17,6 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, slot } from '@/libs/story/story-param'
 import ComplexIcon from '@core/components/icon/ComplexIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { faLightbulb, faRotateRight } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.md
@@ -0,0 +1,11 @@
+`VtsIcon` component **simple** usage:
+
+```vue-template
+<VtsIcon accent="current" :icon="faCheck" />
+```
+
+`VtsIcon` component **stacked** usage:
+
+```vue-template
+<VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/icon/vts-icon.story.vue
@@ -0,0 +1,39 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('accent').enum('current', 'brand', 'success', 'warning', 'danger').required().preset('current').widget(),
+      iconProp().preset(faCheck),
+      prop('overlay-icon')
+        .type('IconDefinition')
+        .help('Meant to display a centered smaller icon on top of the main icon. See presets for examples'),
+      prop('busy').bool().widget(),
+      prop('fixed-width').bool().widget(),
+    ]"
+    :presets="{
+      'Stacked Icon success circle': {
+        props: {
+          accent: 'success',
+          icon: faCircle,
+          'overlay-icon': faCheck,
+        },
+      },
+      'Stacked Icon warning exclamation': {
+        props: {
+          accent: 'warning',
+          icon: faCircle,
+          'overlay-icon': faExclamation,
+        },
+      },
+    }"
+  >
+    <VtsIcon v-bind="properties" />
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { iconProp, prop } from '@/libs/story/story-param'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { faCheck, faCircle, faExclamation } from '@fortawesome/free-solid-svg-icons'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
@@ -23,7 +23,7 @@
                   </template>
                   VM {{ i }}.{{ j }}
                   <template #addons>
-                    <UiIcon v-if="j === 2" busy />
+                    <VtsIcon v-if="j === 2" busy accent="current" />
                     <ButtonIcon :icon="faEllipsis" />
                   </template>
                 </TreeItemLabel>
@@ -38,10 +38,10 @@
 ```
 
 ```vue-script
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'

diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
@@ -22,7 +22,7 @@
                       </template>
                       VM {{ i }}.{{ j }}
                       <template #addons>
-                        <UiIcon v-if="j === 2" busy />
+                        <VtsIcon v-if="j === 2" busy accent="current" />
                         <ButtonIcon :icon="faEllipsis" />
                       </template>
                     </TreeItemLabel>
@@ -39,11 +39,11 @@
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { slot } from '@/libs/story/story-param'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'

diff --git a/@xen-orchestra/web-core/docs/guidelines/icons.md b/@xen-orchestra/web-core/docs/guidelines/icons.md
@@ -15,7 +15,7 @@ Use the `busy` prop to display a loader icon.
 ```vue
 <template>
   <div>
-    <UiIcon :icon="faDisplay" />
+    <VtsIcon :icon="faDisplay" accent="current" />
   </div>
 </template>
 

diff --git a/@xen-orchestra/web-core/lib/components/LegendTitle.vue b/@xen-orchestra/web-core/lib/components/LegendTitle.vue
@@ -2,12 +2,12 @@
 <template>
   <div class="legend-title typo c3-semi-bold">
     <slot />
-    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="normal" />
+    <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="brand" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 

diff --git a/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue b/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
@@ -1,10 +1,10 @@
 <!-- v1.0 -->
 <template>
-  <UiIcon :class="className" color="current" :icon class="power-state-icon" />
+  <VtsIcon :class="className" accent="current" :icon class="power-state-icon" />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { POWER_STATE } from '@core/types/power-state.type'
 import { faMoon, faPause, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'

diff --git a/@xen-orchestra/web-core/lib/components/UiTag.vue b/@xen-orchestra/web-core/lib/components/UiTag.vue
@@ -2,14 +2,14 @@
 <template>
   <span :class="[color, { light }]" class="ui-tag typo p3-regular">
     <slot name="icon">
-      <UiIcon :icon color="current" fixed-width />
+      <VtsIcon :icon accent="current" fixed-width />
     </slot>
     <span class="text-ellipsis"><slot /></span>
   </span>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { TagColor } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 

diff --git a/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue b/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
@@ -1,12 +1,11 @@
 <!-- v1.0 -->
 <template>
-  <UiIcon :color :icon class="backup-state" />
+  <VtsIcon :accent="color" :icon class="backup-state" />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { BackupState } from '@core/types/backup.type'
-import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -17,7 +16,7 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const states: Record<Props['state'], { icon: IconDefinition; color: Color }> = {
+const states: Record<Props['state'], { icon: IconDefinition; color: 'success' | 'warning' | 'danger' }> = {
   success: { icon: faCheckCircle, color: 'success' },
   partial: { icon: faCircleMinus, color: 'warning' },
   failure: { icon: faCircleXmark, color: 'danger' },

diff --git a/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue b/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
@@ -1,13 +1,13 @@
 <!-- v1.0 -->
 <template>
   <button :class="[color, size, { disabled, active }]" :disabled class="button-icon" type="button">
-    <UiIcon :icon color="current" />
+    <VtsIcon :icon accent="current" />
     <span v-if="dot" class="dot" />
   </button>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'

diff --git a/@xen-orchestra/web-core/lib/components/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/button/UiButton.vue
@@ -1,14 +1,14 @@
 <!-- v1.0 -->
 <template>
   <button :class="className" :disabled="busy || isDisabled" class="ui-button" type="button">
-    <UiIcon :busy :icon="leftIcon" color="current" class="icon" fixed-width />
+    <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
     <slot />
-    <UiIcon :icon="rightIcon" color="current" class="icon" fixed-width />
+    <VtsIcon :icon="rightIcon" accent="current" class="icon" fixed-width />
   </button>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import type { ButtonLevel, ButtonSize } from '@core/types/button.type'

diff --git a/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue b/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue
@@ -1,9 +1,10 @@
 <template>
-  <UiIcon :class="{ disabled }" :color :icon class="chip-icon" fixed-width />
+  <!-- TODO: replace with correct color typing when available -->
+  <VtsIcon :class="{ disabled }" :accent="color === 'normal' ? 'brand' : color" :icon class="chip-icon" fixed-width />
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 

diff --git a/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue b/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
@@ -13,12 +13,12 @@
       cy="50"
       r="40"
     />
-    <UiIcon :icon color="current" height="24" width="24" x="38" y="38" />
+    <VtsIcon :icon accent="current" height="24" width="24" x="38" y="38" />
   </svg>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 

diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
@@ -1,19 +1,24 @@
 <template>
   <div v-tooltip="{ selector: '.label' }" :class="[color, { disabled, selected }]" class="dropdown-item">
-    <UiIcon v-if="checkbox" :color :icon="selected ? faSquareCheck : faSquare" />
+    <!-- TODO: replace with correct color typing when available -->
+    <VtsIcon
+      v-if="checkbox"
+      :accent="color === 'normal' ? 'brand' : color"
+      :icon="selected ? faSquareCheck : faSquare"
+    />
     <slot name="icon">
-      <UiIcon :icon color="current" />
+      <VtsIcon :icon accent="current" />
     </slot>
     <div class="label p2 medium text-ellipsis">
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
-    <UiIcon v-if="arrow" :color="disabled ? 'current' : 'normal'" :icon="faAngleRight" class="right-icon" />
+    <VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'brand'" :icon="faAngleRight" class="right-icon" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { Color } from '@core/types/color.type'
 import { IK_DROPDOWN_CHECKBOX } from '@core/utils/injection-keys.util'

diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue
@@ -4,7 +4,7 @@
  -->
 <template>
   <div class="dropdown-title">
-    <UiIcon :icon color="current" />
+    <VtsIcon :icon accent="current" />
     <div class="label c3 semi-bold">
       <slot />
     </div>
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 withDefaults(

diff --git a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue b/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
@@ -4,7 +4,7 @@
     <div class="label-wrapper">
       <span v-if="slots.icon || icon" class="icon">
         <slot name="icon">
-          <UiIcon :icon color="current" />
+          <VtsIcon :icon accent="current" />
         </slot>
       </span>
       <h4 v-tooltip class="typo h4-medium label text-ellipsis">
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 

diff --git a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue b/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
@@ -5,13 +5,13 @@
 <!-- Network v1.0 -->
 <template>
   <FontAwesomeLayers :class="[size, { disabled: stateConfig === undefined }]" class="object-icon">
-    <UiIcon :icon="mainIcon" color="current" />
-    <UiIcon :icon="stateIcon" color="current" :style="stateIconStyle" class="state" />
+    <VtsIcon :icon="mainIcon" accent="current" />
+    <VtsIcon :icon="stateIcon" accent="current" :style="stateIconStyle" class="state" />
   </FontAwesomeLayers>
 </template>
 
 <script generic="TType extends SupportedType" lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { ObjectIconConfig, ObjectIconSize, SupportedState, SupportedType } from '@core/types/object-icon.type'
 import {
   faCheckCircle,
@@ -200,7 +200,7 @@ const stateIconStyle = computed(() => {
   }
 
   return {
-    '--color': `var(${stateConfig.value.color})`,
+    '--vts-icon--color': `var(${stateConfig.value.color})`,
     '--state-icon-translate-x': `${stateConfig.value.translate.x[translateIndex]}%`,
     '--state-icon-translate-y': `${stateConfig.value.translate.y[translateIndex]}%`,
   }