From da9f79141a28cb2ccff202d569015b8e96d82614 Mon Sep 17 00:00:00 2001
From: James Brooks <jamesbrooks@spotify.com>
Date: Fri, 2 May 2025 09:56:00 +0100
Subject: [PATCH] Canon - Refactor TextField to use Field

Signed-off-by: James Brooks <jamesbrooks@spotify.com>
---
 .../src/components/TextField/TextField.tsx    | 41 ++++++-------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx
index db56463c3a..132d6ab1c6 100644
--- a/packages/canon/src/components/TextField/TextField.tsx
+++ b/packages/canon/src/components/TextField/TextField.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { useId, forwardRef } from 'react';
-import { Input } from '@base-ui-components/react/input';
+import { Field } from '@base-ui-components/react/field';
+import { forwardRef } from 'react';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
 
@@ -39,56 +39,41 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
     // Get the responsive value for the variant
     const responsiveSize = useResponsiveValue(size);
 
-    // Generate unique IDs for accessibility
-    const inputId = useId();
-    const descriptionId = useId();
-    const errorId = useId();
-
     return (
-      <div
+      <Field.Root
         className={clsx('canon-TextField', className)}
+        disabled={disabled}
+        invalid={!!error}
         style={style}
         ref={ref}
       >
         {label && (
-          <label
-            className="canon-TextFieldLabel"
-            htmlFor={inputId}
-            data-disabled={disabled}
-          >
+          <Field.Label className="canon-TextFieldLabel">
             {label}
             {required && (
               <span aria-hidden="true" className="canon-TextFieldRequired">
                 (Required)
               </span>
             )}
-          </label>
+          </Field.Label>
         )}
-        <Input
-          id={inputId}
+        <Field.Control
           className="canon-TextFieldInput"
           data-size={responsiveSize}
-          aria-labelledby={label ? inputId : undefined}
-          aria-describedby={clsx({
-            [descriptionId]: description,
-            [errorId]: error,
-          })}
-          data-invalid={error}
           required={required}
-          disabled={disabled}
           {...rest}
         />
         {description && (
-          <p className="canon-TextFieldDescription" id={descriptionId}>
+          <Field.Description className="canon-TextFieldDescription">
             {description}
-          </p>
+          </Field.Description>
         )}
         {error && (
-          <p className="canon-TextFieldError" id={errorId} role="alert">
+          <Field.Error className="canon-TextFieldError" role="alert" forceShow>
             {error}
-          </p>
+          </Field.Error>
         )}
-      </div>
+      </Field.Root>
     );
   },
 );