feat(storybook): document data attributes and classes on docs pages

.storybook/main.js

@@ -7,6 +7,7 @@ const {
   loadWorkspaceAddon,
   registerTsPaths,
   registerRules,
+  registerStylingMetadataRule,
   rules,
   processBabelLoaderOptions,
   getImportMappingsForExportToSandboxAddon,
@@ -53,6 +54,8 @@ module.exports = /** @type {import('./types').StorybookConfig} */ ({
   webpackFinal: config => {
     registerRules({ config, rules: [rules.swcRule] });
     registerTsPaths({ config, configFile: tsConfigPath });
+    // v9 docs pages list each component's `*ClassNames` in a "Classes" section.
+    registerStylingMetadataRule({ config, tsConfigPath, classNames: true });
 
     if ((process.env.CI || process.env.TF_BUILD) && config.plugins) {
       // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged)

apps/public-docsite-v9/.storybook/main.js

@@ -5,6 +5,7 @@ const {
   registerTsPaths,
   rules,
   registerRules,
+  registerStylingMetadataRule,
 } = require('@fluentui/scripts-storybook');
 
 const rootMain = require('../../../.storybook/main');
@@ -84,6 +85,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
 
     // add your own webpack tweaks if needed
     registerTsPaths({ configFile: tsConfigAllPath, config: localConfig });
+    registerStylingMetadataRule({ config: localConfig, tsConfigPath: tsConfigAllPath, classNames: true });
     registerRules({
       rules: [rules.scssRule, ...(process.env.REACT_COMPILER ? rules.reactCompilerRule : [])],
       config: localConfig,

change/@fluentui-react-storybook-addon-a1988b99-5929-4498-8b55-856d4c1f0e31.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: show Props, data attributes and classes as collapsible API Reference sections on the docs page",
+  "packageName": "@fluentui/react-storybook-addon",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/stories/.storybook/main.js

@@ -5,6 +5,7 @@ const {
   loadWorkspaceAddon,
   getImportMappingsForExportToSandboxAddon,
   processBabelLoaderOptions,
+  registerStylingMetadataRule,
 } = require('@fluentui/scripts-storybook');
 const { registerCssModuleRules } = require('./css-modules-webpack');
 const headlessPackageJson = require('../../library/package.json');
@@ -81,6 +82,8 @@ module.exports = /** @type {Omit<import('../../../../../.storybook/main'), 'type
     const localConfig = /** @type {any} */ ({ ...rootMain.webpackFinal(config, options) });
 
     registerCssModuleRules({ config: localConfig });
+    // Headless components have no class names; document the `data-*` attributes they write for styling instead.
+    registerStylingMetadataRule({ config: localConfig, tsConfigPath, dataAttributes: true });
 
     return localConfig;
   },

packages/react-components/react-storybook-addon/README.md

@@ -57,6 +57,9 @@ This presets uses [custom docs container and page](https://storybook.js.org/docs
 - custom ArgsTable
   - `Slot` api rendering
   - native props support
+- collapsible "API Reference" with Props, "Data attributes" and "Classes" sections, the latter two rendered from
+  `parameters.__generatedStylingMetadata` (generated by `registerStylingMetadataRule` from `@fluentui/scripts-storybook`)
+  or authored `parameters.reactStorybookAddon.docs.{dataAttributes,classNames}`, which take precedence
 
 ## Getting Started
 

packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.tsx

@@ -27,6 +27,8 @@ import { DirSwitch } from './DirSwitch';
 import { ThemePicker } from './ThemePicker';
 import { Toc, nameToHash } from './Toc';
 import { CopyAsMarkdownButton } from './CopyAsMarkdownButton';
+import { ApiReference } from './StylingTables';
+import { resolveStylingMetadata } from './stylingMetadata';
 
 type PrimaryStory = PreparedStory<Renderer>;
 
@@ -377,6 +379,7 @@ export const FluentDocsPage = ({
 
   const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable);
   const skipPrimaryStory = Boolean(primaryStoryContext.parameters?.docs?.skipPrimaryStory);
+  const stylingMetadata = resolveStylingMetadata(primaryStoryContext.parameters);
 
   const videos = primaryStoryContext.parameters?.videos ?? null;
   const styles = useStyles();
@@ -389,7 +392,11 @@ export const FluentDocsPage = ({
         <Subtitle />
         <Description />
         {renderPrimaryStory({ primaryStory: primaryStory, skipPrimaryStory })}
-        {renderArgsTable({ story: primaryStory, hideArgsTable })}
+        {!hideArgsTable && (
+          <ApiReference metadata={stylingMetadata}>
+            {renderArgsTable({ story: primaryStory, hideArgsTable })}
+          </ApiReference>
+        )}
         {renderStories({ stories: stories.slice(1), skipPrimaryStory })}
       </div>
     );
@@ -434,12 +441,16 @@ export const FluentDocsPage = ({
             {videos && <VideoPreviews videos={videos} />}
           </div>
           {renderPrimaryStory({ primaryStory, skipPrimaryStory })}
-          {renderArgsTable({
-            story: primaryStory,
-            hideArgsTable,
-            showSlotsApi: argTable.slotsApi,
-            showNativePropsApi: argTable.nativePropsApi,
-          })}
+          {!hideArgsTable && (
+            <ApiReference metadata={stylingMetadata}>
+              {renderArgsTable({
+                story: primaryStory,
+                hideArgsTable,
+                showSlotsApi: argTable.slotsApi,
+                showNativePropsApi: argTable.nativePropsApi,
+              })}
+            </ApiReference>
+          )}
           {renderStories({ stories: stories.slice(1), skipPrimaryStory })}
         </div>
         {showTableOfContents && (