richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update memory files for Card selected state

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 15:46:38 +11:00
parent 74ee0b87da
commit a899c9a376
3 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/memory/session-log.md
View File

@@ -321,6 +321,33 @@ Each entry follows this structure:
- Should we add a "selected" state for ServiceOption-style cards (e.g., brand border + brand.50 background)?
**Next steps:**
- User to review Card in Storybook
- ~~User to review Card in Storybook~~ ✓ Feedback received — add selected + hover bg
### Session 2026-03-25g — Card selected state + hover background
**Agent(s):** Claude Opus (via conversation)
**Work completed:**
- Reviewed FA 1.0 Figma designs for card usage patterns:
- ListItemPurchaseOption (2349:39505): selectable cards with 4 states × 2 viewports
- ListItemAddItem (2350:40658): toggle/switch pattern — deferred to future Toggle component
- Added `selected` prop: brand border (2px, warm gold #BA834E) + warm background (brand.50 #FEF9F5)
- Added hover background fill: interactive cards now fill with neutral.50 on hover (matching Figma's inactive→hover pattern)
- Hover on selected cards preserves warm background instead of switching to neutral
- Elevated interactive cards still get shadow lift on hover; outlined ones only get bg fill
- Added 3 new card tokens: border.selected, background.hover, background.selected
- Added 4 new stories: Selected, OptionSelect (single-select with radio semantics), MultiSelect (checkbox toggle), OnDifferentBackgrounds (white vs grey surface)
- Replaced ServiceOptionPreview story with the more complete OptionSelect and MultiSelect patterns
- Preflight passed all 5 checks
- Committed and pushed to Gitea
**Decisions made:**
- Selected state uses 2px brand border (not 1.5px from Figma 1.0) — 2px aligns with our focus ring width and sits on the 2px sub-grid
- Selected background uses brand.50 (warm tint) not neutral.50 (grey) — warm tint reinforces the brand connection and distinguishes selected from hovered
- Hover bg fill uses neutral.50 (not brand.50) for unselected cards — keeps hover subtle and neutral
- Toggle/switch pattern from Figma (ListItemAddItem) is a separate component concern, not Card
**Next steps:**
- User to review Card selected/hover states in Storybook
- Build Badge or Chip atom next
- Begin PriceCard or ServiceOption molecule once Card is approved