diff --git a/.planning/phases/09-md3-components/09-05-PLAN.md b/.planning/phases/09-md3-components/09-05-PLAN.md index 4dc04fc..73cb5b2 100644 --- a/.planning/phases/09-md3-components/09-05-PLAN.md +++ b/.planning/phases/09-md3-components/09-05-PLAN.md @@ -2,7 +2,7 @@ phase: 09-md3-components plan: 05 type: execute -wave: 1 +wave: 2 depends_on: ["09-04"] files_modified: - src/components/ui/TextFieldMD3.tsx @@ -19,6 +19,7 @@ must_haves: - "Hovering the tooltip info button reveals tooltip text without clicking" - "Clicking the tooltip info button pins it open; clicking again dismisses it" - "Tooltip icon appears beside the helpText below the field, not above the field" + - "Tooltip icon renders even when field has tooltipText but no helpText" artifacts: - path: "src/components/ui/TextFieldMD3.tsx" provides: "helpTextPrefix prop for rendering inline content left of helpText" @@ -126,14 +127,16 @@ return ( ``` To: ```tsx - {helpText && !error && ( + {(helpText || helpTextPrefix) && !error && (
{helpTextPrefix} -

{helpText}

+ {helpText && ( +

{helpText}

+ )}
)} ``` - This renders optional inline content (the tooltip icon) to the left of helpText. When `helpTextPrefix` is undefined/null, the flex container still renders correctly with just the `

`. + IMPORTANT: The outer guard MUST be `(helpText || helpTextPrefix) && !error` — not just `helpText && !error`. This ensures the tooltip icon (passed as helpTextPrefix) still renders when a field has `tooltipText` but no `helpText`. The inner `helpText &&` guard prevents an empty `

` tag when helpText is absent. **FieldRenderer.tsx — Fix text-branch tooltip (lines 83-109):** @@ -209,6 +212,7 @@ IMPORTANT: Preserve existing `aria-label` format exactly as `More info about ${f - Tooltip icon renders inline to the left of helpText below the field (not above the field) + - Tooltip icon renders even when field has tooltipText but no helpText (guard is helpText || helpTextPrefix) - Hovering the tooltip icon shows tooltip text - Clicking the tooltip icon pins tooltip open; clicking again dismisses - Mouse-leaving the icon hides tooltip (unless pinned via click) @@ -226,6 +230,7 @@ IMPORTANT: Preserve existing `aria-label` format exactly as `More info about ${f - Test: Clicking tooltip button pins tooltip open, mouseLeave does NOT hide it - Test: TextFieldMD3 renders helpTextPrefix inline with helpText when prop provided - Test: TextFieldMD3 renders helpText normally when helpTextPrefix is not provided + - Test: TextFieldMD3 renders helpTextPrefix alone when helpText is absent (tooltip-only field) **FieldRenderer.test.tsx — Add hover behavior tests:** @@ -264,13 +269,18 @@ Add tests in existing file (or create new describe block): 2. `'renders helpText without wrapper issues when helpTextPrefix is undefined'`: - Render TextFieldMD3 with `helpText="Some help"` and no helpTextPrefix - `expect(screen.getByText('Some help')).toBeDefined()` + +3. `'renders helpTextPrefix alone when helpText is absent'`: + - Render TextFieldMD3 with NO `helpText` and `helpTextPrefix={icon}` + - `expect(screen.getByTestId('prefix-only')).toBeDefined()` + - This verifies the `(helpText || helpTextPrefix) && !error` guard works correctly for tooltip-only fields cd C:/Users/SebastienQUEROL/Documents/projets/Ready2Blob && npx vitest run src/components/ui/FieldRenderer.test.tsx src/components/ui/TextFieldMD3.test.tsx --reporter=verbose 2>&1 | tail -40 - All new tooltip hover tests pass (mouseEnter shows, mouseLeave hides, click pins, click again unpins) - - helpTextPrefix rendering test passes + - helpTextPrefix rendering test passes (with helpText, without helpText, and prefix-only) - All pre-existing FieldRenderer and TextFieldMD3 tests still pass @@ -281,6 +291,7 @@ Add tests in existing file (or create new describe block): 1. `npx vitest run --reporter=verbose` — all tests pass (179+ existing + new tooltip tests) 2. Manual spot-check: tooltip icon appears beside helpText below field, not above field 3. Hover behavior: mouseEnter shows tooltip, mouseLeave hides it, click pins it +4. Edge case: field with tooltipText but no helpText still renders the tooltip icon @@ -288,8 +299,9 @@ Add tests in existing file (or create new describe block): - Zero test regressions - Both FieldRenderer (text-branch + select-branch) and PasswordField have hover support - TextFieldMD3 has helpTextPrefix prop for extensibility +- Fields with tooltipText but no helpText still show the tooltip icon (guard is not helpText-only) After completion, create `.planning/phases/09-md3-components/09-05-SUMMARY.md` - + \ No newline at end of file