Skip to content

dox(spinners): fixes page hierarchy of components #1121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harry-whorlow wants to merge 2 commits into
base: main
Choose a base branch
from
Open

dox(spinners): fixes page hierarchy of components #1121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2dd7ad
dox(spinners): fixes page hierarchy of components
harry-whorlow Aug 5, 2026
ec96b3a
ci: apply automated fixes
autofix-ci[bot] Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/components/ds/DsKit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,10 +143,12 @@ export function ComponentPreview({
{title}
</div>
) : null}

{description ? (
<DsDescription variant="preview">{description}</DsDescription>
) : null}
</div>

Comment on lines +146 to +151

@coderabbitai coderabbitai Bot Aug 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use layout utilities for visual spacing.

These added blank lines do not change the rendered layout. JSX source whitespace does not create margin or gap. If the description needs separation from the title, add a spacing class to the wrapper. The controls already have gap-1 at Line 153, so Line 168 is only source formatting.

Also applies to: 168-168

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ds/DsKit.tsx` around lines 146 - 151, Update the description
layout around DsDescription in DsKit.tsx to use an explicit spacing utility on
the appropriate wrapper when separation from the title is required; remove
reliance on blank JSX lines for visual spacing. Keep the existing controls gap-1
styling unchanged.

{code ? (
<div className="flex shrink-0 items-center gap-1">
<button
Expand All @@ -163,6 +165,7 @@ export function ComponentPreview({
)}
/>
</button>

<button
type="button"
onClick={handleCopy}
Expand Down
45 changes: 41 additions & 4 deletions src/routes/ds.spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,29 @@ export const Route = createFileRoute('/ds/spinner')({
function SpinnerPage() {
return (
<DsPage
title="Spinner"
description="A simple animated loading indicator. Size it with w-/h- utilities and recolor it with text-* (it inherits currentColor). Source: src/components/Spinner.tsx."
title="Spinners"
description="A collection of TanStack spinners produced by us for the community."
Comment on lines +19 to +20

@coderabbitai coderabbitai Bot Aug 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Update the page metadata for the new collection.

The visible page now uses title="Spinners" and documents both Spinner and Headbanger, but Route.head still uses the singular title and description. Update the metadata so browser and search metadata describe the full collection.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/routes/ds.spinner.tsx` around lines 19 - 20, Update the Route.head
metadata in src/routes/ds.spinner.tsx to use the collection title “Spinners” and
a description covering both Spinner and Headbanger, matching the visible page
content.

>
<DsSection title="Sizes & color">
<DsSection
title="Spinner"
description={
<>
A simple animated loading indicator. Size it with w-/h- utilities
and recolor it with text-* (it inherits currentColor).
<br />
Source:{' '}
<a
href="https://github.com/TanStack/tanstack.com/blob/main/src/components/Spinner.tsx"
target="_blank"
rel="noreferrer"
className="underline underline-offset-2 hover:text-text-primary"
>
src/components/Spinner.tsx
</a>
.
</>
}
>
<ComponentPreview
code={`<Spinner className="w-4 h-4" />
<Spinner />
Expand All @@ -35,7 +54,25 @@ function SpinnerPage() {

<DsSection
title="Headbanger"
description="A branded pixel-art loader — a 12-frame sprite animation on a canvas. Multi-color by design (it does not inherit currentColor); size it with w-/h- utilities. Holds on the first frame when prefers-reduced-motion is set. Source: src/components/ds/ui/PixelSpinner.tsx."
description={
<>
A branded pixel-art loader — a 12-frame sprite animation on a
canvas. Multi-color by design (it does not inherit currentColor);
size it with w-/h- utilities. Holds on the first frame when
prefers-reduced-motion is set.
<br />
Source:{' '}
<a
href="https://github.com/TanStack/tanstack.com/blob/main/src/components/ds/ui/PixelSpinner.tsx"
target="_blank"
rel="noreferrer"
className="underline underline-offset-2 hover:text-text-primary"
>
src/components/ds/ui/PixelSpinner.tsx
</a>
.
</>
}
>
<ComponentPreview
code={`<PixelSpinner className="w-8 h-8" />
Expand Down
Loading