diff --git a/MIGRATION.md b/MIGRATION.md index 7ab60984a274..5523d078bdbc 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -434,7 +434,7 @@ As part of our ongoing efforts to improve the testability and debuggability of S In development mode, React and other libraries often include additional checks and warnings that help catch potential issues early. These checks are usually stripped out in production builds to optimize performance. However, when running tests or debugging issues in a built Storybook, having these additional checks can be incredibly valuable. One such feature is React's `act`, which ensures that all updates related to a test are processed and applied before making assertions. `act` is crucial for reliable and predictable test results, but it only works correctly when `NODE_ENV` is set to `development`. ```js -// main.js +// .storybook/main.js export default { features: { developmentModeForBuild: true, @@ -444,15 +444,16 @@ export default { ### Added source code panel to docs -Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource). +Storybook Docs (`@storybook/addon-docs`) now can automatically add a new addon panel to stories that displays a source snippet beneath each story. This is an experimental feature that works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource). -If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level. +To enable this globally, add the following line to your project configuration. You can also configure at the component/story level. ```js +// .storybook/preview.js export default { parameters: { docs: { - codePanel: false, + codePanel: true, }, }, }; diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx index 0b84cd6e36f8..b816b86f92a4 100644 --- a/code/addons/docs/src/manager.tsx +++ b/code/addons/docs/src/manager.tsx @@ -12,25 +12,19 @@ addons.register(ADDON_ID, (api) => { type: types.PANEL, paramKey: PARAM_KEY, /** - * This code panel can be disabled by the user by adding this parameter: + * This code panel can be enabled by adding this parameter: * * @example * * ```ts * parameters: { * docs: { - * codePanel: false, + * codePanel: true, * }, * }, * ``` */ - disabled: (parameters) => { - return ( - !!parameters && - typeof parameters[PARAM_KEY] === 'object' && - parameters[PARAM_KEY].codePanel === false - ); - }, + disabled: (parameters) => !!parameters?.docs?.codePanel, match: ({ viewMode }) => viewMode === 'story', render: ({ active }) => { const [codeSnippet, setSourceCode] = useAddonState<{