moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change classname "form-group" to use only Tailwind

This commit is contained in:
danidfra 2024-11-01 12:14:15 -03:00
parent 64e837ca74
commit 9453d10bec
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ui/form-group/form-group.tsx
View File

@ -54,13 +54,17 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
)} )}
{hasError && ( {hasError && (
<div> <div className='relative'>
<div className='pointer-events-none absolute bottom-full left-2.5 -ml-px size-0 border-[6px] border-solid border-transparent' style={{ borderBottomColor: 'rgba(254, 202, 202, var(--tw-bg-opacity))', '--tw-bg-opacity': '1' } as React.CSSProperties} />
<p <p
data-testid='form-group-error' data-testid='form-group-error'
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900' className='relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
> >
{errors.join(', ')} {errors.join(', ')}
</p> </p>
<div className='pointer-events-none absolute bottom-full left-2.5 size-0 border-[6px] border-transparent' />
</div> </div>
)} )}
@ -98,12 +102,18 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{inputChildren.filter((_, i) => i !== 0)} {inputChildren.filter((_, i) => i !== 0)}
{hasError && ( {hasError && (
<p <div className='relative'>
data-testid='form-group-error' <div className='pointer-events-none absolute bottom-full left-2.5 -ml-px size-0 border-[6px] border-solid border-transparent' style={{ borderBottomColor: 'rgba(254, 202, 202, var(--tw-bg-opacity))', '--tw-bg-opacity': '1' } as React.CSSProperties} />
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
> <p
{errors.join(', ')} data-testid='form-group-error'
</p> className='relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
>
{errors.join(', ')}
</p>
<div className='pointer-events-none absolute bottom-full left-2.5 size-0 border-[6px] border-transparent' />
</div>
)} )}
</div> </div>
</div> </div>