fix(router-devtools): apply React toggle button props

[whizzkid1452]

Overview

The React wrapper passed className, but the Solid-rendered core only consumed class. The core also stored toggleButtonProps as a non-reactive value, and its default aria-label overrode the user-provided value.

• support React className alongside Solid's class on the devtools toggle button
• let custom button attributes such as aria-label override defaults
• propagate toggleButtonProps updates without reloading the page
• add browser regression coverage for initial and updated React props

The core now stores these props in a Solid signal and recreates only the toggle button when the prop object changes, so arbitrary HTML props update together.

Fixes #4658.

Checklist

• pnpm test:eslint -- --outputStyle=stream --skipRemoteCache
• pnpm test:types -- --outputStyle=stream --skipRemoteCache
• pnpm test:unit -- --outputStyle=stream --skipRemoteCache (no affected unit-test targets)
• pnpm build -- --outputStyle=stream --skipRemoteCache
• React basic Playwright suite (25 passed)

Summary by CodeRabbit

• New Features

  • React Router Devtools toggle button props can now be updated dynamically, including styling and accessibility labels.
  • The toggle button responds to runtime configuration changes.

• Bug Fixes

  • Improved handling of toggle button properties across supported integrations.

• Tests

  • Added end-to-end coverage verifying that updated toggle button properties are applied correctly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8bdf8530-9354-461a-94fc-554299387565

📥 Commits

Reviewing files that changed from the base of the PR and between 11a6a0d and c17d28d.

📒 Files selected for processing (5)

• .changeset/bright-routers-smile.md
• e2e/react-router/basic/src/main.tsx
• e2e/react-router/basic/tests/app.spec.ts
• packages/router-devtools-core/src/FloatingTanStackRouterDevtools.tsx
• packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx

---

📝 Walkthrough

Walkthrough

React router devtools now apply accessor-based toggle button props reactively, including React className and accessibility labels. The example app updates these props at runtime, with an end-to-end test covering the resulting button changes.

Changes

Reactive toggle button props

Layer / File(s)	Summary
Reactive toggle prop state packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx	Toggle button props are stored in a Solid signal, read during mounting, and updated when setOptions receives new props.
Floating toggle button rendering packages/router-devtools-core/src/FloatingTanStackRouterDevtools.tsx	The floating devtools button reads accessor-based props, supports both class and className, conditionally renders from resolved props, and invokes the custom click handler after opening devtools.
React integration and validation e2e/react-router/basic/src/main.tsx, e2e/react-router/basic/tests/app.spec.ts, .changeset/bright-routers-smile.md	The example toggles custom labels and classes at runtime, Playwright verifies the update, and a patch changeset records the package change.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ReactApp
  participant TanStackRouterDevtoolsCore
  participant FloatingTanStackRouterDevtools
  participant ToggleButton
  ReactApp->>TanStackRouterDevtoolsCore: update toggleButtonProps
  TanStackRouterDevtoolsCore->>FloatingTanStackRouterDevtools: publish reactive props
  FloatingTanStackRouterDevtools->>ToggleButton: render className and aria-label
  ToggleButton->>FloatingTanStackRouterDevtools: invoke onClick
  FloatingTanStackRouterDevtools->>FloatingTanStackRouterDevtools: set devtools open state

Loading

Suggested labels: package: router-devtools-core

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing React toggle button props for router devtools.
Linked Issues check	✅ Passed	The PR addresses #4658 by applying React toggleButtonProps like className and aria-label and making prop updates reactively apply.
Out of Scope Changes check	✅ Passed	The changes are scoped to router devtools prop handling, tests, and a related changeset with no unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}