fix(react-link): fix link brand and inverted appearance by mainframev · Pull Request #35403 · microsoft/fluentui

mainframev · 2025-10-27T18:10:29Z

This update improves the existing inverted variant styling for react-link and introduces support for the onBrand variant. We are maintaining current styles to avoid a breaking change. The goal is to bring Figma and code into alignment. Until now, onBrand was available only in Figma, while inverted was implemented only in code.

Figma spec

More context and partners approval

Previous Behavior

Incorrect inverted styles, missing onBrand from Figma

Inverted appearance with dark theme

New Behavior

Related Issue(s)

Fixes [Bug]: ToastTitle link regression, wrong color is used #35341

github-actions · 2025-10-27T18:21:25Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: entire library	`1.278 MB` `321.13 kB`	`1.278 MB` `321.183 kB`	`270 B` `53 B`
`react-link` Link	`16.501 kB` `6.664 kB`	`16.771 kB` `6.72 kB`	`270 B` `56 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`react-accordion` Accordion (including children components)	`107.096 kB` `32.828 kB`
`react-aria` ARIA - Default	`237 B` `181 B`
`react-avatar` Avatar	`48.298 kB` `15.413 kB`
`react-avatar` AvatarGroup	`18.086 kB` `7.273 kB`
`react-avatar` AvatarGroupItem	`61.55 kB` `19.413 kB`
`react-badge` Badge	`24.832 kB` `8.137 kB`
`react-badge` CounterBadge	`25.612 kB` `8.406 kB`
`react-badge` PresenceBadge	`24.713 kB` `9.046 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`113.973 kB` `31.442 kB`
`react-button` Button	`36.448 kB` `10.386 kB`
`react-button` CompoundButton	`42.86 kB` `11.69 kB`
`react-button` MenuButton	`41.385 kB` `11.799 kB`
`react-button` SplitButton	`49.445 kB` `13.375 kB`
`react-button` ToggleButton	`52.379 kB` `12.164 kB`
`react-calendar-compat` Calendar Compat	`149.957 kB` `39.99 kB`
`react-card` Card - All	`105.768 kB` `29.704 kB`
`react-card` Card	`98.414 kB` `27.83 kB`
`react-card` CardFooter	`13.405 kB` `5.396 kB`
`react-card` CardHeader	`15.938 kB` `6.262 kB`
`react-card` CardPreview	`13.478 kB` `5.527 kB`
`react-charts` AreaChart	`401.667 kB` `122.91 kB`
`react-charts` DeclarativeChart	`723.002 kB` `208.625 kB`
`react-charts` DonutChart	`297.307 kB` `88.881 kB`
`react-charts` FunnelChart	`288.437 kB` `85.77 kB`
`react-charts` GanttChart	`383.228 kB` `116.1 kB`
`react-charts` GaugeChart	`312.084 kB` `92.552 kB`
`react-charts` GroupedVerticalBarChart	`391.203 kB` `118.644 kB`
`react-charts` HeatMapChart	`385.181 kB` `117.656 kB`
`react-charts` HorizontalBarChart	`295.295 kB` `87.005 kB`
`react-charts` HorizontalBarChartWithAxis	`63 B` `83 B`
`react-charts` Legends	`234.022 kB` `69.24 kB`
`react-charts` LineChart	`410.929 kB` `124.399 kB`
`react-charts` SankeyChart	`199.374 kB` `61.322 kB`
`react-charts` ScatterChart	`390.72 kB` `118.613 kB`
`react-charts` Sparkline	`91.098 kB` `28.693 kB`
`react-charts` VerticalBarChart	`425.767 kB` `123.674 kB`
`react-charts` VerticalStackedBarChart	`397.555 kB` `119.562 kB`
`react-checkbox` Checkbox	`34.157 kB` `11.688 kB`
`react-color-picker` ColorArea	`48.177 kB` `16.976 kB`
`react-color-picker` ColorPicker	`16.807 kB` `6.806 kB`
`react-color-picker` ColorSlider	`40.35 kB` `15.022 kB`
`react-combobox` Combobox (including child components)	`105.829 kB` `34.443 kB`
`react-combobox` Dropdown (including child components)	`106.453 kB` `34.373 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`68.539 kB` `19.777 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`235.521 kB` `68.269 kB`
`react-components` react-components: FluentProvider & webLightTheme	`43.373 kB` `14.138 kB`
`react-datepicker-compat` DatePicker Compat	`226.564 kB` `64.027 kB`
`react-dialog` Dialog (including children components)	`102.582 kB` `30.634 kB`
`react-divider` Divider	`20.369 kB` `7.539 kB`
`react-field` Field	`22.44 kB` `8.487 kB`
`react-image` Image	`14.216 kB` `5.796 kB`
`react-input` Input	`26.891 kB` `8.983 kB`
`react-jsx-runtime` Classic Pragma	`1.101 kB` `550 B`
`react-jsx-runtime` JSX Dev Runtime	`2.8 kB` `1.247 kB`
`react-jsx-runtime` JSX Runtime	`3.154 kB` `1.359 kB`
`react-label` Label	`13.542 kB` `5.52 kB`
`react-list` List	`87.748 kB` `26.066 kB`
`react-list` ListItem	`111.33 kB` `32.925 kB`
`react-menu` Menu (including children components)	`164.249 kB` `49.761 kB`
`react-menu` Menu (including selectable components)	`167.231 kB` `50.344 kB`
`react-message-bar` MessageBar (all components)	`23.9 kB` `8.867 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.109 kB` `1.806 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.771 kB` `2.396 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.727 kB` `823 B`
`react-overflow` hooks only	`11.977 kB` `4.574 kB`
`react-persona` Persona	`55.189 kB` `17.291 kB`
`react-popover` Popover	`131.123 kB` `40.823 kB`
`react-portal` Portal	`15.395 kB` `5.377 kB`
`react-portal-compat` PortalCompatProvider	`8.386 kB` `2.624 kB`
`react-positioning` usePositioning	`28.865 kB` `10.146 kB`
`react-positioning` useSafeZoneArea	`12.29 kB` `4.967 kB`
`react-progress` ProgressBar	`16.336 kB` `6.49 kB`
`react-provider` FluentProvider	`23.549 kB` `8.44 kB`
`react-radio` Radio	`31.543 kB` `9.891 kB`
`react-radio` RadioGroup	`14.632 kB` `5.972 kB`
`react-select` Select	`26.73 kB` `9.723 kB`
`react-slider` Slider	`36.954 kB` `12.345 kB`
`react-spinbutton` SpinButton	`34.211 kB` `11.335 kB`
`react-spinner` Spinner	`24.139 kB` `8.078 kB`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`104.908 kB` `30.234 kB`
`react-switch` Switch	`34.293 kB` `10.899 kB`
`react-table` DataGrid	`160.027 kB` `45.244 kB`
`react-table` Table (Primitives only)	`41.718 kB` `13.461 kB`
`react-table` Table as DataGrid	`131.242 kB` `36.251 kB`
`react-table` Table (Selection only)	`69.63 kB` `19.604 kB`
`react-table` Table (Sort only)	`68.273 kB` `19.22 kB`
`react-tag-picker` @fluentui/react-tag-picker - package	`187.186 kB` `56.111 kB`
`react-tags` InteractionTag	`14.304 kB` `5.746 kB`
`react-tags` Tag	`30.156 kB` `9.679 kB`
`react-tags` TagGroup	`82.849 kB` `24.457 kB`
`react-teaching-popover` TeachingPopover	`101.867 kB` `30.488 kB`
`react-text` Text - Default	`15.933 kB` `6.239 kB`
`react-text` Text - Wrappers	`19.093 kB` `6.571 kB`
`react-textarea` Textarea	`25.273 kB` `9.237 kB`
`react-timepicker-compat` TimePicker	`108.795 kB` `35.981 kB`
`react-toast` Toast (including Toaster)	`103.065 kB` `30.863 kB`
`react-tooltip` Tooltip	`57.745 kB` `20.001 kB`
`react-tree` FlatTree	`148.134 kB` `42.38 kB`
`react-tree` PersonaFlatTree	`148.892 kB` `42.508 kB`
`react-tree` PersonaTree	`144.953 kB` `41.334 kB`
`react-tree` Tree	`144.201 kB` `41.218 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 3f58fe3150483f5599769f70759bc81c0e034fb2}

github-actions · 2025-10-27T18:24:29Z

Pull request demo site: URL

apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx

packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts

layershifter · 2025-11-10T09:23:16Z

@mainframev PR description looks confusing:

layershifter · 2025-11-10T09:27:15Z

@mainframev Teams HC screenshots look strange:

github-actions bot reviewed Oct 27, 2025

View reviewed changes

apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx Show resolved Hide resolved

mainframev self-assigned this Oct 27, 2025

mainframev added the Component: Link label Oct 27, 2025

mainframev force-pushed the fix/link-inverted-issue branch 2 times, most recently from 00a01b8 to 29b4ddd Compare November 6, 2025 00:50

mainframev commented Nov 6, 2025

View reviewed changes

packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts Show resolved Hide resolved

mainframev marked this pull request as ready for review November 6, 2025 00:56

mainframev requested review from a team as code owners November 6, 2025 00:56

tudorpopams requested a review from ValentinaKozlova November 6, 2025 15:54

ValentinaKozlova approved these changes Nov 6, 2025

View reviewed changes

layershifter approved these changes Nov 10, 2025

View reviewed changes

mainframev added 6 commits November 10, 2025 13:52

feat(vr-tests): add brand variant for Link

89acd54

feat(react-link): add brand appearance variant based on background ctx

18c4d78

feat(react-shared-contexts): add brand variant

8ba8bc5

chore: change files

b776955

chore: update api.md files

320bb18

fixup! feat(vr-tests): add brand variant for Link

b4d69a4

mainframev force-pushed the fix/link-inverted-issue branch from 29b4ddd to b4d69a4 Compare November 10, 2025 13:25

mainframev merged commit aad8765 into microsoft:master Nov 10, 2025
12 checks passed

mainframev mentioned this pull request Nov 25, 2025

[Bug]: Link: Brand appearance missing in codebase, found in design #35056

Closed

2 tasks

mainframev mentioned this pull request Jan 20, 2026

fix(react-link): use colorBrandForegroundInverted for inverted #35681

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react-link): fix link brand and inverted appearance #35403

fix(react-link): fix link brand and inverted appearance #35403
mainframev merged 6 commits intomicrosoft:masterfrom
mainframev:fix/link-inverted-issue

mainframev commented Oct 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 27, 2025

Uh oh!

Uh oh!

Uh oh!

layershifter commented Nov 10, 2025

Uh oh!

layershifter commented Nov 10, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mainframev commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

github-actions bot commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Oct 27, 2025

Uh oh!

Uh oh!

Uh oh!

layershifter commented Nov 10, 2025

Uh oh!

layershifter commented Nov 10, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mainframev commented Oct 27, 2025 •

edited

Loading

github-actions bot commented Oct 27, 2025 •

edited

Loading