feat(WEB-163): edit profile field validation

components/TempDesignSystem/Form/Country/country.module.css

@@ -19,6 +19,13 @@
   padding: var(--Spacing-x1) var(--Spacing-x2);
 }
 
+.comboBoxContainer:has(
+    .input[data-invalid="true"],
+    .input[aria-invalid="true"]
+  ) {
+  border-color: var(--Scandic-Red-60);
+}
+
 .label {
   grid-area: label;
 }
@@ -66,6 +73,8 @@
     var(--Spacing-x2);
 }
 
+.listBoxItem[data-focused="true"],
+.listBoxItem[data-focus-visible="true"],
 .listBoxItem[data-selected="true"],
 .listBoxItem:hover {
   background-color: var(--Scandic-Blue-00);

components/TempDesignSystem/Form/Country/index.tsx

@@ -1,10 +1,8 @@
 "use client"
-import { ErrorMessage } from "@hookform/error-message"
 import { useState } from "react"
 import {
   Button,
   ComboBox,
-  FieldError,
   Input,
   type Key,
   ListBox,
@@ -18,6 +16,7 @@ import Label from "@/components/TempDesignSystem/Form/Label"
 import SelectChevron from "@/components/TempDesignSystem/Form/SelectChevron"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
+import ErrorMessage from "../ErrorMessage"
 import { countries } from "./countries"
 
 import styles from "./country.module.css"
@@ -42,7 +41,7 @@ export default function CountrySelect({
     }
   }
   const { control, setValue } = useFormContext()
-  const { field } = useController({
+  const { field, fieldState, formState } = useController({
     control,
     name,
     rules: registerOptions,
@@ -60,6 +59,7 @@ export default function CountrySelect({
         aria-label={formatMessage({ id: "Select country of residence" })}
         className={styles.select}
         isRequired={!!registerOptions?.required}
+        isInvalid={fieldState.invalid}
         name={field.name}
         onBlur={field.onBlur}
         onSelectionChange={handleChange}
@@ -85,9 +85,7 @@ export default function CountrySelect({
             <SelectChevron />
           </Button>
         </div>
-        <FieldError>
-          <ErrorMessage name={name} />
-        </FieldError>
+        <ErrorMessage errors={formState.errors} name={name} />
         <Popover
           className={styles.popover}
           placement="bottom"