feat(react-cap-theme): Storybook Theme Switch#661
Conversation
08ef406 to
8c25d9b
Compare
8c25d9b to
0dda8ea
Compare
0c37f8e to
ad08af0
Compare
ad08af0 to
fa5ecec
Compare
| 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, |
There was a problem hiding this comment.
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:
| 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.
No description provided.