Component: The Rest of the PrimeVue buttons (#7649)

## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/workbench/extensions/manager/components/ManagerProgressDialogContent.test.ts

@@ -1,7 +1,7 @@
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import Panel from 'primevue/panel'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue

@@ -40,15 +40,18 @@
           </template>
           <template #toggleicon>
             <Button
-              :icon="
-                collapsedPanels[index]
-                  ? 'pi pi-chevron-right'
-                  : 'pi pi-chevron-down'
-              "
-              text
+              variant="textonly"
               class="text-neutral-300"
               @click="togglePanel(index)"
-            />
+            >
+              <i
+                :class="
+                  collapsedPanels[index]
+                    ? 'pi pi-chevron-right'
+                    : 'pi pi-chevron-down'
+                "
+              />
+            </Button>
           </template>
           <div
             :ref="
@@ -81,10 +84,10 @@
 
 <script setup lang="ts">
 import { useScroll, whenever } from '@vueuse/core'
-import Button from 'primevue/button'
 import Panel from 'primevue/panel'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import {
   useComfyManagerStore,
   useManagerProgressDialogStore

src/workbench/extensions/manager/components/ManagerProgressFooter.vue

@@ -30,25 +30,17 @@
       <div class="flex items-center">
         <Button
           v-if="!isInProgress && !isRestartCompleted"
-          rounded
-          outlined
-          class="mr-4 rounded-md border-2 border-base-foreground px-3 text-base-foreground hover:bg-secondary-background-hover"
+          variant="secondary"
+          class="mr-4 rounded-full border-2 border-base-foreground px-3 text-base-foreground hover:bg-secondary-background-hover"
           @click="handleRestart"
         >
           {{ $t('manager.applyChanges') }}
         </Button>
         <Button
           v-else-if="!isRestartCompleted"
-          :icon="
-            progressDialogContent.isExpanded
-              ? 'pi pi-chevron-up'
-              : 'pi pi-chevron-down'
-          "
-          text
-          rounded
-          size="small"
-          class="font-bold"
-          severity="secondary"
+          variant="muted-textonly"
+          size="sm"
+          class="rounded-full font-bold"
           :aria-label="
             $t(
               progressDialogContent.isExpanded
@@ -57,17 +49,24 @@
             )
           "
           @click.stop="progressDialogContent.toggle"
-        />
+        >
+          <i
+            :class="
+              progressDialogContent.isExpanded
+                ? 'pi pi-chevron-up'
+                : 'pi pi-chevron-down'
+            "
+          />
+        </Button>
         <Button
-          icon="pi pi-times"
-          text
-          rounded
-          size="small"
-          class="font-bold"
-          severity="secondary"
+          variant="muted-textonly"
+          size="sm"
+          class="rounded-full font-bold"
           :aria-label="$t('g.close')"
           @click.stop="closeDialog"
-        />
+        >
+          <i class="pi pi-times" />
+        </Button>
       </div>
     </div>
   </div>
@@ -75,11 +74,11 @@
 
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
-import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import DotSpinner from '@/components/common/DotSpinner.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { api } from '@/scripts/api'

src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue

@@ -30,15 +30,15 @@
             }}</span>
           </div>
           <div>
-            <Button
-              :icon="
-                importFailedExpanded
-                  ? 'pi pi-chevron-down text-xs'
-                  : 'pi pi-chevron-right text-xs'
-              "
-              text
-              class="bg-transparent text-muted"
-            />
+            <Button variant="textonly" class="bg-transparent text-muted">
+              <i
+                :class="
+                  importFailedExpanded
+                    ? 'pi pi-chevron-down text-xs'
+                    : 'pi pi-chevron-right text-xs'
+                "
+              />
+            </Button>
           </div>
         </div>
         <!-- Import failed list -->
@@ -78,15 +78,15 @@
             }}</span>
           </div>
           <div>
-            <Button
-              :icon="
-                conflictsExpanded
-                  ? 'pi pi-chevron-down text-xs'
-                  : 'pi pi-chevron-right text-xs'
-              "
-              text
-              class="bg-transparent text-muted"
-            />
+            <Button variant="textonly" class="bg-transparent text-muted">
+              <i
+                :class="
+                  conflictsExpanded
+                    ? 'pi pi-chevron-down text-xs'
+                    : 'pi pi-chevron-right text-xs'
+                "
+              />
+            </Button>
           </div>
         </div>
         <!-- Conflicts list -->
@@ -126,15 +126,15 @@
             }}</span>
           </div>
           <div>
-            <Button
-              :icon="
-                extensionsExpanded
-                  ? 'pi pi-chevron-down text-xs'
-                  : 'pi pi-chevron-right text-xs'
-              "
-              text
-              class="bg-transparent text-muted"
-            />
+            <Button variant="textonly" class="bg-transparent text-muted">
+              <i
+                :class="
+                  extensionsExpanded
+                    ? 'pi pi-chevron-down text-xs'
+                    : 'pi pi-chevron-right text-xs'
+                "
+              />
+            </Button>
           </div>
         </div>
         <!-- Extension list -->
@@ -162,11 +162,11 @@
 
 <script setup lang="ts">
 import { filter, flatMap, map, some } from 'es-toolkit/compat'
-import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 import type {
   ConflictDetail,

src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue

@@ -2,30 +2,28 @@
   <div class="flex w-full items-center justify-between px-3 py-4">
     <div class="flex w-full items-center justify-between gap-2 pr-1">
       <Button
-        :label="$t('manager.conflicts.conflictInfoTitle')"
-        text
-        severity="secondary"
-        size="small"
-        icon="pi pi-info-circle"
-        :pt="{
-          label: { class: 'text-sm' }
-        }"
+        variant="muted-textonly"
+        size="sm"
+        class="text-sm"
         @click="handleConflictInfoClick"
-      />
+      >
+        <i class="pi pi-info-circle" />
+        {{ $t('manager.conflicts.conflictInfoTitle') }}
+      </Button>
       <Button
         v-if="props.buttonText"
-        :label="props.buttonText"
-        severity="secondary"
-        size="small"
+        variant="secondary"
+        size="sm"
         @click="handleButtonClick"
-      />
+      >
+        {{ props.buttonText }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useDialogStore } from '@/stores/dialogStore'
 

src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.test.ts

@@ -1,7 +1,7 @@
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import Listbox from 'primevue/listbox'
 import Select from 'primevue/select'

src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue

@@ -61,27 +61,27 @@
     <ContentDivider class="my-2" />
     <div class="flex justify-end gap-2 px-3 py-1">
       <Button
-        text
+        variant="muted-textonly"
         class="text-sm"
-        severity="secondary"
-        :label="$t('g.cancel')"
         :disabled="isQueueing"
         @click="emit('cancel')"
-      />
+      >
+        {{ $t('g.cancel') }}
+      </Button>
       <Button
-        severity="secondary"
-        :label="$t('g.install')"
+        variant="secondary"
         class="rounded-lg bg-secondary-background px-4 py-2.5 text-sm text-base-foreground"
         :disabled="isQueueing"
         @click="handleSubmit"
-      />
+      >
+        {{ $t('g.install') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
-import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
 import { valid as validSemver } from 'semver'
@@ -91,6 +91,7 @@ import { useI18n } from 'vue-i18n'
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import type { components } from '@/types/comfyRegistryTypes'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'