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.

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

Jump to bottom

Controls: Add disableSave parameter #28734

Merged
merged 2 commits into from
Jul 29, 2024
Merged

Controls: Add disableSave parameter #28734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc0f779
Controls: Add disableSave parameter
valentinpalkovic Jul 29, 2024
7452e1e
Rename disableSave to disableSaveFromUI in ControlsPanel
valentinpalkovic Jul 29, 2024
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
View file
Open in desktop
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
View file
Open in desktop
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.