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/renderer/extensions/minimap/MiniMap.vue

@@ -21,31 +21,27 @@
       :style="containerStyles"
     >
       <Button
-        class="absolute top-1 left-1 z-10 hover:bg-interface-button-hover-surface!"
-        size="small"
-        text
-        severity="secondary"
+        class="absolute top-0 left-0 z-10"
+        size="icon"
+        variant="muted-textonly"
+        :aria-label="$t('g.settings')"
         @click.stop="toggleOptionsPanel"
       >
-        <template #icon>
-          <i class="icon-[lucide--settings-2]" />
-        </template>
+        <i class="icon-[lucide--settings-2]" />
       </Button>
       <Button
-        class="absolute top-1 right-1 z-10 hover:bg-interface-button-hover-surface!"
-        size="small"
-        text
-        severity="secondary"
+        class="absolute top-0 right-0 z-10"
+        size="icon"
+        variant="muted-textonly"
+        :aria-label="$t('g.close')"
         data-testid="close-minmap-button"
         @click.stop="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
       >
-        <template #icon>
-          <i class="icon-[lucide--x]" />
-        </template>
+        <i class="icon-[lucide--x]" />
       </Button>
 
       <hr
-        class="absolute top-7 h-px border-0 bg-node-component-border"
+        class="absolute top-6 h-px border-0 bg-node-component-border"
         :style="{
           width: containerStyles.width
         }"
@@ -74,9 +70,9 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
 

src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts

@@ -1,15 +1,13 @@
 import { mount } from '@vue/test-utils'
-import Button from 'primevue/button'
-import type { ButtonProps } from 'primevue/button'
-import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
 
+import Button from '@/components/ui/button/Button.vue'
 import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 describe('WidgetButton Interactions', () => {
   const createMockWidget = (
-    options: Partial<ButtonProps> = {},
+    options: Record<string, unknown> = {},
     callback?: () => void,
     name: string = 'test_button'
   ): SimplifiedWidget<void> => ({
@@ -23,7 +21,6 @@ describe('WidgetButton Interactions', () => {
   const mountComponent = (widget: SimplifiedWidget<void>, readonly = false) => {
     return mount(WidgetButton, {
       global: {
-        plugins: [PrimeVue],
         components: { Button }
       },
       props: {
@@ -89,76 +86,54 @@ describe('WidgetButton Interactions', () => {
       expect(wrapper.text()).toBe('test_button')
     })
 
-    it('sets button size to small', () => {
+    it('sets button size to sm', () => {
       const widget = createMockWidget()
       const wrapper = mountComponent(widget)
 
       const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('size')).toBe('small')
+      expect(button.props('size')).toBe('sm')
     })
 
     it('passes widget options to button component', () => {
       const buttonOptions = {
-        label: 'Custom Label',
-        icon: 'pi pi-check',
-        severity: 'success' as const
+        variant: 'secondary'
       }
       const widget = createMockWidget(buttonOptions)
       const wrapper = mountComponent(widget)
 
       const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('label')).toBe('Custom Label')
-      expect(button.props('icon')).toBe('pi pi-check')
-      expect(button.props('severity')).toBe('success')
+      expect(button.props('variant')).toBe('secondary')
     })
   })
 
   describe('Widget Options', () => {
-    it('handles button with text only', () => {
-      const widget = createMockWidget({ label: 'Click Me' })
+    it('handles button with label', () => {
+      const widget = createMockWidget({ label: 'Click Me' }, undefined, 'btn')
+      widget.label = 'Click Me'
       const wrapper = mountComponent(widget)
 
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('label')).toBe('Click Me')
-      expect(button.props('icon')).toBeNull()
+      expect(wrapper.text()).toBe('Click Me')
     })
 
-    it('handles button with icon only', () => {
-      const widget = createMockWidget({ icon: 'pi pi-star' })
+    it('handles button with iconClass', () => {
+      const widget = createMockWidget({ iconClass: 'pi pi-star' })
       const wrapper = mountComponent(widget)
 
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('icon')).toBe('pi pi-star')
+      const icon = wrapper.find('i.pi.pi-star')
+      expect(icon.exists()).toBe(true)
     })
 
-    it('handles button with both text and icon', () => {
-      const widget = createMockWidget({
-        label: 'Save',
-        icon: 'pi pi-save'
-      })
+    it('handles button with both label and iconClass', () => {
+      const widget = createMockWidget({ iconClass: 'pi pi-save' })
+      widget.label = 'Save'
       const wrapper = mountComponent(widget)
 
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('label')).toBe('Save')
-      expect(button.props('icon')).toBe('pi pi-save')
+      expect(wrapper.text()).toBe('Save')
+      const icon = wrapper.find('i.pi.pi-save')
+      expect(icon.exists()).toBe(true)
     })
 
-    it.for([
-      'secondary',
-      'success',
-      'info',
-      'warning',
-      'danger',
-      'help',
-      'contrast'
-    ] as const)('handles button severity: %s', (severity) => {
-      const widget = createMockWidget({ severity })
-      const wrapper = mountComponent(widget)
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('severity')).toBe(severity)
-    })
-
-    it.for(['outlined', 'text'] as const)(
+    it.for(['secondary', 'primary', 'inverted', 'textonly'] as const)(
       'handles button variant: %s',
       (variant) => {
         const widget = createMockWidget({ variant })

src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue

@@ -2,10 +2,10 @@
   <div class="flex flex-col gap-1">
     <Button
       class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
-      v-bind="filteredProps"
       :aria-label="widget.label"
-      size="small"
-      :text="true"
+      size="sm"
+      variant="textonly"
+      v-bind="filteredProps"
       @click="handleClick"
     >
       {{ widget.label ?? widget.name }}
@@ -15,9 +15,9 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   BADGE_EXCLUDED_PROPS,

src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends WidgetValue">
-import Button from 'primevue/button'
 import { computed, defineAsyncComponent, ref, watch } from 'vue'
 import type { Component } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type {
   SimplifiedControlWidget,
   WidgetValue
@@ -47,8 +47,8 @@ const togglePopover = (event: Event) => {
   <div class="relative grid grid-cols-subgrid">
     <component :is="component" v-bind="$attrs" v-model="modelValue" :widget>
       <Button
-        variant="link"
-        size="small"
+        variant="textonly"
+        size="sm"
         class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
         @pointerdown.stop.prevent="togglePopover"
       >