Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: global decorator are not updated in composed storybook #30058

Open
Th3S4mur41 opened this issue Dec 13, 2024 · 0 comments
Open

[Bug]: global decorator are not updated in composed storybook #30058

Th3S4mur41 opened this issue Dec 13, 2024 · 0 comments

Comments

@Th3S4mur41
Copy link

Describe the bug

Adding project level modes to let the user switch between light and dark mode works pretty well in a single storybook package.
When the user clicks the light/dark mode button, the content is re-rendered in the expected theme.

In a package composition however, the same is not true.
Clicking the button will update the decorator in the URL (address bar), but the attribute in HTML remains unchanged.
The user has the refresh/reload the page (F5) in order to see the story in the expected theme.

Reproduction link

https://stackblitz.com/edit/github-nk6zbbmz?file=.storybook-composed%2Fmain.js

Reproduction steps

  1. Got to the above link
  2. Start the composited storybook: yarn storybook
  3. Navigate to the composited storybook running on port 6006
  4. Open the top Button Docs and switch between light and dark theme. It works
  5. Open the bottom (under composite) Button Docs and switch between light and dark theme. Nothing happens unless you refresh the page.

Note

Switching between light and dark mode in the composited stories directly under port 6007 works as expected

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.5.0-alpha.21 => 8.5.0-alpha.21 
    @storybook/addon-themes: 8.5.0-alpha.21 => 8.5.0-alpha.21 
    @storybook/blocks: ^8.5.0-alpha.21 => 8.5.0-alpha.21 
    @storybook/test: ^8.5.0-alpha.21 => 8.5.0-alpha.21 
    @storybook/web-components: ^8.5.0-alpha.21 => 8.5.0-alpha.21 
    @storybook/web-components-vite: ^8.5.0-alpha.21 => 8.5.0-alpha.21 
    storybook: ^8.5.0-alpha.21 => 8.5.0-alpha.21

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant