Addon-docs: Extract SetValueButton shared component from control components by mixelburg · Pull Request #34263 · storybookjs/storybook

mixelburg · 2026-03-22T22:20:04Z

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
- Unified the “Set …” buttons across Boolean, Number, Object, and Text controls so empty/undefined values now present a consistent, accessible button to set values. Standardizes labels, disabled-state handling, and click behavior for a more uniform user experience.
Tests
- Switched the control tests to a DOM-like test environment for more reliable UI behavior testing.

…components The 'Set X' button pattern (rendered when a control value is undefined) was duplicated verbatim across four control files: Boolean, Number, Text, and Object. The only differences were the button label and the onClick handler. Extract a shared SetValueButton component to eliminate the repetition. As a side effect, Object's button now consistently uses variant='outline' and size='medium', matching the other three controls. Closes storybookjs#34211

coderabbitai · 2026-03-22T22:23:36Z

📝 Walkthrough

Walkthrough

Replaces inline control-setter buttons in Boolean, Number, Object, and Text controls with a new exported SetValueButton helper; adds SetValueButton export and a test environment directive for helpers tests. Imports and button props adjusted accordingly.

Changes

Cohort / File(s)	Summary
Control Components `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`	Replaced inline `Button` used in `value === undefined` / no-data fallbacks with `SetValueButton`. Removed direct `Button` and `getControlSetterButtonId` usage; preserved click handlers and `disabled={readonly}` and moved labels into `SetValueButton` children.
Helper Module `code/addons/docs/src/blocks/controls/helpers.tsx`	Added exported `SetValueButton` component (props: `name`, optional `storyId`, `children`, `onClick`, optional `disabled`) that wraps the internal `Button` and computes the control-setter `id` via `getControlSetterButtonId`.
Tests `code/addons/docs/src/blocks/controls/helpers.test.ts`	Added Vitest environment directive (`//` @vitest-environment `happy-dom`) at the top of the test file; test logic unchanged.

Sequence Diagram(s)

(Skipped — changes are straightforward UI rendering swaps and a small new helper; no new multi-component control flow requiring a sequence diagram.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Core: Significantly improve Storybook's own accessibility #32458

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

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

JReinhold

Thanks. 🙏 Added a few suggestions.

- Move SetValueButton component directly into helpers.tsx (renamed from .ts) - Replace label prop with children for more idiomatic React composition - Update all consumers (Boolean, Object, Text, Number) to use merged import - Delete separate SetValueButton.tsx file Addresses review feedback from JReinhold on storybookjs#34263

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/addons/docs/src/blocks/controls/Text.tsx`:
- Line 8: The relative import of helper symbols getControlId and SetValueButton
in Text.tsx must include the explicit file extension; update the import
statement for './helpers' to include the correct extension that matches the
helpers module (e.g., './helpers.ts' or './helpers.tsx') so the import of
getControlId and SetValueButton uses an explicit extension per repo rules.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 66232d3d-25a0-4bf0-8fec-ca45267b9707

📥 Commits

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

📒 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/Text.tsx
code/addons/docs/src/blocks/controls/helpers.tsx

✅ Files skipped from review due to trivial changes (1)

code/addons/docs/src/blocks/controls/Object.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

code/addons/docs/src/blocks/controls/Number.tsx
code/addons/docs/src/blocks/controls/Boolean.tsx

coderabbitai · 2026-04-08T21:17:05Z

 import { styled } from 'storybook/theming';

-import { getControlId, getControlSetterButtonId } from './helpers';
+import { getControlId, SetValueButton } from './helpers';


⚠️ Potential issue | 🟡 Minor

Use explicit extension for this relative import.

Line 8 should include the file extension to match repository import rules.

Suggested fix

-import { getControlId, SetValueButton } from './helpers'; +import { getControlId, SetValueButton } from './helpers.tsx';

As per coding guidelines: **/*.{ts,tsx,js,jsx} requires explicit file extensions for relative code imports/exports.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

import { getControlId, SetValueButton } from './helpers';

import { getControlId, SetValueButton } from './helpers.tsx';

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@code/addons/docs/src/blocks/controls/Text.tsx` at line 8, The relative import of helper symbols getControlId and SetValueButton in Text.tsx must include the explicit file extension; update the import statement for './helpers' to include the correct extension that matches the helpers module (e.g., './helpers.ts' or './helpers.tsx') so the import of getControlId and SetValueButton uses an explicit extension per repo rules.

storybook-app-bot · 2026-04-23T14:05:44Z

Package Benchmarks

^{Commit: 7776d43, ran on 5 May 2026 at 11:29:32 UTC}

No significant changes detected, all good. 👏

…/extract-set-value-button

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/addons/docs/src/blocks/controls/Object.tsx`:
- Line 11: The import statement in Object.tsx uses a bare relative path; update
it to include the explicit file extension per repo rules by importing from the
helpers file with its extension (e.g., replace the current import of
getControlId and SetValueButton from './helpers' with './helpers.ts' or
'./helpers.tsx' as appropriate) so the symbols getControlId and SetValueButton
are resolved with an explicit extension.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: efe2c828-f29b-4106-aa0f-7623bc44f703

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf1c9d and ae209b4.

📒 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/Text.tsx
code/addons/docs/src/blocks/controls/helpers.test.ts

✅ Files skipped from review due to trivial changes (1)

code/addons/docs/src/blocks/controls/helpers.test.ts

🚧 Files skipped from review as they are similar to previous changes (2)

code/addons/docs/src/blocks/controls/Boolean.tsx
code/addons/docs/src/blocks/controls/Number.tsx

coderabbitai · 2026-04-27T11:19:52Z

 import { styled, useTheme } from 'storybook/theming';

-import { getControlId, getControlSetterButtonId } from './helpers';
+import { getControlId, SetValueButton } from './helpers';


🛠️ Refactor suggestion | 🟠 Major

Use explicit extension for this relative import.

The import path ./helpers should include the file extension to match repository import rules.

Suggested fix

-import { getControlId, SetValueButton } from './helpers'; +import { getControlId, SetValueButton } from './helpers.tsx';

As per coding guidelines: **/*.{ts,tsx,js,jsx} requires "explicit file extensions for relative code imports and exports in TypeScript source, such as './foo.ts' or './bar.tsx'".

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

import { getControlId, SetValueButton } from './helpers';

import { getControlId, SetValueButton } from './helpers.tsx';

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@code/addons/docs/src/blocks/controls/Object.tsx` at line 11, The import statement in Object.tsx uses a bare relative path; update it to include the explicit file extension per repo rules by importing from the helpers file with its extension (e.g., replace the current import of getControlId and SetValueButton from './helpers' with './helpers.ts' or './helpers.tsx' as appropriate) so the symbols getControlId and SetValueButton are resolved with an explicit extension.

Merge branch 'next' into refactor/extract-set-value-button

dbc932a

valentinpalkovic added this to Core Team Projects Mar 24, 2026

valentinpalkovic moved this to Empathy Queue (prioritized) in Core Team Projects Mar 24, 2026

JReinhold requested changes Mar 25, 2026

View reviewed changes

Comment thread code/addons/docs/src/blocks/controls/SetValueButton.tsx Outdated

Comment thread code/addons/docs/src/blocks/controls/SetValueButton.tsx Outdated

JReinhold self-assigned this Mar 25, 2026

JReinhold moved this from Empathy Queue (prioritized) to In Progress in Core Team Projects Mar 27, 2026

coderabbitai Bot reviewed Apr 8, 2026

View reviewed changes

Merge branch 'next' into refactor/extract-set-value-button

4bf1c9d

JReinhold approved these changes Apr 23, 2026

View reviewed changes

JReinhold changed the title ~~refactor(docs): extract SetValueButton shared component from control components~~ Addon-docs: Extract SetValueButton shared component from control components Apr 23, 2026

JReinhold added maintenance User-facing maintenance tasks addon: docs ci:normal labels Apr 23, 2026

JReinhold added 2 commits April 27, 2026 13:17

Merge branch 'next' of github.com:storybookjs/storybook into refactor…

a0dd922

…/extract-set-value-button

fix format and tests

ae209b4

coderabbitai Bot reviewed Apr 27, 2026

View reviewed changes

Merge branch 'next' into refactor/extract-set-value-button

7776d43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Addon-docs: Extract SetValueButton shared component from control components#34263

Addon-docs: Extract SetValueButton shared component from control components#34263
mixelburg wants to merge 7 commits into
storybookjs:nextfrom
mixelburg:refactor/extract-set-value-button

mixelburg commented Mar 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 22, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

JReinhold left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Apr 8, 2026

Uh oh!

storybook-app-bot Bot commented Apr 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Apr 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	import { getControlId, SetValueButton } from './helpers';
	import { getControlId, SetValueButton } from './helpers.tsx';

Uh oh!

Conversation

mixelburg commented Mar 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

JReinhold left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

storybook-app-bot Bot commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mixelburg commented Mar 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 22, 2026 •

edited

Loading

storybook-app-bot Bot commented Apr 23, 2026 •

edited

Loading