From 10fb843f8ffc2cda9cf9a29cdf37c6b5dae9ca17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Duarte=20Alleuy?= <jduartea@gmail.com>
Date: Mon, 3 Feb 2025 08:11:22 -0300
Subject: [PATCH] feat(Badge): add support within button groups (#3224)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../examples/button-group/ButtonGroupBadgeExample.vue  |  7 +++++++
 docs/content/3.components/button-group.md              | 10 ++++++++--
 playground/app/pages/components/button-group.vue       |  5 +++++
 src/runtime/components/Badge.vue                       |  5 ++++-
 src/theme/badge.ts                                     |  2 ++
 5 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 docs/app/components/content/examples/button-group/ButtonGroupBadgeExample.vue

diff --git a/docs/app/components/content/examples/button-group/ButtonGroupBadgeExample.vue b/docs/app/components/content/examples/button-group/ButtonGroupBadgeExample.vue
new file mode 100644
index 00000000..0f1f52ed
--- /dev/null
+++ b/docs/app/components/content/examples/button-group/ButtonGroupBadgeExample.vue
@@ -0,0 +1,7 @@
+<template>
+  <UButtonGroup>
+    <UBadge color="neutral" variant="outline" size="lg" label="https://" />
+
+    <UInput color="neutral" variant="outline" placeholder="www.example.com" />
+  </UButtonGroup>
+</template>
diff --git a/docs/content/3.components/button-group.md b/docs/content/3.components/button-group.md
index 95b0928b..41ba8aeb 100644
--- a/docs/content/3.components/button-group.md
+++ b/docs/content/3.components/button-group.md
@@ -84,16 +84,22 @@ slots:
 
 ### With tooltip
 
-You can use a tooltip within a button group.
+You can use a [Tooltip](/components/tooltip) within a button group.
 
 :component-example{name="button-group-tooltip-example"}
 
 ### With dropdown
 
-You can use a dropdown menu within a button group.
+You can use a [DropdownMenu](/components/dropdown-menu) within a button group.
 
 :component-example{name="button-group-dropdown-example"}
 
+### With badge
+
+You can use a [Badge](/components/badge) within a button group.
+
+:component-example{name="button-group-badge-example"}
+
 ## API
 
 ### Props
diff --git a/playground/app/pages/components/button-group.vue b/playground/app/pages/components/button-group.vue
index 27bd56a9..92a17f76 100644
--- a/playground/app/pages/components/button-group.vue
+++ b/playground/app/pages/components/button-group.vue
@@ -47,6 +47,11 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
           Button
         </UButton>
       </UButtonGroup>
+
+      <UButtonGroup>
+        <UBadge color="neutral" variant="outline" size="lg" label="https://" />
+        <UInput color="neutral" variant="outline" placeholder="www.example.com" />
+      </UButtonGroup>
     </div>
 
     <div class="flex gap-4 items-center justify-center">
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index bec65cda..26dcb5ef 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -38,6 +38,7 @@ export interface BadgeSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
@@ -47,12 +48,14 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 })
 defineSlots<BadgeSlots>()
 
+const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const ui = computed(() => badge({
   color: props.color,
   variant: props.variant,
-  size: props.size
+  size: buttonGroupSize.value || props.size,
+  buttonGroup: orientation.value
 }))
 
 extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
diff --git a/src/theme/badge.ts b/src/theme/badge.ts
index 77a7aece..b5b67fad 100644
--- a/src/theme/badge.ts
+++ b/src/theme/badge.ts
@@ -1,4 +1,5 @@
 import type { ModuleOptions } from '../module'
+import { buttonGroupVariant } from './button-group'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
@@ -10,6 +11,7 @@ export default (options: Required<ModuleOptions>) => ({
     trailingIcon: 'shrink-0'
   },
   variants: {
+    ...buttonGroupVariant,
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       neutral: ''