feat(Badge): add support within button groups (#3224)

Co-authored-by: Benjamin Canac <[email protected]>

Author: jduartea

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>

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

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">

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' } })

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: ''