Skip to content

feat(react-storybook-addon): add render-prop slots to FluentDocsPage#36115

Merged
dmytrokirpa merged 2 commits intomasterfrom
dmytro/storybook-addon-fluentdocspage-render-props
May 7, 2026
Merged

feat(react-storybook-addon): add render-prop slots to FluentDocsPage#36115
dmytrokirpa merged 2 commits intomasterfrom
dmytro/storybook-addon-fluentdocspage-render-props

Conversation

@dmytrokirpa
Copy link
Copy Markdown
Contributor

@dmytrokirpa dmytrokirpa commented May 7, 2026

Some functionality we have in react-storybook-addon (TOC, direction switcher, Slots props type normalization, etc) were not ported to the new SB docs page. This PR does two things:

  • exposes render props to the react-storybook-addon FluentDocsPage and defaults them to the existing render functions
  • uses the FluentDocsPage with custom story render functions to keep CSS Modules in the Show Code tab.

As a result all functionallity (TOC, direction switcher, Slots props type normalization, etc) are available on headless components docsite.

Screen.Recording.2026-05-07.at.14.19.50.mov

Lets consumers swap the primary-story, args-table, and stories sections
without rebuilding the surrounding docs chrome. Used by the headless
preview to wrap each canvas in `<Anchor>` and replace Storybook's
single-blob Source block with the tabbed `HeadlessSourcePanel`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 7, 2026

📊 Bundle size report

✅ No changes found

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 7, 2026

Pull request demo site: URL

@dmytrokirpa dmytrokirpa merged commit 094b22f into master May 7, 2026
15 checks passed
@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 7530 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 5570 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 605 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 599 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 962 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 490 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 24 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 43 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 62 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1319 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed

There were 3 duplicate changes discarded. Check the build logs for more information.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants