Skip to content

docs: render component classNames hooks on the docs page (Button + Accordion template)#36024

Draft
Copilot wants to merge 3 commits intomasterfrom
copilot/add-component-classnames-hooks-docs
Draft

docs: render component classNames hooks on the docs page (Button + Accordion template)#36024
Copilot wants to merge 3 commits intomasterfrom
copilot/add-component-classnames-hooks-docs

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 21, 2026

Every v9 component exports a <Component>ClassNames object (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 a slotclassName table from the object passed in on story parameters. Nothing is hardcoded.
  • react-storybook-addon / hooks.ts — extends FluentDocsConfig with classNames?: Record<string, string>, read per-story from parameters.reactStorybookAddon.docs.classNames (per-story since each component has its own map).
  • Button templatestories/src/Button/index.stories.tsx imports buttonClassNames; table renders rootfui-Button, iconfui-Button__icon.
  • Accordion templatestories/src/Accordion/index.stories.tsx imports accordionClassNames; table renders rootfui-Accordion. Picked as the pair because single-slot validates the layout scales down as well as up.
  • Change filetype: none for @fluentui/react-storybook-addon (docs-only). Stories packages are private, no change files needed.

Wiring pattern (duplicated across components in the follow-up)

import { Button, buttonClassNames } from '@fluentui/react-components';

export default {
  title: 'Components/Button/Button',
  component: Button,
  parameters: {
    reactStorybookAddon: {
      docs: { classNames: buttonClassNames },
    },
  },
} as Meta;

Review asks for @microsoft/cxe-prg

  • Heading copy ("Customizing component's slot styles with className hooks" + 🙌)
  • Table placement (inside the existing info-box stack, above <ArgTypes>)
  • Table styling (plain slot / className columns with <code> for the class string, matching the reference screenshot in the issue)
  • Config shape (parameters.reactStorybookAddon.docs.classNames) — this is what the ~70 follow-up PRs will use, so worth locking in now

Once shape is agreed, the rollout is a mechanical 3-line diff per component story meta.

Copilot AI and others added 2 commits April 21, 2026 20:38
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
Copilot AI requested a review from tudorpopams April 21, 2026 20:40
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.

[Docs]: add component classNames hooks to official documentation

2 participants