kawaandClaude Opus 4.6
a6c2ec7292
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
12 KiB
12 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 09-md3-components | 03 | execute | 2 |
|
|
false |
|
|
Purpose: This is the integration plan that connects the primitives from Plan 01 into the actual wizard UI, completing COMP-01 (floating labels everywhere), COMP-02 (button hierarchy everywhere), and COMP-03 (elevation on cards and code blocks). Output: All wizard components updated with MD3 styling.
<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>
@.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/09-md3-components/09-RESEARCH.md @.planning/phases/09-md3-components/09-01-SUMMARY.md@src/components/ui/FieldRenderer.tsx @src/components/ui/PasswordField.tsx @src/components/ui/BackendCard.tsx @src/components/wizard/OutputBlock.tsx @src/components/wizard/BackendSelectionStep.tsx @src/components/wizard/RemoteConfigStep.tsx @src/components/wizard/DeploymentStep.tsx @src/components/wizard/ReviewStep.tsx
From src/components/ui/TextFieldMD3.tsx (created in 09-01):
interface TextFieldMD3Props {
id: string;
label: string;
error?: FieldError;
registration: UseFormRegisterReturn;
type?: 'text' | 'password';
helpText?: string;
required?: boolean;
suffix?: React.ReactNode;
}
export function TextFieldMD3(props: TextFieldMD3Props): JSX.Element;
From src/styles/md3-buttons.ts (created in 09-01):
export const MD3_BTN_FILLED: string; // filled primary action
export const MD3_BTN_OUTLINED: string; // outlined secondary action
export const MD3_BTN_TEXT: string; // text tertiary action
{field.tooltipText && /* keep tooltip button + tooltip display exactly as-is */}
);
```
CRITICAL: The tooltip button (lines 88-99) must remain OUTSIDE TextFieldMD3, rendered above it. TextFieldMD3 handles the label, input, helpText, and error display. The tooltip is a separate concern that stays in FieldRenderer.
Actually, re-examining the layout: the current text branch has tooltip button inline with label. Since TextFieldMD3 includes its own label (floating), the tooltip must be rendered separately. Place the tooltip button + tooltip content ABOVE the TextFieldMD3 component in the flex column. This preserves existing tooltip behavior.
Keep the select branch (lines 40-79) UNCHANGED — select fields do NOT get floating labels.
**PasswordField.tsx:**
Replace the manual label + input layout with TextFieldMD3, passing the show/hide toggle as `suffix`:
```tsx
import { TextFieldMD3 } from './TextFieldMD3';
export function PasswordField({ id, label, error, registration, helpText, tooltipText }: PasswordFieldProps) {
const [show, setShow] = useState(false);
const [showTooltip, setShowTooltip] = useState(false);
const toggleButton = (
<button type="button" onClick={() => setShow(v => !v)}
aria-label={show ? 'Hide' : 'Show'}
className="text-on-surface-container/50 hover:text-on-surface-container text-sm">
{show ? 'Hide' : 'Show'}
</button>
);
return (
<div className="flex flex-col gap-1">
{tooltipText && (
<button type="button" onClick={() => setShowTooltip(v => !v)}
aria-label={`More info about ${label}`}
className="text-primary hover:text-primary text-xs leading-none self-start">
ⓘ
</button>
)}
{tooltipText && showTooltip && (
<p className="text-xs text-primary bg-primary/10 border border-primary/30 rounded px-2 py-1.5">
{tooltipText}
</p>
)}
<TextFieldMD3
id={id}
label={label}
error={error}
registration={registration}
type={show ? 'text' : 'password'}
helpText={helpText}
suffix={toggleButton}
/>
</div>
);
}
```
Remove the `placeholder` prop from PasswordFieldProps interface since TextFieldMD3 uses `placeholder=" "` internally.
Run full test suite after — ALL `getByLabelText` queries must still work because TextFieldMD3 preserves htmlFor/id pairing.
BackendSelectionStep.tsx: "Next" button gets `className={MD3_BTN_FILLED}`. No Back button here.
RemoteConfigStep.tsx: "Back" button gets `className={MD3_BTN_OUTLINED}`, "Next" (submit) button gets `className={MD3_BTN_FILLED}`.
DeploymentStep.tsx: "Back" button gets `className={MD3_BTN_OUTLINED}`, "Next" button gets `className={MD3_BTN_FILLED}`.
ReviewStep.tsx: "Back" button gets `className={MD3_BTN_OUTLINED}`, "Download All (ZIP)" button gets `className={MD3_BTN_FILLED}`.
OutputBlock.tsx: "Copy" button gets `className={MD3_BTN_OUTLINED + ' text-xs !px-3 !py-1'}` (keep smaller size). "Download" button gets same. Import from `../../styles/md3-buttons`. Note: OutputBlock buttons are small utility buttons — keep `text-xs` and reduce padding with overrides. Alternatively, create a size-reduced variant inline: `className={\`\${MD3_BTN_OUTLINED} !text-xs !px-3 !py-1.5\`}`.
CRITICAL: Do NOT change button text content — only className. Tests use `getByRole('button', { name: /next/i })` etc.
**BackendCard elevation (COMP-03):**
Update BackendCard.tsx className:
- Change `rounded-lg` to `rounded-xl` (MD3 medium shape, 12px)
- Add `shadow hover:shadow-md` to unselected state
- Selected state: add `shadow-md`
- Add `transition-all` (already present — keep)
**OutputBlock elevation (COMP-03):**
Update OutputBlock.tsx `<pre>` className:
- Change `rounded` to `rounded-xl`
- Add `shadow-sm`
**Optional: Add elevation shadow token to index.css:**
If standard Tailwind `shadow` is insufficient, add to `@theme` block:
```css
--shadow-elevation-1: 0 1px 4px 0 rgb(0 0 0 / 0.37);
```
Only add this if the default `shadow` utility doesn't provide enough visual lift. Use your judgment.
Run full test suite after all changes.
<success_criteria>
- COMP-01: All text inputs (FieldRenderer text-branch + PasswordField) render as MD3 outlined fields with floating labels
- COMP-02: Buttons across all wizard steps follow filled/outlined/text hierarchy
- COMP-03: BackendCard has rounded-xl + shadow, OutputBlock pre has rounded-xl + shadow-sm
- Zero test regressions
- User visually approves the complete MD3 component set </success_criteria>