Skip to content

(chore) Move @fluentui/react-components to react-components subfolder #22557

Merged
TristanWatanabe merged 42 commits into
microsoft:masterfrom
TristanWatanabe:move-react-components
Apr 26, 2022
Merged

(chore) Move @fluentui/react-components to react-components subfolder #22557
TristanWatanabe merged 42 commits into
microsoft:masterfrom
TristanWatanabe:move-react-components

Conversation

@TristanWatanabe

@TristanWatanabe TristanWatanabe commented Apr 19, 2022

Copy link
Copy Markdown
Member

Changes:

As per RFC #22506, this PR moves @fluentui/react-components to a new subfolder called react-components where all v9 packages will be located.

This PR uses the new move-packages nx generator (#22506) for the actual package file moves but some manual work were also done to account for the new subfolder workspace along with various path updates in the repo that referenced react-components

Fixes:

Part of #22427

@codesandbox-ci

codesandbox-ci Bot commented Apr 19, 2022

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 2ce7e14:

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

@fabricteam

fabricteam commented Apr 20, 2022

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-avatar
Avatar
45.196 kB
13.126 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-button
Button
32.408 kB
8.986 kB
react-button
CompoundButton
38.635 kB
10.146 kB
react-button
MenuButton
34.175 kB
9.567 kB
react-button
SplitButton
41.431 kB
10.865 kB
react-button
ToggleButton
43.31 kB
9.921 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
42.003 kB
11.886 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 4a2a7dd5dc733cd2db4c868ef5272818c0b735cd

@fabricteam

fabricteam commented Apr 20, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
BoxMinimalPerf.default 378 313 1.21:1
GridMinimalPerf.default 356 316 1.13:1
AttachmentSlotsPerf.default 1165 1066 1.09:1
ToolbarMinimalPerf.default 1022 949 1.08:1
CardMinimalPerf.default 587 549 1.07:1
InputMinimalPerf.default 1392 1304 1.07:1
LabelMinimalPerf.default 394 369 1.07:1
MenuMinimalPerf.default 928 871 1.07:1
PortalMinimalPerf.default 176 165 1.07:1
ListMinimalPerf.default 531 499 1.06:1
CarouselMinimalPerf.default 489 466 1.05:1
AccordionMinimalPerf.default 146 141 1.04:1
DialogMinimalPerf.default 792 765 1.04:1
DropdownMinimalPerf.default 3187 3065 1.04:1
HeaderSlotsPerf.default 778 746 1.04:1
RadioGroupMinimalPerf.default 465 449 1.04:1
TextAreaMinimalPerf.default 483 465 1.04:1
TooltipMinimalPerf.default 1085 1048 1.04:1
TreeMinimalPerf.default 855 824 1.04:1
ButtonOverridesMissPerf.default 1548 1508 1.03:1
CheckboxMinimalPerf.default 2787 2699 1.03:1
DividerMinimalPerf.default 348 338 1.03:1
EmbedMinimalPerf.default 4175 4065 1.03:1
ItemLayoutMinimalPerf.default 1193 1162 1.03:1
ListNestedPerf.default 538 524 1.03:1
AlertMinimalPerf.default 259 255 1.02:1
AvatarMinimalPerf.default 200 197 1.02:1
ButtonSlotsPerf.default 555 546 1.02:1
RefMinimalPerf.default 240 235 1.02:1
SplitButtonMinimalPerf.default 4462 4363 1.02:1
ChatDuplicateMessagesPerf.default 290 286 1.01:1
ChatWithPopoverPerf.default 388 383 1.01:1
FlexMinimalPerf.default 293 290 1.01:1
FormMinimalPerf.default 386 382 1.01:1
HeaderMinimalPerf.default 349 345 1.01:1
SkeletonMinimalPerf.default 337 335 1.01:1
StatusMinimalPerf.default 684 677 1.01:1
TableMinimalPerf.default 395 391 1.01:1
TextMinimalPerf.default 345 343 1.01:1
CustomToolbarPrototype.default 2726 2700 1.01:1
TreeWith60ListItems.default 173 171 1.01:1
DatepickerMinimalPerf.default 5854 5834 1:1
MenuButtonMinimalPerf.default 1685 1684 1:1
RosterPerf.default 1066 1063 1:1
ReactionMinimalPerf.default 369 369 1:1
SliderMinimalPerf.default 1678 1676 1:1
TableManyItemsPerf.default 1950 1951 1:1
VideoMinimalPerf.default 657 654 1:1
ListWith60ListItems.default 652 660 0.99:1
PopupMinimalPerf.default 615 621 0.99:1
ProviderMergeThemesPerf.default 1274 1291 0.99:1
ProviderMinimalPerf.default 406 411 0.99:1
ChatMinimalPerf.default 727 741 0.98:1
IconMinimalPerf.default 599 609 0.98:1
ButtonMinimalPerf.default 157 163 0.96:1
LoaderMinimalPerf.default 719 752 0.96:1
ListCommonPerf.default 669 702 0.95:1
SegmentMinimalPerf.default 329 345 0.95:1
AttachmentMinimalPerf.default 144 154 0.94:1
LayoutMinimalPerf.default 347 369 0.94:1
DropdownManyItemsPerf.default 660 706 0.93:1
ImageMinimalPerf.default 361 393 0.92:1
AnimationMinimalPerf.default 540 626 0.86:1

@fabricteam

fabricteam commented Apr 20, 2022

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 779 741 5000
Breadcrumb mount 2364 2160 1000
Checkbox mount 1218 1164 5000
CheckboxBase mount 1113 973 5000
ChoiceGroup mount 3866 3781 5000
ComboBox mount 825 854 1000
CommandBar mount 8754 8802 1000
ContextualMenu mount 9836 10517 1000
DefaultButton mount 972 988 5000
DetailsRow mount 3166 3178 5000
DetailsRowFast mount 3199 3020 5000
DetailsRowNoStyles mount 2927 3078 5000
Dialog mount 1856 1823 1000
DocumentCardTitle mount 157 150 1000
Dropdown mount 2745 2646 5000
FocusTrapZone mount 1384 1605 5000
FocusZone mount 1449 1541 5000
IconButton mount 1458 1389 5000
Label mount 263 300 5000
Layer mount 2447 2424 5000
Link mount 404 358 5000
MenuButton mount 1207 1278 5000
MessageBar mount 1613 1660 5000
Nav mount 2913 2560 1000
OverflowSet mount 954 851 5000
Panel mount 1727 1782 1000
Persona mount 885 808 1000
Pivot mount 1245 1133 1000
PrimaryButton mount 1108 1120 5000
Rating mount 6403 6610 5000
SearchBox mount 1126 1115 5000
Shimmer mount 2008 2085 5000
Slider mount 1472 1663 5000
SpinButton mount 4061 4147 5000
Spinner mount 383 387 5000
SplitButton mount 2695 2601 5000
Stack mount 398 408 5000
StackWithIntrinsicChildren mount 1787 1845 5000
StackWithTextChildren mount 4111 4226 5000
SwatchColorPicker mount 9860 9613 5000
TagPicker mount 2219 2319 5000
TeachingBubble mount 94015 50398 5000
Text mount 371 361 5000
TextField mount 1207 1193 5000
ThemeProvider mount 1033 1025 5000
ThemeProvider virtual-rerender 572 576 5000
ThemeProvider virtual-rerender-with-unmount 1639 1656 5000
Toggle mount 700 688 5000
buttonNative mount 109 106 5000

@fabricteam

fabricteam commented Apr 20, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 283 251 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 891 914 5000
Button mount 551 568 5000
FluentProvider mount 1910 1940 5000
FluentProviderWithTheme mount 283 251 10 Possible regression
FluentProviderWithTheme virtual-rerender 272 243 10
FluentProviderWithTheme virtual-rerender-with-unmount 319 313 10
MakeStyles mount 1577 1555 50000

@size-auditor

size-auditor Bot commented Apr 20, 2022

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 4a2a7dd5dc733cd2db4c868ef5272818c0b735cd (build)

@TristanWatanabe TristanWatanabe marked this pull request as ready for review April 21, 2022 23:49
@TristanWatanabe TristanWatanabe requested review from a team as code owners April 21, 2022 23:49
@TristanWatanabe

Copy link
Copy Markdown
Member Author

/azp run

@azure-pipelines

Copy link
Copy Markdown
Azure Pipelines successfully started running 3 pipeline(s).

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

👏 our move generator is not handling codeowners updates. for this PR it can be done manually but we should implement that as well.

@github-actions github-actions Bot added the Type: RFC Request for Feedback label Apr 25, 2022
@TristanWatanabe

Copy link
Copy Markdown
Member Author

👏 our move generator is not handling codeowners updates. for this PR it can be done manually but we should implement that as well.

Thanks for catching this! Being addressed by #22624

@TristanWatanabe TristanWatanabe removed the Type: RFC Request for Feedback label Apr 25, 2022
@github-actions github-actions Bot added the Type: RFC Request for Feedback label Apr 25, 2022

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

🍿

@TristanWatanabe TristanWatanabe merged commit 00d9679 into microsoft:master Apr 26, 2022
@TristanWatanabe TristanWatanabe deleted the move-react-components branch April 26, 2022 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants