Add auto-collapsed React code blocks for large code snippets.

[rezrah]

Towards primer/brand#1062

Adds auto collapsed React code block pane similar to primer.style/product (with some minor differences).

• Only enabled on jsx live code fences
• Auto-collapses code blocks that exceed a certain height
• Visual parity with product counterpart
• Simpler implementation, which doesn't require a separate previewCode and fullCode to determine what shows in collapsed and original states respectively.

🔗 preview

Screen.Recording.2025-06-25.at.12.06.41.mov

[Copilot]

Pull Request Overview

Adds automatic collapsing for large live JSX/TSX code blocks in the ReactCodeBlock component, matching Primer’s product style.

• Introduces height measurement, collapse/expand state, and a toggle button with smooth scrolling on collapse.
• Updates CSS for collapsed state styling and collapse button appearance.
• Renames the demo section and marks the example as jsx live in the MD file.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/theme/components/layout/code-block/ReactCodeBlock.tsx	Added refs, effects, unique IDs, and collapse/expand logic
packages/theme/components/layout/code-block/ReactCodeBlock.module.css	Styled the collapsed editor, wrapper, and collapse button
packages/site/content/content-example/tabbed-component/react.mdx	Renamed section and updated code fence to jsx live
.changeset/bright-parrots-smash.md	Added changeset entry for the auto-collapse feature

Comments suppressed due to low confidence (2)

packages/theme/components/layout/code-block/ReactCodeBlock.tsx:50

• There are no unit tests covering the collapse/expand logic; adding tests to simulate editor heights above and below COLLAPSE_HEIGHT would help ensure this behavior remains stable.

  }, [code, isCodePaneCollapsed])

packages/site/content/content-example/tabbed-component/react.mdx:98

• [nitpick] The example uses multiple identical <Animate> blocks to simulate a long code snippet; consider consolidating them within a single code fence or clarifying intention to avoid confusion.

  <Animate animate="fade-in">

[danielguillan]

Looks great! 🚀