Repository navigation
fix(react-components): support font icon styling - #36958
Open
Martin Hochel (Hotell) wants to merge 6 commits into
Open
Martin Hochel (Hotell) wants to merge 6 commits into
Martin Hochel (Hotell) wants to merge 6 commits into
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
📊 Bundle size report
Unchanged fixtures
|
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
Final-commit glyph sizing, half-rating clipping, and forced-color outlines still need human browser validation.
No open issues 🎉
What changed in this PR
Extends Fluent UI v9 icon styling to support font glyphs alongside SVG icons, with supporting Storybook configuration and validation fixtures.
Changes:
- Adds font-icon sizing, layout, half-rating clipping, and forced-color outline styles.
- Enables icon variants in visual-test and migration Storybooks, with cache inputs and corrected font asset filenames.
- Adds configuration tests, manual validation stories, documentation, and nine patch change files.
| File | Description |
|---|---|
| scripts/storybook/src/react-icons-webpack.spec.js | Tests default SVG and font configuration. |
| packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts | Extends block layout to font icons. |
| packages/react-components/react-storybook-addon-playground/src/playground/Playground.styles.ts | Applies playground icon styles to glyphs. |
| packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts | Extends block layout to font icons. |
| packages/react-components/react-search/library/src/components/SearchBox/useSearchBoxStyles.styles.ts | Sizes font dismiss icons. |
| packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts | Adds glyph clipping support and forced-color outlines. |
| packages/react-components/react-migration-v0-v9/stories/src/Attachment/index.stories.tsx | Exports new Attachment fixtures. |
| packages/react-components/react-migration-v0-v9/stories/src/Attachment/Icon.stories.tsx | Adds fixed-size and typography-override checks. |
| packages/react-components/react-migration-v0-v9/stories/project.json | Adds icon-variant cache input. |
| packages/react-components/react-migration-v0-v9/stories/.storybook/main.js | Enables shared icon configuration. |
| packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentIcon.styles.ts | Preserves fixed Attachment glyph sizing. |
| packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts | Applies existing icon sizes to glyphs. |
| packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts | Extends block layout to font icons. |
| packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts | Extends block layout to font icons. |
| packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts | Extends block layout to font icons. |
| packages/react-components/react-badge/library/src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts | Adds fixed PresenceBadge glyph sizes. |
| docs/workflows/testing.md | Documents renderer checks and automation limitations. |
| change/@fluentui-react-tag-picker-14119948-e200-49f9-b82a-e7fca44f34a2.json | Records TagPicker patch release. |
| change/@fluentui-react-storybook-addon-playground-4df3df71-efe4-45bc-82d9-74e37bd5ef0d.json | Records playground patch release. |
| change/@fluentui-react-select-42847cbe-c70a-4ede-bbf6-badf76db0931.json | Records Select patch release. |
| change/@fluentui-react-search-4938f326-9f13-432e-9e7b-79ba55f71f7d.json | Records SearchBox patch release. |
| change/@fluentui-react-rating-e34d747d-5398-48ce-9026-35e7e43963fe.json | Records Rating patch release. |
| change/@fluentui-react-migration-v0-v9-e3fbb1ca-5d2e-4bb8-9af5-41f264331e98.json | Records migration adapter patch release. |
| change/@fluentui-react-input-1239ce15-9c71-4aca-b011-e53de36cf38c.json | Records Input patch release. |
| change/@fluentui-react-combobox-1059704a-69e2-4393-941a-18dc64ce4899.json | Records Combobox patch release. |
| change/@fluentui-react-badge-e5066033-ba54-4617-9bb9-6a54247ac43c.json | Records Badge patch release. |
| apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeSizes.stories.tsx | Adds theme variants and custom icons. |
| apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx | Adds size variants and mixed-renderer fixtures. |
| apps/vr-tests-react-components/src/stories/IconSizing.stories.tsx | Adds manual sizing and font-readiness checks. |
| apps/vr-tests-react-components/project.json | Adds icon-variant build cache input. |
| apps/vr-tests-react-components/.storybook/main.js | Enables shared icon configuration. |
| .storybook/react-icons-webpack.js | Removes workspace-relative segments from font asset names. |
Review effort: Balanced
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -77,6 +77,10 @@ function configureReactIcons(options) { | |||
| config.module.rules.push({ | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png | 4 | Changed |
vr-tests-react-components/Icon sizing 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Icon sizing.Default Theme.fixed icon sizes.chromium.png | 0 | Added |
| vr-tests-react-components/Icon sizing.Overridden tokens high contrast.fixed icon sizes.chromium.png | 0 | Added |
| vr-tests-react-components/Icon sizing.Overridden tokens.fixed icon sizes.chromium.png | 0 | Added |
vr-tests-react-components/Icon sizing fonts 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Icon sizing fonts.Default Theme.fixed icon sizes.chromium.png | 0 | Added |
| vr-tests-react-components/Icon sizing fonts.Overridden tokens high contrast.fixed icon sizes.chromium.png | 0 | Added |
| vr-tests-react-components/Icon sizing fonts.Overridden tokens.fixed icon sizes.chromium.png | 0 | Added |
vr-tests-react-components/Input Converged 5 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Input Converged.Icon Sizes - Dark Mode.default.chromium.png | 0 | Added |
| vr-tests-react-components/Input Converged.Icon Sizes - High Contrast.default.chromium.png | 0 | Added |
| vr-tests-react-components/Input Converged.Icon Sizes - RTL.default.chromium.png | 0 | Added |
| vr-tests-react-components/Input Converged.Icon Sizes.default.chromium.png | 0 | Added |
| vr-tests-react-components/Input Converged.Mixed Icon Renderers.default.chromium.png | 0 | Added |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 615 | Changed |
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 880 | Changed |
vr-tests-react-components/PresenceBadge Converged - sizes 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/PresenceBadge Converged - sizes.Custom Icons.chromium.png | 0 | Added |
| vr-tests-react-components/PresenceBadge Converged - sizes.default - Dark Mode.chromium.png | 0 | Added |
| vr-tests-react-components/PresenceBadge Converged - sizes.default - High Contrast.chromium.png | 0 | Added |
vr-tests-react-components/ProgressBar converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 77 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 2 | Changed |
vr-tests-react-components/TagPicker 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
vr-tests/Callout 8 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Callout.Bottom left edge.default.chromium.png | 2195 | Changed |
| vr-tests/Callout.Bottom right edge.default.chromium.png | 1130 | Changed |
| vr-tests/Callout.Bottom right edge - RTL.default.chromium.png | 1124 | Changed |
| vr-tests/Callout.Right center.default.chromium.png | 2117 | Changed |
| vr-tests/Callout.Right bottom edge.default.chromium.png | 3095 | Changed |
| vr-tests/Callout.No callout width specified.default.chromium.png | 2143 | Changed |
| vr-tests/Callout.Left bottom edge.default.chromium.png | 3182 | Changed |
| vr-tests/Callout.Top left edge.default.chromium.png | 2212 | Changed |
vr-tests/react-charting-LineChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png | 200 | Changed |
| vr-tests/react-charting-LineChart.Multiple.default.chromium.png | 192 | Changed |
There were 1 duplicate changes discarded. Check the build logs for more information.
Build the font sizing stories separately and capture both SVG and font defaults through the existing VRT target. Isolate webpack caches and collocate configuration tests with the VRT Storybook config. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Collocate the icon webpack helper, CSS and tests in scripts-storybook. Export the helper through the package API, update consumers and track the tooling in Storybook cache inputs. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Move the existing icon helper and CSS into scripts-storybook without changing their implementation. Export the shared API, update existing docsites and cache inputs, and cover current SVG/font configuration behavior. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Stack font icon support and focused VRT coverage on the independent infrastructure refactor in microsoft#36970, preserving the existing functional changes and branch history. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Martin Hochel (Hotell)
changed the base branch from
master
to
refactor/storybook-icon-tooling
October 21, 2026 11:20
Martin Hochel (Hotell)
changed the base branch from
refactor/storybook-icon-tooling
to
master
October 21, 2026 12:26
Bring the font icon support PR up to date after microsoft#36971 merged, including upstream's Nx 22.7.9 upgrade. Preserve the font asset filename regression assertion while resolving the shared test overlap. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Martin Hochel (Hotell)
marked this pull request as ready for review
October 21, 2026 17:23
Contributor
Author
|
both font/svg icon + sizes are now part of VRT |
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
Several v9 icon slots style only
svgdescendants. Fluent font icons render asi, so they miss icon sizing, block layout, and half-rating clipping rules.PresenceBadge and the v0-to-v9 Attachment adapter also need glyph sizing, rather than only SVG width/height overrides. SVG
strokedoes not provide a visible font-glyph outline in forced colors.The visual-test and migration Storybooks do not use the existing icon-variant webpack helper. Storybook's default asset filename can include workspace-relative path segments, resulting in font asset 404s in the migration Storybook.
New Behavior
Prerequisite status
The infrastructure prerequisite, #36971, has merged into
master.This fork-backed branch now includes upstream
master, including the merged tooling refactor and the Nx 22.7.9 upgrade. The shared helper/CSS relocation, package exports, and existing docsite consumer changes are no longer part of this PR's diff.The remaining changes are font-icon styling, additional Storybook enablement, and focused VRT coverage. The PR continues to originate from
Hotell/fluentuiand target upstreammaster; no force push was used.Font-icon fixes and enablement
ibranches, preserving descendant/direct-child combinators and specificity.FLUENTUI_ICON_VARIANT=fontsselects font glyphs.static/mediawithout workspace-relative filename segments, with a regression assertion in the shared helper test.Focused VRT regression coverage
test-vrtarget, forwarding caller options to both runs..storybookconfiguration.Manual checks and limitations
The retained
playchecks remain manual aids, not a reliable CI assertion gate. They check icon boxes and font readiness; the font stories additionally reject SVG elements.StoryWright does not explicitly await
playcompletion or propagate its failures into its exit status. Screenshot success therefore does not prove those assertions passed. The existing VRT pipeline now captures focused font-sizing coverage alongside SVG coverage, but this is not a full-suite font-variant matrix or a new browser assertion runner.Painted glyph size, half-value clipping, forced-color outlines, and Attachment coverage still require the visual/manual checks documented in
docs/workflows/testing.md.Validation
The following checks passed after merging current upstream
masterand restoring the locked Nx 22.7.9 dependencies:yarn install --immutable— passed; the lockfile was not changed by installation.NX_DAEMON=false yarn nx run-many -p scripts-storybook vr-tests-react-components -t test --skipNxCache -- --runInBand— passed: 5 suites, 21 tests, 2 snapshots; 1 existing todo.NX_DAEMON=false yarn nx run-many -p scripts-storybook vr-tests-react-components -t type-check --excludeTaskDependencies— passed.NX_DAEMON=false yarn nx run scripts-storybook:lint— passed.NX_DAEMON=false yarn nx run-many -p vr-tests-react-components -t build-storybook build-storybook-fonts— passed: full SVG and focused font production builds.NX_DAEMON=false yarn nx run vr-tests-react-components:test-vr --excludePatterns="'^(?!Icon.sizing)'"— passed: six sizing screenshots, three SVG and three font, through the combined target.NX_DAEMON=false yarn nx format:check --base=upstream/master --head=HEADandgit diff --check— passed.The shared webpack-test overlap was resolved by retaining this PR's font asset filename regression assertion. The merged infrastructure files are excluded from the PR diff.
Earlier browser checks on that same functional implementation confirmed 42 loaded font glyphs, zero SVG icons, and the expected icon dimensions in each of the three font stories.
The full unfiltered StoryWright suite and the broader component test matrix were not rerun for this upstream refresh.
Related Issue(s)