docs: render component classNames hooks on the docs page (Button + Accordion template)#36024
Draft
docs: render component classNames hooks on the docs page (Button + Accordion template)#36024
Conversation
5 tasks
Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/e9308e70-d951-4fe7-bdf3-b117f766fb0c Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>
Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/e9308e70-d951-4fe7-bdf3-b117f766fb0c Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add component classNames hooks to documentation
docs: render component classNames hooks on the docs page (Button + Accordion template)
Apr 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Every v9 component exports a
<Component>ClassNamesobject (e.g.buttonClassNames: SlotClassNames<ButtonSlots>) that consumers use for style overrides, but the docsite doesn't surface it — consumers have to read source. This PR wires up a template for two components (Button, Accordion) to agree on placement/styling before fanning out.Per the issue author's direction, rollout to the remaining ~70 components is intentionally out of scope and will land in a follow-up.
Changes
react-storybook-addon/FluentDocsPage.tsx— new "Customizing component's slot styles with className hooks" info box, visually uniform with the existing "Native props are supported" and "Customizing components with slots" boxes. Renders aslot→classNametable from the object passed in on story parameters. Nothing is hardcoded.react-storybook-addon/hooks.ts— extendsFluentDocsConfigwithclassNames?: Record<string, string>, read per-story fromparameters.reactStorybookAddon.docs.classNames(per-story since each component has its own map).stories/src/Button/index.stories.tsximportsbuttonClassNames; table rendersroot→fui-Button,icon→fui-Button__icon.stories/src/Accordion/index.stories.tsximportsaccordionClassNames; table rendersroot→fui-Accordion. Picked as the pair because single-slot validates the layout scales down as well as up.type: nonefor@fluentui/react-storybook-addon(docs-only). Stories packages are private, no change files needed.Wiring pattern (duplicated across components in the follow-up)
Review asks for
@microsoft/cxe-prg<ArgTypes>)slot/classNamecolumns with<code>for the class string, matching the reference screenshot in the issue)parameters.reactStorybookAddon.docs.classNames) — this is what the ~70 follow-up PRs will use, so worth locking in nowOnce shape is agreed, the rollout is a mechanical 3-line diff per component story meta.