Skip to content

Add collapsible proposal template field cards#738

Draft
nourmalaeb wants to merge 6 commits intodevfrom
collapsible-proposal-template-fields
Draft

Add collapsible proposal template field cards#738
nourmalaeb wants to merge 6 commits intodevfrom
collapsible-proposal-template-fields

Conversation

@nourmalaeb
Copy link
Collaborator

@nourmalaeb nourmalaeb commented Mar 10, 2026

Summary

  • Refactor AccordionItem to own its own variant prop ('default' | 'unstyled') so it works standalone without an <Accordion> wrapper
  • Accordion becomes a thin layout wrapper — no longer sets style context
  • Delete collapsible.tsx and Collapsible.stories.tsx (no longer needed)
  • Add CollapsibleConfigCard component using standalone <AccordionItem variant="unstyled">
  • Migrate FieldCard, TemplateEditorContent, and BudgetFieldConfig from FieldConfigCard to CollapsibleConfigCard
  • Add changeFieldType mutator to proposalTemplate.ts (discards old type-specific data, preserves title/description/required)
  • Auto-expand newly added fields
  • Add translation keys: Field name, Type, Optional, Untitled field

Test plan

  • pnpm typecheck passes
  • pnpm format:check passes
  • Existing Accordion behavior unchanged (RubricEditorContent, PhasesSectionContent)
  • Collapse/expand works, teal border on expand, chevron rotates
  • Drag handle works (not blocked by collapse trigger)
  • Type selector changes field type and discards old config
  • Locked cards (title, category, budget) render correctly with badges
  • Budget card is collapsible

@vercel
Copy link
Contributor

vercel bot commented Mar 10, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
app Error Error Mar 10, 2026 6:20pm

Request Review

…se on top

Create Collapsible, CollapsibleTrigger, and CollapsibleContent as standalone
primitives wrapping React Aria's Disclosure. The height animation logic is
extracted from AccordionContent into CollapsibleContent so it can be reused
independently. Accordion components now compose on top of Collapsible,
preserving all existing behavior.
Replace FieldConfigCard usage with CollapsibleConfigCard in the proposal
template editor. Cards now have a collapsed header showing icon pill, badge
chip, and chevron, with an expanded body containing field name input, type
selector, description, config options, and a footer with required toggle
and delete button.

- Add CollapsibleConfigCard component with collapsible/locked variants
- Add changeFieldType mutator to proposalTemplate.ts
- Refactor FieldCard with type selector, char counter, and collapsible state
- Update TemplateEditorContent with expand tracking and field type changes
- Make BudgetFieldConfig collapsible with badge label
- Add translation keys (Field name, Type, Optional, Untitled field)
Move variant prop from Accordion to AccordionItem so it can be used
standalone (e.g. in CollapsibleConfigCard) without needing an Accordion
parent. Delete collapsible.tsx since AccordionItem now serves that role.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant