From 3af06493eab0223cb2f5a9c0b69f6bb44b395b70 Mon Sep 17 00:00:00 2001 From: Kawa Date: Wed, 1 Apr 2026 13:26:58 +0200 Subject: [PATCH] docs(11-01): complete mobile responsiveness and MD3 focus indicators plan - 11-01-SUMMARY.md: execution summary for POLISH-01/POLISH-02 - STATE.md: position advanced to phase 11 plan 01 complete, decisions added - ROADMAP.md: phase 11 progress updated (1/2 plans complete) - REQUIREMENTS.md: POLISH-01 and POLISH-02 marked complete --- .planning/REQUIREMENTS.md | 8 +- .planning/ROADMAP.md | 4 +- .planning/STATE.md | 31 +++-- .../11-polish-responsiveness/11-01-SUMMARY.md | 120 ++++++++++++++++++ 4 files changed, 143 insertions(+), 20 deletions(-) create mode 100644 .planning/phases/11-polish-responsiveness/11-01-SUMMARY.md diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index 82e54b9..b52c14e 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -26,8 +26,8 @@ ### Polish -- [ ] **POLISH-01**: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch -- [ ] **POLISH-02**: All interactive elements have visible MD3 focus indicators (3px outline) using `focus-visible` for keyboard navigation +- [x] **POLISH-01**: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch +- [x] **POLISH-02**: All interactive elements have visible MD3 focus indicators (3px outline) using `focus-visible` for keyboard navigation - [ ] **POLISH-03**: Step transitions use subtle fade/slide animation that respects `prefers-reduced-motion` - [ ] **POLISH-04**: On validation failure, the view auto-scrolls to the first errored field @@ -67,8 +67,8 @@ | UX-02 | Phase 10 | Complete | | UX-03 | Phase 10 | Complete | | UX-04 | Phase 10 | Complete | -| POLISH-01 | Phase 11 | Pending | -| POLISH-02 | Phase 11 | Pending | +| POLISH-01 | Phase 11 | Complete | +| POLISH-02 | Phase 11 | Complete | | POLISH-03 | Phase 11 | Pending | | POLISH-04 | Phase 11 | Pending | diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 555db4f..8495dc2 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -98,7 +98,7 @@ Plans: 2. Every interactive element shows a visible 3px MD3 focus outline when navigated via keyboard (using `focus-visible`) 3. Step transitions use a subtle fade/slide animation that is suppressed when the user has `prefers-reduced-motion` enabled 4. When form validation fails, the view auto-scrolls to the first field with an error -**Plans:** 2 plans +**Plans:** 1/2 plans executed Plans: - [ ] 11-01-PLAN.md — Mobile responsive layout + MD3 focus-visible indicators - [ ] 11-02-PLAN.md — Step transition animation + auto-scroll to first error @@ -117,4 +117,4 @@ Plans: | 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 | | 9. MD3 Components | v1.2 | 5/5 | Complete | 2026-04-01 | | 10. Content & Clarity | v1.2 | 3/3 | Complete | 2026-04-01 | -| 11. Polish & Responsiveness | v1.2 | 0/2 | Not started | - | +| 11. Polish & Responsiveness | 1/2 | In Progress| | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 73a0496..6ff31d3 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -3,15 +3,15 @@ gsd_state_version: 1.0 milestone: v1.2 milestone_name: UI Polish & Clarity status: completed -stopped_at: Completed 10-02-PLAN.md -last_updated: "2026-04-01T11:02:32.056Z" -last_activity: 2026-04-01 — Phase 9 complete (COMP-01, COMP-02, COMP-03, COMP-04, DEBT-01 satisfied) +stopped_at: Completed 11-01-PLAN.md +last_updated: "2026-04-01T11:26:15.869Z" +last_activity: 2026-04-01 — Phase 11 plan 01 complete (POLISH-01, POLISH-02 satisfied) progress: total_phases: 4 completed_phases: 3 - total_plans: 10 - completed_plans: 10 - percent: 64 + total_plans: 12 + completed_plans: 11 + percent: 98 --- # Project State @@ -21,16 +21,16 @@ progress: See: .planning/PROJECT.md (updated 2026-03-31) **Core value:** An IT pro can go from zero to a deployable rclone setup in minutes — without needing to know rclone's config syntax or PowerShell deployment conventions. -**Current focus:** v1.2 — UI Polish & Clarity (Phase 9: MD3 Components complete, Phase 10 next) +**Current focus:** v1.2 — UI Polish & Clarity (Phase 11: Polish & Responsiveness in progress, plan 11-01 complete) ## Current Position -Phase: 9 of 11 (MD3 Components) — COMPLETE -Plan: 09-03 (complete) -Status: Phase 9 complete, ready for Phase 10 -Last activity: 2026-04-01 — Phase 9 complete (COMP-01, COMP-02, COMP-03, COMP-04, DEBT-01 satisfied) +Phase: 11 of 11 (Polish & Responsiveness) — In Progress +Plan: 11-01 (complete) +Status: Phase 11 in progress, plan 11-01 complete (POLISH-01, POLISH-02 satisfied) +Last activity: 2026-04-01 — Phase 11 plan 01 complete (POLISH-01, POLISH-02 satisfied) -Progress: [██████░░░░] 64% (v1.2) +Progress: [██████████] 98% (v1.2) ## Accumulated Context @@ -64,6 +64,9 @@ Recent decisions affecting current work: - [Phase 10-03]: SFTP host and user intentionally omitted from tooltipText — self-explanatory per user decision - [Phase 10-03]: getByLabelText selector ambiguity fixed with { selector: 'input' } across all affected tests (same DEBT-01 pattern as Phase 09-03) - [Phase 10-content-clarity]: RemoteNamePreview renders only div/span elements (no form controls) to preserve single-textbox selector contract in BackendSelectionStep tests +- [Phase 11-polish-responsiveness]: ring-inset on ThemeToggle focus ring because overflow-hidden on container clips outset rings +- [Phase 11-polish-responsiveness]: No ring-offset-2 on BackendCard to avoid dark mode surface color issues +- [Phase 11-polish-responsiveness]: FieldRenderer select uses focus-visible:ring-2 (not focus:ring-2) for keyboard-only ring on selects ### Pending Todos @@ -75,6 +78,6 @@ None yet. ## Session Continuity -Last session: 2026-04-01T10:58:05.050Z -Stopped at: Completed 10-02-PLAN.md +Last session: 2026-04-01T11:26:10.100Z +Stopped at: Completed 11-01-PLAN.md Resume file: None diff --git a/.planning/phases/11-polish-responsiveness/11-01-SUMMARY.md b/.planning/phases/11-polish-responsiveness/11-01-SUMMARY.md new file mode 100644 index 0000000..b72b261 --- /dev/null +++ b/.planning/phases/11-polish-responsiveness/11-01-SUMMARY.md @@ -0,0 +1,120 @@ +--- +phase: 11-polish-responsiveness +plan: 01 +subsystem: ui +tags: [tailwind, responsive, mobile, accessibility, focus-visible, md3] + +# Dependency graph +requires: + - phase: 09-md3-components + provides: MD3_BTN_FILLED/OUTLINED/TEXT constants, BackendCard, StepIndicator, ThemeToggle, FieldRenderer components + - phase: 10-content-clarity + provides: final step component shapes and layouts +provides: + - Mobile-responsive wizard layout (cards stack, buttons stack, step labels collapse) + - MD3 focus-visible ring-3 indicators on all interactive elements +affects: [future UI phases, any plan touching step components or button constants] + +# Tech tracking +tech-stack: + added: [] + patterns: + - "Mobile-first responsive: flex-col sm:flex-row for button rows, grid grid-cols-1 sm:grid-cols-2 for card grids" + - "hidden sm:block for collapsible labels on compact viewports" + - "focus-visible:ring-3 focus-visible:ring-primary on standalone interactive elements" + - "focus-visible:ring-inset on overflow-hidden button groups (ThemeToggle) to avoid clipping" + +key-files: + created: [] + modified: + - src/styles/md3-buttons.ts + - src/components/ui/BackendCard.tsx + - src/components/ui/ThemeToggle.tsx + - src/components/ui/FieldRenderer.tsx + - src/components/wizard/BackendSelectionStep.tsx + - src/components/wizard/RemoteConfigStep.tsx + - src/components/wizard/DeploymentStep.tsx + - src/components/wizard/ReviewStep.tsx + - src/components/wizard/StepIndicator.tsx + +key-decisions: + - "ring-inset on ThemeToggle focus ring because overflow-hidden on container clips outset rings" + - "No ring-offset-2 on BackendCard to avoid dark mode surface color issues" + - "Tooltip buttons use ring-2 (not ring-3) — small utility buttons suit smaller ring" + - "FieldRenderer select uses focus-visible:ring-2 (not focus:ring-2) for keyboard-only focus behavior on selects" + +patterns-established: + - "Button row responsive pattern: flex flex-col sm:flex-row gap-3 mt-6 with w-full sm:w-auto on each button" + - "Card grid responsive pattern: grid grid-cols-1 sm:grid-cols-2 gap-3 on container div" + - "Step label collapse: hidden sm:block on all label spans inside StepIndicator" + +requirements-completed: [POLISH-01, POLISH-02] + +# Metrics +duration: 3min +completed: 2026-04-01 +--- + +# Phase 11 Plan 01: Mobile Responsiveness & MD3 Focus Indicators Summary + +**Tailwind v4 mobile-first responsive layout (card grids, stacked button rows, collapsed step labels) plus MD3 focus-visible ring-3 keyboard indicators across all wizard interactive elements** + +## Performance + +- **Duration:** 3 min +- **Started:** 2026-04-01T11:22:10Z +- **Completed:** 2026-04-01T11:25:12Z +- **Tasks:** 2 +- **Files modified:** 9 + +## Accomplishments +- Backend cards container uses responsive grid (1-col on mobile, 2-col on desktop); BackendCard fills its cell with w-full +- All four step button rows stack vertically on mobile (flex-col) and go horizontal on desktop (sm:flex-row) with full-width buttons on mobile +- StepIndicator hides label text on mobile (hidden sm:block) keeping circles and connectors visible +- MD3 button constants upgraded from ring-2/50 to ring-3 for all three variants (FILLED, OUTLINED, TEXT) +- BackendCard, ThemeToggle, StepIndicator completed-step circle, and FieldRenderer tooltip buttons all have focus-visible rings + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Mobile responsive layout** - `07f97d9` (feat) +2. **Task 2: MD3 focus-visible indicators** - `9015db5` (feat) + +**Plan metadata:** (docs commit — see below) + +## Files Created/Modified +- `src/styles/md3-buttons.ts` - Upgraded ring-2/primary/50 to ring-3/primary on all three constants +- `src/components/ui/BackendCard.tsx` - Added w-full and focus-visible:ring-3 to button base classes +- `src/components/ui/ThemeToggle.tsx` - Added focus-visible:ring-3 ring-inset to both selected/unselected branches +- `src/components/ui/FieldRenderer.tsx` - Select uses focus-visible:ring-2; both tooltip buttons get focus-visible:ring-2 rounded +- `src/components/wizard/BackendSelectionStep.tsx` - Responsive card grid and button row +- `src/components/wizard/RemoteConfigStep.tsx` - Responsive button row with w-full sm:w-auto +- `src/components/wizard/DeploymentStep.tsx` - Responsive button row with w-full sm:w-auto +- `src/components/wizard/ReviewStep.tsx` - Responsive button row with w-full sm:w-auto +- `src/components/wizard/StepIndicator.tsx` - hidden sm:block on all three label spans; ring-3 on completed-step circle + +## Decisions Made +- ring-inset used on ThemeToggle because the container has overflow-hidden — outset ring would be clipped by the parent border +- No ring-offset-2 on BackendCard to avoid dark mode surface color mismatch (per research open question #2) +- Tooltip buttons use ring-2 (not ring-3) — they are small utility icons where a smaller ring is more appropriate +- FieldRenderer select changed from focus:ring-2 to focus-visible:ring-2 so selects behave like buttons (ring on keyboard only), not like text inputs + +## Deviations from Plan + +None - plan executed exactly as written. + +## Issues Encountered +None. + +## User Setup Required +None - no external service configuration required. + +## Next Phase Readiness +- POLISH-01 and POLISH-02 requirements satisfied +- All 202 existing tests pass — no regressions introduced +- Wizard is now mobile-usable and fully keyboard-navigable + +--- +*Phase: 11-polish-responsiveness* +*Completed: 2026-04-01*