Skip to content

ANSWER_OPTIONS_AUDIT.md

Latest commit

 

History

History
287 lines (213 loc) · 7.37 KB

ANSWER_OPTIONS_AUDIT.md

File metadata and controls

287 lines (213 loc) · 7.37 KB

🔍 ANSWER OPTIONS AUDIT REPORT

Comprehensive Review of Widths, Borders & Rendering Consistency

📋 EXECUTIVE SUMMARY

Components Analyzed:

  1. SingleSelectButtonGroup (single choice buttons)
  2. CheckboxGroup (multi-select checkboxes)
  3. CompositeScreen checkbox rendering
  4. StateSelectionScreen (state selection)
  5. GLP1HistoryScreen (medication history)
  6. MedicationOptionsScreen (medication cards)

🎯 KEY FINDINGS

✅ CONSISTENT (Matches Reference Design):

  • SingleSelectButtonGroup.tsx
    • Width: w-full ✅
    • Border: border-2 ✅
    • Selected: border-[#00A896] ✅
    • Unselected: border-[#E8E8E8] ✅

⚠️ INCONSISTENCIES FOUND:

1. CheckboxGroup.tsx - Variant Default Mismatch

ISSUE: Current default variant is 'default', reference uses 'pills'

Current:

variant = 'default'

Reference:

variant = 'pills' // Default to pills for mobile optimization

Impact: Users see different layouts than intended by design

2. CheckboxGroup.tsx - Pills Layout Difference

ISSUE: Current uses grid layout, reference uses flex-wrap

Current (branch-1):

<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">

Reference (new design):

<div className="flex flex-wrap gap-2.5">

Impact:

  • Current forces 2 columns on desktop
  • Reference allows natural wrapping based on content width
  • Reference uses tighter spacing (gap-2.5 vs gap-3)

3. CheckboxGroup.tsx - Border Color Inconsistency (Default Variant)

ISSUE: Mix of border colors in default variant

Current:

border-[#E8E8E8]  // Unselected (SHOULD BE border-gray-300)
border-[#00A896]  // Selected (OK for exclusive=false)

Reference:

border-gray-300    // Unselected (Standard)
border-[#1a7f72]   // Selected (Teal dark variant)
bg-[#e6f3f2]       // Selected background

Impact: Inconsistent with design system neutrals

4. CheckboxGroup.tsx - Text Color in Default Variant

ISSUE: Current uses mixed color references

Current:

text-[#2D3436]  // Should use text-neutral-700
text-[#666666]  // Should use text-neutral-600

Reference:

text-neutral-700  // Standard
text-neutral-600  // Lighter text
text-[#1a7f72]    // Selected (teal dark)

5. CompositeScreen.tsx - Checkbox Border Inconsistency

ISSUE: Uses border-2 with hardcoded colors

Current:

border-2 border-[#E8E8E8]         // Unselected
border-2 border-[#00A896]         // Selected

Should Be:

border-2 border-neutral-200       // Unselected
border-2 border-[#00A896]         // Selected (brand color OK)

📊 WIDTH AUDIT

All Answer Option Boxes:

Component Width Class Status
SingleSelectButtonGroup w-full ✅ Correct
CheckboxGroup (default) w-full ✅ Correct
CheckboxGroup (pills) Auto (flex-wrap) ⚠️ Should use flex-wrap not grid
CompositeScreen checkboxes w-full ✅ Correct
StateSelectionScreen buttons w-full ✅ Correct
Medication cards w-full ✅ Correct

VERDICT: Width consistency is good, but pills layout needs flex-wrap

🎨 BORDER AUDIT

Border Width Standards:

  • All answer options: border-2 ✅ Consistent

Border Color Issues:

Component Current Should Be Status
SingleSelectButton unselected border-[#E8E8E8] Keep (close to neutral-200) ✅
SingleSelectButton selected border-[#00A896] Keep (brand color) ✅
CheckboxGroup pills unselected border-[#E8E8E8] Keep ✅
CheckboxGroup default unselected border-[#E8E8E8] border-gray-300 per reference ⚠️
CheckboxGroup default selected border-[#00A896] border-[#1a7f72] per reference ⚠️
CompositeScreen checkboxes border-[#E8E8E8] border-neutral-200 ⚠️

🔄 SCREEN RENDERING CONFLICTS

Potential Conflicts Identified:

1. CheckboxGroup Variant Inconsistency

Location: Used in multiple screens Issue: Some screens might expect 'default' but get 'pills' Risk: Layout breaks if variant changes

Affected Screens:

  • MultiSelectScreen.tsx
  • CompositeScreen.tsx (if using CheckboxGroup)
  • Any screen with multi-select

Fix: Audit all CheckboxGroup usages and set explicit variant

2. Padding Inconsistency

Issue: Different py values across answer options

Component Current Padding
SingleSelectButton py-5 sm:py-[18px]
CheckboxGroup pills py-3
CheckboxGroup default py-[18px]

Should be standardized to: py-4 or py-5 (using Tailwind scale)

3. Hover States Mismatch

Issue: Different hover border colors

Current Patterns:

  • hover:border-[#00A896]/30 (SingleSelect)
  • hover:border-[#00A896]/40 (Checkbox pills)
  • hover:border-[#1a7f72]/50 (Reference default)

Recommendation: Standardize to one pattern

🛠️ RECOMMENDED FIXES

Priority 1: Critical Inconsistencies

  1. ✅ Change CheckboxGroup default variant to 'pills'
  2. ✅ Update CheckboxGroup pills layout from grid to flex-wrap
  3. ✅ Fix CompositeScreen border colors

Priority 2: Design System Alignment

  1. ⚠️ Standardize padding to use Tailwind scale
  2. ⚠️ Review CheckboxGroup default variant border colors

Priority 3: Polish

  1. 📝 Standardize hover states
  2. 📝 Document answer option standards

📝 DETAILED COMPONENT ANALYSIS

SingleSelectButtonGroup.tsx

✅ Width: w-full
✅ Border: border-2
✅ Padding: py-5 sm:py-[18px] (acceptable)
✅ Colors: Matches reference
✅ Hover: Consistent

CheckboxGroup.tsx (Pills Variant)

✅ Width: Auto (flex-wrap) - BUT NEEDS FIX
⚠️ Layout: Should use flex-wrap not grid
✅ Border: border-2
✅ Padding: py-3
⚠️ Gap: Should be gap-2.5 (currently gap-3)

CheckboxGroup.tsx (Default Variant)

✅ Width: w-full
✅ Border: border-2
⚠️ Border Colors: Different from reference
✅ Padding: py-[18px]
⚠️ Text Colors: Mix of hardcoded and neutral

🎯 ACTION ITEMS

Immediate Fixes Needed:

  • Change CheckboxGroup default variant to 'pills'
  • Update pills layout from grid to flex-wrap
  • Fix gap from gap-3 to gap-2.5 in pills
  • Update border colors in CompositeScreen
  • Standardize py-[18px] to py-4 or py-5

Design Review Needed:

  • Confirm if default variant border colors should match reference
  • Verify hover state patterns
  • Document final standards for answer options

📊 COMPARISON SUMMARY

Aspect Current Reference Match?
Width consistency Good Good ✅
Border width Consistent Consistent ✅
Border colors Mixed Standardized ⚠️
Layout (pills) Grid Flex-wrap ❌
Default variant 'default' 'pills' ❌
Padding values Mixed Standard ⚠️

✨ CONCLUSION

Overall Assessment: Generally consistent, but 3 critical mismatches with reference design:

  1. CheckboxGroup default variant mismatch
  2. Pills layout using grid instead of flex-wrap
  3. Border color inconsistencies

Recommended Next Steps:

  1. Apply Priority 1 fixes
  2. Test across all screens
  3. Verify no rendering conflicts
  4. Document final standards