(Performance testing): on tokens.ts (not actual architecture) #31672

EdDaWord · 2024-06-11T20:57:26Z

Purpose

For performance testing to show that there is no degradation.

Adding multiple unique fallbacks to the tokens file.

Related Prototype PRs:

fabricteam · 2024-06-11T21:06:37Z

change/@fluentui-tokens-c8534c69-4431-480e-9c52-8355ea0499ce.json

@@ -0,0 +1,7 @@
+{


🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots

Accordion 3 screenshots

Image Name Diff(in Pixels) Image Type

Accordion.Size - Dark Mode.normal.chromium.png 2 Changed

Accordion.Size.normal.chromium.png 2 Changed

Accordion.Size - RTL.normal.chromium.png 2 Changed

Avatar 8 screenshots

Image Name Diff(in Pixels) Image Type

Avatar.Colorful - Dark Mode.normal.chromium.png 452 Changed

Avatar.Color - RTL.normal.chromium.png 1 Changed

Avatar.Colorful - RTL.normal.chromium.png 326 Changed

Avatar.Active Appearance - Dark Mode.normal.chromium.png 2 Changed

Avatar.Colorful.normal.chromium.png 325 Changed

Avatar.Color.normal.chromium.png 1 Changed

Avatar.Active Appearance.normal.chromium.png 10 Changed

Avatar.Active.normal.chromium.png 5 Changed

Badge 6 screenshots

Image Name Diff(in Pixels) Image Type

Badge.Color.normal.chromium.png 1 Changed

Badge.Appearance.normal.chromium.png 1 Changed

Badge.Default.normal.chromium.png 1 Changed

Badge.Appearance - Dark Mode.normal.chromium.png 15 Changed

Badge.Shape.normal.chromium.png 1 Changed

Badge.Size.normal.chromium.png 6 Changed

Button 75 screenshots

Image Name Diff(in Pixels) Image Type

Button.Large Icon Only - Dark Mode.hover.chromium.png 3 Changed

Button.Large Icon Only.default.chromium.png 5 Changed

Button.Large Icon Only - Dark Mode.pressed.chromium.png 5 Changed

Button.Large With Icon - Dark Mode.pressed.chromium.png 822 Changed

Button.Large With Icon - Dark Mode.hover.chromium.png 731 Changed

Button.Large With Icon - Dark Mode.default.chromium.png 782 Changed

Button.Large Icon Only.pressed.chromium.png 3 Changed

Button.Medium With Icon - Dark Mode.pressed.chromium.png 813 Changed

Button.Large With Icon - RTL.hover.chromium.png 761 Changed

Button.Medium With Icon - Dark Mode.hover.chromium.png 720 Changed

Button.Medium With Icon - RTL.pressed.chromium.png 697 Changed

Button.Large With Icon.pressed.chromium.png 707 Changed

Button.Medium With Icon - Dark Mode.default.chromium.png 775 Changed

Button.Medium With Icon.hover.chromium.png 753 Changed

Button.Large With Icon.default.chromium.png 795 Changed

Button.Large With Icon - RTL.pressed.chromium.png 707 Changed

Button.Outline Disabled - Dark Mode.hover.chromium.png 159 Changed

Button.Large With Icon.hover.chromium.png 761 Changed

Button.Medium With Icon - RTL.default.chromium.png 788 Changed

Button.Medium With Icon.default.chromium.png 788 Changed

Button.Outline Disabled Focusable - Dark Mode.pressed.chromium.png 159 Changed

Button.Outline Disabled Focusable - Dark Mode.default.chromium.png 159 Changed

Button.Large With Icon - RTL.default.chromium.png 795 Changed

Button.Outline Disabled - Dark Mode.pressed.chromium.png 159 Changed

Button.Primary Disabled Focusable - Dark Mode.default.chromium.png 44 Changed

Button.Medium With Icon.pressed.chromium.png 697 Changed

Button.Primary Disabled Focusable - Dark Mode.pressed.chromium.png 44 Changed

Button.Primary Disabled - Dark Mode.hover.chromium.png 44 Changed

Button.Primary Disabled Focusable.hover.chromium.png 15 Changed

Button.Primary Disabled.default.chromium.png 15 Changed

Button.Large Icon Only.hover.chromium.png 4 Changed

Button.Primary Disabled.hover.chromium.png 15 Changed

Button.Primary Disabled - Dark Mode.pressed.chromium.png 44 Changed

Button.Primary Disabled - Dark Mode.default.chromium.png 44 Changed

Button.Primary Disabled Focusable.pressed.chromium.png 15 Changed

Button.Primary Disabled.pressed.chromium.png 15 Changed

Button.Small With Icon - Dark Mode.default.chromium.png 334 Changed

Button.Outline Disabled - Dark Mode.default.chromium.png 159 Changed

Button.Small With Icon - Dark Mode.pressed.chromium.png 351 Changed

Button.Small With Icon - Dark Mode.hover.chromium.png 311 Changed

Button.Small With Icon.default.chromium.png 339 Changed

Button.Small With Icon - RTL.hover.chromium.png 324 Changed

Button.Primary Disabled Focusable.default.chromium.png 15 Changed

Button.Medium With Icon - RTL.hover.chromium.png 753 Changed

Button.Small With Icon - RTL.pressed.chromium.png 301 Changed

Button.Primary Disabled Focusable - Dark Mode.hover.chromium.png 44 Changed

Button.Small With Icon - RTL.default.chromium.png 339 Changed

Button.Subtle Disabled - Dark Mode.pressed.chromium.png 187 Changed

Button.Subtle Disabled Focusable - Dark Mode.default.chromium.png 187 Changed

Button.Subtle Disabled - Dark Mode.default.chromium.png 187 Changed

Button.Subtle Disabled Focusable.default.chromium.png 25 Changed

Button.Subtle Disabled Focusable.hover.chromium.png 25 Changed

Button.Subtle Disabled.pressed.chromium.png 25 Changed

Button.Subtle Disabled.hover.chromium.png 25 Changed

Button.Large Icon Only - Dark Mode.default.chromium.png 4 Changed

Button.Outline Disabled Focusable - Dark Mode.hover.chromium.png 159 Changed

Button.Small With Icon.hover.chromium.png 324 Changed

Button.Small With Icon.pressed.chromium.png 301 Changed

Button.Transparent Disabled - Dark Mode.hover.chromium.png 199 Changed

Button.Transparent Disabled.default.chromium.png 27 Changed

Button.Transparent Disabled Focusable - Dark Mode.hover.chromium.png 199 Changed

Button.Subtle Disabled - Dark Mode.hover.chromium.png 187 Changed

Button.Transparent Disabled - Dark Mode.default.chromium.png 199 Changed

Button.Subtle Disabled Focusable.pressed.chromium.png 25 Changed

Button.Transparent Disabled Focusable.pressed.chromium.png 27 Changed

Button.Transparent Disabled.hover.chromium.png 27 Changed

Button.Subtle Disabled Focusable - Dark Mode.hover.chromium.png 187 Changed

Button.Transparent Disabled Focusable - Dark Mode.default.chromium.png 199 Changed

Button.Transparent Disabled Focusable - Dark Mode.pressed.chromium.png 199 Changed

Button.Transparent Disabled.pressed.chromium.png 27 Changed

Button.Subtle Disabled.default.chromium.png 25 Changed

Button.Subtle Disabled Focusable - Dark Mode.pressed.chromium.png 187 Changed

Button.Transparent Disabled Focusable.default.chromium.png 27 Changed

Button.Transparent Disabled - Dark Mode.pressed.chromium.png 199 Changed

Button.Transparent Disabled Focusable.hover.chromium.png 27 Changed

Checkbox 26 screenshots

Image Name Diff(in Pixels) Image Type

Checkbox.Checked.normal.chromium.png 4855 Changed

Checkbox.Circular - RTL.normal.chromium.png 4733 Changed

Checkbox.Circular Checked.normal.chromium.png 4883 Changed

Checkbox.Circular Indeterminate - Dark Mode.indeterminate.chromium.png 1102 Changed

Checkbox.Circular Disabled Checked.normal.chromium.png 4728 Changed

Checkbox.Circular Indeterminate.normal.chromium.png 4786 Changed

Checkbox.Circular Disabled Checked - Dark Mode.normal.chromium.png 799 Changed

Checkbox.Circular Checked - Dark Mode.normal.chromium.png 1080 Changed

Checkbox.Default - RTL.normal.chromium.png 4751 Changed

Checkbox.Disabled Checked - Dark Mode.normal.chromium.png 777 Changed

Checkbox.Disabled.normal.chromium.png 4705 Changed

Checkbox.Indeterminate - Dark Mode.normal.chromium.png 877 Changed

Checkbox.Disabled - Dark Mode.normal.chromium.png 739 Changed

Checkbox.Indeterminate - Dark Mode.indeterminate.chromium.png 993 Changed

Checkbox.Circular Indeterminate - Dark Mode.normal.chromium.png 936 Changed

Checkbox.Disabled Checked.normal.chromium.png 4721 Changed

Checkbox.Circular - Dark Mode.normal.chromium.png 792 Changed

Checkbox.Circular Indeterminate.indeterminate.chromium.png 4869 Changed

Checkbox.Indeterminate.normal.chromium.png 4776 Changed

Checkbox.Checked - Dark Mode.normal.chromium.png 982 Changed

Checkbox.Default.normal.chromium.png 4751 Changed

Checkbox.Indeterminate.indeterminate.chromium.png 4847 Changed

Checkbox.Circular Disabled.normal.chromium.png 4711 Changed

Checkbox.Circular Disabled - Dark Mode.normal.chromium.png 760 Changed

Checkbox.Circular.normal.chromium.png 4734 Changed

Checkbox.Default - Dark Mode.normal.chromium.png 814 Changed

Divider 3 screenshots

Image Name Diff(in Pixels) Image Type

Divider.With Svg - RTL.normal.chromium.png 3 Changed

Divider.With Svg.normal.chromium.png 3 Changed

Divider.Vertical With Svg.normal.chromium.png 4 Changed

Label 2 screenshots

Image Name Diff(in Pixels) Image Type

Label.Required - RTL.normal.chromium.png 11 Changed

Label.Size Small.normal.chromium.png 661 Changed

Link 10 screenshots

Image Name Diff(in Pixels) Image Type

Link.Default.default.chromium.png 0 Added

Link.Default.hover.chromium.png 0 Added

Link.Default.pressed.chromium.png 0 Added

Link.Inline.default.chromium.png 0 Added

Link.Inline.hover.chromium.png 0 Added

Link.Inline.pressed.chromium.png 0 Added

Link.Subtle.default.chromium.png 0 Added

Link.Subtle.hover.chromium.png 0 Added

Link.Subtle.pressed.chromium.png 0 Added

Link.With Long Text.default.chromium.png 0 Added

MenuList 16 screenshots

Image Name Diff(in Pixels) Image Type

MenuList.Checkbox - RTL.2nd selected.chromium.png 1 Changed

MenuList.Checkbox With Icons - RTL.1st selected.chromium.png 4 Changed

MenuList.Checkbox.2nd selected.chromium.png 1 Changed

MenuList.Radio With Icons - RTL.2nd selected.chromium.png 4 Changed

MenuList.Checkbox With Icons.2nd selected.chromium.png 5 Changed

MenuList.Checkbox With Icons - RTL.normal.chromium.png 4 Changed

MenuList.Checkbox With Icons - RTL.2nd selected.chromium.png 5 Changed

MenuList.Radio With Icons.2nd selected.chromium.png 4 Changed

MenuList.Checkbox With Icons.normal.chromium.png 4 Changed

MenuList.Radio With Icons.normal.chromium.png 4 Changed

MenuList.Radio With Icons - RTL.normal.chromium.png 4 Changed

MenuList.With Icons.hover menuitem.chromium.png 3 Changed

MenuList.Radio With Icons.1st selected.chromium.png 4 Changed

MenuList.Checkbox With Icons.1st selected.chromium.png 4 Changed

MenuList.With Icons.normal.chromium.png 4 Changed

MenuList.Radio With Icons - RTL.1st selected.chromium.png 4 Changed

Slider 2 screenshots

Image Name Diff(in Pixels) Image Type

Slider.Size Small.rightArrow.chromium.png 1 Changed

Slider.Size Small.normal.chromium.png 1 Changed

Switch 34 screenshots

Image Name Diff(in Pixels) Image Type

Switch.Default - RTL.hover.chromium.png 5044 Changed

Switch.Checked.hover.chromium.png 5150 Changed

Switch.Checked.normal.chromium.png 5132 Changed

Switch.Disabled - Dark Mode.normal.chromium.png 909 Changed

Switch.Checked - RTL.hover.chromium.png 5150 Changed

Switch.Disabled - Dark Mode.hover.chromium.png 909 Changed

Switch.Disabled - RTL.normal.chromium.png 4914 Changed

Switch.Default - Dark Mode.hover.chromium.png 1071 Changed

Switch.Checked - Dark Mode.hover.chromium.png 1169 Changed

Switch.Disabled - RTL.hover.chromium.png 4914 Changed

Switch.Disabled Checked - Dark Mode.normal.chromium.png 1074 Changed

Switch.Disabled.hover.chromium.png 4914 Changed

Switch.Checked - RTL.normal.chromium.png 5132 Changed

Switch.Checked - Dark Mode.normal.chromium.png 1130 Changed

Switch.Default.hover.chromium.png 5044 Changed

Switch.Default - RTL.normal.chromium.png 5009 Changed

Switch.Disabled Checked.normal.chromium.png 5047 Changed

Switch.Disabled Checked - Dark Mode.hover.chromium.png 1074 Changed

Switch.Default.normal.chromium.png 5009 Changed

Switch.Disabled.normal.chromium.png 4914 Changed

Switch.Default - Dark Mode.normal.chromium.png 1019 Changed

Switch.Disabled Checked.hover.chromium.png 5047 Changed

Switch.Label Above - RTL.hover.chromium.png 0 Removed

Switch.Label Above - RTL.normal.chromium.png 0 Removed

Switch.Label Above.hover.chromium.png 0 Removed

Switch.Label Above.normal.chromium.png 0 Removed

Switch.Label After - RTL.hover.chromium.png 0 Removed

Switch.Label After - RTL.normal.chromium.png 0 Removed

Switch.Label After.hover.chromium.png 0 Removed

Switch.Label After.normal.chromium.png 0 Removed

Switch.Label Before - RTL.hover.chromium.png 0 Removed

Switch.Label Before - RTL.normal.chromium.png 0 Removed

Switch.Label Before.hover.chromium.png 0 Removed

Switch.Label Before.normal.chromium.png 0 Removed

Text 2 screenshots

Image Name Diff(in Pixels) Image Type

Text.Strikethrough.normal.chromium.png 236 Changed

Text.Block.normal.chromium.png 995 Changed

TextInput 1 screenshots

Image Name Diff(in Pixels) Image Type

TextInput.Size Large.normal.chromium.png 3 Changed

fabricteam · 2024-06-11T21:07:30Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	42	34	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	643	643	5000
Button	mount	309	302	5000
Field	mount	1128	1139	5000
FluentProvider	mount	717	717	5000
FluentProviderWithTheme	mount	91	83	10
FluentProviderWithTheme	virtual-rerender	42	34	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	79	74	10
MakeStyles	mount	867	881	50000
Persona	mount	1748	1722	5000
SpinButton	mount	1404	1452	5000
SwatchPicker	mount	1622	1641	5000

fabricteam · 2024-06-11T21:10:17Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`99.097 kB` `30.197 kB`	`100.484 kB` `30.409 kB`	`1.387 kB` `212 B`
`react-avatar` Avatar	`49.301 kB` `15.838 kB`	`57.043 kB` `17.201 kB`	`7.742 kB` `1.363 kB`
`react-avatar` AvatarGroup	`20.107 kB` `7.973 kB`	`20.156 kB` `7.994 kB`	`49 B` `21 B`
`react-avatar` AvatarGroupItem	`63.445 kB` `20.061 kB`	`73.167 kB` `21.677 kB`	`9.722 kB` `1.616 kB`
`react-badge` Badge	`25.952 kB` `8.614 kB`	`31.722 kB` `9.26 kB`	`5.77 kB` `646 B`
`react-badge` CounterBadge	`26.731 kB` `8.887 kB`	`32.501 kB` `9.533 kB`	`5.77 kB` `646 B`
`react-badge` PresenceBadge	`25.719 kB` `9.485 kB`	`26.13 kB` `9.571 kB`	`411 B` `86 B`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`113.657 kB` `31.532 kB`	`121.44 kB` `32.264 kB`	`7.783 kB` `732 B`
`react-button` Button	`37.105 kB` `10.785 kB`	`43.503 kB` `11.454 kB`	`6.398 kB` `669 B`
`react-button` CompoundButton	`43.516 kB` `12.076 kB`	`51.614 kB` `12.793 kB`	`8.098 kB` `717 B`
`react-button` MenuButton	`41.886 kB` `12.133 kB`	`49.357 kB` `13.019 kB`	`7.471 kB` `886 B`
`react-button` SplitButton	`49.898 kB` `13.725 kB`	`58.294 kB` `14.662 kB`	`8.396 kB` `937 B`
`react-button` ToggleButton	`53.032 kB` `12.545 kB`	`62.966 kB` `13.374 kB`	`9.934 kB` `829 B`
`react-calendar-compat` Calendar Compat	`149.583 kB` `39.839 kB`	`156.134 kB` `40.547 kB`	`6.551 kB` `708 B`
`react-card` Card - All	`100.845 kB` `28.873 kB`	`104.066 kB` `29.255 kB`	`3.221 kB` `382 B`
`react-card` Card	`93.629 kB` `27.077 kB`	`96.85 kB` `27.428 kB`	`3.221 kB` `351 B`
`react-checkbox` Checkbox	`35.105 kB` `12.112 kB`	`38.003 kB` `12.544 kB`	`2.898 kB` `432 B`
`react-combobox` Combobox (including child components)	`101.39 kB` `33.324 kB`	`109.313 kB` `34.259 kB`	`7.923 kB` `935 B`
`react-combobox` Dropdown (including child components)	`102.028 kB` `33.263 kB`	`110.122 kB` `34.118 kB`	`8.094 kB` `855 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.141 kB` `20.157 kB`	`75.855 kB` `20.962 kB`	`6.714 kB` `805 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`211.741 kB` `60.957 kB`	`224.878 kB` `62.404 kB`	`13.137 kB` `1.447 kB`
`react-components` react-components: FluentProvider & webLightTheme	`44.442 kB` `14.607 kB`	`44.758 kB` `14.68 kB`	`316 B` `73 B`
`react-components` react-components: entire library	`1.094 MB` `270.58 kB`	`1.275 MB` `290.976 kB`	`180.953 kB` `20.396 kB`
`react-datepicker-compat` DatePicker Compat	`223.007 kB` `63.137 kB`	`235.155 kB` `64.456 kB`	`12.148 kB` `1.319 kB`
`react-dialog` Dialog (including children components)	`98.908 kB` `29.807 kB`	`99.718 kB` `29.952 kB`	`810 B` `145 B`
`react-divider` Divider	`21.328 kB` `7.965 kB`	`23.675 kB` `8.14 kB`	`2.347 kB` `175 B`
`react-field` Field	`23.384 kB` `8.903 kB`	`25.458 kB` `9.179 kB`	`2.074 kB` `276 B`
`react-image` Image	`15.362 kB` `6.248 kB`	`16.01 kB` `6.345 kB`	`648 B` `97 B`
`react-input` Input	`27.987 kB` `9.446 kB`	`33.113 kB` `9.943 kB`	`5.126 kB` `497 B`
`react-label` Label	`14.672 kB` `6.002 kB`	`15.362 kB` `6.16 kB`	`690 B` `158 B`
`react-link` Link	`17.193 kB` `6.993 kB`	`18.039 kB` `7.178 kB`	`846 B` `185 B`
`react-menu` Menu (including children components)	`151.246 kB` `45.708 kB`	`154.636 kB` `46.051 kB`	`3.39 kB` `343 B`
`react-menu` Menu (including selectable components)	`153.932 kB` `46.201 kB`	`157.322 kB` `46.606 kB`	`3.39 kB` `405 B`
`react-message-bar` MessageBar (all components)	`24.413 kB` `9.117 kB`	`27.166 kB` `9.429 kB`	`2.753 kB` `312 B`
`react-persona` Persona	`56.192 kB` `17.728 kB`	`65.228 kB` `19.302 kB`	`9.036 kB` `1.574 kB`
`react-popover` Popover	`127.198 kB` `39.776 kB`	`128.196 kB` `39.981 kB`	`998 B` `205 B`
`react-progress` ProgressBar	`17.086 kB` `6.906 kB`	`17.757 kB` `7.024 kB`	`671 B` `118 B`
`react-provider` FluentProvider	`24.618 kB` `8.906 kB`	`24.934 kB` `8.991 kB`	`316 B` `85 B`
`react-radio` Radio	`32.673 kB` `10.351 kB`	`35.993 kB` `10.749 kB`	`3.32 kB` `398 B`
`react-select` Select	`27.723 kB` `10.131 kB`	`32.25 kB` `10.557 kB`	`4.527 kB` `426 B`
`react-slider` Slider	`37.17 kB` `12.547 kB`	`38.353 kB` `12.73 kB`	`1.183 kB` `183 B`
`react-spinbutton` SpinButton	`36.049 kB` `11.835 kB`	`41.287 kB` `12.37 kB`	`5.238 kB` `535 B`
`react-spinner` Spinner	`25.246 kB` `8.554 kB`	`27.062 kB` `8.857 kB`	`1.816 kB` `303 B`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`103.495 kB` `30.046 kB`	`108.5 kB` `30.288 kB`	`5.005 kB` `242 B`
`react-switch` Switch	`35.301 kB` `11.348 kB`	`39.076 kB` `11.765 kB`	`3.775 kB` `417 B`
`react-table` DataGrid	`160.297 kB` `45.656 kB`	`168.028 kB` `46.451 kB`	`7.731 kB` `795 B`
`react-table` Table (Primitives only)	`42.482 kB` `13.868 kB`	`44.915 kB` `14.189 kB`	`2.433 kB` `321 B`
`react-table` Table as DataGrid	`131.102 kB` `36.346 kB`	`139.166 kB` `37.121 kB`	`8.064 kB` `775 B`
`react-table` Table (Selection only)	`70.336 kB` `20.028 kB`	`78.4 kB` `20.832 kB`	`8.064 kB` `804 B`
`react-table` Table (Sort only)	`68.979 kB` `19.633 kB`	`77.043 kB` `20.445 kB`	`8.064 kB` `812 B`
`react-tag-picker` @fluentui/react-tag-picker - package	`181.135 kB` `54.462 kB`	`192.39 kB` `55.643 kB`	`11.255 kB` `1.181 kB`
`react-tags` InteractionTag	`15.167 kB` `6.135 kB`	`15.279 kB` `6.168 kB`	`112 B` `33 B`
`react-tags` Tag	`28.996 kB` `9.52 kB`	`33.982 kB` `9.924 kB`	`4.986 kB` `404 B`
`react-tags` TagGroup	`82.084 kB` `24.34 kB`	`82.244 kB` `24.387 kB`	`160 B` `47 B`
`react-text` Text - Default	`17.063 kB` `6.733 kB`	`18.531 kB` `7.057 kB`	`1.468 kB` `324 B`
`react-text` Text - Wrappers	`20.235 kB` `7.064 kB`	`23.671 kB` `7.403 kB`	`3.436 kB` `339 B`
`react-textarea` Textarea	`26.521 kB` `9.741 kB`	`30.296 kB` `10.289 kB`	`3.775 kB` `548 B`
`react-theme` Single theme token import	`69 B` `89 B`	`114 B` `106 B`	`45 B` `17 B`
`react-timepicker-compat` TimePicker	`104.384 kB` `34.782 kB`	`111.61 kB` `35.71 kB`	`7.226 kB` `928 B`
`react-toast` Toast (including Toaster)	`97.525 kB` `29.326 kB`	`98.152 kB` `29.479 kB`	`627 B` `153 B`
`react-tooltip` Tooltip	`54.558 kB` `19.23 kB`	`55.349 kB` `19.384 kB`	`791 B` `154 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`react-card` CardFooter	`14.356 kB` `5.798 kB`
`react-card` CardHeader	`16.879 kB` `6.664 kB`
`react-card` CardPreview	`14.42 kB` `5.934 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.781 kB` `1.646 kB`
`react-jsx-runtime` JSX Runtime	`4.377 kB` `1.881 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.1 kB` `1.828 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`4.767 kB` `2.112 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.714 kB` `819 B`
`react-overflow` hooks only	`12.821 kB` `4.813 kB`
`react-portal` Portal	`14.563 kB` `5.118 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-positioning` usePositioning	`26.489 kB` `9.552 kB`
`react-radio` RadioGroup	`15.76 kB` `6.433 kB`
`react-theme` Teams: all themes	`35.666 kB` `7.453 kB`
`react-theme` Teams: Light theme	`19.642 kB` `5.549 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 630a943a99fb45cd00f1c6accc3b8ae7195dde2d}

fabricteam · 2024-06-11T21:25:28Z

change/@fluentui-tokens-c8534c69-4431-480e-9c52-8355ea0499ce.json

@@ -0,0 +1,7 @@
+{


🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots

Avatar Converged 2 screenshots

Image Name Diff(in Pixels) Image Type

Avatar Converged.badgeMask - RTL.normal.chromium.png 3 Changed

Avatar Converged.customSize+image.normal.chromium.png 0 Added

Card Converged - Interactive 3 screenshots

Image Name Diff(in Pixels) Image Type

Card Converged - Interactive.appearance interactive - Filled - High Contrast.click.chromium.png 0 Added

Card Converged - Interactive.appearance interactive - Filled - High Contrast.hover.chromium.png 0 Added

Card Converged - Interactive.appearance interactive - Filled - High Contrast.normal.chromium.png 0 Added

Image Converged 1 screenshots

Image Name Diff(in Pixels) Image Type

Image Converged.Image Variations Fallback.normal.chromium.png 0 Added

SwatchPicker Converged 1 screenshots

Image Name Diff(in Pixels) Image Type

SwatchPicker Converged.spacing.default.chromium.png 0 Added

fabricteam reviewed Jun 11, 2024

View reviewed changes

EdDaWord added the Draft label Jun 12, 2024

EdDaWord mentioned this pull request Jun 13, 2024

(Performance testing): Extended Design Tokens on each component for Teams #31692

Draft

brandonthomas and others added 3 commits June 17, 2024 15:58

Adding dummy vars to test perf impact of 4x var calls

f6ba3dd

change file

4b6354e

Update tokens such that they do not share the same name

d8c6e31

EdDaWord force-pushed the var-fallback-test branch from df60a32 to d8c6e31 Compare June 17, 2024 23:12

EdDaWord added 7 commits June 19, 2024 13:45

Comment out tests for prototype

d7767e6

Comment out unused code

15fc554

Comment out unused code

b56c248

Comment out tests for prototype

84ddd3a

Comment out tests for prototype

f3592a5

Comment out tests for prototype

9de90ae

Comment out tests for prototype

2b1495c

EdDaWord mentioned this pull request Jul 19, 2024

RFC: Extended Design Tokens for Fluent UI React #32058

Merged

EdDaWord changed the title ~~Prototype: Var fallback test~~ (Performance testing): on tokens.ts (not actual architecture) Jul 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(Performance testing): on tokens.ts (not actual architecture) #31672

(Performance testing): on tokens.ts (not actual architecture) #31672

Uh oh!

EdDaWord commented Jun 11, 2024 •

edited

Loading

Uh oh!

fabricteam Jun 11, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 11, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 11, 2024 •

edited

Loading

Uh oh!

fabricteam Jun 11, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Image Name	Diff(in Pixels)	Image Type
Accordion.Size - Dark Mode.normal.chromium.png	2	Changed
Accordion.Size.normal.chromium.png	2	Changed
Accordion.Size - RTL.normal.chromium.png	2	Changed

Image Name	Diff(in Pixels)	Image Type
Avatar.Colorful - Dark Mode.normal.chromium.png	452	Changed
Avatar.Color - RTL.normal.chromium.png	1	Changed
Avatar.Colorful - RTL.normal.chromium.png	326	Changed
Avatar.Active Appearance - Dark Mode.normal.chromium.png	2	Changed
Avatar.Colorful.normal.chromium.png	325	Changed
Avatar.Color.normal.chromium.png	1	Changed
Avatar.Active Appearance.normal.chromium.png	10	Changed
Avatar.Active.normal.chromium.png	5	Changed

Image Name	Diff(in Pixels)	Image Type
Badge.Color.normal.chromium.png	1	Changed
Badge.Appearance.normal.chromium.png	1	Changed
Badge.Default.normal.chromium.png	1	Changed
Badge.Appearance - Dark Mode.normal.chromium.png	15	Changed
Badge.Shape.normal.chromium.png	1	Changed
Badge.Size.normal.chromium.png	6	Changed

Image Name	Diff(in Pixels)	Image Type
Button.Large Icon Only - Dark Mode.hover.chromium.png	3	Changed
Button.Large Icon Only.default.chromium.png	5	Changed
Button.Large Icon Only - Dark Mode.pressed.chromium.png	5	Changed
Button.Large With Icon - Dark Mode.pressed.chromium.png	822	Changed
Button.Large With Icon - Dark Mode.hover.chromium.png	731	Changed
Button.Large With Icon - Dark Mode.default.chromium.png	782	Changed
Button.Large Icon Only.pressed.chromium.png	3	Changed
Button.Medium With Icon - Dark Mode.pressed.chromium.png	813	Changed
Button.Large With Icon - RTL.hover.chromium.png	761	Changed
Button.Medium With Icon - Dark Mode.hover.chromium.png	720	Changed
Button.Medium With Icon - RTL.pressed.chromium.png	697	Changed
Button.Large With Icon.pressed.chromium.png	707	Changed
Button.Medium With Icon - Dark Mode.default.chromium.png	775	Changed
Button.Medium With Icon.hover.chromium.png	753	Changed
Button.Large With Icon.default.chromium.png	795	Changed
Button.Large With Icon - RTL.pressed.chromium.png	707	Changed
Button.Outline Disabled - Dark Mode.hover.chromium.png	159	Changed
Button.Large With Icon.hover.chromium.png	761	Changed
Button.Medium With Icon - RTL.default.chromium.png	788	Changed
Button.Medium With Icon.default.chromium.png	788	Changed
Button.Outline Disabled Focusable - Dark Mode.pressed.chromium.png	159	Changed
Button.Outline Disabled Focusable - Dark Mode.default.chromium.png	159	Changed
Button.Large With Icon - RTL.default.chromium.png	795	Changed
Button.Outline Disabled - Dark Mode.pressed.chromium.png	159	Changed
Button.Primary Disabled Focusable - Dark Mode.default.chromium.png	44	Changed
Button.Medium With Icon.pressed.chromium.png	697	Changed
Button.Primary Disabled Focusable - Dark Mode.pressed.chromium.png	44	Changed
Button.Primary Disabled - Dark Mode.hover.chromium.png	44	Changed
Button.Primary Disabled Focusable.hover.chromium.png	15	Changed
Button.Primary Disabled.default.chromium.png	15	Changed
Button.Large Icon Only.hover.chromium.png	4	Changed
Button.Primary Disabled.hover.chromium.png	15	Changed
Button.Primary Disabled - Dark Mode.pressed.chromium.png	44	Changed
Button.Primary Disabled - Dark Mode.default.chromium.png	44	Changed
Button.Primary Disabled Focusable.pressed.chromium.png	15	Changed
Button.Primary Disabled.pressed.chromium.png	15	Changed
Button.Small With Icon - Dark Mode.default.chromium.png	334	Changed
Button.Outline Disabled - Dark Mode.default.chromium.png	159	Changed
Button.Small With Icon - Dark Mode.pressed.chromium.png	351	Changed
Button.Small With Icon - Dark Mode.hover.chromium.png	311	Changed
Button.Small With Icon.default.chromium.png	339	Changed
Button.Small With Icon - RTL.hover.chromium.png	324	Changed
Button.Primary Disabled Focusable.default.chromium.png	15	Changed
Button.Medium With Icon - RTL.hover.chromium.png	753	Changed
Button.Small With Icon - RTL.pressed.chromium.png	301	Changed
Button.Primary Disabled Focusable - Dark Mode.hover.chromium.png	44	Changed
Button.Small With Icon - RTL.default.chromium.png	339	Changed
Button.Subtle Disabled - Dark Mode.pressed.chromium.png	187	Changed
Button.Subtle Disabled Focusable - Dark Mode.default.chromium.png	187	Changed
Button.Subtle Disabled - Dark Mode.default.chromium.png	187	Changed
Button.Subtle Disabled Focusable.default.chromium.png	25	Changed
Button.Subtle Disabled Focusable.hover.chromium.png	25	Changed
Button.Subtle Disabled.pressed.chromium.png	25	Changed
Button.Subtle Disabled.hover.chromium.png	25	Changed
Button.Large Icon Only - Dark Mode.default.chromium.png	4	Changed
Button.Outline Disabled Focusable - Dark Mode.hover.chromium.png	159	Changed
Button.Small With Icon.hover.chromium.png	324	Changed
Button.Small With Icon.pressed.chromium.png	301	Changed
Button.Transparent Disabled - Dark Mode.hover.chromium.png	199	Changed
Button.Transparent Disabled.default.chromium.png	27	Changed
Button.Transparent Disabled Focusable - Dark Mode.hover.chromium.png	199	Changed
Button.Subtle Disabled - Dark Mode.hover.chromium.png	187	Changed
Button.Transparent Disabled - Dark Mode.default.chromium.png	199	Changed
Button.Subtle Disabled Focusable.pressed.chromium.png	25	Changed
Button.Transparent Disabled Focusable.pressed.chromium.png	27	Changed
Button.Transparent Disabled.hover.chromium.png	27	Changed
Button.Subtle Disabled Focusable - Dark Mode.hover.chromium.png	187	Changed
Button.Transparent Disabled Focusable - Dark Mode.default.chromium.png	199	Changed
Button.Transparent Disabled Focusable - Dark Mode.pressed.chromium.png	199	Changed
Button.Transparent Disabled.pressed.chromium.png	27	Changed
Button.Subtle Disabled.default.chromium.png	25	Changed
Button.Subtle Disabled Focusable - Dark Mode.pressed.chromium.png	187	Changed
Button.Transparent Disabled Focusable.default.chromium.png	27	Changed
Button.Transparent Disabled - Dark Mode.pressed.chromium.png	199	Changed
Button.Transparent Disabled Focusable.hover.chromium.png	27	Changed

Image Name	Diff(in Pixels)	Image Type
Checkbox.Checked.normal.chromium.png	4855	Changed
Checkbox.Circular - RTL.normal.chromium.png	4733	Changed
Checkbox.Circular Checked.normal.chromium.png	4883	Changed
Checkbox.Circular Indeterminate - Dark Mode.indeterminate.chromium.png	1102	Changed
Checkbox.Circular Disabled Checked.normal.chromium.png	4728	Changed
Checkbox.Circular Indeterminate.normal.chromium.png	4786	Changed
Checkbox.Circular Disabled Checked - Dark Mode.normal.chromium.png	799	Changed
Checkbox.Circular Checked - Dark Mode.normal.chromium.png	1080	Changed
Checkbox.Default - RTL.normal.chromium.png	4751	Changed
Checkbox.Disabled Checked - Dark Mode.normal.chromium.png	777	Changed
Checkbox.Disabled.normal.chromium.png	4705	Changed
Checkbox.Indeterminate - Dark Mode.normal.chromium.png	877	Changed
Checkbox.Disabled - Dark Mode.normal.chromium.png	739	Changed
Checkbox.Indeterminate - Dark Mode.indeterminate.chromium.png	993	Changed
Checkbox.Circular Indeterminate - Dark Mode.normal.chromium.png	936	Changed
Checkbox.Disabled Checked.normal.chromium.png	4721	Changed
Checkbox.Circular - Dark Mode.normal.chromium.png	792	Changed
Checkbox.Circular Indeterminate.indeterminate.chromium.png	4869	Changed
Checkbox.Indeterminate.normal.chromium.png	4776	Changed
Checkbox.Checked - Dark Mode.normal.chromium.png	982	Changed
Checkbox.Default.normal.chromium.png	4751	Changed
Checkbox.Indeterminate.indeterminate.chromium.png	4847	Changed
Checkbox.Circular Disabled.normal.chromium.png	4711	Changed
Checkbox.Circular Disabled - Dark Mode.normal.chromium.png	760	Changed
Checkbox.Circular.normal.chromium.png	4734	Changed
Checkbox.Default - Dark Mode.normal.chromium.png	814	Changed

Image Name	Diff(in Pixels)	Image Type
Divider.With Svg - RTL.normal.chromium.png	3	Changed
Divider.With Svg.normal.chromium.png	3	Changed
Divider.Vertical With Svg.normal.chromium.png	4	Changed

Image Name	Diff(in Pixels)	Image Type
Label.Required - RTL.normal.chromium.png	11	Changed
Label.Size Small.normal.chromium.png	661	Changed

Image Name	Diff(in Pixels)	Image Type
Link.Default.default.chromium.png	0	Added
Link.Default.hover.chromium.png	0	Added
Link.Default.pressed.chromium.png	0	Added
Link.Inline.default.chromium.png	0	Added
Link.Inline.hover.chromium.png	0	Added
Link.Inline.pressed.chromium.png	0	Added
Link.Subtle.default.chromium.png	0	Added
Link.Subtle.hover.chromium.png	0	Added
Link.Subtle.pressed.chromium.png	0	Added
Link.With Long Text.default.chromium.png	0	Added

Image Name	Diff(in Pixels)	Image Type
MenuList.Checkbox - RTL.2nd selected.chromium.png	1	Changed
MenuList.Checkbox With Icons - RTL.1st selected.chromium.png	4	Changed
MenuList.Checkbox.2nd selected.chromium.png	1	Changed
MenuList.Radio With Icons - RTL.2nd selected.chromium.png	4	Changed
MenuList.Checkbox With Icons.2nd selected.chromium.png	5	Changed
MenuList.Checkbox With Icons - RTL.normal.chromium.png	4	Changed
MenuList.Checkbox With Icons - RTL.2nd selected.chromium.png	5	Changed
MenuList.Radio With Icons.2nd selected.chromium.png	4	Changed
MenuList.Checkbox With Icons.normal.chromium.png	4	Changed
MenuList.Radio With Icons.normal.chromium.png	4	Changed
MenuList.Radio With Icons - RTL.normal.chromium.png	4	Changed
MenuList.With Icons.hover menuitem.chromium.png	3	Changed
MenuList.Radio With Icons.1st selected.chromium.png	4	Changed
MenuList.Checkbox With Icons.1st selected.chromium.png	4	Changed
MenuList.With Icons.normal.chromium.png	4	Changed
MenuList.Radio With Icons - RTL.1st selected.chromium.png	4	Changed

Image Name	Diff(in Pixels)	Image Type
Slider.Size Small.rightArrow.chromium.png	1	Changed
Slider.Size Small.normal.chromium.png	1	Changed

Image Name	Diff(in Pixels)	Image Type
Switch.Default - RTL.hover.chromium.png	5044	Changed
Switch.Checked.hover.chromium.png	5150	Changed
Switch.Checked.normal.chromium.png	5132	Changed
Switch.Disabled - Dark Mode.normal.chromium.png	909	Changed
Switch.Checked - RTL.hover.chromium.png	5150	Changed
Switch.Disabled - Dark Mode.hover.chromium.png	909	Changed
Switch.Disabled - RTL.normal.chromium.png	4914	Changed
Switch.Default - Dark Mode.hover.chromium.png	1071	Changed
Switch.Checked - Dark Mode.hover.chromium.png	1169	Changed
Switch.Disabled - RTL.hover.chromium.png	4914	Changed
Switch.Disabled Checked - Dark Mode.normal.chromium.png	1074	Changed
Switch.Disabled.hover.chromium.png	4914	Changed
Switch.Checked - RTL.normal.chromium.png	5132	Changed
Switch.Checked - Dark Mode.normal.chromium.png	1130	Changed
Switch.Default.hover.chromium.png	5044	Changed
Switch.Default - RTL.normal.chromium.png	5009	Changed
Switch.Disabled Checked.normal.chromium.png	5047	Changed
Switch.Disabled Checked - Dark Mode.hover.chromium.png	1074	Changed
Switch.Default.normal.chromium.png	5009	Changed
Switch.Disabled.normal.chromium.png	4914	Changed
Switch.Default - Dark Mode.normal.chromium.png	1019	Changed
Switch.Disabled Checked.hover.chromium.png	5047	Changed
Switch.Label Above - RTL.hover.chromium.png	0	Removed
Switch.Label Above - RTL.normal.chromium.png	0	Removed
Switch.Label Above.hover.chromium.png	0	Removed
Switch.Label Above.normal.chromium.png	0	Removed
Switch.Label After - RTL.hover.chromium.png	0	Removed
Switch.Label After - RTL.normal.chromium.png	0	Removed
Switch.Label After.hover.chromium.png	0	Removed
Switch.Label After.normal.chromium.png	0	Removed
Switch.Label Before - RTL.hover.chromium.png	0	Removed
Switch.Label Before - RTL.normal.chromium.png	0	Removed
Switch.Label Before.hover.chromium.png	0	Removed
Switch.Label Before.normal.chromium.png	0	Removed

Image Name	Diff(in Pixels)	Image Type
Text.Strikethrough.normal.chromium.png	236	Changed
Text.Block.normal.chromium.png	995	Changed

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.badgeMask - RTL.normal.chromium.png	3	Changed
Avatar Converged.customSize+image.normal.chromium.png	0	Added

Image Name	Diff(in Pixels)	Image Type
Card Converged - Interactive.appearance interactive - Filled - High Contrast.click.chromium.png	0	Added
Card Converged - Interactive.appearance interactive - Filled - High Contrast.hover.chromium.png	0	Added
Card Converged - Interactive.appearance interactive - Filled - High Contrast.normal.chromium.png	0	Added

(Performance testing): on tokens.ts (not actual architecture) #31672

Are you sure you want to change the base?

(Performance testing): on tokens.ts (not actual architecture) #31672

Uh oh!

Conversation

EdDaWord commented Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Related Prototype PRs:

Uh oh!

fabricteam Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots

Uh oh!

fabricteam commented Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

EdDaWord commented Jun 11, 2024 •

edited

Loading

fabricteam Jun 11, 2024 •

edited

Loading

fabricteam commented Jun 11, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Jun 11, 2024 •

edited

Loading

fabricteam Jun 11, 2024 •

edited

Loading