riccardo/newsletter-hackernews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #10 from RiccardoSenica/9-after-invalid-email-error-elements-are-no-longer-aligned

Browse Source 
fix: keep input elements aligned when displaying error message
This commit is contained in:
Riccardo Senica
2023-12-17 21:08:11 +01:00
committed by GitHub
parent 9a43e25659 24ee55131e
commit 28a35dbf41
3 changed files with 62 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/page.tsx
View File

@@ -80,26 +80,30 @@ export default function Home() {
} }
return ( return (
<Form {...form}> <div className='h-12 align-top'>
<form <Form {...form}>
onSubmit={form.handleSubmit(handleSubmit)} <form
className='flex items-center justify-center space-x-4' onSubmit={form.handleSubmit(handleSubmit)}
> className='flex space-x-4'
<FormField >
control={form.control} <FormField
name='email' control={form.control}
render={({ field }) => ( name='email'
<FormItem> render={({ field }) => (
<FormControl> <FormItem>
<Input placeholder='example@example.com' {...field} /> <FormControl>
</FormControl> <Input placeholder='example@example.com' {...field} />
<FormMessage /> </FormControl>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
<Button type='submit'>Submit</Button> />
</form> <div className='align-top'>
</Form> <Button type='submit'>Submit</Button>
</div>
</form>
</Form>
</div>
); );
} }

44
app/unsubscribe/page.tsx
View File

@@ -80,26 +80,30 @@ export default function Unsubscribe() {
} }
return ( return (
<Form {...form}> <div className='h-12 align-top'>
<form <Form {...form}>
onSubmit={form.handleSubmit(handleSubmit)} <form
className='flex items-center justify-center space-x-4' onSubmit={form.handleSubmit(handleSubmit)}
> className='flex space-x-4'
<FormField >
control={form.control} <FormField
name='email' control={form.control}
render={({ field }) => ( name='email'
<FormItem> render={({ field }) => (
<FormControl> <FormItem>
<Input placeholder='example@example.com' {...field} /> <FormControl>
</FormControl> <Input placeholder='example@example.com' {...field} />
<FormMessage /> </FormControl>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
<Button type='submit'>Submit</Button> />
</form> <div className='align-top'>
</Form> <Button type='submit'>Submit</Button>
</div>
</form>
</Form>
</div>
); );
} }

27
components/ui/form.tsx
View File

@@ -133,7 +133,7 @@ const FormDescription = React.forwardRef<
<p <p
ref={ref} ref={ref}
id={formDescriptionId} id={formDescriptionId}
className={cn('text-muted-foreground text-sm', className)} className={cn('text-sm text-muted-foreground', className)}
{...props} {...props}
/> />
); );
@@ -147,21 +147,22 @@ const FormMessage = React.forwardRef<
const { error, formMessageId } = useFormField(); const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children; const body = error ? String(error?.message) : children;
if (!body) {
return null;
}
return ( return (
<p <>
ref={ref} {!body ? null : (
id={formMessageId} <p
className={cn('text-destructive text-sm font-medium', className)} ref={ref}
{...props} id={formMessageId}
> className={cn('text-sm font-medium text-destructive', className)}
{body} {...props}
</p> >
{body}
</p>
)}
</>
); );
}); });
FormMessage.displayName = 'FormMessage'; FormMessage.displayName = 'FormMessage';
export { export {