Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mixelburg wants to merge 7 commits into
base: next
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fe43b00
refactor(docs): extract SetValueButton shared component from control …
mixelburg Mar 22, 2026
dbc932a
Merge branch 'next' into refactor/extract-set-value-button
kasperpeulen Mar 23, 2026
a9d487b
refactor(docs): move SetValueButton into helpers.tsx, use children prop
mixelburg Apr 8, 2026
4bf1c9d
Merge branch 'next' into refactor/extract-set-value-button
JReinhold Apr 23, 2026
a0dd922
Merge branch 'next' of github.com:storybookjs/storybook into refactor…
JReinhold Apr 27, 2026
ae209b4
fix format and tests
JReinhold Apr 27, 2026
7776d43
Merge branch 'next' into refactor/extract-set-value-button
JReinhold May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 3 additions & 12 deletions code/addons/docs/src/blocks/controls/Boolean.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import type { FC } from 'react';
import React, { useCallback } from 'react';

import { Button } from 'storybook/internal/components';

import { opacify, transparentize } from 'polished';
import type { CSSObject, StorybookTheme } from 'storybook/theming';
import { srOnlyStyles, styled } from 'storybook/theming';

import { getControlId, getControlSetterButtonId } from './helpers';
import { getControlId, SetValueButton } from './helpers';
import type { BooleanConfig, BooleanValue, ControlProps } from './types';

const getBooleanControlStyles = (theme: StorybookTheme): CSSObject => ({
Expand Down Expand Up @@ -133,16 +131,9 @@ export const BooleanControl: FC<BooleanProps> = ({
const readonly = !!argType?.table?.readonly;
if (value === undefined) {
return (
<Button
ariaLabel={false}
variant="outline"
size="medium"
id={getControlSetterButtonId(name, storyId)}
onClick={onSetFalse}
disabled={readonly}
>
<SetValueButton name={name} storyId={storyId} onClick={onSetFalse} disabled={readonly}>
Set boolean
</Button>
</SetValueButton>
);
}
const controlId = getControlId(name, storyId);
Expand Down
15 changes: 4 additions & 11 deletions code/addons/docs/src/blocks/controls/Number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import type { ChangeEvent, FC } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';

import { Button, Form } from 'storybook/internal/components';
import { Form } from 'storybook/internal/components';

import { styled } from 'storybook/theming';

import { getControlId, getControlSetterButtonId } from './helpers';
import { getControlId, SetValueButton } from './helpers';
import type { ControlProps, NumberConfig, NumberValue } from './types';

const Wrapper = styled.label({
Expand Down Expand Up @@ -99,16 +99,9 @@ export const NumberControl: FC<NumberProps> = ({

if (value === undefined) {
return (
<Button
ariaLabel={false}
variant="outline"
size="medium"
id={getControlSetterButtonId(name, storyId)}
onClick={onForceVisible}
disabled={readonly}
>
<SetValueButton name={name} storyId={storyId} onClick={onForceVisible} disabled={readonly}>
Set number
</Button>
</SetValueButton>
);
}

Expand Down
11 changes: 3 additions & 8 deletions code/addons/docs/src/blocks/controls/Object.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { AddIcon, EditIcon, SubtractIcon } from '@storybook/icons';
import { cloneDeep } from 'es-toolkit/object';
import { styled, useTheme } from 'storybook/theming';

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

@coderabbitai coderabbitai Bot Apr 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

import { JsonTree } from './react-editable-json-tree';
import type { ControlProps, ObjectConfig, ObjectValue } from './types';

Expand Down Expand Up @@ -205,14 +205,9 @@ export const ObjectControl: FC<ObjectProps> = ({ name, storyId, value, onChange,

if (!hasData) {
return (
<Button
ariaLabel={false}
disabled={readonly}
id={getControlSetterButtonId(name, storyId)}
onClick={onForceVisible}
>
<SetValueButton name={name} storyId={storyId} onClick={onForceVisible} disabled={readonly}>
Set object
</Button>
</SetValueButton>
);
}

Expand Down
15 changes: 4 additions & 11 deletions code/addons/docs/src/blocks/controls/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import type { ChangeEvent, FC } from 'react';
import React, { useCallback, useState } from 'react';

import { Button, Form } from 'storybook/internal/components';
import { Form } from 'storybook/internal/components';

import { styled } from 'storybook/theming';

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

@coderabbitai coderabbitai Bot Apr 8, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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.

import type { ControlProps, TextConfig, TextValue } from './types';

export type TextProps = ControlProps<TextValue | undefined> & TextConfig;
Expand Down Expand Up @@ -45,16 +45,9 @@ export const TextControl: FC<TextProps> = ({

if (value === undefined) {
return (
<Button
ariaLabel={false}
variant="outline"
size="medium"
disabled={readonly}
id={getControlSetterButtonId(name, storyId)}
onClick={onForceVisible}
>
<SetValueButton name={name} storyId={storyId} onClick={onForceVisible} disabled={readonly}>
Set string
</Button>
</SetValueButton>
);
}

Expand Down
2 changes: 2 additions & 0 deletions code/addons/docs/src/blocks/controls/helpers.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @vitest-environment happy-dom

import { describe, expect, it } from 'vitest';

import { getControlId, getControlSetterButtonId } from './helpers';
Expand Down
32 changes: 32 additions & 0 deletions ...ddons/docs/src/blocks/controls/helpers.ts → ...dons/docs/src/blocks/controls/helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
import type { FC, ReactNode } from 'react';
import React from 'react';

import { Button } from 'storybook/internal/components';

/**
* Adds `control` prefix to make ID attribute more specific. Removes spaces because spaces are not
* allowed in ID attributes
Expand Down Expand Up @@ -31,3 +36,30 @@ export const getControlSetterButtonId = (value: string, storyId?: string) => {
const base = value.replace(/\s+/g, '-');
return storyId ? `set-${storyId}-${base}` : `set-${base}`;
};

interface SetValueButtonProps {
name: string;
storyId?: string;
children: ReactNode;
onClick: () => void;
disabled?: boolean;
}

export const SetValueButton: FC<SetValueButtonProps> = ({
name,
storyId,
children,
onClick,
disabled,
}) => (
<Button
ariaLabel={false}
variant="outline"
size="medium"
id={getControlSetterButtonId(name, storyId)}
onClick={onClick}
disabled={disabled}
>
{children}
</Button>
);
Loading