Skip to content

chore: rework context selector#30950

Closed
layershifter wants to merge 1 commit intomicrosoft:masterfrom
layershifter:chore/new-ctx-selector
Closed

chore: rework context selector#30950
layershifter wants to merge 1 commit intomicrosoft:masterfrom
layershifter:chore/new-ctx-selector

Conversation

@layershifter
Copy link
Copy Markdown
Member

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

@github-actions github-actions Bot added this to the April Project Cycle Q1 2024 milestone Apr 3, 2024
@layershifter layershifter force-pushed the chore/new-ctx-selector branch from c708327 to 3236351 Compare April 3, 2024 14:11
@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Apr 3, 2024

Perf Analysis (@fluentui/react-components)

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

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 652 656 5000
Button mount 309 302 5000
Field mount 1131 1122 5000
FluentProvider mount 703 721 5000
FluentProviderWithTheme mount 87 79 10
FluentProviderWithTheme virtual-rerender 31 37 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 75 84 10
MakeStyles mount 867 873 50000
Persona mount 1743 1712 5000
SpinButton mount 1394 1388 5000
SwatchPicker mount 1650 1613 5000

@layershifter layershifter force-pushed the chore/new-ctx-selector branch from 3236351 to 992c74e Compare April 3, 2024 14:23
@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Apr 3, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
99.137 kB
30.201 kB
95.112 kB
28.76 kB
-4.025 kB
-1.441 kB
react-avatar
AvatarGroup
20.107 kB
7.973 kB
15.598 kB
6.368 kB
-4.509 kB
-1.605 kB
react-avatar
AvatarGroupItem
63.445 kB
20.061 kB
59.221 kB
18.527 kB
-4.224 kB
-1.534 kB
react-combobox
Combobox (including child components)
103.623 kB
34.007 kB
99.579 kB
32.6 kB
-4.044 kB
-1.407 kB
react-combobox
Dropdown (including child components)
104.209 kB
33.914 kB
100.165 kB
32.527 kB
-4.044 kB
-1.387 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
211.781 kB
60.963 kB
207.745 kB
59.482 kB
-4.036 kB
-1.481 kB
react-components
react-components: entire library
1.096 MB
271.168 kB
1.091 MB
269.331 kB
-4.825 kB
-1.837 kB
react-dialog
Dialog (including children components)
99.413 kB
29.881 kB
95.367 kB
28.433 kB
-4.046 kB
-1.448 kB
react-menu
Menu (including children components)
151.286 kB
45.713 kB
147.242 kB
44.25 kB
-4.044 kB
-1.463 kB
react-menu
Menu (including selectable components)
153.972 kB
46.205 kB
149.928 kB
44.737 kB
-4.044 kB
-1.468 kB
react-overflow
hooks only
12.821 kB
4.813 kB
8.819 kB
3.333 kB
-4.002 kB
-1.48 kB
react-popover
Popover
127.198 kB
39.776 kB
123.171 kB
38.292 kB
-4.027 kB
-1.484 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
103.73 kB
30.098 kB
99.703 kB
28.649 kB
-4.027 kB
-1.449 kB
react-table
DataGrid
160.337 kB
45.661 kB
156.313 kB
44.232 kB
-4.024 kB
-1.429 kB
react-tag-picker
@fluentui/react-tag-picker - package
181.227 kB
54.489 kB
177.183 kB
53.091 kB
-4.044 kB
-1.398 kB
react-timepicker-compat
TimePicker
106.611 kB
35.546 kB
102.567 kB
34.103 kB
-4.044 kB
-1.443 kB
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
react-avatar
Avatar
49.301 kB
15.838 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
113.697 kB
31.537 kB
react-checkbox
Checkbox
35.105 kB
12.112 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-datepicker-compat
DatePicker Compat
223.049 kB
63.147 kB
react-field
Field
23.384 kB
8.903 kB
react-input
Input
28.015 kB
9.456 kB
react-persona
Persona
56.192 kB
17.728 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-progress
ProgressBar
17.086 kB
6.906 kB
react-radio
Radio
32.673 kB
10.351 kB
react-radio
RadioGroup
15.76 kB
6.433 kB
react-select
Select
27.723 kB
10.131 kB
react-slider
Slider
37.17 kB
12.547 kB
react-spinbutton
SpinButton
36.102 kB
11.85 kB
react-switch
Switch
35.301 kB
11.348 kB
react-table
Table (Primitives only)
42.482 kB
13.868 kB
react-table
Table as DataGrid
131.142 kB
36.351 kB
react-table
Table (Selection only)
70.336 kB
20.028 kB
react-table
Table (Sort only)
68.979 kB
19.633 kB
react-tags
InteractionTag
15.167 kB
6.135 kB
react-tags
Tag
28.996 kB
9.52 kB
react-tags
TagGroup
82.124 kB
24.344 kB
react-textarea
Textarea
26.572 kB
9.769 kB
🤖 This report was generated against 9b99a9d6dacf6bdf082c3078b5a0668b83d322e5

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Apr 3, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Apr 3, 2024

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 175 151 1.16:1
AvatarMinimalPerf.default 116 104 1.12:1
TreeWith60ListItems.default 97 89 1.09:1
AttachmentMinimalPerf.default 90 83 1.08:1
AttachmentSlotsPerf.default 662 615 1.08:1
IconMinimalPerf.default 394 366 1.08:1
TextAreaMinimalPerf.default 301 278 1.08:1
BoxMinimalPerf.default 202 189 1.07:1
ListMinimalPerf.default 322 302 1.07:1
ChatWithPopoverPerf.default 191 180 1.06:1
TableMinimalPerf.default 240 227 1.06:1
ToolbarMinimalPerf.default 574 540 1.06:1
TextMinimalPerf.default 198 188 1.05:1
TreeMinimalPerf.default 506 483 1.05:1
DialogMinimalPerf.default 446 430 1.04:1
GridMinimalPerf.default 190 183 1.04:1
ListNestedPerf.default 323 312 1.04:1
ProviderMinimalPerf.default 207 199 1.04:1
TableManyItemsPerf.default 1134 1088 1.04:1
ButtonMinimalPerf.default 91 88 1.03:1
InputMinimalPerf.default 550 536 1.03:1
AccordionMinimalPerf.default 84 82 1.02:1
ButtonOverridesMissPerf.default 692 680 1.02:1
CardMinimalPerf.default 311 305 1.02:1
DropdownManyItemsPerf.default 387 378 1.02:1
DropdownMinimalPerf.default 1432 1410 1.02:1
PortalMinimalPerf.default 84 82 1.02:1
ProviderMergeThemesPerf.default 652 642 1.02:1
ReactionMinimalPerf.default 206 202 1.02:1
RefMinimalPerf.default 113 111 1.02:1
SplitButtonMinimalPerf.default 2296 2254 1.02:1
ChatDuplicateMessagesPerf.default 159 157 1.01:1
ChatMinimalPerf.default 443 439 1.01:1
ListCommonPerf.default 385 383 1.01:1
ListWith60ListItems.default 359 357 1.01:1
MenuButtonMinimalPerf.default 964 950 1.01:1
SegmentMinimalPerf.default 196 195 1.01:1
SliderMinimalPerf.default 748 743 1.01:1
CustomToolbarPrototype.default 1491 1475 1.01:1
AlertMinimalPerf.default 161 161 1:1
CheckboxMinimalPerf.default 1140 1141 1:1
DatepickerMinimalPerf.default 3663 3668 1:1
DividerMinimalPerf.default 201 200 1:1
EmbedMinimalPerf.default 1878 1874 1:1
LabelMinimalPerf.default 213 213 1:1
MenuMinimalPerf.default 503 502 1:1
RadioGroupMinimalPerf.default 256 255 1:1
StatusMinimalPerf.default 393 393 1:1
VideoMinimalPerf.default 435 433 1:1
AnimationMinimalPerf.default 295 298 0.99:1
ButtonSlotsPerf.default 308 312 0.99:1
HeaderSlotsPerf.default 476 479 0.99:1
ItemLayoutMinimalPerf.default 699 706 0.99:1
RosterPerf.default 1546 1557 0.99:1
PopupMinimalPerf.default 341 346 0.99:1
CarouselMinimalPerf.default 253 257 0.98:1
HeaderMinimalPerf.default 205 212 0.97:1
ImageMinimalPerf.default 226 232 0.97:1
LayoutMinimalPerf.default 192 197 0.97:1
SkeletonMinimalPerf.default 191 196 0.97:1
TooltipMinimalPerf.default 1248 1290 0.97:1
FormMinimalPerf.default 210 228 0.92:1
LoaderMinimalPerf.default 183 203 0.9:1

@layershifter layershifter force-pushed the chore/new-ctx-selector branch from 992c74e to 00d991a Compare April 3, 2024 14:33
@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Apr 3, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 629 611 5000
Breadcrumb mount 1706 1687 1000
Checkbox mount 1682 1694 5000
CheckboxBase mount 1453 1465 5000
ChoiceGroup mount 2943 2929 5000
ComboBox mount 665 653 1000
CommandBar mount 6200 6262 1000
ContextualMenu mount 12516 12679 1000
DefaultButton mount 766 782 5000
DetailsRow mount 2179 2195 5000
DetailsRowFast mount 2182 2220 5000
DetailsRowNoStyles mount 2053 1997 5000
Dialog mount 2649 2782 1000
DocumentCardTitle mount 220 238 1000
Dropdown mount 1969 2013 5000
FocusTrapZone mount 1183 1175 5000
FocusZone mount 1054 1064 5000
GroupedList mount 41728 41925 2
GroupedList virtual-rerender 20136 20089 2
GroupedList virtual-rerender-with-unmount 51085 51254 2
GroupedListV2 mount 229 232 2
GroupedListV2 virtual-rerender 208 219 2
GroupedListV2 virtual-rerender-with-unmount 231 224 2
IconButton mount 1080 1084 5000
Label mount 350 339 5000
Layer mount 2722 2769 5000
Link mount 392 412 5000
MenuButton mount 944 933 5000
MessageBar mount 21542 21437 5000
Nav mount 1931 1952 1000
OverflowSet mount 784 788 5000
Panel mount 1779 1740 1000
Persona mount 777 734 1000
Pivot mount 878 874 1000
PrimaryButton mount 860 864 5000
Rating mount 4623 4634 5000
SearchBox mount 888 932 5000
Shimmer mount 1870 1840 5000
Slider mount 1286 1302 5000
SpinButton mount 2886 2867 5000
Spinner mount 396 381 5000
SplitButton mount 1833 1840 5000
Stack mount 403 392 5000
StackWithIntrinsicChildren mount 844 837 5000
StackWithTextChildren mount 2600 2554 5000
SwatchColorPicker mount 6238 6170 5000
TagPicker mount 1445 1474 5000
Text mount 363 368 5000
TextField mount 926 929 5000
ThemeProvider mount 835 835 5000
ThemeProvider virtual-rerender 581 578 5000
ThemeProvider virtual-rerender-with-unmount 1283 1268 5000
Toggle mount 631 629 5000
buttonNative mount 184 178 5000

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Apr 3, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@layershifter layershifter force-pushed the chore/new-ctx-selector branch from 00d991a to dda7972 Compare April 3, 2024 14:52
@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Apr 3, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@layershifter layershifter force-pushed the chore/new-ctx-selector branch from dda7972 to ef0e4bd Compare July 23, 2024 15:30
@layershifter layershifter force-pushed the chore/new-ctx-selector branch 3 times, most recently from f62cf95 to 7553929 Compare July 23, 2024 16:06
@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown
Collaborator

@fabricteam fabricteam Jul 23, 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

Card Converged - Interactive 3 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged - Interactive.appearance interactive - Filled - Dark Mode.click.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Filled - Dark Mode.hover.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Filled - Dark Mode.normal.chromium.png 0 Added
SwatchPicker Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
SwatchPicker Converged.Spacing.default.chromium.png 0 Removed

@layershifter layershifter force-pushed the chore/new-ctx-selector branch from 7553929 to 58d817e Compare July 23, 2024 16:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants