fix(docsite): keep Properties preview border framed, tidy Examples divider#2989
Conversation
rubyycheung
requested review from
cixzhang,
imdreamrunner,
josephfarina,
marie-lucas and
nynexman4464
as code owners
meta-cla
Bot
added
the
CLA Signed
🚀 Vercel Preview Deployment
|
rubyycheung
changed the title
rubyycheung
changed the title
rubyycheung
force-pushed
the
chore/docsite-remove-component-version
branch
from
879c902 to
01d6791
Compare
| canControlOpenState?: boolean; | ||
| embedded?: boolean; | ||
| }) { | ||
| const embeddedCardStyle = embedded ? {borderRadius: 0} : undefined; |
There was a problem hiding this comment.
Can this use a proper xstyle?
There was a problem hiding this comment.
Done — converted the embedded Card's inline borderRadius to a stylex flat rule applied via xstyle. (dd38754)
| border: | ||
| 'var(--border-width, 1px) solid var(--color-border-emphasized)', | ||
| borderRadius: 'var(--radius-container)', | ||
| }}> |
There was a problem hiding this comment.
Done — moved the preview-stage inline style into a stylex.create rule (styles.previewStage), with the maxHeight as a media query so the isMobile JS check is gone too. (dd38754)
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR No new or modified components detected. Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
cixzhang
left a comment
cixzhang
left a comment
There was a problem hiding this comment.
I was thinking about the versions here and I think we should keep showing them in the headers for all docs. They should be tied to the core or chart or other package version for the relevant package the doc lives in.
-
Core component docs are served from the core package. It's important for users to be able to reference which version of the docsite is showing relative to their own version. It's not redundant or churn-y information. Component docs will have meaningful difference per version and builders need to have this reference so they know if they need to upgrade.
-
Theme docs should show the version from the corresponding theme package and templates and guidance should be showing the version from the CLI. All of these versions can evolve independently from the core version moving forward since we may apply hotfixes to any package and break the tight connection with core versioning.
Imagine this user scenario: you're a builder currently on v0.0.15 but want to reference docs for some component. The docsite's version may be advanced to 0.0.18 where we may have added new props or changed prop signature. So the information you get about the component won't work for your setup and if we're not showing the version it's not easy for the builder to quickly check and compare.
rubyycheung
changed the title
…vider On the Properties tab the live preview sits in a sticky overflow:auto / max-height container. The border lived on the inner Card, so when the preview was taller than the container its top/bottom borders scrolled out of view. Move the border + radius onto the scroll container itself, and add an `embedded` flag to InteractivePreviewStage that flattens the inner Card's corners so it sits flush in the frame. Also drop the redundant Divider above the Examples heading. Co-authored-by: Cursor <cursoragent@cursor.com>
rubyycheung
force-pushed
the
chore/docsite-remove-component-version
branch
from
9c10b15 to
f6672cb
Compare
|
Added the version back in |
2 participants
Summary
Two polish fixes to the docsite component detail pages (e.g.
/components/Button,/components/Token).1. Fix disappearing preview border on the Properties tab
On the Properties tab, the live preview sits in a sticky
overflow: auto/max-heightcontainer. The border was on the innerCard, so when the preview was taller than the container the Card's top and bottom borders scrolled out of the overflow window and vanished (left/right stayed). Fixed by:embeddedflag toInteractivePreviewStagethat flattens the inner Card'sborder-radiusso it sits flush inside the frame.2. Remove the divider above "Examples"
Dropped the
<Divider />that sat directly above the "Examples" section on the overview — the heading provides enough separation.Changes
apps/docsite/src/components/component-detail/ComponentDetailClient.tsx— border/radius on the Properties scroll container; passembedded; removed the Examples divider.apps/docsite/src/components/component-detail/InteractivePreview.tsx— newembeddedprop flattens the Card corners when framed.Test plan
/components/Token?tab=properties— border stays framed while scrolling the property-heavy preview/components/Button— no divider above the Examples section/components/Buttonheader still renders@astryxdesign/core v0.0.15 · Button(unchanged)eslinton all changed files — cleancheck:repo,check:changesets) passNotes
apps/docsiteis private/unpublished), so no changeset is needed.