Skip to content

docs(devtools): align logo, panel, and option union descriptions across docs and JSDoc#10617

Merged
sukvvon merged 7 commits intomainfrom
docs/devtools-replace-framework-specific-logo-with-tanstack-logo
May 1, 2026
Merged

docs(devtools): align logo, panel, and option union descriptions across docs and JSDoc#10617
sukvvon merged 7 commits intomainfrom
docs/devtools-replace-framework-specific-logo-with-tanstack-logo

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 1, 2026

🎯 Changes

Align devtools descriptions across both docs and JSDoc to match the actual rendered component, adapter naming, and full type union:

  1. Replace framework-specific logo with TanStack logo in buttonPosition descriptions across React, Vue, Solid, Preact docs and React, Vue, Solid, Svelte JSDoc.

    • The <TanstackLogo /> component (packages/query-devtools/src/Devtools.tsx:263, 271) is the only logo rendered in the floating button, regardless of adapter — there's no customization API for it.
    • After this PR, all 6 adapters (docs and JSDoc) use the same TanStack logo phrasing.
  2. Use adapter naming for devtools panel in position descriptions where it was inconsistent.

    • Vue/Solid JSDoc had React Query devtools panel leftover from copy-paste. Vue docs had the same leftover.
    • Svelte/Angular JSDoc used the core component name (TanStack Query devtools panel) instead of their adapter name, while their own docs already used the adapter name.
    • After this PR, all adapters consistently use {Framework} Query devtools panel (matching what users actually import: <VueQueryDevtoolsPanel />, <SolidQueryDevtoolsPanel />, etc.).
  3. Add missing union descriptions to JSDoc for full type coverage:

CodeRabbit's review on the original PR caught the Vue panel leftover; expanding the scope keeps the wording consistent across docs and JSDoc.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 1, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Documentation and JSDoc comments were updated to standardize references to the devtools open/close control as the “TanStack” logo and to correct framework-specific panel naming. No runtime code, exported types, or behavior were changed.

Changes

Cohort / File(s) Summary
Docs — framework devtools
docs/framework/preact/devtools.md, docs/framework/react/devtools.md, docs/framework/solid/devtools.md, docs/framework/vue/devtools.md
Reworded buttonPosition and position descriptions to reference the “TanStack” logo and corrected framework-specific panel names in Vue docs. Text-only documentation edits.
Packages — devtools JSDoc/type comments
packages/react-query-devtools/src/ReactQueryDevtools.tsx, packages/solid-query-devtools/src/devtools.tsx, packages/svelte-query-devtools/src/Devtools.svelte, packages/vue-query-devtools/src/types.ts, packages/angular-query-experimental/src/devtools/types.ts, packages/preact-query-devtools/src/PreactQueryDevtools.tsx
Updated JSDoc in DevtoolsOptions to standardize wording (e.g., “TanStack logo”), corrected panel naming per framework, and documented 'relative' as an allowed buttonPosition value in several places. Comments only; no API or runtime changes.
Changeset
.changeset/good-pots-brush.md
Added a changeset entry noting documentation alignment across devtools packages.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 I hopped through docs with tiny paws,
Swapped names and nudged a brand-new clause,
TanStack now gleams where logos play,
Panels named true for each display,
A gentle hop — the words now stay.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title clearly and concisely summarizes the main change: aligning devtools documentation and JSDoc descriptions across the codebase regarding logo names, panel naming, and option unions.
Description check ✅ Passed The PR description thoroughly details all changes, follows the template structure with completed checklist items, and clearly explains the motivation and scope.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/devtools-replace-framework-specific-logo-with-tanstack-logo

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added the documentation Improvements or additions to documentation label May 1, 2026
@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 1, 2026

View your CI Pipeline Execution ↗ for commit a7323c8

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 1m 44s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1s View ↗

☁️ Nx Cloud last updated this comment at 2026-05-01 07:06:37 UTC

@sukvvon sukvvon self-assigned this May 1, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 1, 2026

🚀 Changeset Version Preview

6 package(s) bumped directly, 18 bumped as dependents.

🟩 Patch bumps

Package Version Reason
@tanstack/angular-query-experimental 5.100.6 → 5.100.7 Changeset
@tanstack/preact-query-devtools 5.100.6 → 5.100.7 Changeset
@tanstack/react-query-devtools 5.100.6 → 5.100.7 Changeset
@tanstack/solid-query-devtools 5.100.6 → 5.100.7 Changeset
@tanstack/svelte-query-devtools 6.1.25 → 6.1.26 Changeset
@tanstack/vue-query-devtools 6.1.25 → 6.1.26 Changeset
@tanstack/angular-query-persist-client 5.100.6 → 5.100.7 Dependent
@tanstack/eslint-plugin-query 5.100.6 → 5.100.7 Dependent
@tanstack/preact-query 5.100.6 → 5.100.7 Dependent
@tanstack/preact-query-persist-client 5.100.6 → 5.100.7 Dependent
@tanstack/query-async-storage-persister 5.100.6 → 5.100.7 Dependent
@tanstack/query-broadcast-client-experimental 5.100.6 → 5.100.7 Dependent
@tanstack/query-core 5.100.6 → 5.100.7 Dependent
@tanstack/query-devtools 5.100.6 → 5.100.7 Dependent
@tanstack/query-persist-client-core 5.100.6 → 5.100.7 Dependent
@tanstack/query-sync-storage-persister 5.100.6 → 5.100.7 Dependent
@tanstack/react-query 5.100.6 → 5.100.7 Dependent
@tanstack/react-query-next-experimental 5.100.6 → 5.100.7 Dependent
@tanstack/react-query-persist-client 5.100.6 → 5.100.7 Dependent
@tanstack/solid-query 5.100.6 → 5.100.7 Dependent
@tanstack/solid-query-persist-client 5.100.6 → 5.100.7 Dependent
@tanstack/svelte-query 6.1.25 → 6.1.26 Dependent
@tanstack/svelte-query-persist-client 6.1.25 → 6.1.26 Dependent
@tanstack/vue-query 5.100.6 → 5.100.7 Dependent

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 1, 2026

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10617

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10617

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10617

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10617

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10617

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10617

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10617

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10617

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10617

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10617

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10617

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10617

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10617

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10617

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10617

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10617

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10617

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10617

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10617

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10617

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10617

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10617

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10617

commit: a7323c8

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 1, 2026

size-limit report 📦

Path Size
react full 12.1 KB (0%)
react minimal 9.07 KB (0%)

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/framework/vue/devtools.md`:
- Around line 68-73: Update the remaining framework name in the options block by
replacing the incorrect phrase "React Query devtools panel" with "Vue Query
devtools panel" where the `position` option is documented; ensure the text that
follows the `position?: "top" | "bottom" | "left" | "right"` option now reads
that it defaults to `bottom` and describes the position of the Vue Query
devtools panel to match the surrounding Vue-specific documentation for
`buttonPosition` and `position`.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c58c6718-22eb-49eb-9fb2-b053446916ef

📥 Commits

Reviewing files that changed from the base of the PR and between 0694696 and cf84aee.

📒 Files selected for processing (4)
  • docs/framework/preact/devtools.md
  • docs/framework/react/devtools.md
  • docs/framework/solid/devtools.md
  • docs/framework/vue/devtools.md

Comment thread docs/framework/vue/devtools.md Outdated
@sukvvon sukvvon changed the title docs(devtools): replace framework-specific logo with 'TanStack logo' to match the actual rendered component docs(devtools): replace framework-specific logo with 'TanStack logo' and replace Vue's 'React Query' panel leftover May 1, 2026
…and use adapter naming for 'devtools panel' in JSDoc
@sukvvon sukvvon changed the title docs(devtools): replace framework-specific logo with 'TanStack logo' and replace Vue's 'React Query' panel leftover docs(devtools): replace framework-specific logo with 'TanStack logo' and use adapter naming for 'devtools panel' in docs and JSDoc May 1, 2026
@sukvvon sukvvon changed the title docs(devtools): replace framework-specific logo with 'TanStack logo' and use adapter naming for 'devtools panel' in docs and JSDoc docs(devtools): align logo, panel, and 'buttonPosition' union descriptions across docs and JSDoc May 1, 2026
@sukvvon sukvvon changed the title docs(devtools): align logo, panel, and 'buttonPosition' union descriptions across docs and JSDoc docs(devtools): align logo, panel, and option union descriptions across docs and JSDoc May 1, 2026
@sukvvon sukvvon merged commit 868577d into main May 1, 2026
8 checks passed
@sukvvon sukvvon deleted the docs/devtools-replace-framework-specific-logo-with-tanstack-logo branch May 1, 2026 07:34
@github-actions github-actions Bot mentioned this pull request May 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant