Controls: Add disableSave parameter

code/addons/controls/src/ControlsPanel.tsx

@@ -34,6 +34,7 @@ interface ControlsParameters {
   sort?: SortType;
   expanded?: boolean;
   presetColors?: PresetColor[];
+  disableSave?: boolean;
 }
 
 interface ControlsPanelProps {
@@ -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,
+    disableSave = false,
+  } = useParameter<ControlsParameters>(PARAM_KEY, {});
   const { path, previewInitialized } = useStorybookState();
 
   // If the story is prepared, then show the args table
@@ -70,6 +76,8 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
     [args, initialArgs]
   );
 
+  console.log({ disableSave });
+
   return (
     <AddonWrapper>
       <ArgsTable
@@ -84,9 +92,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' &&
+        disableSave !== true && <SaveStory {...{ resetArgs, saveStory, createStory }} />}
     </AddonWrapper>
   );
 };

docs/essentials/controls.mdx

@@ -260,6 +260,12 @@ 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 `disableSave` parameter to `true` in the `parameters.controls` parameter in your `.storybook/preview.js` file.
+
+{/* prettier-ignore-start */}
+
 ## Configuration
 
 The Controls addon can be configured in two ways:
@@ -484,3 +490,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
+
+#### `disableSave`
+
+Type: `boolean`
+
+Default: `false`
+
+Disable the ability to create or edit stories from the Controls panel.