From 9453d10becf7fe1846687996098efd1c0f257160 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 12:14:15 -0300
Subject: [PATCH] Change classname "form-group" to use only Tailwind

---
 src/components/ui/form-group/form-group.tsx | 26 ++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/form-group/form-group.tsx b/src/components/ui/form-group/form-group.tsx
index 430851371..c566bd3d7 100644
--- a/src/components/ui/form-group/form-group.tsx
+++ b/src/components/ui/form-group/form-group.tsx
@@ -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>