feat(FormField): wrap error with Presence to be animated

This commit is contained in:
Benjamin Canac
2025-05-14 12:57:40 +02:00
parent 717e35f098
commit 4fad9521b2
7 changed files with 191 additions and 23 deletions

View File

@@ -7,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</section>"
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">Default slot
<!---->
<!--v-if-->
</div>
</div>"
@@ -43,6 +46,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Description slot</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
<!--v-if-->
</div>
</div>"
`;
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
<!--v-if-->
</div>
</div>"
`;
@@ -79,6 +85,7 @@ exports[`FormField > renders with help correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<div class="mt-2 text-muted">Username must be unique</div>
</div>
</div>"
@@ -91,6 +98,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<div class="mt-2 text-muted">Help slot</div>
</div>
</div>"
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -129,6 +139,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
<!--v-if-->
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
<!--v-if-->
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -171,6 +184,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -185,6 +199,7 @@ exports[`FormField > renders with size md correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -199,6 +214,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -213,6 +229,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -227,6 +244,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -239,6 +257,7 @@ exports[`FormField > renders with ui correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"