isCodeExpanded => docs.source.state

addons/docs/docs/docspage.md

@@ -13,6 +13,7 @@ When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config d
   - [Remixing DocsPage using doc blocks](#remixing-docspage-using-doc-blocks)
 - [Story file names](#story-file-names)
 - [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
+- [Show/Hide code](#showhide-code)
 - [More resources](#more-resources)
 
 ## Motivation
@@ -185,23 +186,21 @@ With that function, anyone using the docs addon for `@storybook/vue` can make th
 
 ## Show/Hide code
 
-By default, the code block under the Preview is collapsed.
+By default, the code block under the Preview is collapsed and you have to click on "Show code" to reveal it.
 
-You have to click on "Show code" to reveal it.
-
-You can override this default behavior:
+You can override this default behavior in `.storybook/preview.js` (or in any of your components/stories):
 
 ```js
-import { addParameters } from '@storybook/react';
-
-addParameters({
+export const parameters = {
   docs: {
-    isCodeExpanded: true,
+    source: {
+      state: 'open',
+    },
   },
-});
+};
 ```
 
-With that flag, now the docs addon will show all code blocks by default.
+With that flag, now the docs addon will show all code blocks open by default.
 
 ## More resources
 

addons/docs/src/blocks/Canvas.tsx

@@ -22,16 +22,13 @@ type CanvasProps = PurePreviewProps & {
 };
 
 const getPreviewProps = (
-  {
-    withSource = SourceState.CLOSED,
-    mdxSource,
-    children,
-    ...props
-  }: CanvasProps & { children?: ReactNode },
+  { withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode },
   docsContext: DocsContextProps,
   sourceContext: SourceContextProps
 ): PurePreviewProps => {
-  if (withSource === SourceState.NONE) {
+  const { mdxComponentMeta, mdxStoryNameToKey, parameters } = docsContext;
+  const sourceState = withSource || parameters?.docs?.source?.state || SourceState.CLOSED;
+  if (sourceState === SourceState.NONE) {
     return props;
   }
   if (mdxSource) {
@@ -44,7 +41,6 @@ const getPreviewProps = (
   const stories = childArray.filter(
     (c: ReactElement) => c.props && (c.props.id || c.props.name)
   ) as ReactElement[];
-  const { mdxComponentMeta, mdxStoryNameToKey, parameters } = docsContext;
   const targetIds = stories.map(
     (s) =>
       s.props.id ||
@@ -57,7 +53,7 @@ const getPreviewProps = (
   return {
     ...props, // pass through columns etc.
     withSource: sourceProps,
-    isExpanded: withSource === SourceState.OPEN || parameters?.docs?.isCodeExpanded,
+    isExpanded: sourceState === SourceState.OPEN,
   };
 };
 

examples/official-storybook/stories/addon-controls.stories.tsx

@@ -32,7 +32,9 @@ export default {
   parameters: {
     chromatic: { disable: true },
     docs: {
-      isCodeExpanded: true,
+      source: {
+        state: 'open',
+      },
     },
   },
 };