Skip to content

feat(react-cap-theme): Storybook Theme Switch#661

Open
pixel-perfectionist wants to merge 1 commit into
mainfrom
olkatruk/cap-theme/storybook-theme-switcher
Open

feat(react-cap-theme): Storybook Theme Switch#661
pixel-perfectionist wants to merge 1 commit into
mainfrom
olkatruk/cap-theme/storybook-theme-switcher

Conversation

@pixel-perfectionist

Copy link
Copy Markdown
Member

No description provided.

@pixel-perfectionist pixel-perfectionist requested a review from a team as a code owner June 22, 2026 22:16
@pixel-perfectionist pixel-perfectionist force-pushed the olkatruk/cap-theme/storybook-theme-switcher branch from 08ef406 to 8c25d9b Compare June 22, 2026 22:22
@pixel-perfectionist pixel-perfectionist changed the base branch from main to olkatruk/cap-theme/spin-button June 22, 2026 22:22
@pixel-perfectionist pixel-perfectionist force-pushed the olkatruk/cap-theme/storybook-theme-switcher branch from 8c25d9b to 0dda8ea Compare June 22, 2026 22:25
@pixel-perfectionist pixel-perfectionist requested review from a team as code owners June 22, 2026 22:25
@pixel-perfectionist pixel-perfectionist changed the base branch from olkatruk/cap-theme/spin-button to main June 22, 2026 22:25
@pixel-perfectionist pixel-perfectionist force-pushed the olkatruk/cap-theme/storybook-theme-switcher branch 2 times, most recently from 0c37f8e to ad08af0 Compare June 22, 2026 22:50
@pixel-perfectionist pixel-perfectionist force-pushed the olkatruk/cap-theme/storybook-theme-switcher branch from ad08af0 to fa5ecec Compare June 22, 2026 22:57
Comment on lines +48 to +58
fluentLight: { title: 'Fluent UI Light', theme: webLightTheme },
fluentDark: { title: 'Fluent UI Dark', theme: webDarkTheme },
capLight: {
title: 'CAP Light',
theme: capLightTheme,
styleHooks: CAP_STYLE_HOOKS,
},
capDark: {
title: 'CAP Dark',
theme: capDarkTheme,
styleHooks: CAP_STYLE_HOOKS,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this configuration when switching from fluent{Light/Dark} to cap{Light/Dark} theme, stories crashes.

Fluent{Light/Dark} entries do not set any custom style hooks, so Fluent components fall back to internal noop style hooks (zero React hooks called inside). When the theme switcher selects CAP{Light/Dark}, it flips that prop (customStyleHooks_unstable) on the same FluentProvider, so the same runs more hooks under CAP than under Fluent (and vice versa). React reconciles the same instance with a different hook count and crashes ("Rendered more/fewer hooks than expected") → white screen in the canvas.

Note: on the Docs page the components still render — each example remounts inside Storybook's per-example error boundary, so the crash is swallowed visually — but the error is still thrown and logged in the browser DevTools console. The Default (component canvas) stories have no such boundary, so they crash completely with a white screen.

Fix:
Drop the fluentLight / fluentDark entries and keep only the CAP ones:

Suggested change
fluentLight: { title: 'Fluent UI Light', theme: webLightTheme },
fluentDark: { title: 'Fluent UI Dark', theme: webDarkTheme },
capLight: {
title: 'CAP Light',
theme: capLightTheme,
styleHooks: CAP_STYLE_HOOKS,
},
capDark: {
title: 'CAP Dark',
theme: capDarkTheme,
styleHooks: CAP_STYLE_HOOKS,
capLight: {
title: 'CAP Light',
theme: capLightTheme,
styleHooks: CAP_STYLE_HOOKS,
},
capDark: {
title: 'CAP Dark',
theme: capDarkTheme,
styleHooks: CAP_STYLE_HOOKS,

Rationale: The tokens in capLightTokens and capDarkTokens that extend webLightTheme / webDarkTheme are already part of Fluent UI core's token set in recent versions. They only need to be patched in here because the contrib package is pinned to an older @fluentui/react-components. Once that dependency is bumped, these capLightTokens / capDarkTokens overrides become redundant and can be deleted — capLightTheme would collapse to webLightTheme (same for dark), so the stories would render identically with no manual token patching needed.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants