feat(docs): render component property tables in three columns - #2830
Open
Lisa18289 wants to merge 5 commits into
Open
feat(docs): render component property tables in three columns#2830Lisa18289 wants to merge 5 commits into
Lisa18289 wants to merge 5 commits into
Conversation
Property tables squeezed the description into a narrow column and grew rows several lines tall. On a 900px-wide content column the table overflowed horizontally and cut the description off entirely. - Merge Default into the Type column. A dedicated Default column was "-" for most properties and took width the description needs. - Render union types as one chip per member instead of a single "a" | "b" | "c" string, the main reason rows grew tall. Splitting is bracket-aware, so Iterable<A | B> | null yields two members. - Set layout="fixed" with explicit column widths (22/34/44%) so a single long generic can no longer size the whole table, plus minWidth=640 to scroll inside the table container on mobile rather than shrink further. - Property names are bold without the InlineCode background, and wrap instead of overflowing their column. - Mirror all of it in the server-rendered fallback so mounting the react-aria table does not shift the page. llms.txt keeps its four-column markdown: a machine-readable Default column is useful there. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Replaces InlineCode for the property name with a Text using small and strong, so the name reads as the row's label instead of an inline code sample. Drops the class overrides that were fighting InlineCode's own background and padding. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
marked this pull request as ready for review
August 12, 2026 05:13
Lisa18289
requested review from
Jan-Eimertenbrink,
ins0,
maaaathis and
mfal
as code owners
August 12, 2026 05:13
Property names render as plain InlineCode instead of bold monospace text. Types are no longer inline code: union members are comma separated, with the member matching the default value first, marked "(default)" in the muted label style. The separate "default: …" line only remains when no member matches. Two fixes the new formatting exposed: the union splitter treated the ">" of an arrow function type as a closing bracket and split at the inner "|", and defaults from an "@default: x" JSDoc tag kept their colon, so they neither matched a union member nor rendered cleanly. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Matches TypeScript union syntax. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The member matching the default value keeps its position in the union instead of moving to the front; only the "(default)" marker points it out. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
enabled auto-merge (squash)
August 12, 2026 12:54
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
1 participant
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.
The property tables squeezed the description into a narrow column and grew rows several lines tall; below ~900px content width the table cut the description off entirely.
Defaultcolumn was-for most properties, its value now sits under the type.layout="fixed"with 22/34/44% andminWidth={640}so one long generic can't size the whole table.(default)in the muted label style. Thedefault:line under the type only appears when nothing matches (className,boolean).whiteSpace="nowrap"plus a fixed layout letexcludeFromTabOrderbleed into the Type column.@default: xJSDoc tag kept their colon and rendered as: true.Out of scope:
propertiesToMarkdown.ts(llms.txt) keeps its four-column markdown — a machine-readableDefaultcolumn is useful there.Verified in-browser at 375/768/900/1280px against
Button,TextField,SelectandForm: nothing overflows, the table scrolls inside its own container on narrow viewports, and the static fallback matches the mounted table. No automated visual coverage exists for docs pages — worth a look at the rendered component pages during review.🤖 Generated with Claude Code