arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(FormField): display multiple errors

Browse Source 
Adds the `errors` and `maxErrors` properties to the FormField component which
allows to display multiple errors. The `maxErrors` prop is used to limit
the number of errors displayed and defaults to 1 for backward
compatibility.

This change is compatible with the `Form` component error's too.

Resolves #2389
This commit is contained in:
Romain Hamel
2025-06-14 17:19:16 +02:00
parent 59c26ec123
commit 5829aebe7d
4 changed files with 103 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
test/components/FormField.spec.ts
View File

@@ -68,6 +68,10 @@ describe('FormField', () => {
['with required', { props: { label: 'Username', required: true } }],
['with help', { props: { help: 'Username must be unique' } }],
['with error', { props: { error: 'Username is already taken' } }],
['with multiple errors', { props: { errors: ['Username is already taken', 'This should not be visible'] } }],
['with maxErrors', { props: { maxErrors: 2, errors: ['Username is already taken', 'This should be visible'] } }],
['with maxErrors negative', { props: { maxErrors: -1, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
['with maxErrors false', { props: { maxErrors: false, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
['with as', { props: { as: 'section' } }],

53
test/components/__snapshots__/FormField.spec.ts.snap
View File

@@ -148,6 +148,59 @@ exports[`FormField > renders with label slot correctly 1`] = `
</div>"
`;
exports[`FormField > renders with maxErrors correctly 1`] = `
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--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" class="mt-2 text-error">This should be visible</div>
</div>
</div>"
`;
exports[`FormField > renders with maxErrors false correctly 1`] = `
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--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" class="mt-2 text-error">This should be visible</div>
<div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
</div>
</div>"
`;
exports[`FormField > renders with maxErrors negative correctly 1`] = `
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--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" class="mt-2 text-error">This should be visible</div>
<div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
</div>
</div>"
`;
exports[`FormField > renders with multiple errors correctly 1`] = `
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div class="">
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
</div>
</div>"
`;
exports[`FormField > renders with required correctly 1`] = `
"<div class="text-sm">
<div class="">