feat(09-04): replace plain Remote name input with TextFieldMD3

- Add import { TextFieldMD3 } from '../ui/TextFieldMD3'
- Replace label+input+error block with TextFieldMD3 component
- Pass registration={register('name')}, error={errors.name}, required
- Closes COMP-01 gap: all wizard text inputs now use TextFieldMD3 floating label
This commit is contained in:
2026-04-01 10:27:23 +02:00
parent 2bcfe2ef4f
commit 123f24c57d
@@ -7,6 +7,7 @@ import type { BackendType } from '../../store/types';
import { BACKEND_REGISTRY } from '../../schemas/registry';
import { BackendCard } from '../ui/BackendCard';
import { MD3_BTN_FILLED } from '../../styles/md3-buttons';
import { TextFieldMD3 } from '../ui/TextFieldMD3';
const remoteNameSchema = z.object({
name: z
@@ -54,13 +55,13 @@ export function BackendSelectionStep() {
<div>
<h2>Step 1: Select Backend</h2>
<form onSubmit={handleSubmit(onValidSubmit)}>
<div>
<label htmlFor="remote-name">Remote name</label>
<input id="remote-name" type="text" {...register('name')} />
{errors.name && (
<p role="alert">{errors.name.message}</p>
)}
</div>
<TextFieldMD3
id="remote-name"
label="Remote name"
registration={register('name')}
error={errors.name}
required
/>
<div data-testid="backend-cards">
{Object.entries(BACKEND_REGISTRY).map(([type, entry]) => (
<BackendCard