Skip to content

Collapsible CodeBlock #424

Description

@czarandy

Feature

CodeBlock has no collapse/expand capability — the only length control is maxHeight, which scrolls (src/components/CodeBlock/CodeBlock.tsx:15-90). Long code samples in docs/chat contexts want to start collapsed to the header and expand on demand.

Add:

  • isCollapsible (and defaultCollapsed, plus controlled isCollapsed/onCollapsedChange if cheap) props.
  • A chevron toggle in the header, placed at the inline-start of the title so the title reads as the toggle's label; the whole header row can be the trigger.
  • Smooth height animation that respects prefers-reduced-motion.
  • Proper semantics: trigger is a real button with aria-expanded + aria-controls.

Notes

  • Interaction with maxHeight should be defined (collapsed → header only; expanded → existing maxHeight behavior).
  • Panda sva/cva recipe for the new slots per repo convention.
  • Tests + Storybook example (collapsed-by-default story must not trap docs-site live demos in a surprising state — default stories should start expanded).

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestmediumApproximately medium amount of work

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions