Skip to content

fix(query-devtools/Devtools): correct the Theme sub-trigger className from 'position' to 'theme'#10811

Open
sukvvon wants to merge 2 commits into
mainfrom
fix/query-devtools-theme-subtrigger-classname
Open

fix(query-devtools/Devtools): correct the Theme sub-trigger className from 'position' to 'theme'#10811
sukvvon wants to merge 2 commits into
mainfrom
fix/query-devtools-theme-subtrigger-classname

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 28, 2026

🎯 Changes

The Theme sub-trigger in the devtools settings menu carried the marker class tsqd-settings-menu-sub-trigger-position — the same class the Position sub-trigger already uses (Devtools.tsx:1114 vs Devtools.tsx:1195). Both sub-triggers therefore matched any consumer rule targeting .tsqd-settings-menu-sub-trigger-position, and .tsqd-settings-menu-sub-trigger-theme matched nothing at all, so the two sub-triggers could not be styled independently from user CSS.

Rename the Theme sub-trigger's marker class to tsqd-settings-menu-sub-trigger-theme, lining it up with the existing -position and -disabled-queries markers (each derived from the sub-trigger's visible label).

Also tighten the two settings menu cases that exercise the Theme sub-trigger:

  • They previously had to walk every .tsqd-settings-menu-sub-trigger element and filter by textContent because the class collision made a direct selector ambiguous. With the marker class fixed, both cases now query .tsqd-settings-menu-sub-trigger-theme directly.
  • The "open Theme sub-menu" case additionally asserts the resolved element is not the same as .tsqd-settings-menu-sub-trigger-position, so a future revert that puts the class back on Theme would fail loudly here instead of silently re-collapsing the two triggers.

✅ 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).

Summary by CodeRabbit

  • Bug Fixes
    • Fixed the Theme submenu trigger in the devtools settings so it uses a dedicated CSS class. This ensures the Theme trigger can be styled and targeted independently from the Position trigger and corrects related UI/tests behavior.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 28, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fe9cc315-0086-4318-9b35-48d1315ec9a8

📥 Commits

Reviewing files that changed from the base of the PR and between eca1d82 and 66e7579.

📒 Files selected for processing (3)
  • .changeset/devtools-theme-subtrigger-classname.md
  • packages/query-devtools/src/Devtools.tsx
  • packages/query-devtools/src/__tests__/Devtools.test.tsx
✅ Files skipped from review due to trivial changes (1)
  • .changeset/devtools-theme-subtrigger-classname.md
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/query-devtools/src/Devtools.tsx
  • packages/query-devtools/src/tests/Devtools.test.tsx

📝 Walkthrough

Walkthrough

This PR fixes a CSS class name for the Devtools settings Theme sub-trigger, updating component and tests to use tsqd-settings-menu-sub-trigger-theme, and adds a patch changeset entry.

Changes

Theme sub-trigger CSS class correction

Layer / File(s) Summary
Theme sub-trigger CSS class fix and test validation
packages/query-devtools/src/Devtools.tsx, packages/query-devtools/src/__tests__/Devtools.test.tsx
The Theme submenu trigger's class is changed to tsqd-settings-menu-sub-trigger-theme. Tests select the Theme trigger by the new class, assert it's non-null, and verify it's not the Position trigger.
Changeset documentation
.changeset/devtools-theme-subtrigger-classname.md
Adds a patch-level changeset noting the Theme sub-trigger className correction for @tanstack/query-devtools.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

package: query-devtools

Poem

🐰 A trigger wore a class not its own,
I hopped in to mend the styling shown.
Theme now stands apart, tidy and bright,
Tests nod assent, changeset in sight.
Hoppity hops — the devtools look right!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: fixing the Theme sub-trigger className from 'position' to 'theme', which is the primary focus of the changeset.
Description check ✅ Passed The description fully completes the required template with detailed changes, proper checklist completion, and clear release impact documentation.
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.

✏️ 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 fix/query-devtools-theme-subtrigger-classname

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 28, 2026

View your CI Pipeline Execution ↗ for commit eca1d82

Command Status Duration Result
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 30s View ↗

☁️ Nx Cloud last updated this comment at 2026-05-28 01:22:34 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 28, 2026

🚀 Changeset Version Preview

2 package(s) bumped directly, 23 bumped as dependents.

🟩 Patch bumps

Package Version Reason
@tanstack/lit-query 0.2.6 → 0.2.7 Changeset
@tanstack/query-devtools 5.100.14 → 5.100.15 Changeset
@tanstack/angular-query-experimental 5.100.14 → 5.100.15 Dependent
@tanstack/angular-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/eslint-plugin-query 5.100.14 → 5.100.15 Dependent
@tanstack/preact-query 5.100.14 → 5.100.15 Dependent
@tanstack/preact-query-devtools 5.100.14 → 5.100.15 Dependent
@tanstack/preact-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/query-async-storage-persister 5.100.14 → 5.100.15 Dependent
@tanstack/query-broadcast-client-experimental 5.100.14 → 5.100.15 Dependent
@tanstack/query-core 5.100.14 → 5.100.15 Dependent
@tanstack/query-persist-client-core 5.100.14 → 5.100.15 Dependent
@tanstack/query-sync-storage-persister 5.100.14 → 5.100.15 Dependent
@tanstack/react-query 5.100.14 → 5.100.15 Dependent
@tanstack/react-query-devtools 5.100.14 → 5.100.15 Dependent
@tanstack/react-query-next-experimental 5.100.14 → 5.100.15 Dependent
@tanstack/react-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/solid-query 5.100.14 → 5.100.15 Dependent
@tanstack/solid-query-devtools 5.100.14 → 5.100.15 Dependent
@tanstack/solid-query-persist-client 5.100.14 → 5.100.15 Dependent
@tanstack/svelte-query 6.1.33 → 6.1.34 Dependent
@tanstack/svelte-query-devtools 6.1.33 → 6.1.34 Dependent
@tanstack/svelte-query-persist-client 6.1.33 → 6.1.34 Dependent
@tanstack/vue-query 5.100.14 → 5.100.15 Dependent
@tanstack/vue-query-devtools 6.1.33 → 6.1.34 Dependent

@sukvvon sukvvon force-pushed the fix/query-devtools-theme-subtrigger-classname branch from eca1d82 to 520463b Compare May 28, 2026 01:12
@sukvvon sukvvon self-assigned this May 28, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 28, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10811

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 66e7579

@github-actions
Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
react full 12.11 KB (0%)
react minimal 9.08 KB (0%)

@sukvvon sukvvon requested a review from TkDodo May 28, 2026 05:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant