fix(09): revise 09-05 plan based on checker feedback
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
phase: 09-md3-components
|
phase: 09-md3-components
|
||||||
plan: 05
|
plan: 05
|
||||||
type: execute
|
type: execute
|
||||||
wave: 1
|
wave: 2
|
||||||
depends_on: ["09-04"]
|
depends_on: ["09-04"]
|
||||||
files_modified:
|
files_modified:
|
||||||
- src/components/ui/TextFieldMD3.tsx
|
- src/components/ui/TextFieldMD3.tsx
|
||||||
@@ -19,6 +19,7 @@ must_haves:
|
|||||||
- "Hovering the tooltip info button reveals tooltip text without clicking"
|
- "Hovering the tooltip info button reveals tooltip text without clicking"
|
||||||
- "Clicking the tooltip info button pins it open; clicking again dismisses it"
|
- "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 appears beside the helpText below the field, not above the field"
|
||||||
|
- "Tooltip icon renders even when field has tooltipText but no helpText"
|
||||||
artifacts:
|
artifacts:
|
||||||
- path: "src/components/ui/TextFieldMD3.tsx"
|
- path: "src/components/ui/TextFieldMD3.tsx"
|
||||||
provides: "helpTextPrefix prop for rendering inline content left of helpText"
|
provides: "helpTextPrefix prop for rendering inline content left of helpText"
|
||||||
@@ -126,14 +127,16 @@ return (
|
|||||||
```
|
```
|
||||||
To:
|
To:
|
||||||
```tsx
|
```tsx
|
||||||
{helpText && !error && (
|
{(helpText || helpTextPrefix) && !error && (
|
||||||
<div className="flex items-start gap-1">
|
<div className="flex items-start gap-1">
|
||||||
{helpTextPrefix}
|
{helpTextPrefix}
|
||||||
<p className="text-xs text-on-surface-container/70">{helpText}</p>
|
{helpText && (
|
||||||
|
<p className="text-xs text-on-surface-container/70">{helpText}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
```
|
```
|
||||||
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 `<p>`.
|
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 `<p>` tag when helpText is absent.
|
||||||
|
|
||||||
**FieldRenderer.tsx — Fix text-branch tooltip (lines 83-109):**
|
**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
|
|||||||
</verify>
|
</verify>
|
||||||
<done>
|
<done>
|
||||||
- Tooltip icon renders inline to the left of helpText below the field (not above the field)
|
- 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
|
- Hovering the tooltip icon shows tooltip text
|
||||||
- Clicking the tooltip icon pins tooltip open; clicking again dismisses
|
- Clicking the tooltip icon pins tooltip open; clicking again dismisses
|
||||||
- Mouse-leaving the icon hides tooltip (unless pinned via click)
|
- 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: Clicking tooltip button pins tooltip open, mouseLeave does NOT hide it
|
||||||
- Test: TextFieldMD3 renders helpTextPrefix inline with helpText when prop provided
|
- Test: TextFieldMD3 renders helpTextPrefix inline with helpText when prop provided
|
||||||
- Test: TextFieldMD3 renders helpText normally when helpTextPrefix is not provided
|
- Test: TextFieldMD3 renders helpText normally when helpTextPrefix is not provided
|
||||||
|
- Test: TextFieldMD3 renders helpTextPrefix alone when helpText is absent (tooltip-only field)
|
||||||
</behavior>
|
</behavior>
|
||||||
<action>
|
<action>
|
||||||
**FieldRenderer.test.tsx — Add hover behavior tests:**
|
**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'`:
|
2. `'renders helpText without wrapper issues when helpTextPrefix is undefined'`:
|
||||||
- Render TextFieldMD3 with `helpText="Some help"` and no helpTextPrefix
|
- Render TextFieldMD3 with `helpText="Some help"` and no helpTextPrefix
|
||||||
- `expect(screen.getByText('Some help')).toBeDefined()`
|
- `expect(screen.getByText('Some help')).toBeDefined()`
|
||||||
|
|
||||||
|
3. `'renders helpTextPrefix alone when helpText is absent'`:
|
||||||
|
- Render TextFieldMD3 with NO `helpText` and `helpTextPrefix={<span data-testid="prefix-only">icon</span>}`
|
||||||
|
- `expect(screen.getByTestId('prefix-only')).toBeDefined()`
|
||||||
|
- This verifies the `(helpText || helpTextPrefix) && !error` guard works correctly for tooltip-only fields
|
||||||
</action>
|
</action>
|
||||||
<verify>
|
<verify>
|
||||||
<automated>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</automated>
|
<automated>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</automated>
|
||||||
</verify>
|
</verify>
|
||||||
<done>
|
<done>
|
||||||
- All new tooltip hover tests pass (mouseEnter shows, mouseLeave hides, click pins, click again unpins)
|
- 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
|
- All pre-existing FieldRenderer and TextFieldMD3 tests still pass
|
||||||
</done>
|
</done>
|
||||||
</task>
|
</task>
|
||||||
@@ -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)
|
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
|
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
|
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
|
||||||
</verification>
|
</verification>
|
||||||
|
|
||||||
<success_criteria>
|
<success_criteria>
|
||||||
@@ -288,6 +299,7 @@ Add tests in existing file (or create new describe block):
|
|||||||
- Zero test regressions
|
- Zero test regressions
|
||||||
- Both FieldRenderer (text-branch + select-branch) and PasswordField have hover support
|
- Both FieldRenderer (text-branch + select-branch) and PasswordField have hover support
|
||||||
- TextFieldMD3 has helpTextPrefix prop for extensibility
|
- TextFieldMD3 has helpTextPrefix prop for extensibility
|
||||||
|
- Fields with tooltipText but no helpText still show the tooltip icon (guard is not helpText-only)
|
||||||
</success_criteria>
|
</success_criteria>
|
||||||
|
|
||||||
<output>
|
<output>
|
||||||
|
|||||||
Reference in New Issue
Block a user