Skip to content
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.

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

Controls: Add disableSave parameter #28734

Merged
merged 2 commits into from
Jul 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 11 additions & 4 deletions code/addons/controls/src/ControlsPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ interface ControlsParameters {
sort?: SortType;
expanded?: boolean;
presetColors?: PresetColor[];
disableSaveFromUI?: boolean;
}

interface ControlsPanelProps {
Expand All @@ -46,7 +47,12 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
const [args, updateArgs, resetArgs, initialArgs] = useArgs();
const [globals] = useGlobals();
const rows = useArgTypes();
const { expanded, sort, presetColors } = useParameter<ControlsParameters>(PARAM_KEY, {});
const {
expanded,
sort,
presetColors,
disableSaveFromUI = false,
} = useParameter<ControlsParameters>(PARAM_KEY, {});
const { path, previewInitialized } = useStorybookState();

// If the story is prepared, then show the args table
Expand Down Expand Up @@ -84,9 +90,10 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
sort={sort}
isLoading={isLoading}
/>
{hasControls && hasUpdatedArgs && global.CONFIG_TYPE === 'DEVELOPMENT' && (
<SaveStory {...{ resetArgs, saveStory, createStory }} />
)}
{hasControls &&
hasUpdatedArgs &&
global.CONFIG_TYPE === 'DEVELOPMENT' &&
disableSaveFromUI !== true && <SaveStory {...{ resetArgs, saveStory, createStory }} />}
</AddonWrapper>
);
};
12 changes: 12 additions & 0 deletions docs/essentials/controls.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,10 @@ You can also update a control's value, then save the changes to the story. The s

<Video src="../_assets/get-started/edit-story-from-controls-optimized.mp4" />

### Disable creating and editing of stories

If you don't want to allow the creation or editing of stories from the Controls panel, you can disable this feature by setting the `disableSaveFromUI` parameter to `true` in the `parameters.controls` parameter in your `.storybook/preview.js` file.

## Configuration

The Controls addon can be configured in two ways:
Expand Down Expand Up @@ -484,3 +488,11 @@ Specifies how the controls are sorted.
* **none**: Unsorted, displayed in the same order the arg types are processed in
* **alpha**: Sorted alphabetically, by the arg type's name
* **requiredFirst**: Same as `alpha`, with any required arg types displayed first

#### `disableSaveFromUI`

Type: `boolean`

Default: `false`

Disable the ability to create or edit stories from the Controls panel.