From 205e54a8a45488bd04d649cf384fbe7656d00920 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 28 Jan 2020 16:44:28 +0100 Subject: [PATCH] documentation fix #9498 - theming + addon-docs incompatible (#9661) documentation fix #9498 - theming + addon-docs incompatible --- MIGRATION.md | 2 ++ addons/docs/docs/theming.md | 6 +++++- docs/src/pages/configurations/theming/index.md | 4 ++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index c2cc89444c23..6b573ada5970 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -152,6 +152,8 @@ addons.setConfig({ This makes storybook load and use the theme in the manager directly. This allows for richer theming in the future, and has a much better performance! +> If you're using addon-docs, you should probably not do this. Docs uses the theme as well, but this change makes the theme inaccessible to addon-docs. We'll address this in 6.0.0. + ### Create React App preset You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0. diff --git a/addons/docs/docs/theming.md b/addons/docs/docs/theming.md index 23c12ce159bd..73ee65dced5f 100644 --- a/addons/docs/docs/theming.md +++ b/addons/docs/docs/theming.md @@ -10,7 +10,11 @@ Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways. -For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/preview.js`: +> In the documentation it will say you can theme storybook in `manager.js`, That's a newer more optimal way to theme storybook, but it's currently incompatible with docs. +> +> We're working on making it compatible in 6.0.0, so for now use the method described below. + +Here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/preview.js`: ```js import { addParameters } from '@storybook/react'; diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md index 6ef0ac0d23a2..dd185818aa00 100644 --- a/docs/src/pages/configurations/theming/index.md +++ b/docs/src/pages/configurations/theming/index.md @@ -5,6 +5,10 @@ title: 'Theming Storybook' Storybook is theme-able! +> Note that themeing storybook changed recently, to be in `manager.js` (introduced in 5.3). But addon-docs is not yet compatible with this new way of configuring the theme. +> +> See here how to use theme storybook in a way that addon-docs will be themed as well: https://github.com/storybookjs/storybook/tree/master/addons/docs + ## Global theming It's possible to theme Storybook globally.