Skip to content

(chore) Move react-avatar, react-button & react-checkbox to react-components subfolder#22644

Merged
TristanWatanabe merged 8 commits into
microsoft:masterfrom
TristanWatanabe:move-cxe-red-pkgs-batch-1
Apr 27, 2022
Merged

(chore) Move react-avatar, react-button & react-checkbox to react-components subfolder#22644
TristanWatanabe merged 8 commits into
microsoft:masterfrom
TristanWatanabe:move-cxe-red-pkgs-batch-1

Conversation

@TristanWatanabe

@TristanWatanabe TristanWatanabe commented Apr 26, 2022

Copy link
Copy Markdown
Member

Changes

  • Moves @fluentui/react-avatar, @fluentui/react-button and @fluentui/react-checkbox to react-components common folder using move-packages nx generator.

Related Issue(s)

Part of #22427

@codesandbox-ci

codesandbox-ci Bot commented Apr 26, 2022 •
edited
Loading

Copy link
Copy Markdown

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 a3a7dc1:

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

@fabricteam

fabricteam commented Apr 26, 2022 •
edited
Loading

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
priority-overflow
createOverflowManager		 2.936 kB
1.212 kB
react-accordion
Accordion (including children components)		 73.754 kB
22.494 kB
react-badge
Badge		 20.965 kB
6.605 kB
react-badge
CounterBadge		 21.918 kB
6.919 kB
react-badge
PresenceBadge		 22.005 kB
6.582 kB
react-card
Card - All		 57.884 kB
16.524 kB
react-card
Card		 53.169 kB
15.238 kB
react-card
CardFooter		 7.756 kB
3.299 kB
react-card
CardHeader		 9.321 kB
3.816 kB
react-card
CardPreview		 7.728 kB
3.323 kB
react-combobox
Combobox		 60.564 kB
20.751 kB
react-divider
Divider		 15.455 kB
5.57 kB
react-image
Image		 10.179 kB
3.995 kB
react-input
Input		 21.775 kB
7.228 kB
react-label
Label		 8.441 kB
3.541 kB
react-link
Link		 11.176 kB
4.545 kB
react-menu
Menu (including children components)		 110.192 kB
33.528 kB
react-menu
Menu (including selectable components)		 113.367 kB
33.991 kB
react-popover
Popover		 100.693 kB
30.67 kB
react-portal
Portal		 6.272 kB
2.17 kB
react-positioning
usePopper		 23.21 kB
8.084 kB
react-priority-overflow
hooks only		 10.792 kB
4.125 kB
react-provider
FluentProvider		 14.079 kB
5.274 kB
react-select
Select		 16.616 kB
6.281 kB
react-slider
Slider		 25.619 kB
8.287 kB
react-spinbutton
SpinButton		 41.955 kB
11.856 kB
react-spinner
Spinner		 17.224 kB
5.856 kB
react-switch
Switch		 24.333 kB
8.019 kB
react-text
Text - Default		 10.867 kB
4.269 kB
react-text
Text - Wrappers		 14.183 kB
4.61 kB
react-textarea
Textarea		 20.672 kB
7.07 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 30.098 kB
6.657 kB
react-theme
Teams: Light theme		 18.632 kB
5.317 kB
react-tooltip
Tooltip		 42.907 kB
14.761 kB
react-utilities
SSRProvider		 189 B
161 B
🤖 This report was generated against 275f5182f8008016c5bad0c00c38c52474a47b8b

@fabricteam

fabricteam commented Apr 26, 2022 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
IconMinimalPerf.default 644 567 1.14:1
ListWith60ListItems.default 670 612 1.09:1
TableMinimalPerf.default 440 405 1.09:1
AlertMinimalPerf.default 285 267 1.07:1
LayoutMinimalPerf.default 366 342 1.07:1
RosterPerf.default 1156 1082 1.07:1
TextMinimalPerf.default 362 341 1.06:1
TextAreaMinimalPerf.default 509 481 1.06:1
ReactionMinimalPerf.default 384 365 1.05:1
ToolbarMinimalPerf.default 982 939 1.05:1
ChatDuplicateMessagesPerf.default 306 294 1.04:1
HeaderMinimalPerf.default 355 341 1.04:1
ItemLayoutMinimalPerf.default 1210 1161 1.04:1
ChatMinimalPerf.default 742 719 1.03:1
DropdownMinimalPerf.default 3098 3014 1.03:1
ListCommonPerf.default 632 611 1.03:1
ListMinimalPerf.default 498 485 1.03:1
PopupMinimalPerf.default 628 612 1.03:1
PortalMinimalPerf.default 173 168 1.03:1
RadioGroupMinimalPerf.default 452 437 1.03:1
AttachmentMinimalPerf.default 152 149 1.02:1
BoxMinimalPerf.default 338 333 1.02:1
HeaderSlotsPerf.default 756 741 1.02:1
RefMinimalPerf.default 233 229 1.02:1
ChatWithPopoverPerf.default 377 375 1.01:1
FormMinimalPerf.default 403 398 1.01:1
LabelMinimalPerf.default 377 375 1.01:1
LoaderMinimalPerf.default 684 675 1.01:1
TooltipMinimalPerf.default 1053 1043 1.01:1
AnimationMinimalPerf.default 537 538 1:1
AttachmentSlotsPerf.default 1083 1081 1:1
CheckboxMinimalPerf.default 2696 2690 1:1
DialogMinimalPerf.default 746 748 1:1
FlexMinimalPerf.default 286 285 1:1
ImageMinimalPerf.default 380 380 1:1
MenuMinimalPerf.default 856 854 1:1
ProviderMergeThemesPerf.default 1273 1269 1:1
SkeletonMinimalPerf.default 342 343 1:1
SplitButtonMinimalPerf.default 4449 4434 1:1
CustomToolbarPrototype.default 2742 2742 1:1
AccordionMinimalPerf.default 142 143 0.99:1
ButtonMinimalPerf.default 164 165 0.99:1
DatepickerMinimalPerf.default 5535 5618 0.99:1
DividerMinimalPerf.default 350 353 0.99:1
InputMinimalPerf.default 1299 1318 0.99:1
MenuButtonMinimalPerf.default 1660 1673 0.99:1
StatusMinimalPerf.default 674 678 0.99:1
TableManyItemsPerf.default 1928 1952 0.99:1
ButtonOverridesMissPerf.default 1482 1509 0.98:1
ButtonSlotsPerf.default 526 538 0.98:1
EmbedMinimalPerf.default 4033 4131 0.98:1
ListNestedPerf.default 525 538 0.98:1
ProviderMinimalPerf.default 389 397 0.98:1
TreeMinimalPerf.default 784 797 0.98:1
CarouselMinimalPerf.default 472 488 0.97:1
GridMinimalPerf.default 330 340 0.97:1
AvatarMinimalPerf.default 184 192 0.96:1
CardMinimalPerf.default 551 572 0.96:1
TreeWith60ListItems.default 170 177 0.96:1
SliderMinimalPerf.default 1650 1733 0.95:1
VideoMinimalPerf.default 644 680 0.95:1
SegmentMinimalPerf.default 331 358 0.92:1
DropdownManyItemsPerf.default 628 691 0.91:1

@fabricteam

fabricteam commented Apr 26, 2022 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 783 800 5000
Breadcrumb mount 2217 2369 1000
Checkbox mount 1224 1303 5000
CheckboxBase mount 1108 1083 5000
ChoiceGroup mount 4019 4137 5000
ComboBox mount 852 861 1000
CommandBar mount 8990 8999 1000
ContextualMenu mount 10778 10738 1000
DefaultButton mount 948 955 5000
DetailsRow mount 3334 3304 5000
DetailsRowFast mount 3283 3212 5000
DetailsRowNoStyles mount 3172 3139 5000
Dialog mount 1830 1934 1000
DocumentCardTitle mount 138 154 1000
Dropdown mount 2900 2800 5000
FocusTrapZone mount 1575 1589 5000
FocusZone mount 1598 1549 5000
IconButton mount 1491 1529 5000
Label mount 316 297 5000
Layer mount 2559 2557 5000
Link mount 397 401 5000
MenuButton mount 1196 1266 5000
MessageBar mount 1900 1822 5000
Nav mount 2863 2899 1000
OverflowSet mount 942 964 5000
Panel mount 1820 1864 1000
Persona mount 882 870 1000
Pivot mount 1247 1303 1000
PrimaryButton mount 1124 1096 5000
Rating mount 6696 6639 5000
SearchBox mount 1126 1080 5000
Shimmer mount 2145 2197 5000
Slider mount 1617 1647 5000
SpinButton mount 4352 4169 5000
Spinner mount 380 348 5000
SplitButton mount 2745 2755 5000
Stack mount 451 457 5000
StackWithIntrinsicChildren mount 1993 2008 5000
StackWithTextChildren mount 4356 4299 5000
SwatchColorPicker mount 10043 9757 5000
TagPicker mount 2376 2285 5000
TeachingBubble mount 93719 93807 5000
Text mount 375 365 5000
TextField mount 1228 1201 5000
ThemeProvider mount 1051 1027 5000
ThemeProvider virtual-rerender 568 588 5000
ThemeProvider virtual-rerender-with-unmount 1613 1663 5000
Toggle mount 668 709 5000
buttonNative mount 111 122 5000

@fabricteam

fabricteam commented Apr 26, 2022 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1124 1114 5000 Possible regression
Button mount 671 664 5000 Possible regression
FluentProvider mount 2154 2113 5000 Possible regression
FluentProviderWithTheme mount 336 335 10 Possible regression
FluentProviderWithTheme virtual-rerender 269 285 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 367 350 10 Possible regression
MakeStyles mount 1878 1830 50000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1124 1114 5000 Possible regression
Button mount 671 664 5000 Possible regression
FluentProvider mount 2154 2113 5000 Possible regression
FluentProviderWithTheme mount 336 335 10 Possible regression
FluentProviderWithTheme virtual-rerender 269 285 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 367 350 10 Possible regression
MakeStyles mount 1878 1830 50000 Possible regression

@size-auditor

size-auditor Bot commented Apr 26, 2022 •
edited
Loading

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 275f5182f8008016c5bad0c00c38c52474a47b8b (build)

@TristanWatanabe TristanWatanabe mentioned this pull request Apr 26, 2022
Closed
23 tasks
@TristanWatanabe TristanWatanabe marked this pull request as ready for review April 26, 2022 21:58
@tudorpopams tudorpopams requested a review from Hotell April 27, 2022 12:18
Hotell
Hotell approved these changes Apr 27, 2022
View reviewed changes

@Hotell Hotell left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

#22655 (comment)

@TristanWatanabe

TristanWatanabe commented Apr 27, 2022

Copy link
Copy Markdown
Member Author

#22655 (comment)

Manually updated the build:local task of each moved package in this PR to fix issue :)

@TristanWatanabe TristanWatanabe merged commit e791a91 into microsoft:master Apr 27, 2022
@TristanWatanabe TristanWatanabe deleted the move-cxe-red-pkgs-batch-1 branch April 27, 2022 17:50
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
@TristanWatanabe @marwan38
(chore) Move react-avatar, react-button & react-checkbox to react-com…
0930295 
…ponents subfolder (microsoft#22644)

* move react-avatar

* move react-button

* move react-checkbox

* Change Files

* update API

* update local api-extractor

* update build:local script
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Hotell Hotell Hotell approved these changes
@sopranopillow sopranopillow sopranopillow approved these changes
@JustSlone JustSlone JustSlone approved these changes
@spmonahan spmonahan spmonahan approved these changes
@khmakoto khmakoto Awaiting requested review from khmakoto
@behowell behowell Awaiting requested review from behowell
@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

Assignees

@TristanWatanabe TristanWatanabe

Labels

Area: Build System

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@TristanWatanabe @fabricteam @Hotell @sopranopillow @JustSlone @spmonahan @miroslavstastny