chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure #25481

TristanWatanabe · 2022-11-02T03:49:05Z

Changes:

Runs migrate-converged-pkg which reflects updates made in chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks #24458.
- Moves stories to stories/ folder in the root of the package.
- Collocates any e2e tests with the component implementation and jest tests.
- removes common/ folder and moves contents to new testing/ folder
- adds docs/ folder to package root.

Issue:

Part of Defined standard for v9 package file organization #24129

size-auditor · 2022-11-02T04:01:20Z

Asset size changes

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

Baseline commit: cd78876740a3e4093470068bf3c8611ceca733c5 (build)

codesandbox-ci · 2022-11-02T04:01:59Z

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

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

fabricteam · 2022-11-02T04:03:26Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1282	1273	5000
Button	mount	921	937	5000
FluentProvider	mount	1502	1473	5000
FluentProviderWithTheme	mount	589	590	10
FluentProviderWithTheme	virtual-rerender	538	548	10
FluentProviderWithTheme	virtual-rerender-with-unmount	587	575	10
MakeStyles	mount	1980	2012	50000
SpinButton	mount	2309	2349	5000

fabricteam · 2022-11-02T04:06:29Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-alert` Alert	`84.688 kB` `21.233 kB`
`react-avatar` Avatar	`48.874 kB` `13.864 kB`
`react-avatar` AvatarGroup	`14.996 kB` `6.013 kB`
`react-avatar` AvatarGroupItem	`63.452 kB` `17.959 kB`
`react-combobox` Combobox (including child components)	`76.153 kB` `24.665 kB`
`react-combobox` Dropdown (including child components)	`75.885 kB` `24.635 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.94 kB` `17.663 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.906 kB` `52.963 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-dialog` Dialog (including children components)	`83.147 kB` `24.799 kB`
`react-menu` Menu (including children components)	`117.089 kB` `36.188 kB`
`react-menu` Menu (including selectable components)	`120.158 kB` `36.712 kB`
`react-persona` Persona	`53.992 kB` `15.25 kB`
`react-popover` Popover	`103.672 kB` `31.871 kB`
`react-portal` Portal	`10.495 kB` `3.851 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-tooltip` Tooltip	`42.032 kB` `14.739 kB`

_{🤖 This report was generated against cd78876740a3e4093470068bf3c8611ceca733c5}

fabricteam · 2022-11-02T04:09:15Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	130	122	1.07:1
BoxMinimalPerf.default	304	289	1.05:1
FlexMinimalPerf.default	254	242	1.05:1
ProviderMinimalPerf.default	329	314	1.05:1
SkeletonMinimalPerf.default	311	296	1.05:1
AvatarMinimalPerf.default	165	159	1.04:1
CarouselMinimalPerf.default	362	349	1.04:1
AccordionMinimalPerf.default	126	122	1.03:1
ButtonMinimalPerf.default	137	133	1.03:1
GridMinimalPerf.default	298	289	1.03:1
LoaderMinimalPerf.default	273	264	1.03:1
RefMinimalPerf.default	193	187	1.03:1
TreeMinimalPerf.default	702	679	1.03:1
VideoMinimalPerf.default	636	618	1.03:1
AlertMinimalPerf.default	222	218	1.02:1
AnimationMinimalPerf.default	476	468	1.02:1
AttachmentSlotsPerf.default	874	855	1.02:1
CardMinimalPerf.default	468	459	1.02:1
FormMinimalPerf.default	329	322	1.02:1
ListNestedPerf.default	467	458	1.02:1
MenuButtonMinimalPerf.default	1373	1340	1.02:1
PopupMinimalPerf.default	560	550	1.02:1
ReactionMinimalPerf.default	331	326	1.02:1
SegmentMinimalPerf.default	302	297	1.02:1
CustomToolbarPrototype.default	2182	2138	1.02:1
ButtonSlotsPerf.default	430	424	1.01:1
DividerMinimalPerf.default	316	314	1.01:1
DropdownMinimalPerf.default	2176	2162	1.01:1
HeaderSlotsPerf.default	676	672	1.01:1
LayoutMinimalPerf.default	311	307	1.01:1
ListCommonPerf.default	515	509	1.01:1
ListMinimalPerf.default	455	452	1.01:1
MenuMinimalPerf.default	730	725	1.01:1
PortalMinimalPerf.default	135	134	1.01:1
IconMinimalPerf.default	567	563	1.01:1
TextMinimalPerf.default	301	298	1.01:1
TooltipMinimalPerf.default	1884	1872	1.01:1
ButtonOverridesMissPerf.default	1020	1015	1:1
ChatMinimalPerf.default	622	619	1:1
ChatWithPopoverPerf.default	285	286	1:1
CheckboxMinimalPerf.default	1524	1531	1:1
DatepickerMinimalPerf.default	4633	4626	1:1
DialogMinimalPerf.default	686	685	1:1
DropdownManyItemsPerf.default	527	526	1:1
ItemLayoutMinimalPerf.default	964	963	1:1
RosterPerf.default	1711	1705	1:1
ProviderMergeThemesPerf.default	991	991	1:1
SliderMinimalPerf.default	1239	1233	1:1
SplitButtonMinimalPerf.default	3274	3270	1:1
TableManyItemsPerf.default	1570	1577	1:1
ToolbarMinimalPerf.default	794	795	1:1
ChatDuplicateMessagesPerf.default	216	218	0.99:1
EmbedMinimalPerf.default	2622	2636	0.99:1
HeaderMinimalPerf.default	311	315	0.99:1
InputMinimalPerf.default	845	853	0.99:1
LabelMinimalPerf.default	330	333	0.99:1
ListWith60ListItems.default	496	501	0.99:1
StatusMinimalPerf.default	602	608	0.99:1
TableMinimalPerf.default	354	356	0.99:1
TextAreaMinimalPerf.default	403	409	0.99:1
ImageMinimalPerf.default	334	341	0.98:1
RadioGroupMinimalPerf.default	385	395	0.97:1
TreeWith60ListItems.default	120	132	0.91:1

fabricteam · 2022-11-02T04:16:55Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
GroupedList	mount	2547	2928	2	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1575	1546	5000
Breadcrumb	mount	3754	3653	1000
Checkbox	mount	3454	3410	5000
CheckboxBase	mount	3040	3167	5000
ChoiceGroup	mount	5868	5859	5000
ComboBox	mount	1618	1568	1000
CommandBar	mount	12091	12072	1000
ContextualMenu	mount	13791	13548	1000
DefaultButton	mount	1802	1807	5000
DetailsRow	mount	4785	4678	5000
DetailsRowFast	mount	4801	4805	5000
DetailsRowNoStyles	mount	4545	4510	5000
Dialog	mount	3897	3946	1000
DocumentCardTitle	mount	743	736	1000
Dropdown	mount	4255	4251	5000
FocusTrapZone	mount	2550	2570	5000
FocusZone	mount	2420	2530	5000
GroupedList	mount	2547	2928	2	Possible regression
GroupedList	virtual-rerender	1463	1482	2
GroupedList	virtual-rerender-with-unmount	2186	2203	2
GroupedListV2	mount	685	702	2
GroupedListV2	virtual-rerender	665	660	2
GroupedListV2	virtual-rerender-with-unmount	699	703	2
IconButton	mount	2565	2588	5000
Label	mount	922	906	5000
Layer	mount	5414	5449	5000
Link	mount	1029	1044	5000
MenuButton	mount	2207	2211	5000
MessageBar	mount	2981	2986	5000
Nav	mount	4317	4428	1000
OverflowSet	mount	1715	1728	5000
Panel	mount	3204	3175	1000
Persona	mount	1643	1652	1000
Pivot	mount	2138	2119	1000
PrimaryButton	mount	2002	1975	5000
Rating	mount	9600	9666	5000
SearchBox	mount	2032	2053	5000
Shimmer	mount	3797	3744	5000
Slider	mount	2655	2710	5000
SpinButton	mount	6073	6090	5000
Spinner	mount	984	974	5000
SplitButton	mount	4050	4054	5000
Stack	mount	1056	1071	5000
StackWithIntrinsicChildren	mount	3389	3386	5000
StackWithTextChildren	mount	6802	6738	5000
SwatchColorPicker	mount	13751	13636	5000
TagPicker	mount	3483	3425	5000
TeachingBubble	mount	110106	108751	5000
Text	mount	1016	1011	5000
TextField	mount	2097	2116	5000
ThemeProvider	mount	1916	1921	5000
ThemeProvider	virtual-rerender	1345	1344	5000
ThemeProvider	virtual-rerender-with-unmount	2715	2722	5000
Toggle	mount	1400	1394	5000
buttonNative	mount	640	662	5000

TristanWatanabe · 2022-11-02T04:49:08Z

packages/react-components/react-portal-compat/src/PortalCompat.cy.tsx

@@ -21,7 +21,7 @@ describe('PortalCompat', () => {
 if (ref.current) {
 return registerPortal(ref.current);
 }
- }, []);
+ }, [registerPortal]);


Fixes lint error:

React Hook React.useEffect has a missing dependency: 'registerPortal'. Either include it or remove the dependency array react-hooks/exhaustive-deps

* master: feat(scripts): improve API violation reporting (microsoft#25356) applying package updates fix: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop (microsoft#25453) feat(react-infobutton): Add initial implementation (microsoft#25247) chore(react-avatar, avatar-context): migrate to new package structure (microsoft#25473) chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure (microsoft#25481) docs(react-infobutton): Adding component's spec (microsoft#25251) fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf (microsoft#25494) chore(vr-tests-v9): Convert Button VR tests to CSF (microsoft#25108)

… new package structure (microsoft#25481)

TristanWatanabe added 5 commits November 1, 2022 17:47

chore(react-portal): run migration generator

9ba6a2e

chore(react-portal-compat): run migration generator

ef737d2

chore(react-portal-compat-context): run migration generator

f0625f3

Change Files

243cd48

fix(react-portal-compat): fix lint error

6cf9d96

TristanWatanabe self-assigned this Nov 2, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 2, 2022

TristanWatanabe mentioned this pull request Nov 2, 2022

Defined standard for v9 package file organization #24129

Closed

59 tasks

TristanWatanabe marked this pull request as ready for review November 2, 2022 04:00

TristanWatanabe requested a review from a team as a code owner November 2, 2022 04:00

nit: dont include /testing in tsconfig glob

5449490

TristanWatanabe commented Nov 2, 2022

View reviewed changes

bsunderhus approved these changes Nov 2, 2022

View reviewed changes

TristanWatanabe merged commit 792bd72 into microsoft:master Nov 2, 2022

TristanWatanabe deleted the migrate-react-portal branch November 2, 2022 22:35

NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022

chore(react-portal, portal-compat, portal-compat-context): migrate to…

2bde1cb

… new package structure (microsoft#25481)

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

chore(react-portal, portal-compat, portal-compat-context): migrate to…

ad9ff1b

… new package structure (microsoft#25481)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure #25481

chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure #25481

TristanWatanabe commented Nov 2, 2022

size-auditor bot commented Nov 2, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

TristanWatanabe Nov 2, 2022

chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure #25481

chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure #25481

Conversation

TristanWatanabe commented Nov 2, 2022

Changes:

Issue:

size-auditor bot commented Nov 2, 2022 • edited Loading

Asset size changes

codesandbox-ci bot commented Nov 2, 2022 • edited Loading

fabricteam commented Nov 2, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Nov 2, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Nov 2, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Nov 2, 2022 • edited Loading

Perf Analysis (@fluentui/react)

TristanWatanabe Nov 2, 2022

Choose a reason for hiding this comment

size-auditor bot commented Nov 2, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Nov 2, 2022 •

edited

Loading

fabricteam commented Nov 2, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Nov 2, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)