feedback

vatesfr · Feb 11, 2025 · ca2f407 · ca2f407
1 parent b2c326e
commit ca2f407
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 67 deletions.
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
@@ -3,14 +3,7 @@
     <UiTitle>
       {{ $t('networks') }}
       <template #actions>
-        <UiDropdownButton
-          v-tooltip="$t('coming-soon')"
-          disabled
-          :left-icon="faPlus"
-          variant="secondary"
-          accent="info"
-          size="medium"
-        >
+        <UiDropdownButton v-tooltip="$t('coming-soon')" disabled>
           {{ $t('new') }}
         </UiDropdownButton>
       </template>
@@ -146,7 +139,6 @@ import {
   faEdit,
   faEllipsis,
   faHashtag,
-  faPlus,
   faPowerOff,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons'

diff --git a/@xen-orchestra/lite/src/stories/modals/layouts/confirm-modal-layout.story.vue b/@xen-orchestra/lite/src/stories/modals/layouts/confirm-modal-layout.story.vue
@@ -15,8 +15,8 @@
       <template #title>{{ settings.title }}</template>
       <template #subtitle>{{ settings.subtitle }}</template>
       <template #buttons>
-        <UiButton variant="secondary" accent="info" size="medium">I prefer not</UiButton>
-        <UiButton variant="primary" accent="info" size="medium">Yes, I'm sure!</UiButton>
+        <UiButton variant="secondary" accent="brand" size="medium">I prefer not</UiButton>
+        <UiButton variant="primary" accent="brand" size="medium">Yes, I'm sure!</UiButton>
       </template>
     </ConfirmModalLayout>
   </ComponentStory>

diff --git a/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.md b/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.md
@@ -9,9 +9,9 @@
 
     <template #buttons>
       <ModalDeclineButton />
-      <ModalApproveButton>Migrate 3 VMs</UiButton>
+      <ModalApproveButton>Migrate 3 VMs</ModalApproveButton>
     </template>
-  </ConfirmModalLayout>
+  </FormModalLayout>
 </UiModal>
 ```
 

diff --git a/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.vue b/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.vue
@@ -23,8 +23,8 @@
       </div>
 
       <template #buttons>
-        <UiButton variant="secondary" accent="info" size="medium">Cancel</UiButton>
-        <UiButton variant="primary" accent="info" size="medium">Migrate 3 VMs</UiButton>
+        <UiButton variant="secondary" accent="brand" size="medium">Cancel</UiButton>
+        <UiButton variant="primary" accent="brand" size="medium">Migrate 3 VMs</UiButton>
       </template>
     </FormModalLayout>
   </ComponentStory>

diff --git a/@xen-orchestra/lite/src/stories/web-core/button-group/vts-button-group.story.vue b/@xen-orchestra/lite/src/stories/web-core/button-group/vts-button-group.story.vue
@@ -7,8 +7,8 @@
     ]"
   >
     <VtsButtonGroup v-bind="properties">
-      <UiButton variant="secondary" accent="info" size="medium">Cancel</UiButton>
-      <UiButton variant="primary" accent="info" size="medium">Call to action</UiButton>
+      <UiButton variant="secondary" accent="brand" size="medium">Cancel</UiButton>
+      <UiButton variant="primary" accent="brand" size="medium">Call to action</UiButton>
       <template #tertiary>
         <UiButton variant="tertiary" accent="warning" size="medium">Secondary call to action</UiButton>
       </template>

diff --git a/@xen-orchestra/lite/src/stories/web-core/card/vts-card-row-key-value.story.vue b/@xen-orchestra/lite/src/stories/web-core/card/vts-card-row-key-value.story.vue
@@ -21,7 +21,7 @@
         </template>
         <template #addons>
           <VtsIcon accent="warning" :icon="faCircle" :overlay-icon="faStar" />
-          <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          <UiButtonIcon :icon="faCopy" size="medium" accent="brand" />
         </template>
       </VtsCardRowKeyValue>
 
@@ -42,7 +42,7 @@
           </UiObjectLink>
         </template>
         <template #addons>
-          <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          <UiButtonIcon :icon="faCopy" size="medium" accent="brand" />
         </template>
       </VtsCardRowKeyValue>
 
@@ -54,8 +54,8 @@
           <UiInfo accent="success">Connected</UiInfo>
         </template>
         <template #addons>
-          <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
-          <UiButtonIcon :icon="faEllipsis" size="medium" accent="info" />
+          <UiButtonIcon :icon="faCopy" size="medium" accent="brand" />
+          <UiButtonIcon :icon="faEllipsis" size="medium" accent="brand" />
         </template>
       </VtsCardRowKeyValue>
     </UiCard>

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.md
@@ -1,5 +1,5 @@
 Here is some doc for UiButton component
 
 ```vue-template
-<UiButton variant="primary" accent="info" size="medium" @click="doSomething">Click me</UiButton>
+<UiButton variant="primary" accent="brand" size="medium" @click="doSomething">Click me</UiButton>
 ```
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.vue
@@ -28,7 +28,7 @@
     :presets="{
       'Save Button': {
         props: {
-          accent: 'success',
+          accent: 'brand',
           leftIcon: faFloppyDisk,
           rightIcon: undefined,
         },

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-title.story.vue
@@ -15,7 +15,7 @@
       <UiCounter :value="3" accent="danger" size="medium" variant="primary" />
       <template #info>
         {{ settings.infoSlotContent }}
-        <UiButton variant="tertiary" size="small" accent="info" :right-icon="faAngleRight">See all</UiButton>
+        <UiButton variant="tertiary" size="small" accent="brand" :right-icon="faAngleRight">See all</UiButton>
       </template>
       <template #description>{{ settings.descriptionSlotContent }}</template>
     </UiCardTitle>

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.vue
@@ -19,8 +19,8 @@
         migrating... (34%)
       </template>
       <template v-if="settings.showDemoButtons" #actions>
-        <UiButton size="medium" variant="primary" accent="info" :left-icon="faPlus">New VM</UiButton>
-        <UiButton size="medium" variant="secondary" accent="info" :left-icon="faPowerOff">Change state</UiButton>
+        <UiButton size="medium" variant="primary" accent="brand" :left-icon="faPlus">New VM</UiButton>
+        <UiButton size="medium" variant="secondary" accent="brand" :left-icon="faPowerOff">Change state</UiButton>
       </template>
     </UiHeadBar>
   </ComponentStory>

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
@@ -23,8 +23,8 @@
   >
     <UiSidePanel v-bind="properties" :error="properties.error">
       <template #header>
-        <UiButton variant="tertiary" size="medium" accent="info" @click="toggle()">Toggle</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="brand" @click="toggle()">Toggle</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="brand" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
           {{ settings.action2 }}
         </UiButton>

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/table-actions/ui-table-actions.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/table-actions/ui-table-actions.story.vue
@@ -15,7 +15,7 @@
         :key="index"
         :left-icon="label.icon"
         variant="tertiary"
-        accent="info"
+        accent="brand"
         size="medium"
       >
         {{ label.title }}

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/title/ui-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/title/ui-title.story.vue
@@ -12,8 +12,8 @@
       {{ settings.default }}
 
       <template v-if="settings.showDemoButtons" #actions>
-        <UiButton size="medium" variant="secondary" accent="info">Label</UiButton>
-        <UiButton size="medium" variant="secondary" accent="info">Label</UiButton>
+        <UiButton size="medium" variant="secondary" accent="brand">Label</UiButton>
+        <UiButton size="medium" variant="secondary" accent="brand">Label</UiButton>
       </template>
     </UiTitle>
   </ComponentStory>

diff --git a/@xen-orchestra/web-core/lib/components/ui/button-icon/UiButtonIcon.vue b/@xen-orchestra/web-core/lib/components/ui/button-icon/UiButtonIcon.vue
@@ -16,34 +16,37 @@ import { computed } from 'vue'
 type ButtonIconAccent = 'brand' | 'warning' | 'danger'
 type ButtonSize = 'small' | 'medium' | 'large'
 
-const props = withDefaults(
-  defineProps<{
-    icon: IconDefinition
-    size: ButtonSize
-    accent: ButtonIconAccent
-    disabled?: boolean
-    selected?: boolean
-    dot?: boolean
-    targetScale?: number | { x: number; y: number }
-  }>(),
-  { targetScale: 1 }
-)
+const {
+  accent,
+  size,
+  disabled,
+  selected,
+  targetScale = 1,
+} = defineProps<{
+  icon: IconDefinition
+  size: ButtonSize
+  accent: ButtonIconAccent
+  disabled?: boolean
+  selected?: boolean
+  dot?: boolean
+  targetScale?: number | { x: number; y: number }
+}>()
 
 const cssTargetScale = computed(() => {
-  if (typeof props.targetScale === 'number') {
-    return `scale(${props.targetScale})`
+  if (typeof targetScale === 'number') {
+    return `scale(${targetScale})`
   }
 
-  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
+  return `scale(${targetScale.x}, ${targetScale.y})`
 })
 
 const classNames = computed(() => {
   return [
     toVariants({
-      accent: props.accent,
-      size: props.size,
-      muted: props.disabled,
-      selected: props.selected,
+      accent,
+      size,
+      muted: disabled,
+      selected,
     }),
   ]
 })

diff --git a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
@@ -19,7 +19,7 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
 type ButtonAccent = 'brand' | 'warning' | 'danger'
 type ButtonSize = 'small' | 'medium'
 
-const props = defineProps<{
+const { accent, variant, size, disabled, busy, lockIcon } = defineProps<{
   variant: ButtonVariant
   accent: ButtonAccent
   size: ButtonSize
@@ -33,7 +33,7 @@ defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useDisabled(() => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 
 const fontClasses = {
   small: 'typo p3-medium',
@@ -42,13 +42,13 @@ const fontClasses = {
 }
 
 const classNames = computed(() => [
-  fontClasses[props.size],
+  fontClasses[size],
   toVariants({
-    accent: props.accent,
-    variant: props.variant,
-    size: props.size,
-    busy: props.busy,
-    lock: props.lockIcon,
+    accent,
+    variant,
+    size,
+    busy,
+    lock: lockIcon,
     disabled: isDisabled.value,
   }),
 ])

diff --git a/@xen-orchestra/web/src/components/pool/PoolNetworksTable.vue b/@xen-orchestra/web/src/components/pool/PoolNetworksTable.vue
@@ -3,14 +3,7 @@
     <UiTitle>
       {{ $t('networks') }}
       <template #actions>
-        <UiDropdownButton
-          v-tooltip="$t('coming-soon')"
-          disabled
-          :left-icon="faPlus"
-          variant="secondary"
-          accent="info"
-          size="medium"
-        >
+        <UiDropdownButton v-tooltip="$t('coming-soon')" disabled>
           {{ $t('new') }}
         </UiDropdownButton>
       </template>
@@ -144,7 +137,6 @@ import {
   faEdit,
   faEllipsis,
   faHashtag,
-  faPlus,
   faPowerOff,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons'