Skip to content

(Architecture Prototype): hashed extended tokens #32341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
EdDaWord wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

(Architecture Prototype): hashed extended tokens #32341

EdDaWord wants to merge 1 commit into from

Conversation

@EdDaWord
Copy link
Contributor

@EdDaWord EdDaWord commented Aug 19, 2024

Prototyping test for Teams

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 19, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 104.529 kB
32.097 kB		 105.421 kB
32.337 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.197 kB
63.203 kB		 223.067 kB
64.625 kB		 4.87 kB
1.422 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
271.068 kB		 1.159 MB
289.388 kB		 61.543 kB
18.32 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.724 kB
29.912 kB		 99.75 kB
29.921 kB		 26 B
9 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.276 kB
54.803 kB		 185.701 kB
55.897 kB		 3.425 kB
1.094 kB
react-tags
InteractionTag		 15.199 kB
6.157 kB		 15.253 kB
6.181 kB		 54 B
24 B
react-tags
Tag		 29.027 kB
9.528 kB		 31.535 kB
10.07 kB		 2.508 kB
542 B
react-tags
TagGroup		 82.197 kB
24.362 kB		 82.275 kB
24.39 kB		 78 B
28 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.816 kB
29.438 kB		 98.053 kB
29.503 kB		 237 B
65 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 18c6a61df0ed0f20092b21d66d0b21411796fa00

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 19, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

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

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 635 627 5000
Button mount 309 312 5000
Field mount 1153 1124 5000
FluentProvider mount 722 711 5000
FluentProviderWithTheme mount 93 90 10
FluentProviderWithTheme virtual-rerender 34 40 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 81 93 10
MakeStyles mount 871 848 50000
Persona mount 1766 1774 5000
SpinButton mount 1407 1426 5000
SwatchPicker mount 1666 1662 5000

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

@fabricteam fabricteam Aug 19, 2024 •
edited
Loading

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 3 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.Badge Mask RTL.chromium.png 2 Changed
Avatar Converged.Basic High Contrast.chromium.png 2 Changed
Avatar Converged.badgeMask.chromium.png 2 Changed
Card Converged 4 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged.Appearance Dark Mode.chromium.png 366 Changed
Card Converged.Appearance High Contrast.chromium.png 5345 Changed
Card Converged.appearance.chromium.png 276 Changed
Card Converged.Appearance RTL.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 Subtle High Contrast.chromium.png 1014 Changed
Card Converged - Interactive.Appearance Interactive Filled Alternative High Contrast.chromium.png 1014 Changed
Card Converged - Interactive.Appearance Interactive Filled High Contrast.chromium.png 1014 Changed
Card Converged - Interactive.Appearance Interactive Outline High Contrast.chromium.png 1014 Changed
Card Converged - Interactive.appearance interactive - Outline.chromium.png 183 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 Outline Dark Mode.chromium.png 242 Changed
Card Converged - Selectable.Appearance Selectable Subtle High Contrast.chromium.png 1014 Changed
Card Converged - Selectable.Appearance Selectable Filled 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.chromium.png 183 Changed
Drawer 2 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay High Contrast.chromium.png 2220 Changed
Drawer.overlay drawer full.chromium.png 1147 Changed

@EdDaWord EdDaWord force-pushed the prototype/extended-design-tokens-semantic-and-control-2 branch 2 times, most recently from ffdafe1 to 6bbdaed Compare August 20, 2024 18:43
@EdDaWord
Try a single file change
3a595f4 
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

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

chore(motion): add bundle size fixtures (#31730)

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

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

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

fix:react-nav-preview: High contrast issues (#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

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake

Fix Random YML File

Fix rebase mistake

Fix mistake on number of quotes

Fix any possible merge conflicts
@EdDaWord EdDaWord force-pushed the prototype/extended-design-tokens-semantic-and-control-2 branch from 2cf9f28 to 3a595f4 Compare August 23, 2024 17:55
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 will be requested when the pull request is marked ready for review Mitch-At-Work is a code owner

@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

@chpalac chpalac Awaiting requested review from chpalac chpalac will be requested when the pull request is marked ready for review chpalac is a code owner

@spmonahan spmonahan Awaiting requested review from spmonahan spmonahan will be requested when the pull request is marked ready for review spmonahan is a code owner

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

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@EdDaWord @fabricteam