fix(query-devtools): Update default devtools button position to bottom-right 🌱 (TanStack#6720)

* docs: Update default position

* fix: Default btn position for React.js

* fix: Default btn position for Solid.js

* fix: Default btn position for Svelte

* fix: Default btn position for Vue.js

Author: agustints

docs/angular/devtools.md

@@ -46,7 +46,7 @@ import { Component } from '@angular/core';
 - `initialIsOpen: Boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
-  - Defaults to `bottom-left`
+  - Defaults to `bottom-right`
   - The position of the TanStack logo to open and close the devtools panel
 - `position?: "top" | "bottom" | "left" | "right"`
   - Defaults to `bottom`

docs/react/devtools.md

@@ -57,7 +57,7 @@ function App() {
 - `initialIsOpen: Boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
-  - Defaults to `bottom-left`
+  - Defaults to `bottom-right`
   - The position of the React Query logo to open and close the devtools panel
 - `position?: "top" | "bottom" | "left" | "right"`
   - Defaults to `bottom`

docs/solid/devtools.md

@@ -53,7 +53,7 @@ function App() {
 - `initialIsOpen: Boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
-  - Defaults to `bottom-left`
+  - Defaults to `bottom-right`
   - The position of the Solid Query logo to open and close the devtools panel
 - `position?: "top" | "bottom" | "left" | "right"`
   - Defaults to `bottom`

docs/vue/devtools.md

@@ -49,7 +49,7 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
 - `initialIsOpen: Boolean`
   - Set this `true` if you want the dev tools to default to being open
 - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
-  - Defaults to `bottom-left`
+  - Defaults to `bottom-right`
   - The position of the React Query logo to open and close the devtools panel
 - `position?: "top" | "bottom" | "left" | "right"`
   - Defaults to `bottom`

packages/react-query-devtools/src/devtools.tsx

@@ -17,7 +17,7 @@ export interface DevtoolsOptions {
   /**
    * The position of the React Query logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-   * Defaults to 'bottom-left'.
+   * Defaults to 'bottom-right'.
    */
   buttonPosition?: DevtoolsButtonPosition
   /**

packages/solid-query-devtools/src/devtools.tsx

@@ -27,7 +27,7 @@ interface DevtoolsOptions {
   /**
    * The position of the React Query logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-   * Defaults to 'bottom-left'.
+   * Defaults to 'bottom-right'.
    */
   buttonPosition?: DevtoolsButtonPosition
   /**

packages/svelte-query-devtools/src/Devtools.svelte

@@ -11,7 +11,7 @@
   } from '@tanstack/query-devtools'
 
   export let initialIsOpen = false
-  export let buttonPosition: DevtoolsButtonPosition = 'bottom-left'
+  export let buttonPosition: DevtoolsButtonPosition = 'bottom-right'
   export let position: DevtoolsPosition = 'bottom'
   export let client: QueryClient = useQueryClient()
   export let errorTypes: Array<DevToolsErrorType> = []

packages/vue-query-devtools/src/devtools.vue

@@ -21,7 +21,7 @@ const devtools = new TanstackQueryDevtools({
 })
 
 watchEffect(() => {
-  devtools.setButtonPosition(props.buttonPosition || 'bottom-left')
+  devtools.setButtonPosition(props.buttonPosition || 'bottom-right')
   devtools.setPosition(props.position || 'bottom')
   devtools.setInitialIsOpen(props.initialIsOpen)
   devtools.setErrorTypes(props.errorTypes || [])

packages/vue-query-devtools/src/types.ts

@@ -13,7 +13,7 @@ export interface DevtoolsOptions {
   /**
    * The position of the React Query logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-   * Defaults to 'bottom-left'.
+   * Defaults to 'bottom-right'.
    */
   buttonPosition?: DevtoolsButtonPosition
   /**