From ffda940e5a7a497da21e20896e85c17d5f04430c Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Thu, 12 Mar 2026 12:00:02 -0700
Subject: [PATCH] Make the vue toggle ring surround toggle (#9071)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/3d414c6e-972e-4c87-8765-c30dc8288ddb"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/a3ec3eb4-f61f-42ac-bcf3-bc4c766040d7"/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9071-Make-the-vue-toggle-ring-surround-toggle-30f6d73d365081e0a427cf270ef2763a)
by [Unito](https://www.unito.io)
---
 .../widgets/components/WidgetToggleSwitch.vue   | 10 ++++++++--
 .../components/layout/WidgetLayoutField.vue     | 17 +++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 9aab71160e..dd357ac562 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <WidgetLayoutField :widget>
+  <WidgetLayoutField v-slot="{ borderStyle }" :widget :no-border="!hasLabels">
     <!-- Use ToggleGroup when explicit labels are provided -->
     <ToggleGroup
       v-if="hasLabels"
@@ -25,7 +25,13 @@
     <!-- Use ToggleSwitch for implicit boolean states -->
     <div
       v-else
-      :class="cn('flex w-fit items-center gap-2', hideLayoutField || 'ml-auto')"
+      :class="
+        cn(
+          '-m-1 flex w-fit items-center gap-2 rounded-full p-1',
+          hideLayoutField || 'ml-auto',
+          borderStyle
+        )
+      "
     >
       <ToggleSwitch
         v-model="modelValue"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 2c83da03b3..f399f7a4f1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -1,17 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 
-const { rootClass } = defineProps<{
+const { widget, rootClass } = defineProps<{
   widget: Pick<
     SimplifiedWidget<string | number | undefined>,
     'name' | 'label' | 'borderStyle'
   >
   rootClass?: string
+  noBorder?: boolean
 }>()
 
 const hideLayoutField = useHideLayoutField()
+const borderStyle = computed(() =>
+  cn(
+    'focus-within:ring focus-within:ring-component-node-widget-background-highlighted',
+    widget.borderStyle
+  )
+)
 </script>
 
 <template>
@@ -33,15 +42,15 @@ const hideLayoutField = useHideLayoutField()
       <div
         :class="
           cn(
-            'min-w-0 cursor-default rounded-lg transition-all has-focus-visible:ring has-focus-visible:ring-component-node-widget-background-highlighted',
-            widget.borderStyle
+            'min-w-0 cursor-default rounded-lg transition-all',
+            !noBorder && borderStyle
           )
         "
         @pointerdown.stop
         @pointermove.stop
         @pointerup.stop
       >
-        <slot />
+        <slot :border-style />
       </div>
     </div>
   </div>