From e560a6af84a0eafce77a7601e4cad3a18e9bc385 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 09:27:44 +0200
Subject: [PATCH] feat(09-03): integrate TextFieldMD3 into FieldRenderer and
 PasswordField

- FieldRenderer text-branch now renders TextFieldMD3 with floating label
- PasswordField replaced with TextFieldMD3 + show/hide suffix toggle
- Tooltip button kept outside TextFieldMD3, rendered above it
- Removed placeholder prop from PasswordField (TextFieldMD3 uses placeholder=" " internally)
- All 179 tests pass (getByLabelText queries preserved via htmlFor/id pairing)
---
 src/components/ui/FieldRenderer.tsx | 48 ++++++++-----------
 src/components/ui/PasswordField.tsx | 74 +++++++++++++----------------
 2 files changed, 53 insertions(+), 69 deletions(-)

diff --git a/src/components/ui/FieldRenderer.tsx b/src/components/ui/FieldRenderer.tsx
index 1f9c095..3cbd151 100644
--- a/src/components/ui/FieldRenderer.tsx
+++ b/src/components/ui/FieldRenderer.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { UseFormRegister, FieldError } from 'react-hook-form';
 import type { FieldDef } from '../../schemas/registry';
 import { PasswordField } from './PasswordField';
+import { TextFieldMD3 } from './TextFieldMD3';
 
 interface FieldRendererProps {
   field: FieldDef;
@@ -30,7 +31,6 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
         label={field.label}
         error={error}
         registration={register(field.key)}
-        placeholder={field.placeholder}
         helpText={field.helpText}
         tooltipText={field.tooltipText}
       />
@@ -79,42 +79,32 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
     );
   }
 
-  // text (default)
+  // text (default) — uses TextFieldMD3 for floating label
   return (
     <div className="flex flex-col gap-1">
-      <div className="flex items-center gap-1">
-        <label htmlFor={field.key} className="text-sm font-medium text-on-surface-container">
-          {field.label}
-          {field.required && <span className="ml-1 text-error">*</span>}
-        </label>
-        {field.tooltipText && (
-          <button
-            type="button"
-            onClick={() => setShowTooltip(v => !v)}
-            aria-label={`More info about ${field.label}`}
-            className="text-primary hover:text-primary text-xs leading-none"
-          >
-            ⓘ
-          </button>
-        )}
-      </div>
+      {field.tooltipText && (
+        <button
+          type="button"
+          onClick={() => setShowTooltip(v => !v)}
+          aria-label={`More info about ${field.label}`}
+          className="text-primary hover:text-primary text-xs leading-none self-start"
+        >
+          ⓘ
+        </button>
+      )}
       {field.tooltipText && showTooltip && (
-        <p className="text-xs text-primary bg-primary/10 border border-primary/30 rounded px-2 py-1.5 mt-1">
+        <p className="text-xs text-primary bg-primary/10 border border-primary/30 rounded px-2 py-1.5">
           {field.tooltipText}
         </p>
       )}
-      <input
+      <TextFieldMD3
         id={field.key}
-        type="text"
-        placeholder={field.placeholder}
-        className={[
-          'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2',
-          error ? 'border-error focus:ring-error/50' : 'border-outline focus:ring-primary/50',
-        ].join(' ')}
-        {...register(field.key)}
+        label={field.label}
+        error={error}
+        registration={register(field.key)}
+        helpText={field.helpText}
+        required={field.required}
       />
-      {field.helpText && !error && <p className="text-xs text-on-surface-container/70">{field.helpText}</p>}
-      {error && <p className="text-xs text-error">{error.message}</p>}
     </div>
   );
 }
diff --git a/src/components/ui/PasswordField.tsx b/src/components/ui/PasswordField.tsx
index d1cbd5d..00980b1 100644
--- a/src/components/ui/PasswordField.tsx
+++ b/src/components/ui/PasswordField.tsx
@@ -1,63 +1,57 @@
 import { useState } from 'react';
 import type { FieldError, UseFormRegisterReturn } from 'react-hook-form';
+import { TextFieldMD3 } from './TextFieldMD3';
 
 interface PasswordFieldProps {
   id: string;
   label: string;
   error?: FieldError;
   registration: UseFormRegisterReturn;
-  placeholder?: string;
   helpText?: string;
   tooltipText?: string;
 }
 
-export function PasswordField({ id, label, error, registration, placeholder, helpText, tooltipText }: PasswordFieldProps) {
+export function PasswordField({ id, label, error, registration, helpText, tooltipText }: PasswordFieldProps) {
   const [show, setShow] = useState(false);
   const [showTooltip, setShowTooltip] = useState(false);
+
+  const toggleButton = (
+    <button
+      type="button"
+      onClick={() => setShow(v => !v)}
+      aria-label={show ? 'Hide' : 'Show'}
+      className="text-on-surface-container/50 hover:text-on-surface-container text-sm"
+    >
+      {show ? 'Hide' : 'Show'}
+    </button>
+  );
+
   return (
     <div className="flex flex-col gap-1">
-      <div className="flex items-center gap-1">
-        <label htmlFor={id} className="text-sm font-medium text-on-surface-container">
-          {label}
-        </label>
-        {tooltipText && (
-          <button
-            type="button"
-            onClick={() => setShowTooltip(v => !v)}
-            aria-label={`More info about ${label}`}
-            className="text-primary hover:text-primary text-xs leading-none"
-          >
-            ⓘ
-          </button>
-        )}
-      </div>
+      {tooltipText && (
+        <button
+          type="button"
+          onClick={() => setShowTooltip(v => !v)}
+          aria-label={`More info about ${label}`}
+          className="text-primary hover:text-primary text-xs leading-none self-start"
+        >
+          ⓘ
+        </button>
+      )}
       {tooltipText && showTooltip && (
-        <p className="text-xs text-primary bg-primary/10 border border-primary/30 rounded px-2 py-1.5 mt-1">
+        <p className="text-xs text-primary bg-primary/10 border border-primary/30 rounded px-2 py-1.5">
           {tooltipText}
         </p>
       )}
-      <div className="relative">
-        <input
-          id={id}
-          type={show ? 'text' : 'password'}
-          placeholder={placeholder}
-          className={[
-            'w-full rounded-md border px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2',
-            error ? 'border-error focus:ring-error/50' : 'border-outline focus:ring-primary/50',
-          ].join(' ')}
-          {...registration}
-        />
-        <button
-          type="button"
-          onClick={() => setShow(v => !v)}
-          aria-label={show ? 'Hide' : 'Show'}
-          className="absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-container/50 hover:text-on-surface-container"
-        >
-          {show ? 'Hide' : 'Show'}
-        </button>
-      </div>
-      {helpText && !error && <p className="text-xs text-on-surface-container/70">{helpText}</p>}
-      {error && <p className="text-xs text-error">{error.message}</p>}
+      <TextFieldMD3
+        id={id}
+        label={label}
+        error={error}
+        registration={registration}
+        type={show ? 'text' : 'password'}
+        helpText={helpText}
+        suffix={toggleButton}
+      />
     </div>
   );
 }