feat(xo-core/UiButton): make variant props required

vatesfr · Sep 16, 2024 · c3ec6b9 · c3ec6b9
1 parent ef17e8f
commit c3ec6b9
Show file tree

Hide file tree

Showing 16 changed files with 72 additions and 28 deletions.
diff --git a/@xen-orchestra/lite/src/components/AppLogin.vue b/@xen-orchestra/lite/src/components/AppLogin.vue
@@ -27,7 +27,7 @@
           <FormCheckbox v-model="rememberMe" />
           {{ $t('keep-me-logged') }}
         </label>
-        <UiButton type="submit" :busy="isConnecting">
+        <UiButton size="medium" color="normal" level="primary" type="submit" :busy="isConnecting">
           {{ $t('login') }}
         </UiButton>
       </template>
@@ -107,6 +107,7 @@ async function handleSubmit() {
   display: flex;
   margin: 1rem;
   width: fit-content;
+
   & .form-checkbox {
     margin: auto 1rem auto auto;
   }

diff --git a/@xen-orchestra/lite/src/components/XoaButton.vue b/@xen-orchestra/lite/src/components/XoaButton.vue
@@ -1,8 +1,24 @@
 <template>
-  <UiButton v-if="xoaFound" :left-icon="faArrowUpRightFromSquare" class="xoa-button" @click="openXoa()">
+  <UiButton
+    v-if="xoaFound"
+    size="medium"
+    color="normal"
+    level="primary"
+    :left-icon="faArrowUpRightFromSquare"
+    class="xoa-button"
+    @click="openXoa()"
+  >
     {{ $t('access-xoa') }}
   </UiButton>
-  <UiButton v-else :left-icon="faDownload" class="xoa-button" @click="openXoaDeploy()">
+  <UiButton
+    v-else
+    size="medium"
+    color="normal"
+    level="primary"
+    :left-icon="faDownload"
+    class="xoa-button"
+    @click="openXoaDeploy()"
+  >
     {{ $t('deploy-xoa') }}
   </UiButton>
 </template>

diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -35,7 +35,9 @@
         <UiCardTitle>
           Logs
           <template #right>
-            <UiButton v-if="eventsLog.length > 0" level="tertiary" @click="eventsLog = []"> Clear </UiButton>
+            <UiButton v-if="eventsLog.length > 0" size="medium" color="normal" level="tertiary" @click="eventsLog = []">
+              Clear
+            </UiButton>
           </template>
         </UiCardTitle>
         <div class="events-log">

diff --git a/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue b/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
@@ -23,7 +23,7 @@
       </template>
 
       <template #buttons>
-        <UiButton level="tertiary" @click="addNewFilter()">
+        <UiButton size="medium" color="normal" level="tertiary" @click="addNewFilter()">
           {{ $t('add-or') }}
         </UiButton>
         <ModalDeclineButton />

diff --git a/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue b/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
@@ -6,7 +6,7 @@
       </template>
 
       <template #buttons>
-        <UiButton level="tertiary" @click="formatJson()">
+        <UiButton size="medium" color="normal" level="tertiary" @click="formatJson()">
           {{ $t('reformat') }}
         </UiButton>
         <ModalDeclineButton />

diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
@@ -11,7 +11,7 @@
         <p class="text typo h4-medium">
           {{ $t('click-to-display-alarms') }}
         </p>
-        <UiButton @click="start">{{ $t('load-now') }}</UiButton>
+        <UiButton size="medium" color="normal" level="primary" @click="start">{{ $t('load-now') }}</UiButton>
       </div>
       <div>
         <img alt="" src="@/assets/server-status.svg" />

diff --git a/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue b/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiButton :busy="modal.isBusy" type="submit">
+  <UiButton size="medium" color="normal" level="primary" :busy="modal.isBusy" type="submit">
     <slot />
   </UiButton>
 </template>

diff --git a/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue b/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiButton level="secondary" :busy="modal.isBusy" @click="modal.decline()">
+  <UiButton size="medium" color="normal" level="secondary" :busy="modal.isBusy" @click="modal.decline()">
     <slot>{{ $t('cancel') }}</slot>
   </UiButton>
 </template>

diff --git a/@xen-orchestra/lite/src/components/vm/VmHeader.vue b/@xen-orchestra/lite/src/components/vm/VmHeader.vue
@@ -4,7 +4,14 @@
     <template #actions>
       <MenuList v-if="vm !== undefined" placement="bottom-end" border>
         <template #trigger="{ open, isOpen }">
-          <UiButton :class="{ pressed: isOpen }" :left-icon="faPowerOff" @click="open">
+          <UiButton
+            size="medium"
+            color="normal"
+            level="primary"
+            :class="{ pressed: isOpen }"
+            :left-icon="faPowerOff"
+            @click="open"
+          >
             {{ $t('change-state') }}
             <UiIcon :icon="faAngleDown" />
           </UiButton>

diff --git a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue
@@ -2,7 +2,9 @@
   <div>
     <img alt="" src="../assets/object-not-found.svg" />
     <p class="text">{{ $t('object-not-found', { id }) }}</p>
-    <UiButton @click="router.push({ name: 'home' })">{{ $t('back-pool-dashboard') }}</UiButton>
+    <UiButton size="medium" color="normal" level="primary" @click="router.push({ name: 'home' })">
+      {{ $t('back-pool-dashboard') }}
+    </UiButton>
   </div>
 </template>
 

diff --git a/@xen-orchestra/lite/src/views/PageNotFoundView.vue b/@xen-orchestra/lite/src/views/PageNotFoundView.vue
@@ -3,7 +3,9 @@
     <img alt="" src="../assets/page-not-found.svg" />
     <p class="numeric">404</p>
     <p class="text">{{ $t('page-not-found') }}</p>
-    <UiButton @click="router.push({ name: 'home' })">{{ $t('back-pool-dashboard') }}</UiButton>
+    <UiButton size="medium" color="normal" level="primary" @click="router.push({ name: 'home' })">
+      {{ $t('back-pool-dashboard') }}
+    </UiButton>
   </div>
 </template>
 
@@ -26,9 +28,11 @@ div {
   align-items: center;
   justify-content: center;
 }
+
 img {
   width: 30%;
 }
+
 .numeric {
   color: var(--color-normal-txt-base);
   font-size: 96px;

diff --git a/@xen-orchestra/lite/src/views/story/HomeView.vue b/@xen-orchestra/lite/src/views/story/HomeView.vue
@@ -16,8 +16,8 @@
       Slot names, separated by comma
       <span class="slots">
         <FormInput v-model="slots" />
-        <UiButton @click="slots = 'default'">Default</UiButton>
-        <UiButton level="secondary" @click="slots = ''">Clear</UiButton>
+        <UiButton size="medium" color="normal" level="primary" @click="slots = 'default'">Default</UiButton>
+        <UiButton size="medium" color="normal" level="secondary" @click="slots = ''">Clear</UiButton>
       </span>
     </div>
 

diff --git a/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue b/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue
@@ -13,7 +13,7 @@
         <strong>{{ $t('check-errors') }}</strong>
         <UiRaw>{{ error }}</UiRaw>
       </div>
-      <UiButton :left-icon="faDownload" @click="resetValues()">
+      <UiButton size="medium" color="normal" level="primary" :left-icon="faDownload" @click="resetValues()">
         {{ $t('xoa-deploy-retry') }}
       </UiButton>
     </template>
@@ -24,7 +24,7 @@
         <h2>{{ $t('xoa-deploy-successful') }}</h2>
         <UiIcon :icon="faCircleCheck" class="success" />
       </div>
-      <UiButton :left-icon="faArrowUpRightFromSquare" @click="openXoa">
+      <UiButton size="medium" color="normal" level="primary" :left-icon="faArrowUpRightFromSquare" @click="openXoa">
         {{ $t('access-xoa') }}
       </UiButton>
     </template>
@@ -40,7 +40,7 @@
         <UiIcon :icon="faExclamationCircle" />
         {{ $t('keep-page-open') }}
       </p>
-      <UiButton :disabled="vmRef === undefined" color="danger" level="secondary" @click="cancel()">
+      <UiButton size="medium" :disabled="vmRef === undefined" color="danger" level="secondary" @click="cancel()">
         {{ $t('cancel') }}
       </UiButton>
     </template>
@@ -196,10 +196,10 @@
         </FormSection>
 
         <ButtonGroup>
-          <UiButton level="secondary" @click="router.back()">
+          <UiButton size="medium" color="normal" level="secondary" @click="router.back()">
             {{ $t('cancel') }}
           </UiButton>
-          <UiButton type="submit">
+          <UiButton size="medium" color="normal" level="primary" type="submit">
             {{ $t('deploy') }}
           </UiButton>
         </ButtonGroup>

diff --git a/@xen-orchestra/web-core/lib/components/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/button/UiButton.vue
@@ -18,19 +18,16 @@ import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    level?: ButtonLevel
+    level: ButtonLevel
+    color: Color
+    size: ButtonSize
     busy?: boolean
     disabled?: boolean
     leftIcon?: IconDefinition
     rightIcon?: IconDefinition
-    color?: Color
-    size?: ButtonSize
   }>(),
   {
     disabled: undefined,
-    color: 'normal',
-    level: 'primary',
-    size: 'medium',
   }
 )
 

diff --git a/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue b/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue
@@ -12,9 +12,16 @@
       :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton type="submit">{{ $t('core.search') }}</UiButton>
+      <UiButton size="medium" color="normal" level="primary" type="submit">{{ $t('core.search') }}</UiButton>
       <Divider type="stretch" />
-      <UiButton v-tooltip="$t('coming-soon')" level="secondary" :left-icon="faFilter" disabled>
+      <UiButton
+        v-tooltip="$t('coming-soon')"
+        size="medium"
+        color="normal"
+        level="secondary"
+        :left-icon="faFilter"
+        disabled
+      >
         {{ $t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>

diff --git a/@xen-orchestra/web/src/layouts/AppLayout.vue b/@xen-orchestra/web/src/layouts/AppLayout.vue
@@ -6,7 +6,15 @@
       </RouterLink>
     </template>
     <template #app-header>
-      <UiButton :right-icon="faArrowUpRightFromSquare" level="tertiary" @click="openUrl('/', true)">XO 5</UiButton>
+      <UiButton
+        size="medium"
+        color="normal"
+        :right-icon="faArrowUpRightFromSquare"
+        level="tertiary"
+        @click="openUrl('/', true)"
+      >
+        XO 5
+      </UiButton>
       <QuickTaskButton />
       <AccountMenu />
     </template>