docs(11-polish-responsiveness): create phase plan
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -0,0 +1,211 @@
|
||||
---
|
||||
phase: 11-polish-responsiveness
|
||||
plan: 01
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_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
|
||||
autonomous: true
|
||||
requirements:
|
||||
- POLISH-01
|
||||
- POLISH-02
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "On mobile viewport (<640px), backend cards stack vertically in a single column"
|
||||
- "On mobile viewport (<640px), navigation buttons stretch to full width and stack vertically"
|
||||
- "On mobile viewport (<640px), StepIndicator hides label text but keeps circles and connectors"
|
||||
- "On desktop viewport (>=640px), backend cards display in a 2-column grid"
|
||||
- "Every button and interactive card shows a 3px MD3 focus ring when keyboard-navigated"
|
||||
- "Focus ring does not appear on mouse click (uses focus-visible, not focus)"
|
||||
artifacts:
|
||||
- path: "src/styles/md3-buttons.ts"
|
||||
provides: "MD3 button constants with focus-visible:ring-3"
|
||||
contains: "focus-visible:ring-3"
|
||||
- path: "src/components/ui/BackendCard.tsx"
|
||||
provides: "Responsive full-width card with focus-visible ring"
|
||||
contains: "focus-visible:ring-3"
|
||||
- path: "src/components/wizard/StepIndicator.tsx"
|
||||
provides: "Collapsed labels on mobile, upgraded focus ring"
|
||||
contains: "hidden sm:block"
|
||||
- path: "src/components/wizard/BackendSelectionStep.tsx"
|
||||
provides: "Responsive card grid and button row"
|
||||
contains: "grid grid-cols-1 sm:grid-cols-2"
|
||||
key_links:
|
||||
- from: "src/styles/md3-buttons.ts"
|
||||
to: "all step components"
|
||||
via: "MD3_BTN_FILLED / MD3_BTN_OUTLINED constants"
|
||||
pattern: "focus-visible:ring-3"
|
||||
- from: "src/components/ui/BackendCard.tsx"
|
||||
to: "BackendSelectionStep.tsx"
|
||||
via: "component usage"
|
||||
pattern: "w-full.*focus-visible:ring-3"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Make the wizard layout mobile-responsive and add MD3 focus-visible indicators to all interactive elements.
|
||||
|
||||
Purpose: POLISH-01 ensures the wizard is usable on mobile devices (cards stack, buttons stretch, step labels collapse). POLISH-02 ensures keyboard navigability with visible 3px MD3 focus rings on all interactive elements.
|
||||
Output: All step components, BackendCard, StepIndicator, ThemeToggle, and FieldRenderer updated with responsive classes and focus-visible rings.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/11-polish-responsiveness/11-RESEARCH.md
|
||||
|
||||
<interfaces>
|
||||
<!-- Key constants and component signatures the executor needs -->
|
||||
|
||||
From src/styles/md3-buttons.ts:
|
||||
```typescript
|
||||
export const MD3_BTN_FILLED = '...' // contains focus-visible:ring-2 focus-visible:ring-primary/50 — upgrade to ring-3
|
||||
export const MD3_BTN_OUTLINED = '...' // same pattern
|
||||
export const MD3_BTN_TEXT = '...' // same pattern
|
||||
```
|
||||
|
||||
From src/components/ui/BackendCard.tsx:
|
||||
```typescript
|
||||
// className array does NOT have focus-visible — must add
|
||||
// className does NOT have w-full — must add for grid cell fill
|
||||
export function BackendCard({ name, description, selected, onClick, ...rest }: BackendCardProps)
|
||||
```
|
||||
|
||||
From src/components/wizard/StepIndicator.tsx:
|
||||
```typescript
|
||||
// Three label spans (completed, active, future) need hidden sm:block
|
||||
// Completed step button: group-focus-visible:ring-2 → upgrade to ring-3
|
||||
```
|
||||
|
||||
From src/components/ui/ThemeToggle.tsx:
|
||||
```typescript
|
||||
// Buttons have NO focus-visible classes — must add
|
||||
// className is conditional (selected vs not) — add focus-visible to both branches
|
||||
```
|
||||
|
||||
From src/components/ui/FieldRenderer.tsx:
|
||||
```typescript
|
||||
// Select element: focus:ring-2 → change to focus-visible:ring-2 (inputs keep focus: per convention)
|
||||
// Tooltip buttons (2 instances): NO focus-visible — must add
|
||||
```
|
||||
|
||||
Button row pattern in all step components:
|
||||
```tsx
|
||||
<div className="flex gap-3 mt-6"> // → flex flex-col sm:flex-row gap-3 mt-6
|
||||
<button className={MD3_BTN_OUTLINED}>Back</button> // → add w-full sm:w-auto
|
||||
<button className={MD3_BTN_FILLED}>Next</button> // → add w-full sm:w-auto
|
||||
</div>
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Mobile responsive layout — card grid, button rows, step indicator collapse</name>
|
||||
<files>src/components/wizard/BackendSelectionStep.tsx, src/components/ui/BackendCard.tsx, src/components/wizard/RemoteConfigStep.tsx, src/components/wizard/DeploymentStep.tsx, src/components/wizard/ReviewStep.tsx, src/components/wizard/StepIndicator.tsx</files>
|
||||
<action>
|
||||
POLISH-01: Make wizard layout mobile-responsive using Tailwind v4 mobile-first approach.
|
||||
|
||||
1. **BackendSelectionStep.tsx** — Change the `data-testid="backend-cards"` div from bare div to responsive grid:
|
||||
- Add className `grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4` to the `data-testid="backend-cards"` div
|
||||
- Change button row from `flex gap-3 mt-6` to `flex flex-col sm:flex-row gap-3 mt-6`
|
||||
- Add `w-full sm:w-auto` to the Next button className (append after MD3_BTN_FILLED)
|
||||
|
||||
2. **BackendCard.tsx** — Add `w-full` to the className array so the button fills its grid cell on all viewports. Insert at the start of the className string: `'w-full flex flex-col items-start...'`
|
||||
|
||||
3. **RemoteConfigStep.tsx** — Change button row div from `flex gap-3 mt-6` to `flex flex-col sm:flex-row gap-3 mt-6`. Add `w-full sm:w-auto` to both Back and Next button classNames (use template literal: `` `${MD3_BTN_OUTLINED} w-full sm:w-auto` ``).
|
||||
|
||||
4. **DeploymentStep.tsx** — Same button row changes as RemoteConfigStep: `flex flex-col sm:flex-row gap-3 mt-6` on the wrapper div, `w-full sm:w-auto` on both buttons.
|
||||
|
||||
5. **ReviewStep.tsx** — Change button row div from `flex gap-3 mt-6` to `flex flex-col sm:flex-row gap-3 mt-6`. Add `w-full sm:w-auto` to the Back button. The "Download All (ZIP)" button already has `w-full` — leave as-is.
|
||||
|
||||
6. **StepIndicator.tsx** — Add `hidden sm:block` to all three label `<span>` elements:
|
||||
- Completed step label: `className="text-xs text-primary hidden sm:block"`
|
||||
- Active step label: `className="text-xs text-primary font-semibold hidden sm:block"`
|
||||
- Future step label: `className="text-xs text-on-surface-container/40 hidden sm:block"`
|
||||
|
||||
Do NOT change any DOM structure beyond adding/modifying className strings. Do NOT add wrapper elements. The `data-testid="backend-cards"` div already exists — just add classes to it.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>npx vitest run</automated>
|
||||
</verify>
|
||||
<done>Backend cards use responsive grid (1-col mobile, 2-col desktop). All step button rows stack vertically on mobile and go horizontal on desktop. StepIndicator labels hidden on mobile, visible on desktop. All existing tests pass.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: MD3 focus-visible indicators on all interactive elements</name>
|
||||
<files>src/styles/md3-buttons.ts, src/components/ui/BackendCard.tsx, src/components/wizard/StepIndicator.tsx, src/components/ui/ThemeToggle.tsx, src/components/ui/FieldRenderer.tsx</files>
|
||||
<action>
|
||||
POLISH-02: Upgrade all interactive elements to 3px MD3 focus-visible rings for keyboard navigation.
|
||||
|
||||
1. **md3-buttons.ts** — In all three constants (MD3_BTN_FILLED, MD3_BTN_OUTLINED, MD3_BTN_TEXT), replace:
|
||||
`focus-visible:ring-2 focus-visible:ring-primary/50`
|
||||
with:
|
||||
`focus-visible:ring-3 focus-visible:ring-primary`
|
||||
Keep `focus-visible:outline-none` as-is.
|
||||
|
||||
2. **BackendCard.tsx** — Add focus-visible ring to the button className array. Add this string to the base classes (the first string before the ternary):
|
||||
`'w-full flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary'`
|
||||
Do NOT add `ring-offset-2` (omit ring-offset to avoid dark mode surface color issues per research open question #2).
|
||||
|
||||
3. **StepIndicator.tsx** — On the completed-step circle `<span>`, change:
|
||||
`group-focus-visible:ring-2 group-focus-visible:ring-primary/50`
|
||||
to:
|
||||
`group-focus-visible:ring-3 group-focus-visible:ring-primary`
|
||||
|
||||
4. **ThemeToggle.tsx** — Add focus-visible ring to BOTH branches of the ternary className on each theme button:
|
||||
- Selected: `'flex-1 px-3 py-1 bg-primary text-on-primary font-medium focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary focus-visible:ring-inset'`
|
||||
- Unselected: `'flex-1 px-3 py-1 bg-surface-container text-on-surface-container hover:bg-surface focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary focus-visible:ring-inset'`
|
||||
Use `ring-inset` because ThemeToggle buttons share a border (overflow-hidden) — outset ring would be clipped.
|
||||
|
||||
5. **FieldRenderer.tsx** — Two changes:
|
||||
a. **Select element:** Change `focus:ring-2` to `focus-visible:ring-2` in the select className (keep ring-2 for form controls — inputs conventionally show focus on mouse too, but selects should match button behavior).
|
||||
b. **Tooltip info buttons** (both the select-branch tooltip button and the text-branch tooltip button): Add `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded` to both tooltip button classNames. These are small buttons so ring-2 is appropriate (not ring-3).
|
||||
|
||||
Note on TextFieldMD3: The input element uses `focus:ring-2` which is correct for text inputs (users expect visible focus on mouse click for inputs). Do NOT change TextFieldMD3.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>npx vitest run</automated>
|
||||
</verify>
|
||||
<done>MD3_BTN_FILLED/OUTLINED/TEXT contain focus-visible:ring-3. BackendCard has focus-visible ring. StepIndicator completed-step has upgraded group-focus-visible:ring-3. ThemeToggle buttons have focus-visible ring. FieldRenderer select uses focus-visible:ring-2, tooltip buttons have focus-visible ring. All tests pass.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
- `npx vitest run` — all tests green
|
||||
- Grep for `focus-visible:ring-3` in md3-buttons.ts, BackendCard.tsx, StepIndicator.tsx, ThemeToggle.tsx — all present
|
||||
- Grep for `grid grid-cols-1 sm:grid-cols-2` in BackendSelectionStep.tsx — present
|
||||
- Grep for `flex-col sm:flex-row` in all step components — present
|
||||
- Grep for `hidden sm:block` in StepIndicator.tsx — 3 occurrences (one per label state)
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- All step button rows use `flex-col sm:flex-row` (mobile stacks, desktop inline)
|
||||
- Backend cards container uses `grid grid-cols-1 sm:grid-cols-2`
|
||||
- BackendCard has `w-full` for grid cell fill
|
||||
- StepIndicator labels have `hidden sm:block` (3 spans)
|
||||
- All MD3 button constants use `focus-visible:ring-3 focus-visible:ring-primary`
|
||||
- BackendCard, ThemeToggle, StepIndicator completed-step, FieldRenderer tooltip buttons all have focus-visible rings
|
||||
- All existing tests pass (no regressions)
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/11-polish-responsiveness/11-01-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user