diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index 175bd64..ae2eec0 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -12,8 +12,8 @@ ### Components -- [ ] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content -- [ ] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary +- [x] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content +- [x] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary - [ ] **COMP-03**: Backend selection cards and output blocks use MD3 elevation with tonal surface tint, consistent padding, and shape tokens - [x] **COMP-04**: Step indicator displays as numbered circles connected by lines, with completed steps showing a checkmark, current step highlighted, and future steps muted @@ -33,7 +33,7 @@ ### Tech Debt -- [ ] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt) +- [x] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt) ## Future Requirements @@ -58,11 +58,11 @@ |-------------|-------|--------| | THEME-01 | Phase 8 | Complete | | THEME-02 | Phase 8 | Complete | -| COMP-01 | Phase 9 | Pending | -| COMP-02 | Phase 9 | Pending | +| COMP-01 | Phase 9 | Complete | +| COMP-02 | Phase 9 | Complete | | COMP-03 | Phase 9 | Pending | | COMP-04 | Phase 9 | Complete | -| DEBT-01 | Phase 9 | Pending | +| DEBT-01 | Phase 9 | Complete | | UX-01 | Phase 10 | Pending | | UX-02 | Phase 10 | Pending | | UX-03 | Phase 10 | Pending | diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 5f6e021..ac4845d 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -66,7 +66,7 @@ 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:** 1/3 plans executed +**Plans:** 2/3 plans executed Plans: - [ ] 09-01-PLAN.md — TextFieldMD3 component, MD3 button constants, DEBT-01 aria-label fix - [ ] 09-02-PLAN.md — StepIndicator rebuild with MD3 circles and connectors @@ -106,6 +106,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 | 1/3 | In Progress| | - | +| 9. MD3 Components | 2/3 | In Progress| | - | | 10. Content & Clarity | v1.2 | 0/? | Not started | - | | 11. Polish & Responsiveness | v1.2 | 0/? | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 5865439..b85b30f 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -3,14 +3,14 @@ gsd_state_version: 1.0 milestone: v1.2 milestone_name: UI Polish & Clarity status: in-progress -stopped_at: Completed 09-02 — StepIndicator MD3 rebuild complete -last_updated: "2026-04-01T07:20:16.150Z" +stopped_at: Completed 09-01 — TextFieldMD3, MD3 button constants, and DEBT-01 aria-label fix +last_updated: "2026-04-01T07:25:34.544Z" last_activity: 2026-04-01 — Phase 8 complete (THEME-01, THEME-02 satisfied) progress: total_phases: 4 completed_phases: 1 total_plans: 5 - completed_plans: 3 + completed_plans: 4 --- --- @@ -64,6 +64,8 @@ Recent decisions affecting current work: - [Phase 08-02]: User visually confirmed light/dark theme renders correctly across all 4 wizard steps — THEME-01 and THEME-02 complete - [Phase 09-02]: Label text inside button element (not adjacent) preserves test selector compatibility: textContent includes step name - [Phase 09-02]: Pre-existing TextFieldMD3.test.tsx failure scoped out — component not yet built, belongs to future plan +- [Phase 09-md3-components]: TextFieldMD3 uses CSS-only floating label via peer-[:not(:placeholder-shown)] without JS state +- [Phase 09-md3-components]: DEBT-01 fix: tooltip buttons use aria-label directly; RemoteConfigStep.test updated with { selector: 'input' } to prevent aria-label/label ambiguity ### Pending Todos @@ -75,6 +77,6 @@ None yet. ## Session Continuity -Last session: 2026-04-01T07:20:16.148Z -Stopped at: Completed 09-02 — StepIndicator MD3 rebuild complete +Last session: 2026-04-01T07:25:34.541Z +Stopped at: Completed 09-01 — TextFieldMD3, MD3 button constants, and DEBT-01 aria-label fix Resume file: None diff --git a/.planning/phases/09-md3-components/09-01-SUMMARY.md b/.planning/phases/09-md3-components/09-01-SUMMARY.md new file mode 100644 index 0000000..2fd28df --- /dev/null +++ b/.planning/phases/09-md3-components/09-01-SUMMARY.md @@ -0,0 +1,73 @@ +--- +phase: 09-md3-components +plan: "01" +subsystem: ui-components +tags: [md3, floating-label, aria, accessibility, debt] +dependency_graph: + requires: [] + provides: [TextFieldMD3, MD3_BTN_FILLED, MD3_BTN_OUTLINED, MD3_BTN_TEXT, FieldRenderer-aria-fix] + affects: [FieldRenderer, PasswordField, RemoteConfigStep.test] +tech_stack: + added: [] + patterns: [css-peer-floating-label, aria-label-direct, md3-button-constants] +key_files: + created: + - src/components/ui/TextFieldMD3.tsx + - src/components/ui/TextFieldMD3.test.tsx + - src/styles/md3-buttons.ts + - src/components/ui/FieldRenderer.test.tsx + modified: + - src/components/ui/FieldRenderer.tsx + - src/components/ui/PasswordField.tsx + - src/components/wizard/RemoteConfigStep.test.tsx +decisions: + - "Used peer-[:not(:placeholder-shown)] arbitrary variant for has-value floating label detection (Tailwind v4 supports bracket syntax)" + - "TextFieldMD3 uses placeholder=' ' (space) to drive CSS-only floating label, not JS state" + - "Updated RemoteConfigStep.test.tsx getByLabelText to add { selector: 'input' } to prevent matching tooltip button aria-labels (Rule 1 regression fix)" +metrics: + duration_seconds: 381 + completed_date: "2026-04-01" + tasks_completed: 2 + tasks_total: 2 + files_created: 4 + files_modified: 3 +--- + +# Phase 9 Plan 01: MD3 UI Primitives Summary + +**One-liner:** CSS-only floating label TextFieldMD3 component + MD3 button class constants + DEBT-01 aria-label consistency fix across FieldRenderer, PasswordField, and tooltip buttons. + +## Tasks Completed + +| Task | Name | Commit | Status | +|------|------|--------|--------| +| 1 | Create TextFieldMD3 + MD3 button constants | 9441dcd | Complete | +| 2 | Fix DEBT-01 aria-label in FieldRenderer + tests | 532a994 | Complete | + +## Verification + +- `npx vitest run src/components/ui/TextFieldMD3.test.tsx` — 9/9 tests pass +- `npx vitest run src/components/ui/FieldRenderer.test.tsx` — 4/4 tests pass +- `npx vitest run --reporter=dot` — 179/179 tests pass (zero regressions) +- `src/styles/md3-buttons.ts` exports `MD3_BTN_FILLED`, `MD3_BTN_OUTLINED`, `MD3_BTN_TEXT` + +## Decisions Made + +1. **Tailwind v4 `peer-[:not(:placeholder-shown)]` arbitrary variant:** Used the bracket syntax form directly — verified it passes through the test suite correctly. No need for the `data-has-value` JS fallback. + +2. **`placeholder=" "` (space) for floating label:** TextFieldMD3 always renders with `placeholder=" "` and `placeholder-transparent` CSS. This is the CSS-only detection mechanism for the `:not(:placeholder-shown)` pseudo-class — no React state needed. + +3. **`{ selector: 'input' }` added to RemoteConfigStep.test.tsx:** Once tooltip buttons received `aria-label="More info about {field.label}"`, the `getByLabelText(/sas url/i)` query matched both the input (via its `