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 { BACKEND_REGISTRY } from '../../schemas/registry';
import { BackendCard } from '../ui/BackendCard'; import { BackendCard } from '../ui/BackendCard';
import { MD3_BTN_FILLED } from '../../styles/md3-buttons'; import { MD3_BTN_FILLED } from '../../styles/md3-buttons';
import { TextFieldMD3 } from '../ui/TextFieldMD3';
const remoteNameSchema = z.object({ const remoteNameSchema = z.object({
name: z name: z
@@ -54,13 +55,13 @@ export function BackendSelectionStep() {
<div> <div>
<h2>Step 1: Select Backend</h2> <h2>Step 1: Select Backend</h2>
<form onSubmit={handleSubmit(onValidSubmit)}> <form onSubmit={handleSubmit(onValidSubmit)}>
<div> <TextFieldMD3
<label htmlFor="remote-name">Remote name</label> id="remote-name"
<input id="remote-name" type="text" {...register('name')} /> label="Remote name"
{errors.name && ( registration={register('name')}
<p role="alert">{errors.name.message}</p> error={errors.name}
)} required
</div> />
<div data-testid="backend-cards"> <div data-testid="backend-cards">
{Object.entries(BACKEND_REGISTRY).map(([type, entry]) => ( {Object.entries(BACKEND_REGISTRY).map(([type, entry]) => (
<BackendCard <BackendCard