Skip to content

docs: Fix TableView empty state example dropping TableBody tag#10233

Open
patrickwehbe wants to merge 1 commit into
adobe:mainfrom
patrickwehbe:fix-tableview-empty-highlight
Open

docs: Fix TableView empty state example dropping TableBody tag#10233
patrickwehbe wants to merge 1 commit into
adobe:mainfrom
patrickwehbe:fix-tableview-empty-highlight

Conversation

@patrickwehbe

Copy link
Copy Markdown

Closes #10231

Problem

On https://react-spectrum.adobe.com/TableView#empty-state the rendered example code is missing its <TableBody> opening tag, and "Open in StackBlitz" produces code that does not compile (an orphaned renderEmptyState prop with no element).

Root cause

The example wrapped a single highlighted block with two - begin highlight - markers but only one - end highlight -:

{/*- begin highlight -*/}
<TableBody
  /*- begin highlight -*/   // <- redundant second begin
  renderEmptyState={() => (
    ...
  )}>
  {/*- end highlight -*/}

The docs code highlighter (packages/dev/s2-docs/src/Code.tsx, function lines()) starts a new highlight grouping on every begin marker and resets the current line, with no guard for a grouping that is already open. The second begin therefore replaced the in-progress grouping and discarded the already-accumulated <TableBody line. Because the StackBlitz / copy / download export (getExampleCode in CodePlatter.tsx) reads the same rendered code from the DOM, both the displayed snippet and the exported file lost the tag.

Fix

Remove the redundant inner /*- begin highlight -*/ marker, leaving the canonical single begin/end pair already used elsewhere in this file (e.g. the treeColumn example just above). The full <TableBody ... renderEmptyState> tag now renders and the example compiles in StackBlitz.

Verification

Ran the actual tree-sitter-highlight highlighter through a faithful port of Code.tsx's lines() grouping logic on the on-disk example:

  • Before: rendered output jumps from </TableHeader> straight to renderEmptyState={() => (<TableBody absent.
  • After: <TableBody ... renderEmptyState> present, valid JSX, all highlight markers stripped.

This is a docs-only change in a private package, so no changeset is included (consistent with recent docs-example fixes such as #10214).

The empty state example for S2 TableView had two `- begin highlight -`
markers around a single block (one before `<TableBody>` and a second,
redundant one inside the opening tag) but only one `- end highlight -`.

The code highlighter in `Code.tsx` (`lines()`) starts a new highlight
grouping on each `begin` marker and resets the current line, with no
guard for an already-open grouping. The second `begin` therefore
discarded the already-accumulated `<TableBody` line, so the rendered
example (and the StackBlitz/copy/download export, which reads the same
rendered code) was missing the `<TableBody>` opening tag, producing
invalid JSX.

Removing the redundant inner marker leaves the canonical single
begin/end pair so the full `<TableBody ... renderEmptyState>` tag renders
and the example compiles in StackBlitz.

Closes adobe#10231
@github-actions github-actions Bot added the S2 label Jun 19, 2026

@snowystinger snowystinger left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing that!

@reidbarber reidbarber added this pull request to the merge queue Jun 19, 2026
@reidbarber reidbarber removed this pull request from the merge queue due to a manual request Jun 19, 2026
@reidbarber reidbarber added this pull request to the merge queue Jun 19, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jun 19, 2026
@yihuiliao yihuiliao added this pull request to the merge queue Jun 20, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jun 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TableView rendered code is broken

3 participants