`, `<Subtitle />`, `<Description />`, `<Controls />` because they all share the same document. https://github.com/user-attachments/assets/efad860f-5be4-477a-a0f7-8438a054bf5b 2. My Current Workaround: `inline: false` I added this configuration to isolate stories in iframes: **preview.tsx:** ```tsx import type { Preview } from "@storybook/react-vite"; import { withThemeSwitcher } from "./theme-decorator"; import { withTranslation } from "./translation-decorator"; const preview: Preview = { parameters: { docs: { story: { inline: false }, // ← Workaround: render stories in iframe page: () => ( <> <Title /> <Subtitle /> <Description /> <Heading>Story</Heading> <Primary /> <Heading>Props</Heading> <Controls /> </> ), }, }, decorators: [withTranslation(), withThemeSwitcher()], }; export default preview; ``` This partially solves the issue: - ✅ Stories render in separate iframes → isolated from Docs UI - ✅ RTL/theme in <Primary /> doesn't affect `<Title />`, `<Subtitle />`, etc. But creates a new problem: - ❌ Controls don't live update **(known limitation of inline: false)** - ❌ When switching from Playground → Docs page, the parent document still has dir="rtl" and theme attributes from the previous page, affecting all Docs UI components. https://github.com/user-attachments/assets/e99f2b61-c8bb-4c93-acc6-ca23f5101cf1 ## My Expected: **Is there a recommended way to:** 1. Apply RTL/theme to stories without affecting Docs UI components? 2. Detect when a decorator is rendering in Docs context vs Canvas context (with `inline: false`)? 3. Prevent `document.documentElement` modifications from persisting across page navigation? ### Reproduction link N/A ### Reproduction steps _No response_ ### System ```bash Storybook Environment Info: System: OS: Windows 11 10.0.26200 CPU: (16) x64 Intel(R) Core(TM) Ultra 7 255H Binaries: Node: 22.19.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - C:\Users\htly\AppData\Roaming\npm\yarn.CMD npm: 10.9.3 - C:\Program Files\nodejs\npm.CMD pnpm: 10.15.1 - C:\ProgramData\chocolatey\bin\pnpm.EXE <----- active Browsers: Chrome: 142.0.7444.176 Edge: Chromium (142.0.3595.80) Firefox: 114.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe npmPackages: @storybook/addon-a11y: 10.0.0 => 10.0.0 @storybook/addon-docs: 10.0.0 => 10.0.0 @storybook/addon-themes: 10.0.0 => 10.0.0 @storybook/react-vite: 10.0.0 => 10.0.0 eslint-plugin-storybook: 10.0.0 => 10.0.0 storybook: 10.0.0 => 10.0.0 ``` ### Additional context _No response

### Describe the bug I'm implementing RTL language support and theme switching using global decorators, but I'm running into an issue where `document.documentElement` modifications persist and affect the Docs UI when navigating between pages. I've tried using `inline: false` as a workaround, but it creates another problem. Is there a better way to handle this? 1. The Original Problem: **translation-decorator.tsx:** ```tsx import type { Decorator } from "@storybook/react-vite"; import { useEffect, useState } from "react"; import { I18nProvider } from "react-aria-components"; import { setTranslationLanguage } from "@/shared/i18n/translation"; export const withTranslation = (): Decorator => { return (Story, context) => { const { lang } = context.globals; useEffect(() => { await i18n.changeLanguage(lang); document.documentElement.lang = lang; document.documentElement.dir = i18n.dir(lang); // "rtl" for Arabic, Hebrew, etc. }, [lang]); return ( ); }; }; ``` **theme-decorator.tsx** ```tsx export async function switchTheme(theme: string, mode: string) { // These modifications affect the entire document document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-mode", mode); } export const withThemeSwitcher = (): Decorator => { return (Story, context) => { const [isThemeReady, setIsThemeReady] = useState(false); const [themeKey, modeKey] = selectedTheme.split("-"); useEffect(() => { void switchTheme(themeKey, modeKey).then(async () => { await import("@/shared/styles/index.scss"); setIsThemeReady(true); }); }, [themeKey, modeKey]); return isThemeReady ? :

; }; }; ``` ## **Problem:** Without `inline: false`, CSS and RTL direction from stories bleed into Docs UI components like ``, `<Subtitle />`, `<Description />`, `<Controls />` because they all share the same document. https://github.com/user-attachments/assets/efad860f-5be4-477a-a0f7-8438a054bf5b 2. My Current Workaround: `inline: false` I added this configuration to isolate stories in iframes: **preview.tsx:** ```tsx import type { Preview } from "@storybook/react-vite"; import { withThemeSwitcher } from "./theme-decorator"; import { withTranslation } from "./translation-decorator"; const preview: Preview = { parameters: { docs: { story: { inline: false }, // ← Workaround: render stories in iframe page: () => ( <> <Title /> <Subtitle /> <Description /> <Heading>Story</Heading> <Primary /> <Heading>Props</Heading> <Controls /> </> ), }, }, decorators: [withTranslation(), withThemeSwitcher()], }; export default preview; ``` This partially solves the issue: - ✅ Stories render in separate iframes → isolated from Docs UI - ✅ RTL/theme in <Primary /> doesn't affect `<Title />`, `<Subtitle />`, etc. But creates a new problem: - ❌ Controls don't live update **(known limitation of inline: false)** - ❌ When switching from Playground → Docs page, the parent document still has dir="rtl" and theme attributes from the previous page, affecting all Docs UI components. https://github.com/user-attachments/assets/e99f2b61-c8bb-4c93-acc6-ca23f5101cf1 ## My Expected: **Is there a recommended way to:** 1. Apply RTL/theme to stories without affecting Docs UI components? 2. Detect when a decorator is rendering in Docs context vs Canvas context (with `inline: false`)? 3. Prevent `document.documentElement` modifications from persisting across page navigation? ### Reproduction link N/A ### Reproduction steps _No response_ ### System ```bash Storybook Environment Info: System: OS: Windows 11 10.0.26200 CPU: (16) x64 Intel(R) Core(TM) Ultra 7 255H Binaries: Node: 22.19.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - C:\Users\htly\AppData\Roaming\npm\yarn.CMD npm: 10.9.3 - C:\Program Files\nodejs\npm.CMD pnpm: 10.15.1 - C:\ProgramData\chocolatey\bin\pnpm.EXE <----- active Browsers: Chrome: 142.0.7444.176 Edge: Chromium (142.0.3595.80) Firefox: 114.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe npmPackages: @storybook/addon-a11y: 10.0.0 => 10.0.0 @storybook/addon-docs: 10.0.0 => 10.0.0 @storybook/addon-themes: 10.0.0 => 10.0.0 @storybook/react-vite: 10.0.0 => 10.0.0 eslint-plugin-storybook: 10.0.0 => 10.0.0 storybook: 10.0.0 => 10.0.0 ``` ### Additional context _No response_</article></body></html>

[Bug]: Decorator modifying document.documentElement affects Docs UI when switching from Playground #33112

Company

Community

Support

Connect