Repository navigation
feat(storybook): document data attributes and classes on docs pages - #42
Open
mainframev wants to merge 3 commits into
Open
mainframev wants to merge 3 commits into
mainframev wants to merge 3 commits into
Conversation
Add registerStylingMetadataRule, a webpack pre loader that statically analyzes the components a story documents and injects parameters.__generatedStylingMetadata: v9 slot class names from the <component>ClassNames export and headless data-* attributes with their value domains. Extraction issues are reported as warnings and never fail the build.
…s and classes Show Props, Data attributes and Classes as collapsible API Reference sections on the docs page, matching the Fluent Modern Storybook. Styling sections render generated metadata, overridable through parameters.reactStorybookAddon.docs.
v9 Storybooks document slot class names; the headless Storybook and docsite document data attributes.
This branch has not been deployed
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.
Previous Behavior
Docs pages show only the Props table. Slot class names (v9) and
data-*attributes (headless) are not documented.New Behavior
Docs pages render an API Reference with collapsible Props, Data attributes and Classes sections, matching the Fluent Modern Storybook. Family stories get one tab per component, like Props.
.storybook,public-docsite-v9): Classes from each component's<component>ClassNamesexport (the convention enforced by the react-conformancecomponent-has-static-classnames-objecttest).public-docsite-v9-headless): Data attributes from thedata-*writes in component hooks, with inferred values, e.g. Buttondata-icon-position:"before" | "after".How
@fluentui/scripts-storybookaddsregisterStylingMetadataRule. It registers a webpackpreloader on*.stories.tsxthat reads the story'scomponent/subcomponents, statically analyzes their source through the TypeScript compiler (resolved viatsconfig.base.jsonpaths, no build needed) and injectsparameters.__generatedStylingMetadata. Extraction problems are emitted as warnings and never fail the build. Port of the Fluent Modern loader.@fluentui/react-storybook-addonrenders the sections. Authoredparameters.reactStorybookAddon.docs.{dataAttributes,classNames}override generated values;reactStorybookAddon.docs: falseopts a story file out.Known gaps
data-arrow, Calendar day attributes).Validation
scripts-storybook: jest, tsc and eslint pass. The tests cover fixtures and real headless and v9 Button/Accordion sources.react-storybook-addon: jest, eslint and tsc pass for its sources.storybook dev: v9 Button/Accordion show Props and Classes; headless Button/Accordion show Props and Data attributes.