refactor(sidebar-toggle-button): migrate SidebarToggleButton from Flo…

[bonchevskyi]

Convert SidebarToggleButton component to TypeScript

This PR converts src/components/sidebar-toggle-button from JavaScript with Flow to TypeScript.

Changes

• Converted SidebarToggleButton.js to SidebarToggleButton.tsx with exported SidebarToggleButtonProps interface
• Converted index.js to index.ts, re-exporting the component and its types
• Converted SidebarToggleButton.stories.js to SidebarToggleButton.stories.tsx
• Converted __tests__/SidebarToggleButton.test.js to SidebarToggleButton.test.tsx
• Created .js.flow files for backward compatibility

Testing

• Ran tests for src/components/sidebar-toggle-button; all 8 pass
• yarn lint:ts and flow check pass
• Manually verified in Storybook (Components/SidebarToggleButton) that behavior is unchanged

Summary by CodeRabbit

• New Features

  • Added a sidebar toggle button with open and closed states.
  • Added localized labels and directional tooltips.
  • Added support for legacy and modernized layouts with responsive icons and sizing.
  • Added click handling and improved interaction behavior.

• Tests

  • Updated component test typing without changing test behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cdf38ae9-5788-48bc-aa8e-0dc390697138

📥 Commits

Reviewing files that changed from the base of the PR and between 84b90a7 and 9ff5877.

📒 Files selected for processing (6)

• src/components/sidebar-toggle-button/SidebarToggleButton.js.flow
• src/components/sidebar-toggle-button/SidebarToggleButton.stories.tsx
• src/components/sidebar-toggle-button/SidebarToggleButton.tsx
• src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.tsx
• src/components/sidebar-toggle-button/index.js.flow
• src/components/sidebar-toggle-button/index.ts

💤 Files with no reviewable changes (1)

• src/components/sidebar-toggle-button/SidebarToggleButton.stories.tsx

---

Walkthrough

The PR adds TypeScript and Flow implementations of SidebarToggleButton. It supports localized labels, directional behavior, modern and legacy render paths, compatibility exports, typed test callbacks, and removal of an obsolete story annotation.

Changes

Sidebar toggle component

Layer / File(s)	Summary
Typed component contract src/components/sidebar-toggle-button/SidebarToggleButton.tsx, src/components/sidebar-toggle-button/index.ts	Defines typed props and exports SidebarToggleButton with SidebarToggleButtonProps.
State and rendering paths src/components/sidebar-toggle-button/SidebarToggleButton.tsx, src/components/sidebar-toggle-button/SidebarToggleButton.js.flow	Adds localized state, directional tooltips and icons, mouse-down handling, responsive modern rendering, and legacy rendering.
Compatibility exports and typed tests src/components/sidebar-toggle-button/index.js.flow, src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.tsx	Adds the Flow re-export and explicit parameter types in parameterized tests.

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

Possibly related PRs

• box/box-ui-elements#4373: Adds the modernized feature-flagged Blueprint rendering path for this component.
• box/box-ui-elements#4390: Ports the modernized SidebarToggleButton implementation to TypeScript and Flow.
• box/box-ui-elements#4758: Uses the same Flow-to-TypeScript migration pattern with compatibility exports, stories, and tests.

Suggested labels: ready-to-merge

Suggested reviewers: greg-in-a-box, jchan106, tjuanitas

Poem

A bunny clicks the toggle bright,
With arrows pointing left and right.
Modern buttons bloom in view,
Legacy paths still hop through.
Typed tests thump their paws: “All right!”

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the migration of SidebarToggleButton from Flow to TypeScript.
Description check	✅ Passed	The description explains the migration, lists the affected files, and documents successful tests and manual verification.
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.

✨ 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.}

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-11 15:19 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ✅ Checks passed · in-place
• ✅ Merged — 2026-08-11 15:51 UTC · at 65a114ad3e2f7356a5edf6d6f1795845f5cf452f · squash

This pull request spent 32 minutes in the queue, including 11 minutes 53 seconds running CI.

Required conditions to merge

• github-review-approved [🛡 GitHub branch protection]
  • refactor(sidebar-toggle-button): migrate SidebarToggleButton from Flo… #4759
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request