docs: Fix TableView empty state example dropping TableBody tag#10233
Open
patrickwehbe wants to merge 1 commit into
Open
docs: Fix TableView empty state example dropping TableBody tag#10233patrickwehbe wants to merge 1 commit into
patrickwehbe wants to merge 1 commit into
Conversation
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
reidbarber
approved these changes
Jun 19, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 orphanedrenderEmptyStateprop with no element).Root cause
The example wrapped a single highlighted block with two
- begin highlight -markers but only one- end highlight -:The docs code highlighter (
packages/dev/s2-docs/src/Code.tsx, functionlines()) starts a new highlight grouping on everybeginmarker and resets the current line, with no guard for a grouping that is already open. The secondbegintherefore replaced the in-progress grouping and discarded the already-accumulated<TableBodyline. Because the StackBlitz / copy / download export (getExampleCodeinCodePlatter.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. thetreeColumnexample just above). The full<TableBody ... renderEmptyState>tag now renders and the example compiles in StackBlitz.Verification
Ran the actual
tree-sitter-highlighthighlighter through a faithful port ofCode.tsx'slines()grouping logic on the on-disk example:</TableHeader>straight torenderEmptyState={() => (—<TableBodyabsent.<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).