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 && (
<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
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(', ')}
</p>
<div className='pointer-events-none absolute bottom-full left-2.5 size-0 border-[6px] border-transparent' />
</div>
)}
@ -98,12 +102,18 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{inputChildren.filter((_, i) => i !== 0)}
{hasError && (
<p
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'
>
{errors.join(', ')}
</p>
<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
data-testid='form-group-error'
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>