docs(docsite): overhaul react-icons docs for headless, transforms & recipes#1138
Open
Hotell wants to merge 7 commits into
Open
docs(docsite): overhaul react-icons docs for headless, transforms & recipes#1138Hotell wants to merge 7 commits into
Hotell wants to merge 7 commits into
Conversation
…ecipes - Build Transforms: webpack-only (atomic loader + font subsetting) - Add Headless API page (re-export story pattern); promote /headless/utils - Add Bundle Size comparison page - Add Recipes chapter (multi-color layering, idPrefix pointer) - Rename User Guidance -> Rendering Approaches - Consolidate Color-variant deprecation into the Color Variants page - Mark svg-sprite as preview; drop unsupported headless svg-sprite refs - Overview: add Griffel-vs-Headless and Barrel-vs-Atomic highlights
📋 PR Validation SummaryCheck the Build react library job summary for detailed reports:
|
- Convert Recipes MDX into a story-backed page (re-export pattern) - Each recipe is a separate story module for correct 'Show code' - Add MultipleColors and ScopingGradientIds live demos
- Extract canonical ColorIdPrefix demo into its own module - Re-export it from both Color Variants and Recipes (single source, 1:1) - Remove divergent Recipes ScopingGradientIds story
- Replace custom docs page with skipPrimaryStory/hideArgsTable - Restores Fluent chrome (TOC, theme/RTL/copy toggles) on all three pages - Removes duplicate Primary hero and the misplaced/empty Args table
2 tasks
- Button toggles display:none on one instance to show the gradient collision live - Shared demo updates both Color Variants and Recipes pages
- Move Build Transforms & Bundle Size to the bottom (tooling/perf) - Move API Contract into the reference cluster above tooling
- Mention Light/Color styles - Add rendering-approaches gist - Promote catalog to its own heading - Fix cross-page links: data-sb-kind href='' broke to bare iframe - Use ./?path= + target=_top so the manager routes correctly
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
1 participant
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.
Summary
Overhauls the
@fluentui/react-iconsStorybook docsite so it fully reflects the current solution (headless API, atomic build transforms, rendering strategies, recipes) and modernizes the existing pages.Docs content
@fluentui/react-icons-atomic-webpack-loaderand@fluentui/react-icons-font-subsetting-webpack-plugin. Babel/SWC are collapsed into a secondary<details>in the markdown docs (docs/build-transforms.md) with a README pointer.@fluentui/react-icons/headless/utilssubpath.Coloricon multiple times (idPrefix).User Guidance→Rendering Approaches(scoped to inline SVG / fonts / sprites).Color-variant deprecation content into the dedicated Color Variants page (single source of truth); removed the duplicate from Rendering Approaches.svg-spriteasheadless/svg-spritereferences across docs.Docsite structure / patterns
index.storiesre-export pattern so Storybook's "Show code" shows a focused snippet per story (matches PR docs(docsite): fix ColorVariants story 'Show code' to follow index re-export pattern #1136).idPrefixdemo is defined once (ColorVariants/ColorIdPrefix.stories.tsx) and re-exported into both the Color Variants and Recipes pages — 1:1, no duplication.skipPrimaryStory/hideArgsTable) instead of a customdocs.page, so the branded chrome (TOC, theme picker, LTR/RTL switch, Copy Page) is preserved while dropping the duplicate Primary hero and the empty/misplaced Args table.Known limitation / follow-up
Verification
nx run docsite:buildsucceeds;nx run react-icons:buildregenerates the headless atoms consumed by the interactive Headless story.?path=cross-links resolve; new/updated pages verified in the dev server.