storybookjs/storybook
[Bug] Selected Theme is not applied to docs page when using `inline:false`
Ouverte
#23 809 ouverte le 11 août 2023
block: sourcebughelp wantedsev:S3
Métriques du dépôt
- Stars
- (89 909 étoiles)
- Métriques de merge PR
- (Merge moyen 7j 22h) (184 PRs mergées en 30 j)
Description
Describe the bug
The correct class name is not applied in the docs page when using inline:false to have an iframe per block.
Steps to reproduce the behavior
I setup the decorator as follow:
export const decorators = [
withThemeByClassName({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'light',
parentSelector: 'body',
}),
];
Then I create a story with the docs parameter setting inline to false:
parameters: {
docs: {
story: { inline: false }, // render the story in an iframe
},
},
Expected behavior
The body element on the docs page has the dark css class, when the dark theme is selected. The body element has the light css class, when the light theme is selected. At the moment always the defaultTheme class is applied.
Or in other words:
In html one sees the doc iframe with passed style,
iframe.html?globals=theme:dark&viewMode=docs&id=starratingcomponent--docs
but this style is then not further passed to the story.
iframe.html?viewMode=story&id=starratingcomponent--zero-rating-no-rating-text
Environment
- Storybook 7.2.2
- @storybook/addon-styling 1.3.6