Skip to content

(Performance testing): Extended Tokens hashed#32304

Draft
EdDaWord wants to merge 9 commits intomicrosoft:masterfrom
EdDaWord:prototype/extended-design-tokens-semantic-and-control-2
Draft

(Performance testing): Extended Tokens hashed#32304
EdDaWord wants to merge 9 commits intomicrosoft:masterfrom
EdDaWord:prototype/extended-design-tokens-semantic-and-control-2

Conversation

@EdDaWord
Copy link
Contributor

@EdDaWord EdDaWord commented Aug 14, 2024 •
edited
Loading

Description

Following up on this prototype: #31692

We want to see the low end of how few kBs we can get if we used a "hashed" name for each of the semantic and control tokens

Not hashing Semantic and Control Token names:
image
image

Hashed names for Semantic and Control Token names:
image
image

@EdDaWord EdDaWord force-pushed the prototype/extended-design-tokens-semantic-and-control-2 branch from 9ad9d6e to e5ce9d1 Compare August 14, 2024 20:48
@EdDaWord EdDaWord added the Draft label Aug 14, 2024
@EdDaWord EdDaWord marked this pull request as ready for review August 14, 2024 21:03
@EdDaWord EdDaWord marked this pull request as draft August 14, 2024 21:03
@EdDaWord EdDaWord requested a review from fabricteam August 14, 2024 21:04
EdDaWord and others added 5 commits August 14, 2024 14:13
@EdDaWord
Try a single file change
808a7f4
@EdDaWord
Change most tokens in useButtonStyles file
bf5b68b
@EdDaWord
Give all the react-components a try
792836d
@smhigley @EdDaWord
fix: Teaching bubble carousel tabs are visible in windows high contra…
1daf5ad 
…st (microsoft#31734)
@mltejera @EdDaWord
fix:react-nav-preview: High contrast issues (microsoft#31704)
f32f216 
chore(motion): add bundle size fixtures (microsoft#31730)

fix(react-calendar-compat): fixed focus indicator cut off (microsoft#31596)

feat: use custom states for button and anchor button variants (microsoft#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (microsoft#31721)

fix:react-nav-preview: High contrast issues (microsoft#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token
@EdDaWord EdDaWord force-pushed the prototype/extended-design-tokens-semantic-and-control-2 branch from e5ce9d1 to f32f216 Compare August 14, 2024 21:34
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 14, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 104.332 kB
32.038 kB		 105.224 kB
32.278 kB		 892 B
240 B
react-avatar
Avatar		 49.303 kB
15.815 kB		 53.082 kB
16.693 kB		 3.779 kB
878 B
react-avatar
AvatarGroup		 20.106 kB
7.968 kB		 20.128 kB
7.983 kB		 22 B
15 B
react-avatar
AvatarGroupItem		 63.447 kB
20.034 kB		 67.634 kB
21.022 kB		 4.187 kB
988 B
react-badge
Badge		 25.954 kB
8.595 kB		 28.248 kB
9.128 kB		 2.294 kB
533 B
react-badge
CounterBadge		 26.733 kB
8.872 kB		 29.027 kB
9.407 kB		 2.294 kB
535 B
react-badge
PresenceBadge		 25.719 kB
9.457 kB		 26.232 kB
9.577 kB		 513 B
120 B
react-breadcrumb
@fluentui/react-breadcrumb - package		 113.699 kB
31.498 kB		 116.505 kB
32.276 kB		 2.806 kB
778 B
react-button
Button		 37.104 kB
10.766 kB		 39.546 kB
11.415 kB		 2.442 kB
649 B
react-button
CompoundButton		 43.518 kB
12.068 kB		 47.282 kB
13.026 kB		 3.764 kB
958 B
react-button
MenuButton		 41.916 kB
12.119 kB		 44.958 kB
12.947 kB		 3.042 kB
828 B
react-button
SplitButton		 49.93 kB
13.696 kB		 54.176 kB
14.669 kB		 4.246 kB
973 B
react-button
ToggleButton		 53.037 kB
12.528 kB		 56.895 kB
13.749 kB		 3.858 kB
1.221 kB
react-calendar-compat
Calendar Compat		 149.573 kB
39.871 kB		 152.21 kB
41.188 kB		 2.637 kB
1.317 kB
react-card
Card - All		 101.238 kB
28.624 kB		 102.587 kB
28.948 kB		 1.349 kB
324 B
react-card
Card		 94.022 kB
26.806 kB		 95.371 kB
27.123 kB		 1.349 kB
317 B
react-checkbox
Checkbox		 35.105 kB
12.075 kB		 36.431 kB
12.448 kB		 1.326 kB
373 B
react-combobox
Combobox (including child components)		 104.398 kB
34.199 kB		 106.961 kB
35.012 kB		 2.563 kB
813 B
react-combobox
Dropdown (including child components)		 104.984 kB
34.114 kB		 107.406 kB
34.891 kB		 2.422 kB
777 B
react-components
react-components: Button, FluentProvider & webLightTheme		 69.14 kB
20.137 kB		 71.638 kB
20.862 kB		 2.498 kB
725 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 218 kB
63.151 kB		 222.87 kB
64.571 kB		 4.87 kB
1.42 kB
react-components
react-components: FluentProvider & webLightTheme		 44.447 kB
14.59 kB		 44.503 kB
14.607 kB		 56 B
17 B
react-components
react-components: entire library		 1.097 MB
270.919 kB		 1.158 MB
289.238 kB		 61.552 kB
18.319 kB
react-datepicker-compat
DatePicker Compat		 223.64 kB
63.299 kB		 228.477 kB
65.126 kB		 4.837 kB
1.827 kB
react-dialog
Dialog (including children components)		 99.541 kB
29.849 kB		 99.567 kB
29.86 kB		 26 B
11 B
react-divider
Divider		 21.328 kB
7.953 kB		 21.696 kB
8.05 kB		 368 B
97 B
react-field
Field		 23.384 kB
8.891 kB		 24.273 kB
9.133 kB		 889 B
242 B
react-image
Image		 15.36 kB
6.236 kB		 15.464 kB
6.272 kB		 104 B
36 B
react-input
Input		 28.014 kB
9.444 kB		 30.088 kB
9.876 kB		 2.074 kB
432 B
react-label
Label		 14.671 kB
5.99 kB		 15.094 kB
6.101 kB		 423 B
111 B
react-link
Link		 17.192 kB
6.98 kB		 17.63 kB
7.103 kB		 438 B
123 B
react-list-preview
ListItem		 112.155 kB
33.274 kB		 113.51 kB
33.653 kB		 1.355 kB
379 B
react-menu
Menu (including children components)		 151.856 kB
45.848 kB		 153.046 kB
46.082 kB		 1.19 kB
234 B
react-menu
Menu (including selectable components)		 154.537 kB
46.326 kB		 155.727 kB
46.607 kB		 1.19 kB
281 B
react-message-bar
MessageBar (all components)		 24.722 kB
9.205 kB		 25.354 kB
9.334 kB		 632 B
129 B
react-persona
Persona		 56.194 kB
17.695 kB		 60.353 kB
18.709 kB		 4.159 kB
1.014 kB
react-popover
Popover		 128.329 kB
40.143 kB		 128.515 kB
40.199 kB		 186 B
56 B
react-progress
ProgressBar		 17.084 kB
6.891 kB		 17.264 kB
6.95 kB		 180 B
59 B
react-provider
FluentProvider		 24.623 kB
8.893 kB		 24.679 kB
8.911 kB		 56 B
18 B
react-radio
Radio		 32.672 kB
10.343 kB		 34.081 kB
10.639 kB		 1.409 kB
296 B
react-select
Select		 27.724 kB
10.123 kB		 28.646 kB
10.368 kB		 922 B
245 B
react-slider
Slider		 37.169 kB
12.538 kB		 37.537 kB
12.643 kB		 368 B
105 B
react-spinbutton
SpinButton		 36.102 kB
11.827 kB		 40.148 kB
12.672 kB		 4.046 kB
845 B
react-spinner
Spinner		 25.245 kB
8.539 kB		 26.433 kB
8.879 kB		 1.188 kB
340 B
react-swatch-picker
@fluentui/react-swatch-picker - package		 103.736 kB
30.073 kB		 104.256 kB
30.355 kB		 520 B
282 B
react-switch
Switch		 35.319 kB
11.314 kB		 37.144 kB
11.683 kB		 1.825 kB
369 B
react-table
DataGrid		 160.296 kB
45.518 kB		 163.408 kB
46.397 kB		 3.112 kB
879 B
react-table
Table (Primitives only)		 42.481 kB
13.802 kB		 43.311 kB
14.088 kB		 830 B
286 B
react-table
Table as DataGrid		 131.15 kB
36.354 kB		 134.316 kB
37.232 kB		 3.166 kB
878 B
react-table
Table (Selection only)		 70.337 kB
19.943 kB		 73.505 kB
20.839 kB		 3.168 kB
896 B
react-table
Table (Sort only)		 68.98 kB
19.555 kB		 72.148 kB
20.452 kB		 3.168 kB
897 B
react-tag-picker
@fluentui/react-tag-picker - package		 182.176 kB
54.779 kB		 185.601 kB
55.873 kB		 3.425 kB
1.094 kB
react-tags
InteractionTag		 15.167 kB
6.141 kB		 15.221 kB
6.164 kB		 54 B
23 B
react-tags
Tag		 28.995 kB
9.519 kB		 31.503 kB
10.058 kB		 2.508 kB
539 B
react-tags
TagGroup		 82.13 kB
24.342 kB		 82.208 kB
24.371 kB		 78 B
29 B
react-text
Text - Default		 17.061 kB
6.723 kB		 17.765 kB
6.927 kB		 704 B
204 B
react-text
Text - Wrappers		 20.242 kB
7.048 kB		 20.946 kB
7.392 kB		 704 B
344 B
react-textarea
Textarea		 26.572 kB
9.755 kB		 27.83 kB
10.048 kB		 1.258 kB
293 B
react-timepicker-compat
TimePicker		 107.387 kB
35.758 kB		 109.764 kB
36.379 kB		 2.377 kB
621 B
react-toast
Toast (including Toaster)		 97.633 kB
29.377 kB		 97.87 kB
29.444 kB		 237 B
67 B
react-tooltip
Tooltip		 55.517 kB
19.515 kB		 55.733 kB
19.582 kB		 216 B
67 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-card
CardFooter		 14.355 kB
5.79 kB
react-card
CardHeader		 16.878 kB
6.666 kB
react-card
CardPreview		 14.42 kB
5.922 kB
react-list-preview
List		 88.626 kB
26.435 kB
react-overflow
hooks only		 12.81 kB
4.821 kB
react-portal
Portal		 14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider		 8.39 kB
2.64 kB
react-radio
RadioGroup		 15.762 kB
6.423 kB
🤖 This report was generated against 1f5662cce2a4371cecc47c0dab5c5ec98908dedd

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 15, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 82 90 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 82 75 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 637 652 5000
Button mount 292 318 5000
Field mount 1163 1126 5000
FluentProvider mount 727 718 5000
FluentProviderWithTheme mount 82 90 10 Possible regression
FluentProviderWithTheme virtual-rerender 31 37 10
FluentProviderWithTheme virtual-rerender-with-unmount 82 75 10 Possible regression
MakeStyles mount 891 885 50000
Persona mount 1775 1763 5000
SpinButton mount 1401 1397 5000
SwatchPicker mount 1633 1674 5000

fabricteam
fabricteam reviewed Aug 15, 2024
View reviewed changes
change/@fluentui-react-accordion-31bad2ca-70dc-4308-a81d-d098d01134cf.json
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Aug 15, 2024

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.Badge Mask RTL.chromium.png 8 Changed
Card Converged 4 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged.Appearance High Contrast.chromium.png 5345 Changed
Card Converged.Appearance Dark Mode.chromium.png 366 Changed
Card Converged.Appearance RTL.chromium.png 276 Changed
Card Converged.appearance.chromium.png 276 Changed
Card Converged - Interactive 6 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged - Interactive.Appearance Interactive Outline Dark Mode.chromium.png 242 Changed
Card Converged - Interactive.appearance interactive - Outline.chromium.png 183 Changed
Card Converged - Interactive.Appearance Interactive Outline High Contrast.chromium.png 1014 Changed
Card Converged - Interactive.Appearance Interactive Filled High Contrast.chromium.png 1014 Changed
Card Converged - Interactive.Appearance Interactive Subtle High Contrast.chromium.png 1014 Changed
Card Converged - Interactive.Appearance Interactive Filled Alternative High Contrast.chromium.png 1014 Changed
Card Converged - Selectable 7 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged - Selectable.Appearance Selectable Filled Alternative High Contrast.chromium.png 1014 Changed
Card Converged - Selectable.Appearance Selectable Subtle High Contrast.chromium.png 1014 Changed
Card Converged - Selectable.Appearance Selectable Outline RTL.chromium.png 183 Changed
Card Converged - Selectable.Appearance Selectable Outline High Contrast.chromium.png 1014 Changed
Card Converged - Selectable.Appearance Selectable Outline Dark Mode.chromium.png 242 Changed
Card Converged - Selectable.appearance selectable - Outline.chromium.png 183 Changed
Card Converged - Selectable.Appearance Selectable Filled High Contrast.chromium.png 1014 Changed
Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay High Contrast.chromium.png 2219 Changed

@EdDaWord EdDaWord mentioned this pull request Aug 15, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@Mitch-At-Work Mitch-At-Work Awaiting requested review from Mitch-At-Work Mitch-At-Work is a code owner

@sopranopillow sopranopillow Awaiting requested review from sopranopillow

@tomi-msft tomi-msft Awaiting requested review from tomi-msft

@mltejera mltejera Awaiting requested review from mltejera

@smhigley smhigley Awaiting requested review from smhigley

@marcosmoura marcosmoura Awaiting requested review from marcosmoura

@khmakoto khmakoto Awaiting requested review from khmakoto

@chpalac chpalac Awaiting requested review from chpalac chpalac is a code owner

@ling1726 ling1726 Awaiting requested review from ling1726

@behowell behowell Awaiting requested review from behowell

@GeoffCoxMSFT GeoffCoxMSFT Awaiting requested review from GeoffCoxMSFT

@spmonahan spmonahan Awaiting requested review from spmonahan spmonahan is a code owner

@micahgodbolt micahgodbolt Awaiting requested review from micahgodbolt

@mainframev 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 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 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

Draft

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@EdDaWord @fabricteam @smhigley @mltejera