diff --git a/.changeset/devtools-theme-subtrigger-classname.md b/.changeset/devtools-theme-subtrigger-classname.md new file mode 100644 index 0000000000..3a4dfd57b0 --- /dev/null +++ b/.changeset/devtools-theme-subtrigger-classname.md @@ -0,0 +1,5 @@ +--- +'@tanstack/query-devtools': patch +--- + +fix(query-devtools/Devtools): correct the Theme sub-trigger className from 'position' to 'theme' diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx index dfb66e496a..e391fe91fc 100644 --- a/packages/query-devtools/src/Devtools.tsx +++ b/packages/query-devtools/src/Devtools.tsx @@ -1192,7 +1192,7 @@ export const ContentView: Component = (props) => { class={cx( styles().settingsSubTrigger, 'tsqd-settings-menu-sub-trigger', - 'tsqd-settings-menu-sub-trigger-position', + 'tsqd-settings-menu-sub-trigger-theme', )} > Theme diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index a944d00fd5..4e42035c26 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -1078,12 +1078,13 @@ describe('Devtools', () => { key: 'Enter', }) - const themeTrigger = Array.from( - document.querySelectorAll( - '.tsqd-settings-menu-sub-trigger', - ), - ).find((el) => String(el.textContent).includes('Theme')) - expect(themeTrigger).not.toBeUndefined() + const themeTrigger = document.querySelector( + '.tsqd-settings-menu-sub-trigger-theme', + ) + expect(themeTrigger).not.toBeNull() + expect(themeTrigger).not.toBe( + document.querySelector('.tsqd-settings-menu-sub-trigger-position'), + ) fireEvent.keyDown(themeTrigger!, { key: 'ArrowRight' }) expect( @@ -1098,12 +1099,10 @@ describe('Devtools', () => { key: 'Enter', }) - const themeTrigger = Array.from( - document.querySelectorAll( - '.tsqd-settings-menu-sub-trigger', - ), - ).find((el) => String(el.textContent).includes('Theme')) - expect(themeTrigger).not.toBeUndefined() + const themeTrigger = document.querySelector( + '.tsqd-settings-menu-sub-trigger-theme', + ) + expect(themeTrigger).not.toBeNull() fireEvent.keyDown(themeTrigger!, { key: 'ArrowRight' }) const themeMenu = document.querySelector(