fixes checkbox error tooltip alignment

Author: JarrodMFlesch

packages/ui/src/elements/Tooltip/index.css

@@ -73,7 +73,7 @@
 
   .tooltip--caret-left {
     &::after {
-      left: 0;
+      left: var(--spacer-3);
     }
   }
 

packages/ui/src/fields/Checkbox/Input.tsx

@@ -13,6 +13,7 @@ export type CheckboxInputProps = {
   readonly BeforeInput?: React.ReactNode
   readonly checked?: boolean
   readonly className?: string
+  readonly Error?: React.ReactNode
   readonly id?: string
   readonly inputRef?: React.RefObject<HTMLInputElement | null>
   readonly Label?: React.ReactNode
@@ -34,6 +35,7 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = ({
   BeforeInput,
   checked,
   className,
+  Error,
   inputRef,
   Label,
   label,
@@ -88,6 +90,7 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = ({
           {!checked && partialChecked && <LineIcon />}
         </span>
         {AfterInput}
+        {Error}
       </div>
       <RenderCustomComponent
         CustomComponent={Label}

packages/ui/src/fields/Checkbox/index.css

@@ -4,7 +4,8 @@
 
     .tooltip:not([aria-hidden='true']) {
       right: auto;
-      position: static;
+      left: calc(-1 * var(--spacer-2));
+      position: absolute;
       transform: translateY(calc(var(--caret-size) * -1));
       margin-bottom: 0.2em;
       max-width: fit-content;

packages/ui/src/fields/Checkbox/index.tsx

@@ -106,16 +106,18 @@ const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {
         .join(' ')}
       style={styles}
     >
-      <RenderCustomComponent
-        CustomComponent={Error}
-        Fallback={
-          <FieldError alignCaret={isRTL ? 'right' : 'left'} path={path} showError={showError} />
-        }
-      />
       <CheckboxInput
         AfterInput={AfterInput}
         BeforeInput={BeforeInput}
         checked={checked}
+        Error={
+          <RenderCustomComponent
+            CustomComponent={Error}
+            Fallback={
+              <FieldError alignCaret={isRTL ? 'right' : 'left'} path={path} showError={showError} />
+            }
+          />
+        }
         id={fieldID}
         inputRef={null}
         Label={Label}