storybookjs/storybook

[Bug]: Overwriting HTML class to dark is not possible anymore

Open

#22,233 创建于 2023年4月24日

在 GitHub 查看
 (3 评论) (0 反应) (0 负责人)TypeScript (89,909 star) (10,058 fork)batch import
bugbuilder-vitehelp wantedsev:S3vue3

描述

Describe the bug

I am currently trying to upgrade to Storybook 7 and noticed that my custom configuration for creating custom dark theme is not working anymore. My configuration below would swap between light and dark depending on the story params provided, by injecting the class into the html

preview.js

export const decorators = [(story, { parameters }) => {
    const theme = parameters.theme || 'light';
    const themeToAdd = theme === 'light' ? 'light' : 'dark';
    const themeToRemove = theme === 'light' ? 'dark' : 'light';
    const htmlElement = document.querySelector('html');

    htmlElement.classList.add(themeToAdd);
    htmlElement.classList.remove(themeToRemove);

    return story();
}]

Story

import { useUserStore } from '@/store/user';
import OfflineView from '@/views/Offline.vue';

export default {
  title: 'Views/Offline',
  parameters: {
    layout: 'centered',
  },
};

const Template = (args) => ({
  components: { OfflineView },
  setup() { return { args }; },
  template: '<offline-view />',
});

export const Default = Template.bind({});
export const DarkTheme = Template.bind({});

DarkTheme.parameters = { theme: 'dark' };

When this code was executed, I would get this kind of template:

But with Storybook 7, this is not working anymore. I've tried adding other classes, including light and it does get added to HTML. But only dark doesn't work. As can be seen below, class gets set, but it seems to be removed at some point by Storybook itself, which seems like a bug to me

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
  Binaries:
    Node: 19.9.0 - ~/.nvm/versions/node/v19.9.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.3 - ~/.nvm/versions/node/v19.9.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 104.0.2
    Safari: 15.6
  npmPackages:
    @storybook/addon-actions: 7.0.7 => 7.0.7
    @storybook/addon-essentials: 7.0.7 => 7.0.7
    @storybook/addon-interactions: ^7.0.7 => 7.0.7
    @storybook/addon-links: 7.0.7 => 7.0.7
    @storybook/testing-library: ^0.1.0 => 0.1.0
    @storybook/vue3: 7.0.7 => 7.0.7
    @storybook/vue3-vite: 7.0.7 => 7.0.7

Additional context

No response

贡献者指南

[Bug]: Overwriting HTML class to dark is not possible anymore · storybookjs/storybook#22233 | Good First Issue