storybookjs/storybook

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

Open

#23,809 opened on Aug 11, 2023

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

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

Contributor guide

Tech stack
typescriptreactcss
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Storybook basicsReactCSS theming
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate how Docs renderer passes globals to story iframe when inline:false. The issue suggests that parameters are not forwarded. Look into `lib/addon docs/src/blocks/DocsRenderer.tsx` and examine how `story` parameters are handled. Also check `@storybook/addon styling` integration. The fix likely requires ensuring that global theming classes are applied to the story iframe's body element.