refactor(docs): extract SetValueButton shared component from control components

[mixelburg]

Summary

The 'Set X' button pattern was duplicated across four control components in code/addons/docs/src/blocks/controls/. All four shared the same Button props (ariaLabel={false}, variant='outline', size='medium') with only the onClick handler and label text differing.

Closes #34211

Changes

• New file: SetValueButton.tsx — a small shared component that accepts name, storyId, label, onClick, and disabled
• Boolean.tsx, Number.tsx, Text.tsx, Object.tsx — replaced the duplicated Button blocks with <SetValueButton />

Bonus: Object's button now consistently uses variant='outline' and size='medium', matching the other three controls (previously these props were missing from the Object control's button).

Impact

Any future change to the button's appearance, accessibility attributes, or sizing now only needs to be made in one place.

Summary by CodeRabbit

• Refactor
  • Consolidated button rendering logic across multiple control blocks into a dedicated reusable component for improved code maintainability and consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: da2e74d0-3bf6-42c7-82cc-06ce8cb44220

📥 Commits

Reviewing files that changed from the base of the PR and between 87733f1 and fe43b00.

📒 Files selected for processing (5)

• code/addons/docs/src/blocks/controls/Boolean.tsx
• code/addons/docs/src/blocks/controls/Number.tsx
• code/addons/docs/src/blocks/controls/Object.tsx
• code/addons/docs/src/blocks/controls/SetValueButton.tsx
• code/addons/docs/src/blocks/controls/Text.tsx

---

📝 Walkthrough

Walkthrough

Extracted repeated "set value" button rendering logic from control components (Boolean, Number, Object, Text) into a new SetValueButton component. Each control now delegates button creation to the centralized component, eliminating direct Button and getControlSetterButtonId usage across these files.

Changes

Cohort / File(s)	Summary
New SetValueButton Component code/addons/docs/src/blocks/controls/SetValueButton.tsx	Added new exported component SetValueButton with props interface defining name, optional storyId, label, onClick, and optional disabled. Encapsulates button rendering with fixed styling (variant="outline", size="medium") and id generation via getControlSetterButtonId.
Control Components Using SetValueButton code/addons/docs/src/blocks/controls/Boolean.tsx, code/addons/docs/src/blocks/controls/Number.tsx, code/addons/docs/src/blocks/controls/Object.tsx, code/addons/docs/src/blocks/controls/Text.tsx	Updated each control's "undefined value" rendering path to use SetValueButton instead of inline Button component. Removed imports of Button and getControlSetterButtonId; added SetValueButton import. Each now passes name, storyId, control-specific label, appropriate onClick handler, and disabled={readonly} to the new component.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• storybookjs/storybook#32458: Also modifies Boolean/Number/Object/Text control components; this PR centralizes the "set value" button UI pattern that the related PR addresses through ariaLabel prop adjustments.

---

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 and usage tips.}

Tip

CodeRabbit can scan for known vulnerabilities in your dependencies using OSV Scanner.

OSV Scanner will automatically detect and report security vulnerabilities in your project's dependencies. No additional configuration is required.

[JReinhold]

Thanks. 🙏 Added a few suggestions.

[JReinhold]

Can you move this into the ./helpers file directly?

[JReinhold]

let's use the children prop here instead of a label prop