Skip to content

feat: prefer resizable Fluent icons - #36705

Draft
Martin Hochel (Hotell) wants to merge 15 commits into
microsoft:masterfrom
Hotell:feat/prefer-resizable-icons
Draft

feat: prefer resizable Fluent icons#36705
Martin Hochel (Hotell) wants to merge 15 commits into
microsoft:masterfrom
Hotell:feat/prefer-resizable-icons

Conversation

@Hotell

@Hotell Martin Hochel (Hotell) commented Sep 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Previous Behavior

React packages could import fixed-size Fluent icon exports such as Dismiss20Regular. Sized icon usage was not prevented by lint, SVG-specific style selectors did not cover font icon variants, and the public Storybooks consumed the icon barrel directly.

New Behavior

  • Enables @fluentui/react-icons/prefer-resizable as an error in the shared React ESLint config.
  • Migrates sized icon imports in v9 packages, stories, docs, and visual tests to resizable exports.
  • Preserves component-owned default icon dimensions with fontSize props.
  • Preserves dynamic/custom-slot sizing in CSS, including the six PresenceBadge sizes.
  • Expands existing icon-specific SVG selectors to also match [data-fui-icon] without increasing specificity.
  • Adds the ESLint plugin at the monorepo root and package dependency with a single pinned version.
  • Atomizes icon imports in the v9 and headless public Storybooks by default.
  • Enables font icons only when FLUENTUI_ICON_VARIANT=fonts is set, with build-time font subsetting and SVG fallback for unsupported/color icons.
  • Includes the icon variant environment flag in Nx cache inputs.
  • Prevents inherited semibold text styles from synthetically bolding font icons in the public Storybooks (tracked upstream in fluentui-system-icons#1235).

Validation:

  • Affected React lint sweep passed across 247 projects.
  • Focused package tests passed, including PresenceBadge's 6/10/12/16/20/28px size matrix.
  • Affected package builds and Griffel AOT compilation passed.
  • V9 and headless Storybooks build successfully in both default atomic SVG and flagged font modes.
  • Font builds emit subsetted Fluent icon font assets.
  • yarn beachball check, dependency version validation, formatting, and diff checks passed.

Bundle size impact

The @fluentui/react-icons upgrade initially resolved a second Griffel runtime: repo packages used @griffel/react@1.5.32, while icons required ^1.6.1 and resolved 1.7.7. That duplicated shared Griffel code in every styled package containing icons and produced a repeated ~5.7 kB minified increase. The lockfile now deduplicates @griffel/react to 1.7.7 and @griffel/core to 1.21.3.

A controlled bundle of the same WarningFilled icon with one Griffel runtime isolates the remaining icon factory cost:

react-icons version Minified GZIP
2.0.311 6,560 B 2,955 B
2.0.339 7,261 B 3,252 B
Delta +701 B +297 B

The remaining cost comes from the newer shared SVG factory/runtime: CSP-safe color icon trees, scoped SVG IDs and URL references, color-child resolution, idPrefix memoization, shared SVG rendering, and data-fui-icon.

After deduplication, formerly failing fixtures are only 1.8%-4.38% above baseline and below their 10% thresholds. For example, Field changes from 22.311 kB to 23.289 kB (+978 B / 4.38%). The complete styled react-components fixture decreases by 5.959 kB minified / 1.8 kB GZIP because sized icon duplication is removed.

react-headless-components-preview does not increase: its entire-library fixture remains 241.384 kB minified, and its TagPicker and TeachingPopover fixtures are also unchanged. Only headless stories import the migrated icons; the measured headless library does not.

Related Issue(s)

  • None

@github-actions

github-actions Bot commented Sep 7, 2026 •
edited
Loading

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 91.918 kB
29.05 kB		 92.893 kB
29.415 kB		 975 B
365 B
react-avatar
Avatar		 48.256 kB
15.276 kB		 43.872 kB
14.14 kB		 -4.384 kB
-1.136 kB
react-avatar
AvatarGroup		 17.269 kB
6.89 kB		 17.523 kB
7.008 kB		 254 B
118 B
react-avatar
AvatarGroupItem		 61.24 kB
19.139 kB		 56.856 kB
18.018 kB		 -4.384 kB
-1.121 kB
react-badge
Badge		 24.126 kB
7.784 kB		 24.386 kB
7.903 kB		 260 B
119 B
react-badge
CounterBadge		 24.848 kB
8.044 kB		 25.108 kB
8.161 kB		 260 B
117 B
react-badge
PresenceBadge		 24.094 kB
8.717 kB		 19.772 kB
7.601 kB		 -4.322 kB
-1.116 kB
react-breadcrumb
@fluentui/react-breadcrumb - package		 103.667 kB
29.079 kB		 104.662 kB
29.481 kB		 995 B
402 B
react-button
Button		 33.813 kB
8.929 kB		 34.065 kB
9.044 kB		 252 B
115 B
react-button
CompoundButton		 40.693 kB
10.24 kB		 40.945 kB
10.362 kB		 252 B
122 B
react-button
MenuButton		 38.759 kB
10.311 kB		 39.729 kB
10.706 kB		 970 B
395 B
react-button
SplitButton		 48.177 kB
12.046 kB		 49.148 kB
12.477 kB		 971 B
431 B
react-button
ToggleButton		 53.469 kB
11.065 kB		 53.722 kB
11.179 kB		 253 B
114 B
react-calendar-compat
Calendar Compat		 143.32 kB
40.566 kB		 144.276 kB
40.982 kB		 956 B
416 B
react-card
Card - All		 94.104 kB
27.352 kB		 94.359 kB
27.466 kB		 255 B
114 B
react-card
Card		 86.7 kB
25.469 kB		 86.955 kB
25.574 kB		 255 B
105 B
react-card
CardFooter		 12.663 kB
5.028 kB		 12.917 kB
5.149 kB		 254 B
121 B
react-card
CardHeader		 15.21 kB
5.877 kB		 15.464 kB
5.995 kB		 254 B
118 B
react-card
CardPreview		 12.74 kB
5.142 kB		 12.995 kB
5.26 kB		 255 B
118 B
react-charts
AreaChart		 406.902 kB
127.183 kB		 407.857 kB
127.578 kB		 955 B
395 B
react-charts
DeclarativeChart		 758.446 kB
222.689 kB		 759.401 kB
223.101 kB		 955 B
412 B
react-charts
DonutChart		 317.733 kB
97.977 kB		 318.686 kB
98.367 kB		 953 B
390 B
react-charts
FunnelChart		 309.133 kB
94.775 kB		 310.084 kB
95.162 kB		 951 B
387 B
react-charts
GanttChart		 390.032 kB
121.663 kB		 390.982 kB
122.046 kB		 950 B
383 B
react-charts
GaugeChart		 317.083 kB
97.402 kB		 318.025 kB
97.722 kB		 942 B
320 B
react-charts
GroupedVerticalBarChart		 398.115 kB
124.454 kB		 399.07 kB
124.824 kB		 955 B
370 B
react-charts
HeatMapChart		 392.172 kB
122.702 kB		 393.127 kB
123.085 kB		 955 B
383 B
react-charts
HorizontalBarChart		 297.409 kB
90.473 kB		 298.364 kB
90.837 kB		 955 B
364 B
react-charts
Legends		 236.596 kB
71.053 kB		 237.536 kB
71.421 kB		 940 B
368 B
react-charts
LineChart		 418.251 kB
130.314 kB		 419.208 kB
130.658 kB		 957 B
344 B
react-charts
PolarChart		 345.588 kB
108.005 kB		 346.536 kB
108.391 kB		 948 B
386 B
react-charts
SankeyChart		 213.797 kB
68.722 kB		 214.068 kB
68.846 kB		 271 B
124 B
react-charts
ScatterChart		 397.575 kB
124.369 kB		 398.534 kB
124.713 kB		 959 B
344 B
react-charts
Sparkline		 80.888 kB
26.864 kB		 81.156 kB
26.99 kB		 268 B
126 B
react-charts
VerticalBarChart		 434.566 kB
129.339 kB		 435.517 kB
129.7 kB		 951 B
361 B
react-charts
VerticalStackedBarChart		 404.13 kB
125.845 kB		 405.086 kB
126.207 kB		 956 B
362 B
react-checkbox
Checkbox		 30.781 kB
10.914 kB		 31.334 kB
11.164 kB		 553 B
250 B
react-color-picker
ColorArea		 31.032 kB
11.706 kB		 31.287 kB
11.817 kB		 255 B
111 B
react-color-picker
ColorPicker		 16.049 kB
6.438 kB		 16.304 kB
6.555 kB		 255 B
117 B
react-color-picker
ColorSlider		 26.093 kB
10.232 kB		 26.348 kB
10.347 kB		 255 B
115 B
react-combobox
Combobox (including child components)		 139.318 kB
45.067 kB		 140.173 kB
45.346 kB		 855 B
279 B
react-combobox
Dropdown (including child components)		 139.083 kB
44.818 kB		 139.936 kB
45.119 kB		 853 B
301 B
react-components
react-components: all base hooks		 217.893 kB
68.338 kB		 218.15 kB
68.431 kB		 257 B
93 B
react-components
react-components: Button, FluentProvider & webLightTheme		 67.471 kB
19.465 kB		 67.731 kB
19.588 kB		 260 B
123 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 227.136 kB
68.41 kB		 228.114 kB
68.81 kB		 978 B
400 B
react-components
react-components: FluentProvider & webLightTheme		 40.694 kB
13.549 kB		 40.961 kB
13.674 kB		 267 B
125 B
react-components
react-components: entire library		 1.283 MB
322.086 kB		 1.277 MB
320.28 kB		 -6.04 kB
-1.806 kB
react-datepicker-compat
DatePicker Compat		 217.447 kB
64.407 kB		 218.49 kB
64.868 kB		 1.043 kB
461 B
react-dialog
Dialog (including children components)		 90.984 kB
28.254 kB		 91.958 kB
28.634 kB		 974 B
380 B
react-divider
Divider		 16.233 kB
5.843 kB		 16.488 kB
5.963 kB		 255 B
120 B
react-field
Field		 22.311 kB
8.312 kB		 23.289 kB
8.684 kB		 978 B
372 B
react-image
Image		 13.497 kB
5.448 kB		 13.751 kB
5.565 kB		 254 B
117 B
react-input
Input		 26.24 kB
8.643 kB		 26.596 kB
8.787 kB		 356 B
144 B
react-label
Label		 12.843 kB
5.17 kB		 13.097 kB
5.29 kB		 254 B
120 B
react-link
Link		 16.407 kB
6.465 kB		 16.666 kB
6.587 kB		 259 B
122 B
react-list
List		 75.545 kB
23.408 kB		 75.802 kB
23.526 kB		 257 B
118 B
react-list
ListItem		 99.06 kB
30.273 kB		 99.614 kB
30.513 kB		 554 B
240 B
react-menu
Menu (including children components)		 160.788 kB
51.11 kB		 161.762 kB
51.548 kB		 974 B
438 B
react-menu
Menu (including selectable components)		 163.954 kB
51.739 kB		 164.906 kB
52.134 kB		 952 B
395 B
react-message-bar
MessageBar (all components)		 25.293 kB
8.946 kB		 26.259 kB
9.33 kB		 966 B
384 B
react-persona
Persona		 55.209 kB
17.22 kB		 50.825 kB
16.1 kB		 -4.384 kB
-1.12 kB
react-popover
Popover		 126.6 kB
40.873 kB		 126.866 kB
41 kB		 266 B
127 B
react-portal
Portal		 13.844 kB
5.392 kB		 14.11 kB
5.518 kB		 266 B
126 B
react-positioning
useSafeZoneArea		 13.398 kB
5.365 kB		 13.664 kB
5.492 kB		 266 B
127 B
react-progress
ProgressBar		 20.217 kB
7.836 kB		 20.474 kB
7.96 kB		 257 B
124 B
react-provider
FluentProvider		 20.086 kB
7.701 kB		 20.353 kB
7.83 kB		 267 B
129 B
react-radio
Radio		 28.166 kB
9.157 kB		 28.419 kB
9.273 kB		 253 B
116 B
react-radio
RadioGroup		 13.931 kB
5.613 kB		 14.186 kB
5.731 kB		 255 B
118 B
react-select
Select		 26.109 kB
9.403 kB		 27.118 kB
9.827 kB		 1.009 kB
424 B
react-slider
Slider		 33.405 kB
11.51 kB		 33.662 kB
11.627 kB		 257 B
117 B
react-spinbutton
SpinButton		 33.661 kB
11.013 kB		 34.666 kB
11.465 kB		 1.005 kB
452 B
react-spinner
Spinner		 23.603 kB
7.786 kB		 23.858 kB
7.909 kB		 255 B
123 B
react-swatch-picker
@fluentui/react-swatch-picker - package		 93.186 kB
27.608 kB		 94.156 kB
27.991 kB		 970 B
383 B
react-switch
Switch		 33.402 kB
10.566 kB		 34.418 kB
10.971 kB		 1.016 kB
405 B
react-table
DataGrid		 147.809 kB
43.977 kB		 148.339 kB
44.187 kB		 530 B
210 B
react-table
Table (Primitives only)		 38.042 kB
12.69 kB		 38.994 kB
13.096 kB		 952 B
406 B
react-table
Table as DataGrid		 119.68 kB
33.755 kB		 120.211 kB
33.993 kB		 531 B
238 B
react-table
Table (Selection only)		 66.557 kB
18.957 kB		 67.085 kB
19.183 kB		 528 B
226 B
react-table
Table (Sort only)		 65.22 kB
18.58 kB		 65.748 kB
18.807 kB		 528 B
227 B
react-tag-picker
@fluentui/react-tag-picker - package		 174.763 kB
54.56 kB		 175.634 kB
54.908 kB		 871 B
348 B
react-tags
InteractionTag		 13.629 kB
5.386 kB		 13.882 kB
5.508 kB		 253 B
122 B
react-tags
Tag		 29.542 kB
9.338 kB		 30.51 kB
9.744 kB		 968 B
406 B
react-tags
TagGroup		 70.806 kB
21.811 kB		 71.063 kB
21.924 kB		 257 B
113 B
react-text
Text - Default		 15.184 kB
5.881 kB		 15.438 kB
6 kB		 254 B
119 B
react-text
Text - Wrappers		 18.343 kB
6.196 kB		 18.602 kB
6.323 kB		 259 B
127 B
react-textarea
Textarea		 24.606 kB
8.912 kB		 24.86 kB
9.032 kB		 254 B
120 B
react-timepicker-compat
TimePicker		 142.037 kB
46.44 kB		 142.892 kB
46.73 kB		 855 B
290 B
react-toast
Toast (including Toaster)		 91.488 kB
28.541 kB		 91.741 kB
28.659 kB		 253 B
118 B
react-tooltip
Tooltip		 54.69 kB
19.443 kB		 54.952 kB
19.561 kB		 262 B
118 B
react-tree
FlatTree		 136.693 kB
40.821 kB		 137.266 kB
41.067 kB		 573 B
246 B
react-tree
PersonaFlatTree		 138.556 kB
41.361 kB		 139.129 kB
41.594 kB		 573 B
233 B
react-tree
PersonaTree		 134.637 kB
40.143 kB		 135.21 kB
40.369 kB		 573 B
226 B
react-tree
Tree		 132.78 kB
39.638 kB		 133.353 kB
39.872 kB		 573 B
234 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
326 B
global-context
createContextSelector		 531 B
334 B
keyboard-key
keyboard-key package		 3.927 kB
1.99 kB
keyboard-keys
Multiple keyCodes		 50 B
70 B
keyboard-keys
Multiple keys		 87 B
94 B
keyboard-keys
Single key		 44 B
64 B
keyboard-keys
Single keyCode		 39 B
59 B
priority-overflow
createOverflowManager		 5.416 kB
2.191 kB
react
ActivityItem		 71.511 kB
23.466 kB
react
Announced		 38.766 kB
13.382 kB
react
Autofill		 15.557 kB
4.803 kB
react
Breadcrumb		 200.779 kB
59.775 kB
react
Button		 194.363 kB
56.054 kB
react
ButtonGrid		 179.244 kB
54.067 kB
react
Calendar		 121.293 kB
36.952 kB
react
Callout		 84.456 kB
27.693 kB
react
Check		 53.471 kB
17.936 kB
react
Checkbox		 60.225 kB
19.994 kB
react
ChoiceGroup		 65.717 kB
21.576 kB
react
ChoiceGroupOption		 59.03 kB
19.464 kB
react
Coachmark		 92.829 kB
29.434 kB
react
Color		 7.94 kB
3.172 kB
react
ColorPicker		 135.091 kB
42.254 kB
react
ComboBox		 250.592 kB
71.678 kB
react
CommandBar		 201.824 kB
59.54 kB
react
ContextualMenu		 154.274 kB
47.7 kB
react
DatePicker		 183.22 kB
56.023 kB
react
DateTimeUtilities		 5.447 kB
1.917 kB
react
DetailsList		 230.008 kB
66.014 kB
react
Dialog		 210.074 kB
62.5 kB
react
Divider		 19.893 kB
6.936 kB
react
DocumentCard		 215.813 kB
63.838 kB
react
DragDrop		 8.546 kB
2.789 kB
react
DraggableZone		 34.582 kB
11.592 kB
react
Dropdown		 233.079 kB
68.135 kB
react
ExtendedPicker		 97.086 kB
27.95 kB
react
Fabric		 42.006 kB
14.453 kB
react
Facepile		 209.377 kB
62.564 kB
react
FloatingPicker		 240.836 kB
68.395 kB
react
FocusTrapZone		 17.113 kB
5.936 kB
react
FocusZone		 55.391 kB
17.548 kB
react
Grid		 179.244 kB
54.067 kB
react
GroupedList		 135.213 kB
40.822 kB
react
GroupedListV2		 122.837 kB
37.889 kB
react
HoverCard		 96.917 kB
30.798 kB
react
Icon		 52.159 kB
17.378 kB
react
Icons		 66.627 kB
24.479 kB
react
Image		 47.183 kB
15.787 kB
react
Keytip		 81.486 kB
26.762 kB
react
KeytipData		 14.201 kB
4.644 kB
react
KeytipLayer		 103.226 kB
32.003 kB
react
Keytips		 106 kB
33.025 kB
react
Label		 38.627 kB
13.349 kB
react
Layer		 48.346 kB
16.468 kB
react
Link		 39.947 kB
13.766 kB
react
List		 39.648 kB
12.531 kB
react
MarqueeSelection		 74.764 kB
22.533 kB
react
MessageBar		 189.392 kB
56.484 kB
react
Modal		 93.845 kB
30.319 kB
react
Nav		 186.842 kB
55.869 kB
react
OverflowSet		 33.636 kB
11.36 kB
react
Overlay		 41.175 kB
14.19 kB
react
Panel		 200.3 kB
59.482 kB
react
Persona		 114.726 kB
36.572 kB
react
PersonaCoin		 114.726 kB
36.572 kB
react
PersonaPresence		 58.341 kB
19.48 kB
react
Pickers		 297.834 kB
83.212 kB
react
Pivot		 187.719 kB
56.623 kB
react
Popup		 12.427 kB
4.226 kB
react
Positioning		 23.112 kB
7.761 kB
react
PositioningContainer		 73.679 kB
23.818 kB
react
ProgressIndicator		 39.765 kB
13.638 kB
react
Rating		 82.323 kB
26.225 kB
react
Fluent UI React (entire library)		 1.017 MB
283.569 kB
react
ResizeGroup		 13.467 kB
4.42 kB
react
ResponsiveMode		 8.271 kB
3.006 kB
react
ScrollablePane		 55.802 kB
17.829 kB
react
SearchBox		 187.632 kB
56.064 kB
react
SelectableOption		 927 B
479 B
react
SelectedItemsList		 231.319 kB
67.352 kB
react
Selection		 42.719 kB
12.376 kB
react
Separator		 35.667 kB
12.227 kB
react
Shimmer		 49.51 kB
16.36 kB
react
ShimmeredDetailsList		 240.74 kB
68.726 kB
react
Slider		 57.89 kB
19.313 kB
react
SpinButton		 191.276 kB
57.148 kB
react
Spinner		 42.053 kB
14.565 kB
react
Stack		 42.343 kB
14.467 kB
react
Sticky		 32.868 kB
10.589 kB
react
Styling		 46.377 kB
15.242 kB
react
SwatchColorPicker		 189.597 kB
57.615 kB
react
TeachingBubble		 204.608 kB
60.477 kB
react
Text		 37.19 kB
12.879 kB
react
TextField		 81.017 kB
25.418 kB
react
Theme		 43.822 kB
14.276 kB
react
ThemeGenerator		 12.525 kB
4.15 kB
react
TimePicker		 240.406 kB
69.476 kB
react
Toggle		 46.48 kB
16.079 kB
react
Tooltip		 87.247 kB
28.262 kB
react
Utilities		 83.123 kB
25.271 kB
react
Viewport		 24.178 kB
7.716 kB
react
WeeklyDayPicker		 101.544 kB
31.769 kB
react
WindowProvider		 1.262 kB
614 B
react-aria
ARIA - useARIAButtonProps		 1.35 kB
631 B
react-aria
ARIA - AriaLiveAnnouncer		 3.265 kB
1.499 kB
react-charting
AreaChart		 305.154 kB
95.909 kB
react-charting
ChartHoverCard		 37.29 kB
12.738 kB
react-charting
DeclarativeChart		 680.459 kB
193.864 kB
react-charting
DonutChart		 204.416 kB
64.319 kB
react-charting
GanttChart		 287.222 kB
90.82 kB
react-charting
GaugeChart		 197.731 kB
61.769 kB
react-charting
GroupedVerticalBarChart		 297.023 kB
93.155 kB
react-charting
HeatMapChart		 287.919 kB
90.559 kB
react-charting
HorizontalBarChart		 127.475 kB
40.118 kB
react-charting
HorizontalBarChartWithAxis		 298.395 kB
93.219 kB
react-charting
Legends		 152.037 kB
46.832 kB
react-charting
LineChart		 334.72 kB
102.945 kB
react-charting
MultiStackedBarChart		 182.57 kB
55.844 kB
react-charting
PieChart		 135.059 kB
42.757 kB
react-charting
PolarChart		 235.701 kB
74.718 kB
react-charting
SankeyChart		 158.576 kB
49.642 kB
react-charting
ScatterChart		 291.196 kB
92.181 kB
react-charting
Sparkline		 88.144 kB
29.862 kB
react-charting
StackedBarChart		 176.145 kB
53.411 kB
react-charting
TreeChart		 85.764 kB
27.102 kB
react-charting
VerticalBarChart		 308.085 kB
95.291 kB
react-charting
VerticalStackedBarChart		 305.195 kB
94.973 kB
react-charts
HorizontalBarChartWithAxis		 63 B
83 B
react-headless-components-preview
react-headless-components-preview: entire library		 241.384 kB
68.043 kB
react-headless-components-preview
@fluentui/react-headless-components-preview/tag-picker		 54.012 kB
17.756 kB
react-headless-components-preview
@fluentui/react-headless-components-preview/teaching-popover		 36.073 kB
12.006 kB
react-jsx-runtime
Classic Pragma		 1.282 kB
613 B
react-jsx-runtime
JSX Dev Runtime		 2.137 kB
988 B
react-jsx-runtime
JSX Runtime		 2.134 kB
948 B
react-motion
@fluentui/react-motion - createMotionComponent()		 4.275 kB
1.864 kB
react-motion
@fluentui/react-motion - createPresenceComponent()		 6.007 kB
2.484 kB
react-motion
@fluentui/react-motion - PresenceGroup		 1.715 kB
816 B
react-overflow
hooks only		 10.203 kB
3.694 kB
react-portal-compat
PortalCompatProvider		 5.341 kB
2.146 kB
react-positioning
usePositioning		 28.985 kB
10.198 kB
react-teaching-popover
TeachingPopover		 101.77 kB
32.204 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 37.967 kB
7.989 kB
react-theme
Teams: Light theme		 20.797 kB
5.863 kB
react-utilities
SSRProvider		 182 B
160 B
🤖 This report was generated against a9b5070c2e539a9dc41e12638f966c8ddef4f3bc

@github-actions

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown

Pull request demo site: URL

github-actions[bot]
github-actions Bot reviewed Sep 7, 2026
View reviewed changes
Comment thread apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';

@github-actions github-actions Bot Sep 7, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.customSize+icon+active.normal.chromium.png 3 Changed
vr-tests-react-components/Avatar Converged.customSize+name+badge.normal.chromium.png 2 Changed
vr-tests-react-components/Avatar Converged.size+inactive+badge.normal.chromium.png 13 Changed
vr-tests-react-components/Avatar Converged.size+image+badge.normal.chromium.png 8 Changed
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png 8 Changed
vr-tests-react-components/Avatar Converged.size+icon+badge+square.normal.chromium.png 32 Changed
vr-tests-react-components/Card Converged 5 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Card Converged.orientation.normal.chromium.png 128 Changed
vr-tests-react-components/Card Converged.CardHeader.normal.chromium.png 3 Changed
vr-tests-react-components/Card Converged.size.normal.chromium.png 385 Changed
vr-tests-react-components/Card Converged.appearance - Dark Mode.normal.chromium.png 518 Changed
vr-tests-react-components/Card Converged.appearance - High Contrast.normal.chromium.png 674 Changed
vr-tests-react-components/Card Converged - Disabled 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Card Converged - Disabled.appearance disabled - Outline.hover.chromium.png 33 Changed
vr-tests-react-components/Card Converged - Disabled.appearance disabled - Subtle - Dark Mode.hover.chromium.png 47 Changed
vr-tests-react-components/Card Converged - Selectable 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Subtle - High Contrast.selected.chromium.png 169 Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Subtle.selected.chromium.png 128 Changed
vr-tests-react-components/Checkbox Converged 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Checkbox Converged.disabled+checked.default.chromium.png 3 Changed
vr-tests-react-components/Checkbox Converged.disabled+mixed.default.chromium.png 2 Changed
vr-tests-react-components/Checkbox Converged.checked.rest.chromium.png 7 Changed
vr-tests-react-components/Checkbox Converged.large+mixed.default.chromium.png 13 Changed
vr-tests-react-components/Checkbox Converged.large+circular+checked.default.chromium.png 4 Changed
vr-tests-react-components/Checkbox Converged.mixed.rest.chromium.png 5 Changed
vr-tests-react-components/Combobox Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Combobox Converged.With multiselect selection.hover.chromium.png 13 Changed
vr-tests-react-components/Dialog 7 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Dialog.dialog inside drawer default - High Contrast.chromium.png 6 Changed
vr-tests-react-components/Dialog.dialog inside drawer dimmed - Dark Mode.chromium.png 4 Changed
vr-tests-react-components/Dialog.dialog inside drawer dimmed.chromium.png 5 Changed
vr-tests-react-components/Dialog.title custom action - High Contrast.chromium.png 34 Changed
vr-tests-react-components/Dialog.title custom action - Dark Mode.chromium.png 22 Changed
vr-tests-react-components/Dialog.dialog inside drawer transparent - RTL.chromium.png 9 Changed
vr-tests-react-components/Dialog.title custom action.chromium.png 25 Changed
vr-tests-react-components/Drawer 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Drawer.inline drawer separator position start - Dark Mode.chromium.png 67 Changed
vr-tests-react-components/Drawer.inline drawer separator position start - High Contrast.chromium.png 99 Changed
vr-tests-react-components/Drawer.inline drawer.chromium.png 73 Changed
vr-tests-react-components/Drawer.overlay drawer position start - Dark Mode.chromium.png 67 Changed
vr-tests-react-components/Drawer.overlay drawer position start - High Contrast.chromium.png 99 Changed
vr-tests-react-components/Drawer.overlay drawer.chromium.png 73 Changed
vr-tests-react-components/Field 13 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Field.Checkbox.default.chromium.png 6 Changed
vr-tests-react-components/Field.ProgressBar.default.chromium.png 20 Changed
vr-tests-react-components/Field.RadioGroup.default.chromium.png 6 Changed
vr-tests-react-components/Field.Slider.default.chromium.png 6 Changed
vr-tests-react-components/Field.Select.default.chromium.png 6 Changed
vr-tests-react-components/Field.Switch.default.chromium.png 6 Changed
vr-tests-react-components/Field.SpinButton.default.chromium.png 25 Changed
vr-tests-react-components/Field.horizontal+longLabel.default.chromium.png 9 Changed
vr-tests-react-components/Field.validation-error.default.chromium.png 6 Changed
vr-tests-react-components/Field.validation-warning.default.chromium.png 9 Changed
vr-tests-react-components/Field.Textarea.default.chromium.png 6 Changed
vr-tests-react-components/Field.validation-success.default.chromium.png 5 Changed
vr-tests-react-components/Field.validationMessageIcon.default.chromium.png 9 Changed
vr-tests-react-components/InfoLabel 5 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/InfoLabel.default - High Contrast.rest.chromium.png 36 Changed
vr-tests-react-components/InfoLabel.required.rest.chromium.png 27 Changed
vr-tests-react-components/InfoLabel.size-small.rest.chromium.png 8 Changed
vr-tests-react-components/InfoLabel.wrap.rest.chromium.png 27 Changed
vr-tests-react-components/InfoLabel.sizes -- open.rest.chromium.png 20 Changed
vr-tests-react-components/Menu Converged - selection 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - selection.checkbox - Dark Mode.selected.chromium.png 5 Changed
vr-tests-react-components/Menu Converged - selection.checkbox.selected.chromium.png 6 Changed
vr-tests-react-components/Menu Converged - selection groups 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - selection groups.default - RTL.selected.chromium.png 5 Changed
vr-tests-react-components/MessageBar 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/MessageBar.Intents - High Contrast.default.chromium.png 79 Changed
vr-tests-react-components/MessageBar.Multiline Without Actions.default.chromium.png 51 Changed
vr-tests-react-components/MessageBar.Multiline.default.chromium.png 51 Changed
vr-tests-react-components/MessageBar.Intents - Dark Mode.default.chromium.png 36 Changed
vr-tests-react-components/MessageBar.Intents.default.chromium.png 51 Changed
vr-tests-react-components/MessageBar.Multiline No Actions.default.chromium.png 51 Changed
vr-tests-react-components/Persona Converged 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Persona Converged.basic - Dark Mode.normal.chromium.png 1 Changed
vr-tests-react-components/Persona Converged.basic - High Contrast.normal.chromium.png 3 Changed
vr-tests-react-components/Persona Converged.basic.normal.chromium.png 2 Changed
vr-tests-react-components/Persona Converged.textPosition.normal.chromium.png 6 Changed
vr-tests-react-components/Persona Converged.textAlignment.normal.chromium.png 4 Changed
vr-tests-react-components/Persona Converged.size-presence.normal.chromium.png 6 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 625 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 868 Changed
vr-tests-react-components/PresenceBadge Converged - OOF status 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/PresenceBadge Converged - OOF status.default.chromium.png 94 Changed
vr-tests-react-components/PresenceBadge Converged - inverted background 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/PresenceBadge Converged - inverted background.default - High Contrast.default.chromium.png 373 Changed
vr-tests-react-components/PresenceBadge Converged - inverted background.default - Dark Mode.default.chromium.png 120 Changed
vr-tests-react-components/PresenceBadge Converged - inverted background.default.default.chromium.png 192 Changed
vr-tests-react-components/PresenceBadge Converged - sizes 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/PresenceBadge Converged - sizes.default - RTL.chromium.png 6 Changed
vr-tests-react-components/PresenceBadge Converged - status 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/PresenceBadge Converged - status.default - RTL.chromium.png 49 Changed
vr-tests-react-components/ProgressBar converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 59 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 82 Changed
vr-tests-react-components/SearchBox Converged 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/SearchBox Converged.Appearance- filled-lighter.hover.chromium.png 33 Changed
vr-tests-react-components/SearchBox Converged.Disabled, appearance- filled-lighter.hover.chromium.png 11 Changed
vr-tests-react-components/SearchBox Converged.Disabled, appearance- underline.default.chromium.png 13 Changed
vr-tests-react-components/SearchBox Converged.Size- large.default.chromium.png 45 Changed
vr-tests-react-components/SearchBox Converged.Size- small.hover.chromium.png 18 Changed
vr-tests-react-components/SearchBox Converged.With value.focused.chromium.png 33 Changed
vr-tests-react-components/SpinButton Converged 42 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/SpinButton Converged.Appearance- filled-lighter - Dark Mode.mouseDownIncrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Appearance- filled-lighter - Dark Mode.focused.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Appearance- filled-lighter - Dark Mode.hoverInput.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Appearance- filled-lighter - Dark Mode.mouseDownDecrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Appearance- filled-lighter - High Contrast.mouseDownDecrement.chromium.png 7 Changed
vr-tests-react-components/SpinButton Converged.Appearance- filled-lighter - High Contrast.rest.chromium.png 8 Changed
vr-tests-react-components/SpinButton Converged.At Max Bound - Dark Mode.focused.chromium.png 2 Changed
vr-tests-react-components/SpinButton Converged.At Max Bound - Dark Mode.hoverDecrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Max Bound - Dark Mode.mouseDownDecrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Max Bound - Dark Mode.rest.chromium.png 2 Changed
vr-tests-react-components/SpinButton Converged.At Max Bound.hoverDecrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Max Bound.mouseDownDecrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Max Bound.rest.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Min Bound - Dark Mode.focused.chromium.png 2 Changed
vr-tests-react-components/SpinButton Converged.At Min Bound - Dark Mode.mouseDownIncrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Min Bound - Dark Mode.hoverIncrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Min Bound.mouseDownIncrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Min Bound.rest.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.At Min Bound.hoverIncrement.chromium.png 3 Changed
vr-tests-react-components/SpinButton Converged.Display Value - Dark Mode.hoverDecrement.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Disabled.mouseDownDecrement.chromium.png 1 Changed
vr-tests-react-components/SpinButton Converged.Display Value - Dark Mode.focused.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Display Value - Dark Mode.mouseDownIncrement.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Display Value - Dark Mode.mouseDownDecrement.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Display Value - High Contrast.mouseDownDecrement.chromium.png 7 Changed
vr-tests-react-components/SpinButton Converged.Display Value - High Contrast.rest.chromium.png 8 Changed
vr-tests-react-components/SpinButton Converged.Invalid- filled-darker.focused.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Invalid- filled-darker.hoverIncrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- filled-lighter.hoverDecrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- filled-lighter.hoverIncrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- filled-lighter.mouseDownDecrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- filled-lighter.mouseDownIncrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- filled-lighter.rest.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- underline.hoverIncrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- underline.hoverDecrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- underline.mouseDownDecrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Invalid- underline.mouseDownIncrement.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Size- small - Dark Mode.default.chromium.png 4 Changed
vr-tests-react-components/SpinButton Converged.Size- medium (default).default.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Size- small - RTL.default.chromium.png 5 Changed
vr-tests-react-components/SpinButton Converged.Size- small - High Contrast.default.chromium.png 8 Changed
vr-tests-react-components/SpinButton Converged.With appearance override.default.chromium.png 9 Changed
vr-tests-react-components/SwatchPicker Converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/SwatchPicker Converged.shape.default.chromium.png 2 Changed
vr-tests-react-components/SwatchPicker Converged.spacing.default.chromium.png 2 Changed
vr-tests-react-components/SwatchPicker Converged.size.default.chromium.png 2 Changed
vr-tests-react-components/Table layout table 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Table layout table.multiselect (checked) - neutral - Dark Mode.chromium.png 22 Changed
vr-tests-react-components/Table layout table.multiselect (checked) - neutral.chromium.png 34 Changed
vr-tests-react-components/Table layout table.multiselect (mixed) - neutral - Dark Mode.chromium.png 12 Changed
vr-tests-react-components/Table layout table.multiselect (mixed) - neutral - RTL.chromium.png 19 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1319 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed
vr-tests-react-components/Toast 6 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Toast.Full Toast.Toast visible.chromium.png 36 Changed
vr-tests-react-components/Toast.Full Toast Inverted - High Contrast.Toast visible.chromium.png 54 Changed
vr-tests-react-components/Toast.Title Only Inverted - High Contrast.Toast visible.chromium.png 54 Changed
vr-tests-react-components/Toast.Title Only.Toast visible.chromium.png 36 Changed
vr-tests-react-components/Toast.Without Subtitle Inverted - High Contrast.Toast visible.chromium.png 54 Changed
vr-tests-react-components/Toast.Without Subtitle.Toast visible.chromium.png 36 Changed
vr-tests-react-components/Toolbar Converged 15 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Toolbar Converged.Default.Button Pressed.chromium.png 51 Changed
vr-tests-react-components/Toolbar Converged.Default.default.chromium.png 56 Changed
vr-tests-react-components/Toolbar Converged.Far Group.Button Pressed.chromium.png 28 Changed
vr-tests-react-components/Toolbar Converged.Far Group.default.chromium.png 33 Changed
vr-tests-react-components/Toolbar Converged.Large.Button Pressed.chromium.png 59 Changed
vr-tests-react-components/Toolbar Converged.Large.Toggle On.chromium.png 60 Changed
vr-tests-react-components/Toolbar Converged.Large.default.chromium.png 66 Changed
vr-tests-react-components/Toolbar Converged.Small.Button Pressed.chromium.png 51 Changed
vr-tests-react-components/Toolbar Converged.Small.default.chromium.png 56 Changed
vr-tests-react-components/Toolbar Converged.Transparent.Button Pressed.chromium.png 50 Changed
vr-tests-react-components/Toolbar Converged.Transparent.default.chromium.png 57 Changed
vr-tests-react-components/Toolbar Converged.Vertical Button.Button Pressed.chromium.png 8 Changed
vr-tests-react-components/Toolbar Converged.Vertical Button.default.chromium.png 6 Changed
vr-tests-react-components/Toolbar Converged.Vertical.Button Pressed.chromium.png 51 Changed
vr-tests-react-components/Toolbar Converged.Vertical.default.chromium.png 56 Changed
vr-tests-react-components/Tree 34 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Tree.default - Dark Mode.default.chromium.png 5 Changed
vr-tests-react-components/Tree.actions.default.chromium.png 6 Changed
vr-tests-react-components/Tree.actions - RTL.default.chromium.png 6 Changed
vr-tests-react-components/Tree.actions - Dark Mode.default.chromium.png 5 Changed
vr-tests-react-components/Tree.actions - High Contrast.default.chromium.png 10 Changed
vr-tests-react-components/Tree.default open tree - Dark Mode.default.chromium.png 7 Changed
vr-tests-react-components/Tree.default - RTL.default.chromium.png 5 Changed
vr-tests-react-components/Tree.default - High Contrast.default.chromium.png 10 Changed
vr-tests-react-components/Tree.default open tree - High Contrast.default.chromium.png 14 Changed
vr-tests-react-components/Tree.default.default.chromium.png 6 Changed
vr-tests-react-components/Tree.flat - RTL.default.chromium.png 11 Changed
vr-tests-react-components/Tree.default open tree.default.chromium.png 8 Changed
vr-tests-react-components/Tree.flat - Dark Mode.default.chromium.png 9 Changed
vr-tests-react-components/Tree.flat - High Contrast.default.chromium.png 19 Changed
vr-tests-react-components/Tree.flat tree single selection - Dark Mode.flat tree single selection selected 1.chromium.png 9 Changed
vr-tests-react-components/Tree.flat tree single selection - Dark Mode.chromium.png 9 Changed
vr-tests-react-components/Tree.flat tree single selection - High Contrast.flat tree single selection selected 1.chromium.png 17 Changed
vr-tests-react-components/Tree.flat tree single selection - High Contrast.chromium.png 19 Changed
vr-tests-react-components/Tree.flat tree single selection - RTL.chromium_1.png 11 Changed
vr-tests-react-components/Tree.flat tree single selection - RTL.flat tree single selection selected 1.chromium_2.png 12 Changed
vr-tests-react-components/Tree.flat tree single selection.flat tree single selection selected 1.chromium.png 12 Changed
vr-tests-react-components/Tree.flat tree single selection.chromium.png 11 Changed
vr-tests-react-components/Tree.layout - Dark Mode.default.chromium.png 115 Changed
vr-tests-react-components/Tree.flat.default.chromium.png 11 Changed
vr-tests-react-components/Tree.layout - High Contrast.default.chromium.png 176 Changed
vr-tests-react-components/Tree.persona - High Contrast.default.chromium.png 23 Changed
vr-tests-react-components/Tree.layout.default.chromium.png 148 Changed
vr-tests-react-components/Tree.layout - RTL.default.chromium.png 148 Changed
vr-tests-react-components/Tree.persona - Dark Mode.default.chromium.png 11 Changed
vr-tests-react-components/Tree.persona.default.chromium.png 29 Changed
vr-tests-react-components/Tree.size - Dark Mode.default.chromium.png 9 Changed
vr-tests-react-components/Tree.size.default.chromium.png 11 Changed
vr-tests-react-components/Tree.size - RTL.default.chromium.png 11 Changed
vr-tests-react-components/Tree.size - High Contrast.default.chromium.png 19 Changed
vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 443 Changed

There were 562 duplicate changes discarded. Check the build logs for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments
@sopranopillow Esteban Munoz Facusse (sopranopillow) Awaiting requested review from sopranopillow sopranopillow will be requested when the pull request is marked ready for review sopranopillow is a code owner
@Mitch-At-Work Mitch-At-Work Awaiting requested review from Mitch-At-Work Mitch-At-Work will be requested when the pull request is marked ready for review Mitch-At-Work is a code owner
@mainframev Victor Genaev (mainframev) Awaiting requested review from mainframev mainframev will be requested when the pull request is marked ready for review mainframev is a code owner
@ValentinaKozlova Valentyna (ValentinaKozlova) Awaiting requested review from ValentinaKozlova ValentinaKozlova will be requested when the pull request is marked ready for review ValentinaKozlova is a code owner
@dmytrokirpa Dmytro Kirpa (dmytrokirpa) Awaiting requested review from dmytrokirpa dmytrokirpa will be requested when the pull request is marked ready for review dmytrokirpa is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

Area: Build System NX: core PR: API Modified

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Hotell