feat(FieldGroup)!: rename from ButtonGroup (#4596)

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

Author: 3 people

docs/app/components/PageHeaderLinks.vue

@@ -44,7 +44,7 @@ async function copyPage() {
 </script>
 
 <template>
-  <UButtonGroup>
+  <UFieldGroup>
     <UButton
       label="Copy page"
       :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
@@ -73,5 +73,5 @@ async function copyPage() {
         variant="outline"
       />
     </UDropdownMenu>
-  </UButtonGroup>
+  </UFieldGroup>
 </template>

docs/app/components/content/examples/button-group/ButtonGroupBadgeExample.vue renamed to docs/app/components/content/examples/field-group/FieldGroupBadgeExample.vue

@@ -1,7 +1,7 @@
 <template>
-  <UButtonGroup>
+  <UFieldGroup>
     <UBadge color="neutral" variant="outline" size="lg" label="https://" />
 
     <UInput color="neutral" variant="outline" placeholder="www.example.com" />
-  </UButtonGroup>
+  </UFieldGroup>
 </template>

docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue renamed to docs/app/components/content/examples/field-group/FieldGroupDropdownExample.vue

@@ -28,7 +28,7 @@ const items: DropdownMenuItem[] = [
 </script>
 
 <template>
-  <UButtonGroup>
+  <UFieldGroup>
     <UButton color="neutral" variant="subtle" label="Settings" />
 
     <UDropdownMenu :items="items">
@@ -38,5 +38,5 @@ const items: DropdownMenuItem[] = [
         icon="i-lucide-chevron-down"
       />
     </UDropdownMenu>
-  </UButtonGroup>
+  </UFieldGroup>
 </template>

docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue renamed to docs/app/components/content/examples/field-group/FieldGroupTooltipExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <UButtonGroup>
+  <UFieldGroup>
     <UInput color="neutral" variant="outline" placeholder="Enter token" />
 
     <UTooltip text="Copy to clipboard">
@@ -9,5 +9,5 @@
         icon="i-lucide-clipboard"
       />
     </UTooltip>
-  </UButtonGroup>
+  </UFieldGroup>
 </template>

docs/app/components/content/examples/input/InputButtonGroupExample.vue renamed to docs/app/components/content/examples/input/InputFieldGroupExample.vue

@@ -5,7 +5,7 @@ const domain = ref(domains[0])
 </script>
 
 <template>
-  <UButtonGroup>
+  <UFieldGroup>
     <UInput
       v-model="value"
       placeholder="nuxt"
@@ -22,5 +22,5 @@ const domain = ref(domains[0])
     </UInput>
 
     <USelectMenu v-model="domain" :items="domains" />
-  </UButtonGroup>
+  </UFieldGroup>
 </template>

docs/content/docs/2.components/button-group.md renamed to docs/content/docs/2.components/field-group.md

@@ -1,16 +1,16 @@
 ---
-title: ButtonGroup
+title: FieldGroup
 description: Group multiple button-like elements together.
 category: element
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/ButtonGroup.vue
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/FieldGroup.vue
 ---
 
 ## Usage
 
-Wrap multiple [Button](/docs/components/button) within a ButtonGroup to group them together.
+Wrap multiple [Button](/components/button) within a FieldGroup to group them together.
 
 ::component-code
 ---
@@ -67,7 +67,7 @@ slots:
 
 ### With input
 
-You can use components like [Input](/docs/components/input), [InputMenu](/docs/components/input-menu), [Select](/docs/components/select) [SelectMenu](/docs/components/select-menu), etc. within a button group.
+You can use components like [Input](/components/input), [InputMenu](/components/input-menu), [Select](/components/select) [SelectMenu](/components/select-menu), etc. within a field group.
 
 ::component-code
 ---
@@ -85,21 +85,21 @@ slots:
 
 ### With tooltip
 
-You can use a [Tooltip](/docs/components/tooltip) within a button group.
+You can use a [Tooltip](/components/tooltip) within a field group.
 
-:component-example{name="button-group-tooltip-example"}
+:component-example{name="field-group-tooltip-example"}
 
 ### With dropdown
 
-You can use a [DropdownMenu](/docs/components/dropdown-menu) within a button group.
+You can use a [DropdownMenu](/components/dropdown-menu) within a field group.
 
-:component-example{name="button-group-dropdown-example"}
+:component-example{name="field-group-dropdown-example"}
 
 ### With badge
 
-You can use a [Badge](/docs/components/badge) within a button group.
+You can use a [Badge](/components/badge) within a field group.
 
-:component-example{name="button-group-badge-example"}
+:component-example{name="field-group-badge-example"}
 
 ## API
 

docs/content/docs/2.components/input.md

@@ -312,13 +312,13 @@ name: 'input-form-field-example'
 It also provides validation and error handling when used within a **Form** component.
 ::
 
-### Within a ButtonGroup
+### Within a FieldGroup
 
-You can use the Input within a [ButtonGroup](/docs/components/button-group) component to group multiple elements together.
+You can use the Input within a [FieldGroup](/components/field-group) component to group multiple elements together.
 
 ::component-example
 ---
-name: 'input-button-group-example'
+name: 'input-field-group-example'
 ---
 ::
 

docs/nuxt.config.ts

@@ -71,6 +71,7 @@ export default defineNuxtConfig({
     '/getting-started/**': { redirect: { to: '/docs/getting-started/**', statusCode: 301 }, prerender: false },
     '/components/**': { redirect: { to: '/docs/components/**', statusCode: 301 }, prerender: false },
     '/composables/**': { redirect: { to: '/docs/composables/**', statusCode: 301 }, prerender: false },
+    '/components/button-group': { redirect: { to: '/docs/components/field-group', statusCode: 301 }, prerender: false },
     // v4 redirects - default root pages
     '/docs': { redirect: '/docs/getting-started', prerender: false },
     '/docs/components': { redirect: '/docs/components/app', prerender: false },