feat(ButtonGroup): add orientation prop (#603)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/ComponentCard.vue

@@ -11,7 +11,7 @@
           class="justify-center"
         />
         <USelectMenu
-          v-else-if="prop.type === 'string' && prop.options.length && prop.name !== 'label'"
+          v-else-if="prop.options.length && prop.name !== 'label'"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"

docs/content/2.elements/5.button.md

@@ -276,12 +276,14 @@ excludedProps:
 To stack buttons as a group, use the `ButtonGroup` component.
 
 - To size all the buttons equally, pass the `size` prop
+- To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
 ::component-card{slug="ButtonGroup"}
 ---
 props:
   size: 'sm'
+  orientation: 'horizontal'
 ui:
   size:
     2xs: ''
@@ -290,6 +292,9 @@ ui:
     md: ''
     lg: ''
     xl: ''
+  orientation:
+    horizontal: ''
+    vertical: ''
 code: |
   <UButton label="Action" color="white" />
     <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />