chore(react-dialog): adopt custom JSX pragma #27475

bsunderhus · 2023-04-06T17:22:27Z

New Behavior

Adopts react-jsx-runtime custom pragma on react-dialog
adds resolveShorthand to all slots (some root slots were missing it)

fabricteam · 2023-04-06T17:34:56Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	735	715	5000
Button	mount	410	397	5000
Field	mount	1250	1236	5000
FluentProvider	mount	767	786	5000
FluentProviderWithTheme	mount	106	106	10
FluentProviderWithTheme	virtual-rerender	90	88	10
FluentProviderWithTheme	virtual-rerender-with-unmount	96	101	10
InfoButton	mount	25	24	5000
MakeStyles	mount	1204	1219	50000
Persona	mount	1961	1902	5000
SpinButton	mount	1465	1525	5000

codesandbox-ci · 2023-04-06T17:35:10Z

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 6ea65ff:

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

size-auditor · 2023-04-06T17:35:15Z

Asset size changes

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

Baseline commit: bb758eb9091e5c53f8d1d58baf50505aa2aa34cc (build)

fabricteam · 2023-04-06T17:40:35Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-04-06T17:40:46Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatWithPopoverPerf.default	260	234	1.11:1
ChatDuplicateMessagesPerf.default	198	183	1.08:1
ButtonMinimalPerf.default	109	103	1.06:1
FlexMinimalPerf.default	206	196	1.05:1
IconMinimalPerf.default	478	454	1.05:1
AvatarMinimalPerf.default	132	127	1.04:1
CarouselMinimalPerf.default	345	331	1.04:1
TableMinimalPerf.default	304	291	1.04:1
VideoMinimalPerf.default	536	513	1.04:1
BoxMinimalPerf.default	251	243	1.03:1
DividerMinimalPerf.default	258	251	1.03:1
PortalMinimalPerf.default	121	117	1.03:1
ButtonSlotsPerf.default	407	400	1.02:1
CardMinimalPerf.default	377	368	1.02:1
DialogMinimalPerf.default	584	574	1.02:1
FormMinimalPerf.default	278	273	1.02:1
GridMinimalPerf.default	246	241	1.02:1
ImageMinimalPerf.default	287	281	1.02:1
ListMinimalPerf.default	383	376	1.02:1
PopupMinimalPerf.default	460	453	1.02:1
RadioGroupMinimalPerf.default	343	336	1.02:1
StatusMinimalPerf.default	505	494	1.02:1
TooltipMinimalPerf.default	1606	1580	1.02:1
TreeMinimalPerf.default	604	595	1.02:1
CheckboxMinimalPerf.default	1571	1562	1.01:1
DatepickerMinimalPerf.default	4556	4496	1.01:1
ItemLayoutMinimalPerf.default	909	904	1.01:1
LabelMinimalPerf.default	284	281	1.01:1
ListCommonPerf.default	497	490	1.01:1
ListNestedPerf.default	413	410	1.01:1
RosterPerf.default	1798	1788	1.01:1
SliderMinimalPerf.default	918	908	1.01:1
TextAreaMinimalPerf.default	354	351	1.01:1
AttachmentMinimalPerf.default	101	101	1:1
ButtonOverridesMissPerf.default	827	825	1:1
ChatMinimalPerf.default	531	530	1:1
DropdownMinimalPerf.default	1813	1819	1:1
InputMinimalPerf.default	726	729	1:1
ListWith60ListItems.default	473	474	1:1
SplitButtonMinimalPerf.default	3024	3018	1:1
TableManyItemsPerf.default	1431	1436	1:1
AccordionMinimalPerf.default	104	105	0.99:1
AlertMinimalPerf.default	196	198	0.99:1
AnimationMinimalPerf.default	366	368	0.99:1
DropdownManyItemsPerf.default	490	493	0.99:1
EmbedMinimalPerf.default	2391	2417	0.99:1
LayoutMinimalPerf.default	264	268	0.99:1
MenuMinimalPerf.default	617	624	0.99:1
MenuButtonMinimalPerf.default	1249	1261	0.99:1
ProviderMinimalPerf.default	270	274	0.99:1
RefMinimalPerf.default	140	141	0.99:1
SegmentMinimalPerf.default	252	255	0.99:1
SkeletonMinimalPerf.default	255	257	0.99:1
TextMinimalPerf.default	247	249	0.99:1
CustomToolbarPrototype.default	1916	1927	0.99:1
ToolbarMinimalPerf.default	662	666	0.99:1
AttachmentSlotsPerf.default	826	841	0.98:1
HeaderMinimalPerf.default	258	262	0.98:1
HeaderSlotsPerf.default	575	588	0.98:1
LoaderMinimalPerf.default	238	243	0.98:1
ProviderMergeThemesPerf.default	968	983	0.98:1
TreeWith60ListItems.default	106	112	0.95:1
ReactionMinimalPerf.default	264	280	0.94:1

fabricteam · 2023-04-06T17:41:10Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-dialog` Dialog (including children components)	`93.338 kB` `27.391 kB`	`93.413 kB` `27.46 kB`	`75 B` `69 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`68.093 kB` `18.424 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.629 kB` `57.6 kB`
`react-components` react-components: FluentProvider & webLightTheme	`38.833 kB` `12.37 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`

_{🤖 This report was generated against bb758eb9091e5c53f8d1d58baf50505aa2aa34cc}

fabricteam · 2023-04-06T17:48:16Z

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam · 2023-04-06T17:48:22Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-04-06T17:51:39Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	814	813	5000
Breadcrumb	mount	2180	2170	1000
Checkbox	mount	2132	2140	5000
CheckboxBase	mount	1866	1880	5000
ChoiceGroup	mount	3684	3699	5000
ComboBox	mount	869	885	1000
CommandBar	mount	7952	8022	1000
ContextualMenu	mount	15795	16116	1000
DefaultButton	mount	975	996	5000
DetailsRow	mount	2876	2875	5000
DetailsRowFast	mount	2896	2870	5000
DetailsRowNoStyles	mount	2629	2681	5000
Dialog	mount	3413	3452	1000
DocumentCardTitle	mount	317	317	1000
Dropdown	mount	2554	2525	5000
FocusTrapZone	mount	1503	1536	5000
FocusZone	mount	1474	1430	5000
GroupedList	mount	49367	57486	2
GroupedList	virtual-rerender	24003	23996	2
GroupedList	virtual-rerender-with-unmount	73629	73545	2
GroupedListV2	mount	309	314	2
GroupedListV2	virtual-rerender	288	292	2
GroupedListV2	virtual-rerender-with-unmount	312	310	2
IconButton	mount	1399	1427	5000
Label	mount	463	454	5000
Layer	mount	3548	3590	5000
Link	mount	520	519	5000
MenuButton	mount	1227	1234	5000
MessageBar	mount	27494	27611	5000
Nav	mount	2504	2526	1000
OverflowSet	mount	1019	1003	5000
Panel	mount	2238	2234	1000
Persona	mount	971	951	1000
Pivot	mount	1178	1174	1000
PrimaryButton	mount	1100	1103	5000
Rating	mount	5728	5738	5000
SearchBox	mount	1155	1156	5000
Shimmer	mount	2349	2352	5000
Slider	mount	1710	1716	5000
SpinButton	mount	3689	3713	5000
Spinner	mount	526	531	5000
SplitButton	mount	2394	2407	5000
Stack	mount	516	530	5000
StackWithIntrinsicChildren	mount	1122	1131	5000
StackWithTextChildren	mount	3248	3214	5000
SwatchColorPicker	mount	8074	7989	5000
TagPicker	mount	1929	2002	5000
Text	mount	491	492	5000
TextField	mount	1185	1199	5000
ThemeProvider	mount	1129	1111	5000
ThemeProvider	virtual-rerender	772	771	5000
ThemeProvider	virtual-rerender-with-unmount	1730	1740	5000
Toggle	mount	786	780	5000
buttonNative	mount	271	284	5000

packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx

packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts

packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx

packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx

packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts

bsunderhus · 2023-04-14T16:51:10Z

I'll be waiting for #27571 before merging this PR

Hotell · 2023-04-17T12:23:17Z

packages/react-components/react-dialog/package.json

@@ -37,6 +37,7 @@
  "dependencies": {
    "@griffel/react": "^1.5.2",
    "@fluentui/react-utilities": "^9.7.4",
+    "@fluentui/react-jsx-runtime": "^9.0.0-alpha.0",


dont use carrets for pre-releases, this will create issue on consumers end when resolving deps. for such a fundamental part as custom JSX pragma it is even more dangerous.

bsunderhus self-assigned this Apr 6, 2023

github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 6, 2023

bsunderhus added Component: Dialog Status: Blocked Resolution blocked by another issue Fluent UI react-components (v9) labels Apr 6, 2023

bsunderhus force-pushed the react-dialog/feat--adopt-custom-jsx-pragma branch 4 times, most recently from f576cca to defdfbc Compare April 12, 2023 16:13

bsunderhus removed the Status: Blocked Resolution blocked by another issue label Apr 12, 2023

bsunderhus force-pushed the react-dialog/feat--adopt-custom-jsx-pragma branch from defdfbc to 32495a5 Compare April 12, 2023 16:18

bsunderhus mentioned this pull request Apr 12, 2023

Slot children render function won't override existing children. #27089

Closed

bsunderhus marked this pull request as ready for review April 12, 2023 16:32

bsunderhus requested a review from a team as a code owner April 12, 2023 16:32

layershifter reviewed Apr 13, 2023

View reviewed changes

packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx Outdated Show resolved Hide resolved

layershifter reviewed Apr 13, 2023

View reviewed changes

packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts Outdated Show resolved Hide resolved

layershifter reviewed Apr 13, 2023

View reviewed changes

packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx Outdated Show resolved Hide resolved

layershifter reviewed Apr 13, 2023

View reviewed changes

packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx Show resolved Hide resolved

behowell reviewed Apr 14, 2023

View reviewed changes

packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts Outdated Show resolved Hide resolved

bsunderhus force-pushed the react-dialog/feat--adopt-custom-jsx-pragma branch from 32495a5 to 349424d Compare April 14, 2023 08:58

layershifter approved these changes Apr 14, 2023

View reviewed changes

bsunderhus requested a review from behowell April 14, 2023 16:47

bsunderhus added the Status: Blocked Resolution blocked by another issue label Apr 14, 2023

chore(react-dialog): adopts custom JSX pragma

6ea65ff

bsunderhus force-pushed the react-dialog/feat--adopt-custom-jsx-pragma branch from 349424d to 6ea65ff Compare April 15, 2023 09:09

bsunderhus removed the Status: Blocked Resolution blocked by another issue label Apr 15, 2023

bsunderhus enabled auto-merge (squash) April 15, 2023 09:11

bsunderhus merged commit 46c89e8 into microsoft:master Apr 15, 2023

Hotell reviewed Apr 17, 2023

View reviewed changes

bsunderhus mentioned this pull request Apr 18, 2023

chore(react-tooltip): adopt custom JSX pragma #27630

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react-dialog): adopt custom JSX pragma #27475

chore(react-dialog): adopt custom JSX pragma #27475

bsunderhus commented Apr 6, 2023 •

edited

Loading

fabricteam commented Apr 6, 2023 •

edited

Loading

codesandbox-ci bot commented Apr 6, 2023 •

edited

Loading

size-auditor bot commented Apr 6, 2023 •

edited

Loading

fabricteam commented Apr 6, 2023

fabricteam commented Apr 6, 2023

fabricteam commented Apr 6, 2023 •

edited

Loading

fabricteam commented Apr 6, 2023

fabricteam commented Apr 6, 2023 •

edited

Loading

fabricteam commented Apr 6, 2023

bsunderhus commented Apr 14, 2023

Hotell Apr 17, 2023

chore(react-dialog): adopt custom JSX pragma #27475

chore(react-dialog): adopt custom JSX pragma #27475

Conversation

bsunderhus commented Apr 6, 2023 • edited Loading

New Behavior

fabricteam commented Apr 6, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

codesandbox-ci bot commented Apr 6, 2023 • edited Loading

size-auditor bot commented Apr 6, 2023 • edited Loading

Asset size changes

fabricteam commented Apr 6, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Apr 6, 2023

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Apr 6, 2023 • edited Loading

📊 Bundle size report

fabricteam commented Apr 6, 2023

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam commented Apr 6, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Apr 6, 2023

Perf Analysis (@fluentui/react)

bsunderhus commented Apr 14, 2023

Hotell Apr 17, 2023

Choose a reason for hiding this comment

bsunderhus commented Apr 6, 2023 •

edited

Loading

fabricteam commented Apr 6, 2023 •

edited

Loading

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

codesandbox-ci bot commented Apr 6, 2023 •

edited

Loading

size-auditor bot commented Apr 6, 2023 •

edited

Loading

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

fabricteam commented Apr 6, 2023 •

edited

Loading

fabricteam commented Apr 6, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)