diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index ecd6d5d..2272fcd 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -66,11 +66,12 @@ Plans: 3. Backend selection cards and output blocks display MD3 elevation with tonal surface tint and consistent shape tokens 4. Step indicator shows numbered circles connected by lines, with checkmarks on completed steps, highlight on current, and muted future steps 5. FieldRenderer produces identical `aria-label` attributes for both text-branch and select-branch inputs -**Plans:** 3/3 plans complete +**Plans:** 4 plans (3 complete, 1 gap closure) Plans: - [x] 09-01-PLAN.md — TextFieldMD3 component, MD3 button constants, DEBT-01 aria-label fix - [x] 09-02-PLAN.md — StepIndicator rebuild with MD3 circles and connectors - [x] 09-03-PLAN.md — Integration: wire TextFieldMD3 + button styles + elevation into all wizard steps +- [ ] 09-04-PLAN.md — Gap closure: Replace BackendSelectionStep plain input with TextFieldMD3 ### Phase 10: Content & Clarity **Goal**: A first-time visitor understands what Ready2Blob does and what each wizard step expects without external documentation @@ -106,6 +107,6 @@ Plans: | 6. New Backends | v1.1 | 4/4 | Complete | 2026-03-31 | | 7. Validation & UX Polish | v1.1 | 3/3 | Complete | 2026-03-31 | | 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 | -| 9. MD3 Components | v1.2 | 3/3 | Complete | 2026-04-01 | +| 9. MD3 Components | v1.2 | 3/4 | Gap closure | - | | 10. Content & Clarity | v1.2 | 0/? | Not started | - | | 11. Polish & Responsiveness | v1.2 | 0/? | Not started | - | diff --git a/.planning/phases/09-md3-components/09-04-PLAN.md b/.planning/phases/09-md3-components/09-04-PLAN.md new file mode 100644 index 0000000..96d113a --- /dev/null +++ b/.planning/phases/09-md3-components/09-04-PLAN.md @@ -0,0 +1,149 @@ +--- +phase: 09-md3-components +plan: 04 +type: execute +wave: 1 +depends_on: [] +files_modified: + - src/components/wizard/BackendSelectionStep.tsx +autonomous: true +gap_closure: true +requirements: + - COMP-01 + - COMP-02 + - COMP-03 + - COMP-04 + - DEBT-01 + +must_haves: + truths: + - "BackendSelectionStep 'Remote name' input renders as a TextFieldMD3 with floating label" + - "Existing BackendSelectionStep tests pass without modification" + - "Full test suite remains green (179+ tests)" + artifacts: + - path: "src/components/wizard/BackendSelectionStep.tsx" + provides: "TextFieldMD3 integration for Remote name field" + contains: "TextFieldMD3" + key_links: + - from: "src/components/wizard/BackendSelectionStep.tsx" + to: "src/components/ui/TextFieldMD3.tsx" + via: "import { TextFieldMD3 }" + pattern: "import.*TextFieldMD3.*from" + - from: "src/components/wizard/BackendSelectionStep.tsx" + to: "react-hook-form" + via: "register('name') passed as registration prop" + pattern: "registration=.*register" +--- + + +Close verification gap: BackendSelectionStep "Remote name" input is the only text input in the wizard that does not use TextFieldMD3 with a floating label. This violates COMP-01's "All text inputs" requirement. + +Purpose: Achieve 12/12 must-have truths for Phase 9 verification (currently 11/12 partial). +Output: Updated BackendSelectionStep.tsx with TextFieldMD3 replacing the plain label+input. + + + +@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md +@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md + +@.planning/phases/09-md3-components/09-03-SUMMARY.md + + + + +From src/components/ui/TextFieldMD3.tsx: +```typescript +interface TextFieldMD3Props { + id: string; + label: string; + error?: FieldError; + registration: UseFormRegisterReturn; + type?: 'text' | 'password'; + helpText?: string; + required?: boolean; + suffix?: React.ReactNode; +} + +export function TextFieldMD3({ id, label, error, registration, type, helpText, required, suffix }: TextFieldMD3Props): JSX.Element; +``` + +From src/styles/md3-buttons.ts: +```typescript +export const MD3_BTN_FILLED: string; +``` + + + + + + + Task 1: Replace plain Remote name input with TextFieldMD3 + src/components/wizard/BackendSelectionStep.tsx + +In BackendSelectionStep.tsx, replace the plain label+input block (lines 57-63) with a TextFieldMD3 component: + +1. Add import: `import { TextFieldMD3 } from '../ui/TextFieldMD3';` + +2. Replace this block: +```tsx +
+ + + {errors.name && ( +

{errors.name.message}

+ )} +
+``` + +With: +```tsx + +``` + +Key constraints: +- Keep `id="remote-name"` unchanged (matches existing test selectors via getByRole('textbox')) +- Pass `register('name')` as `registration` prop (same pattern as FieldRenderer, line 103 of FieldRenderer.tsx) +- Pass `errors.name` as `error` prop — TextFieldMD3 already renders `role="alert"` on error messages +- Remove the manual `{errors.name && ...}` block since TextFieldMD3 handles error display internally +- Add `required` prop since the name field is required (schema has `.min(1)`) + +The existing tests use `screen.getByRole('textbox')` to find the input and `screen.getByRole('alert')` for error messages. TextFieldMD3 preserves both: the `` retains its textbox role, and the error `

` has `role="alert"`. + + + npx vitest run src/components/wizard/BackendSelectionStep.test.tsx --reporter=dot && npx vitest run --reporter=dot + + BackendSelectionStep renders "Remote name" as a TextFieldMD3 with floating label. All 5 BackendSelectionStep tests pass. Full test suite (179+ tests) remains green. COMP-01 "All text inputs" requirement is fully satisfied. + + + + + +1. `npx vitest run src/components/wizard/BackendSelectionStep.test.tsx` — all 7 tests pass (WIZD-01 + WIZD-04) +2. `npx vitest run --reporter=dot` — full suite green, zero regressions +3. Grep check: no remaining plain `