Skip to content

Conversation

@tomi-msft
Copy link
Contributor

This is the first PR to split #30003 into two. This will scaffold, the next will implement.

Copy link
Contributor

@behowell behowell left a comment

Choose a reason for hiding this comment

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

This PR seems to be combining a version bump of react-icons, with the scaffolding of the new package. Please split out the react-icons version bump into a separate PR. Thanks!

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2024

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
priority-overflow
createOverflowManager
4.447 kB
1.853 kB
react-accordion
Accordion (including children components)
93.888 kB
28.673 kB
react-alert
Alert
83.737 kB
23.474 kB
react-avatar
Avatar
50.175 kB
15.944 kB
react-avatar
AvatarGroup
19.704 kB
7.796 kB
react-avatar
AvatarGroupItem
64.831 kB
20.274 kB
react-badge
Badge
26.905 kB
8.729 kB
react-badge
CounterBadge
27.806 kB
9.024 kB
react-badge
PresenceBadge
25.311 kB
9.306 kB
react-button
Button
39.513 kB
11.169 kB
react-button
CompoundButton
46.874 kB
12.661 kB
react-button
MenuButton
44.292 kB
12.542 kB
react-button
SplitButton
52.306 kB
14.134 kB
react-button
ToggleButton
56.559 kB
13.068 kB
react-calendar-compat
Calendar Compat
142.162 kB
37.149 kB
react-card
Card - All
94.685 kB
27.248 kB
react-card
Card
89.509 kB
25.733 kB
react-card
CardFooter
13.064 kB
5.385 kB
react-card
CardHeader
15.307 kB
6.143 kB
react-card
CardPreview
14.015 kB
5.752 kB
react-checkbox
Checkbox
34.746 kB
11.902 kB
react-combobox
Combobox (including child components)
95.057 kB
30.655 kB
react-combobox
Dropdown (including child components)
93.643 kB
30.333 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.901 kB
20.261 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
209.783 kB
59.86 kB
react-components
react-components: FluentProvider & webLightTheme
42.388 kB
14.103 kB
react-datepicker-compat
DatePicker Compat
213.537 kB
59.885 kB
react-dialog
Dialog (including children components)
95.452 kB
28.456 kB
react-divider
Divider
20.82 kB
7.763 kB
react-field
Field
22.427 kB
8.573 kB
react-image
Image
15.736 kB
6.228 kB
react-infobutton
InfoButton
132.618 kB
41.704 kB
react-infobutton
InfoLabel
136.305 kB
42.845 kB
react-input
Input
26.887 kB
9.118 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.783 kB
1.648 kB
react-jsx-runtime
JSX Runtime
4.377 kB
1.881 kB
react-label
Label
14.149 kB
5.759 kB
react-link
Link
17.082 kB
6.911 kB
react-menu
Menu (including children components)
141.968 kB
43.516 kB
react-menu
Menu (including selectable components)
144.654 kB
44.025 kB
react-message-bar
MessageBar (all components)
25.181 kB
9.039 kB
react-overflow
hooks only
12.837 kB
4.818 kB
react-persona
Persona
57.066 kB
17.821 kB
react-popover
Popover
120.812 kB
38.11 kB
react-portal
Portal
12.788 kB
4.67 kB
react-portal-compat
PortalCompatProvider
7.099 kB
2.385 kB
react-positioning
usePositioning
25.767 kB
9.308 kB
react-progress
ProgressBar
17.428 kB
6.898 kB
react-provider
FluentProvider
22.928 kB
8.472 kB
react-radio
Radio
31.746 kB
10.365 kB
react-radio
RadioGroup
15.345 kB
6.263 kB
react-select
Select
28.609 kB
10.205 kB
react-slider
Slider
39.15 kB
12.769 kB
react-spinbutton
SpinButton
36.774 kB
11.788 kB
react-spinner
Spinner
23.402 kB
8.467 kB
react-switch
Switch
34.23 kB
10.995 kB
react-table
DataGrid
154.896 kB
43.531 kB
react-table
Table (Primitives only)
43.899 kB
13.781 kB
react-table
Table as DataGrid
128.117 kB
34.788 kB
react-table
Table (Selection only)
73.296 kB
20.012 kB
react-table
Table (Sort only)
71.903 kB
19.613 kB
react-tags
InteractionTag
15.259 kB
6.058 kB
react-tags
Tag
29.982 kB
9.439 kB
react-tags
TagGroup
74.331 kB
22.28 kB
react-text
Text - Default
16.705 kB
6.569 kB
react-text
Text - Wrappers
19.878 kB
6.896 kB
react-textarea
Textarea
30.947 kB
10.476 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.616 kB
7.317 kB
react-theme
Teams: Light theme
19.287 kB
5.498 kB
react-timepicker-compat
TimePicker
96.894 kB
32.105 kB
react-timepicker-compat-preview
TimePicker
96.894 kB
32.105 kB
react-toast
Toast (including Toaster)
93.203 kB
28.026 kB
react-tooltip
Tooltip
53.252 kB
18.806 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 5328bbd9d25e2846a4b649c0fd86be600d4bdc32

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2024

Perf Analysis (@fluentui/react-components)

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

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 619 614 5000
Button mount 302 304 5000
Field mount 1136 1116 5000
FluentProvider mount 713 720 5000
FluentProviderWithTheme mount 84 81 10
FluentProviderWithTheme virtual-rerender 63 63 10
FluentProviderWithTheme virtual-rerender-with-unmount 75 72 10 Possible regression
MakeStyles mount 851 861 50000
Persona mount 1743 1692 5000
SpinButton mount 1348 1385 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 4, 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.

Latest deployment of this branch, based on commit 4f846c8:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2024

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AccordionMinimalPerf.default 89 85 1.05:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
LabelMinimalPerf.default 237 214 1.11:1
TableMinimalPerf.default 241 224 1.08:1
ImageMinimalPerf.default 236 221 1.07:1
ProviderMinimalPerf.default 204 191 1.07:1
ChatWithPopoverPerf.default 209 197 1.06:1
LayoutMinimalPerf.default 206 194 1.06:1
ButtonMinimalPerf.default 86 82 1.05:1
RefMinimalPerf.default 113 108 1.05:1
CustomToolbarPrototype.default 1525 1454 1.05:1
TreeWith60ListItems.default 91 87 1.05:1
AttachmentSlotsPerf.default 645 618 1.04:1
BoxMinimalPerf.default 206 198 1.04:1
AvatarMinimalPerf.default 110 107 1.03:1
CardMinimalPerf.default 318 310 1.03:1
ChatDuplicateMessagesPerf.default 160 156 1.03:1
DividerMinimalPerf.default 214 208 1.03:1
EmbedMinimalPerf.default 1920 1862 1.03:1
HeaderMinimalPerf.default 208 201 1.03:1
TableManyItemsPerf.default 1120 1092 1.03:1
TextMinimalPerf.default 192 186 1.03:1
TextAreaMinimalPerf.default 299 291 1.03:1
VideoMinimalPerf.default 429 416 1.03:1
AlertMinimalPerf.default 157 154 1.02:1
AttachmentMinimalPerf.default 84 82 1.02:1
FlexMinimalPerf.default 159 156 1.02:1
FormMinimalPerf.default 219 215 1.02:1
PortalMinimalPerf.default 89 87 1.02:1
SliderMinimalPerf.default 758 742 1.02:1
SplitButtonMinimalPerf.default 2307 2264 1.02:1
ButtonOverridesMissPerf.default 658 652 1.01:1
DropdownManyItemsPerf.default 396 391 1.01:1
ListCommonPerf.default 389 385 1.01:1
ListMinimalPerf.default 308 305 1.01:1
LoaderMinimalPerf.default 203 201 1.01:1
RosterPerf.default 1583 1563 1.01:1
RadioGroupMinimalPerf.default 256 253 1.01:1
ReactionMinimalPerf.default 212 210 1.01:1
TooltipMinimalPerf.default 1265 1254 1.01:1
TreeMinimalPerf.default 484 479 1.01:1
AnimationMinimalPerf.default 298 298 1:1
DialogMinimalPerf.default 441 442 1:1
DropdownMinimalPerf.default 1434 1439 1:1
HeaderSlotsPerf.default 464 463 1:1
ItemLayoutMinimalPerf.default 709 711 1:1
ListWith60ListItems.default 360 360 1:1
ProviderMergeThemesPerf.default 638 638 1:1
SkeletonMinimalPerf.default 190 190 1:1
MenuMinimalPerf.default 496 502 0.99:1
MenuButtonMinimalPerf.default 961 975 0.99:1
ToolbarMinimalPerf.default 533 541 0.99:1
CheckboxMinimalPerf.default 1157 1177 0.98:1
InputMinimalPerf.default 524 534 0.98:1
SegmentMinimalPerf.default 193 197 0.98:1
ButtonSlotsPerf.default 310 320 0.97:1
CarouselMinimalPerf.default 262 269 0.97:1
GridMinimalPerf.default 187 193 0.97:1
ListNestedPerf.default 318 327 0.97:1
PopupMinimalPerf.default 344 355 0.97:1
IconMinimalPerf.default 382 394 0.97:1
DatepickerMinimalPerf.default 3632 3769 0.96:1
ChatMinimalPerf.default 427 449 0.95:1
StatusMinimalPerf.default 380 398 0.95:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 630 635 5000
Breadcrumb mount 1663 1689 1000
Checkbox mount 1655 1646 5000
CheckboxBase mount 1442 1481 5000
ChoiceGroup mount 2933 2992 5000
ComboBox mount 657 656 1000
CommandBar mount 6222 6154 1000
ContextualMenu mount 12544 12873 1000
DefaultButton mount 755 740 5000
DetailsRow mount 2123 2227 5000
DetailsRowFast mount 2180 2164 5000
DetailsRowNoStyles mount 2017 1990 5000
Dialog mount 2639 2747 1000
DocumentCardTitle mount 228 221 1000
Dropdown mount 1944 1933 5000
FocusTrapZone mount 1125 1115 5000
FocusZone mount 1056 1067 5000
GroupedList mount 41509 41895 2
GroupedList virtual-rerender 19986 20145 2
GroupedList virtual-rerender-with-unmount 50987 50956 2
GroupedListV2 mount 227 235 2
GroupedListV2 virtual-rerender 211 210 2
GroupedListV2 virtual-rerender-with-unmount 231 227 2
IconButton mount 1108 1078 5000
Label mount 335 336 5000
Layer mount 2735 2738 5000
Link mount 388 392 5000
MenuButton mount 928 931 5000
MessageBar mount 21265 21350 5000
Nav mount 1946 1945 1000
OverflowSet mount 787 792 5000
Panel mount 1770 1731 1000
Persona mount 751 750 1000
Pivot mount 867 866 1000
PrimaryButton mount 823 835 5000
Rating mount 4588 4565 5000
SearchBox mount 895 911 5000
Shimmer mount 1903 1884 5000
Slider mount 1330 1312 5000
SpinButton mount 2902 2842 5000
Spinner mount 400 377 5000
SplitButton mount 1853 1838 5000
Stack mount 411 413 5000
StackWithIntrinsicChildren mount 836 861 5000
StackWithTextChildren mount 2594 2556 5000
SwatchColorPicker mount 6132 6207 5000
TagPicker mount 1430 1440 5000
Text mount 370 372 5000
TextField mount 925 941 5000
ThemeProvider mount 821 820 5000
ThemeProvider virtual-rerender 595 569 5000
ThemeProvider virtual-rerender-with-unmount 1247 1292 5000
Toggle mount 597 616 5000
buttonNative mount 192 187 5000

@tomi-msft tomi-msft force-pushed the react-icons-utility-package-scaffold branch from b5a0188 to ff7e64b Compare January 4, 2024 21:40
@tomi-msft tomi-msft requested a review from behowell January 4, 2024 21:44
@tomi-msft tomi-msft dismissed behowell’s stale review January 4, 2024 22:02

prs have been split

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

@size-auditor
Copy link

size-auditor bot commented Jan 4, 2024

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 5328bbd9d25e2846a4b649c0fd86be600d4bdc32 (build)

Copy link
Collaborator

@JustSlone JustSlone left a comment

Choose a reason for hiding this comment

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

approving the codeowners change, make sure to resolve the outstanding review comments

@tomi-msft tomi-msft merged commit 0664640 into microsoft:master Jan 5, 2024
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.

6 participants