Manager: Remove deprecated active prop warning in ZoomButton

[yatishgoel]

Closes #33689

What I did

Replaced the deprecated active prop on Button with ToggleButton using the pressed prop in the Zoom tool
component.

Changes:

• Changed import from Button to ToggleButton
• Updated ZoomButton styled component to extend ToggleButton instead of Button
• Replaced active={value !== INITIAL_ZOOM_LEVEL} with pressed={value !== INITIAL_ZOOM_LEVEL}

This removes the deprecation warning that appears in the browser console on fresh Storybook installs:
The active prop on Button is deprecated and will be removed in Storybook 11. Use specialized components like
ToggleButton or Select instead.

Checklist for Contributors

Testing

1. Run a sandbox: yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in browser
3. Navigate to any story and use the zoom controls in the toolbar
4. Verify the zoom percentage button works and no deprecation warnings appear in the console

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox: yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in browser
3. Navigate to any story and use the zoom controls in the toolbar
4. Verify the zoom percentage button works and no deprecation warnings appear in the console

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Refactor
  • Replaced the zoom control’s underlying toggle component and mapped its state prop to the new API.
• Accessibility
  • Adjusted accessibility role/interaction for the zoom control in stories/tests (role changed to "switch").
• Notes
  • No visible UI changes; zoom behavior remains the same.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Swaps Button for ToggleButton in the zoom tool component and replaces the active prop with pressed; updates the story test to query the control as a switch instead of a button. Also a single-line package.json change.

Changes

Cohort / File(s)	Summary
UI Component Refactor code/core/src/manager/components/preview/tools/zoom.tsx	Replaced Button import with ToggleButton; ZoomButton now renders ToggleButton and uses pressed instead of active (prop name mapping only).
Story Interaction Update code/core/src/manager/components/preview/tools/zoom.stories.tsx	Changed accessibility query in the story/test from role button to role switch when opening the zoom control, altering how the element is selected before click.
Manifest package.json	Minor single-line change (+1/-1).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

✨ Finishing touches

• 📝 Generate docstrings

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

---

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

code/core/src/manager/components/preview/tools/zoom.tsx (1)

147-154: Set ariaLabel={false} since the button has text content.

The pressed prop migration is correct, but the ariaLabel prop doesn't follow codebase conventions. Buttons with text content should set ariaLabel={false} to indicate that the button's accessible name is derived from its content (the percentage). The ariaLabel="Change zoom level" string should be removed.

Code change needed:

      <ZoomButton
        padding="small"
        variant="ghost"
        ariaLabel={false}
        pressed={value !== INITIAL_ZOOM_LEVEL}
      >
        {Math.round(value * 100)}%
      </ZoomButton>

[valentinpalkovic]

Hi @yatishgoel

Thank you for your contribution!

Could you please fix the failing test cases and fix the linting errors?
https://app.circleci.com/pipelines/github/storybookjs/storybook/113773/workflows/bdc9ab8c-c7ca-4c46-9bc6-4fa6cf970d47/jobs/1051864

[valentinpalkovic]

The failure in ci/circleci: vue-v3--vite---typescript---dev is a flake. You can ignore it.