Skip to content

docs: add example blocks for 46 components with no viewable code (#2759)#3481

Open
AKnassa wants to merge 2 commits into
facebook:mainfrom
AKnassa:docs/2759-example-blocks
Open

docs: add example blocks for 46 components with no viewable code (#2759)#3481
AKnassa wants to merge 2 commits into
facebook:mainfrom
AKnassa:docs/2759-example-blocks

Conversation

@AKnassa

@AKnassa AKnassa commented Jul 3, 2026

Copy link
Copy Markdown

What this does

Adds a copyable code example to 46 component pages on the docsite that previously showed only a hero visual and an empty Examples section.

Fixes the bulk of #2759.

Why

Every component page has a showcase (the hero at the top), but the Examples section is built separately from example blocks — and 46 components had none, so there was no code to view or copy anywhere on their page.

What changed

  • One new example block (.tsx + .doc.mjs pair, type: 'block', no isShowcase) for each of the 46 components, placed next to each component's existing showcase and following the established pattern (e.g. Avatar/AvatarWithImage).
  • Examples were written against each component's actual API and reviewed: no deprecated props (e.g. TopNavHeading uses headingHref), componentsUsed cross-links match what each example really renders, and examples demonstrate something beyond their showcase where it matters (MobileNavToggle custom trigger, Resizable collapsible + snap points, CommandPaletteFooter default keyboard hints).
  • No product code touched — the diff is purely additive template files.

Scope notes

How to see it

Run pnpm dev in apps/docsite, then open any affected page, e.g. /components/ButtonGroup, /components/Resizable, or /components/MobileNavToggle — each now has an Examples section with viewable, copyable code. On main, those sections are empty.

Verified: docsite data generation, 210/210 docsite tests, tsc --noEmit, and a full production build all pass.

https://claude.ai/code/session_018TamXn2FajoSU6gXqts7hk

AKnassa added 2 commits July 2, 2026 15:15
…ebook#2759)

Every component with a showcase now has at least one example block
(type: 'block', no isShowcase) so its docsite page shows viewable,
copyable code in the Examples section.

Excluded: Blockquote (covered by facebook#3385) and Lightbox (covered by facebook#3301).
Use headingHref over deprecated href in TopNavHeading; correct
componentsUsed cross-links in 14 block docs; differentiate
MobileNavToggle, Resizable, and CommandPaletteFooter examples from
their showcases; match TopNavItem preview ratio to its showcase.
@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

@AKnassa is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Jul 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Blockquote (and 56 others) — no example blocks, so there's no viewable code

1 participant