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 1/2] 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>
     );
   },
 );

From 185d3a8305b98d1bf130f290cc0661a5623e091e Mon Sep 17 00:00:00 2001
From: James Brooks <jamesbrooks@spotify.com>
Date: Fri, 2 May 2025 10:15:11 +0100
Subject: [PATCH 2/2] Add changeset

Signed-off-by: James Brooks <jamesbrooks@spotify.com>
---
 .changeset/wise-cobras-sink.md                               | 5 +++++
 packages/canon/css/components.css                            | 1 +
 packages/canon/css/styles.css                                | 1 +
 packages/canon/css/textfield.css                             | 1 +
 packages/canon/src/components/TextField/TextField.styles.css | 1 +
 5 files changed, 9 insertions(+)
 create mode 100644 .changeset/wise-cobras-sink.md

diff --git a/.changeset/wise-cobras-sink.md b/.changeset/wise-cobras-sink.md
new file mode 100644
index 0000000000..7a6a73c726
--- /dev/null
+++ b/.changeset/wise-cobras-sink.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Use the Field component from Base UI within the TextField.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 6496363868..1fc7f275c3 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -544,6 +544,7 @@
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
   cursor: pointer;
+  margin-right: auto;
 }
 
 .canon-TextFieldLabel[data-disabled] {
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index b2743220c7..3382c15675 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9768,6 +9768,7 @@
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
   cursor: pointer;
+  margin-right: auto;
 }
 
 .canon-TextFieldLabel[data-disabled] {
diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css
index 4caf7cb2e9..8315d48bc6 100644
--- a/packages/canon/css/textfield.css
+++ b/packages/canon/css/textfield.css
@@ -11,6 +11,7 @@
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
   cursor: pointer;
+  margin-right: auto;
 }
 
 .canon-TextFieldLabel[data-disabled] {
diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css
index 7ee0a937dc..5acc8480f3 100644
--- a/packages/canon/src/components/TextField/TextField.styles.css
+++ b/packages/canon/src/components/TextField/TextField.styles.css
@@ -26,6 +26,7 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
+  margin-right: auto;
   cursor: pointer;
 }
 .canon-TextFieldLabel[data-disabled] {