From 83c42cd1ccf81f2aaf64a7fc20bbe3a9cf25b8d5 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 3 Aug 2023 11:49:45 +0200
Subject: [PATCH] fix(FormGroup): `size` were invalid since default has been
 removed

Bug introduced in https://github.com/nuxtlabs/ui/commit/c59595f2c6cf414bf04bb5995ba029a59ef8035b
---
 docs/content/3.forms/9.form-group.md      | 4 ++++
 src/runtime/components/forms/FormGroup.ts | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md
index 51d9a183e6..8bec669563 100644
--- a/docs/content/3.forms/9.form-group.md
+++ b/docs/content/3.forms/9.form-group.md
@@ -160,6 +160,10 @@ code: >-
 :u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
 ::
 
+::callout{icon="i-heroicons-exclamation-triangle"}
+  This will only work with form elements that support the `size` prop.
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/forms/FormGroup.ts b/src/runtime/components/forms/FormGroup.ts
index 3b3bf9a3da..75c39fe0a2 100644
--- a/src/runtime/components/forms/FormGroup.ts
+++ b/src/runtime/components/forms/FormGroup.ts
@@ -90,16 +90,18 @@ export default defineComponent({
       return cloneVNode(node, vProps)
     }))
 
+    const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])
+
     return () => h('div', { class: [ui.value.wrapper] }, [
-      props.label && h('div', { class: [ui.value.label.wrapper, ui.value.size[props.size]] }, [
+      props.label && h('div', { class: [ui.value.label.wrapper, size.value] }, [
         h('label', { for: props.name, class: [ui.value.label.base, props.required && ui.value.label.required] }, props.label),
         props.hint && h('span', { class: [ui.value.hint] }, props.hint)
       ]),
-      props.description && h('p', { class: [ui.value.description, ui.value.size[props.size]
+      props.description && h('p', { class: [ui.value.description, size.value
       ] }, props.description),
       h('div', { class: [!!props.label && ui.value.container] }, [
         ...clones.value,
-        errorMessage.value ? h('p', { class: [ui.value.error, ui.value.size[props.size]] }, errorMessage.value) : props.help ? h('p', { class: [ui.value.help, ui.value.size[props.size]] }, props.help) : null
+        errorMessage.value ? h('p', { class: [ui.value.error, size.value] }, errorMessage.value) : props.help ? h('p', { class: [ui.value.help, size.value] }, props.help) : null
       ])
     ])
   }