storybookjs/storybook

[Bug] Selected Theme is not applied to docs page when using `inline:false`

Open

#23,809 opened on 2023年8月11日

GitHub で見る
 (1 comment) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
block: sourcebughelp wantedsev:S3

説明

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

コントリビューターガイド