From 459a0410ab729fde60865e84632b36903465f57e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 13 May 2025 17:40:11 +0200
Subject: [PATCH] fix(FormField): use `div` for `error` and `help` slots

---
 src/runtime/components/FormField.vue                 |  8 ++++----
 test/components/__snapshots__/Form-vue.spec.ts.snap  | 12 ++++++------
 test/components/__snapshots__/Form.spec.ts.snap      | 12 ++++++------
 .../__snapshots__/FormField-vue.spec.ts.snap         |  8 ++++----
 test/components/__snapshots__/FormField.spec.ts.snap |  8 ++++----
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index 2c12fbbc..f8d8a3ff 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -115,16 +115,16 @@ provide(formFieldInjectionKey, computed(() => ({
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 
-      <p v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
-      </p>
-      <p v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+      </div>
+      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>
-      </p>
+      </div>
     </div>
   </Primitive>
 </template>
diff --git a/test/components/__snapshots__/Form-vue.spec.ts.snap b/test/components/__snapshots__/Form-vue.spec.ts.snap
index e1339eef..6701093d 100644
--- a/test/components/__snapshots__/Form-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Form-vue.spec.ts.snap
@@ -25,7 +25,7 @@ exports[`Form > custom validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -87,7 +87,7 @@ exports[`Form > joi validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -153,7 +153,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -215,7 +215,7 @@ exports[`Form > valibot validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -277,7 +277,7 @@ exports[`Form > yup validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -339,7 +339,7 @@ exports[`Form > zod validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
diff --git a/test/components/__snapshots__/Form.spec.ts.snap b/test/components/__snapshots__/Form.spec.ts.snap
index 81f87c37..0a0e2677 100644
--- a/test/components/__snapshots__/Form.spec.ts.snap
+++ b/test/components/__snapshots__/Form.spec.ts.snap
@@ -25,7 +25,7 @@ exports[`Form > custom validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -87,7 +87,7 @@ exports[`Form > joi validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -153,7 +153,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -215,7 +215,7 @@ exports[`Form > valibot validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -277,7 +277,7 @@ exports[`Form > yup validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
@@ -339,7 +339,7 @@ exports[`Form > zod validation works > with error 1`] = `
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
     </div>
   </div>
 </form>"
diff --git a/test/components/__snapshots__/FormField-vue.spec.ts.snap b/test/components/__snapshots__/FormField-vue.spec.ts.snap
index 4f4469c0..bee8f680 100644
--- a/test/components/__snapshots__/FormField-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FormField-vue.spec.ts.snap
@@ -55,7 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-error">Username is already taken</p>
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
   </div>
 </div>"
 `;
@@ -67,7 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-error">Error slot</p>
+    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
   </div>
 </div>"
 `;
@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-muted">Username must be unique</p>
+    <div class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
 `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-muted">Help slot</p>
+    <div class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/FormField.spec.ts.snap b/test/components/__snapshots__/FormField.spec.ts.snap
index 4f4469c0..bee8f680 100644
--- a/test/components/__snapshots__/FormField.spec.ts.snap
+++ b/test/components/__snapshots__/FormField.spec.ts.snap
@@ -55,7 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-error">Username is already taken</p>
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
   </div>
 </div>"
 `;
@@ -67,7 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-error">Error slot</p>
+    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
   </div>
 </div>"
 `;
@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-muted">Username must be unique</p>
+    <div class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
 `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-muted">Help slot</p>
+    <div class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
 `;