storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.95k stars 9.22k forks source link

[Bug]: Setting theme for DocsContainer dynamically breaks styles #28259

Open nathggns opened 2 months ago

nathggns commented 2 months ago

Describe the bug

When you manually set the theme passed to DocsContainer and it changes after page load, the margin can suddenly change

It seems there's some styles that work based on what the theme "was" when the page loads, which breaks if you change the theme passed to DocsContainer.

https://github.com/storybookjs/storybook/assets/719814/81e3e658-aedb-4bd2-aa2d-a0df0371a30d

Reproduction link

https://stackblitz.com/edit/vitejs-vite-yow74x

Reproduction steps

  1. Cancel the vite process
  2. Run npm run storybook
  3. Open the test story (in a new tab, not within the stackblitz UI)
  4. Change the theme from light to dark (using the toolbar theme switcher)
  5. You'll see the left margin incorrectly change on header
  6. Refresh, and the theme should stay dark but with the correct left margin
  7. Change from dark to light (using the toolbar theme switcher)
  8. You'll see the left margin incorrectly change on header

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.1.10 => 8.1.10 
    @storybook/addon-interactions: ^8.1.10 => 8.1.10 
    @storybook/addon-links: ^8.1.10 => 8.1.10 
    @storybook/addon-onboarding: ^8.1.10 => 8.1.10 
    @storybook/addon-themes: ^8.1.10 => 8.1.10 
    @storybook/blocks: ^8.1.10 => 8.1.10 
    @storybook/react: ^8.1.10 => 8.1.10 
    @storybook/react-vite: ^8.1.10 => 8.1.10 
    @storybook/test: ^8.1.10 => 8.1.10 
    storybook: ^8.1.10 => 8.1.10

Additional context

I'm using what appears to be a private API to access the theme set by the toolbar theme switcher, but I think this is irrelevant to the bug – the bug is caused by the theme object being passed to DocsContainer changing.

atomicrobokid commented 2 months ago

Spotting this myself also, extra padding, font weights/sizes change etc