Skip to content

feat: portals in Shadow DOM#28395

Merged
layershifter merged 1 commit intomicrosoft:masterfrom
layershifter:feat/shadow-dom-portals
Jun 30, 2023
Merged

feat: portals in Shadow DOM#28395
layershifter merged 1 commit intomicrosoft:masterfrom
layershifter:feat/shadow-dom-portals

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Jun 30, 2023 •
edited
Loading

Fixes #27762.

This PR allows to render Portals inside shadow roots instead of light DOM.

Details

This PR adds PortalMountNodeContext and re-exports it from @fluentui/react-components. Re-export is needed as it will be consumed in @fluentui-contrib/react-shadow.

usePortalMountNode was updated to handle that context. Visual tests added to ensure that styles are rendered properly.

@github-actions github-actions bot added this to the June Project Cycle Q2 2023 milestone Jun 30, 2023
@layershifter layershifter force-pushed the feat/shadow-dom-portals branch from 3d9e79f to bb1ab6b Compare June 30, 2023 09:41
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 30, 2023 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 88.246 kB
26.712 kB		 88.26 kB
26.718 kB		 14 B
6 B
react-alert
Alert		 82.552 kB
21.771 kB		 82.565 kB
21.726 kB		 13 B
-45 B
react-avatar
Avatar		 47.7 kB
14.504 kB		 47.713 kB
14.513 kB		 13 B
9 B
react-avatar
AvatarGroup		 15.682 kB
6.306 kB		 15.695 kB
6.314 kB		 13 B
8 B
react-avatar
AvatarGroupItem		 63.876 kB
18.984 kB		 63.889 kB
18.993 kB		 13 B
9 B
react-badge
Badge		 23.591 kB
7.264 kB		 23.604 kB
7.272 kB		 13 B
8 B
react-badge
CounterBadge		 24.493 kB
7.565 kB		 24.506 kB
7.574 kB		 13 B
9 B
react-badge
PresenceBadge		 22.213 kB
7.872 kB		 22.227 kB
7.881 kB		 14 B
9 B
react-button
Button		 36.778 kB
9.51 kB		 36.792 kB
9.472 kB		 14 B
-38 B
react-button
CompoundButton		 43.932 kB
10.99 kB		 43.946 kB
10.952 kB		 14 B
-38 B
react-button
MenuButton		 40.965 kB
10.705 kB		 40.978 kB
10.669 kB		 13 B
-36 B
react-button
SplitButton		 49.197 kB
12.27 kB		 49.211 kB
12.232 kB		 14 B
-38 B
react-button
ToggleButton		 55.06 kB
11.446 kB		 55.074 kB
11.368 kB		 14 B
-78 B
react-card
Card - All		 89.11 kB
25.236 kB		 89.33 kB
25.271 kB		 220 B
35 B
react-card
Card		 83.764 kB
23.685 kB		 83.778 kB
23.685 kB		 14 B
react-card
CardFooter		 9.229 kB
3.9 kB		 9.24 kB
3.907 kB		 11 B
7 B
react-card
CardHeader		 11.402 kB
4.683 kB		 11.622 kB
4.729 kB		 220 B
46 B
react-card
CardPreview		 10.034 kB
4.248 kB		 10.048 kB
4.254 kB		 14 B
6 B
react-checkbox
Checkbox		 33.164 kB
10.699 kB		 33.198 kB
10.718 kB		 34 B
19 B
react-combobox
Combobox (including child components)		 86.98 kB
28.084 kB		 87.15 kB
28.117 kB		 170 B
33 B
react-combobox
Dropdown (including child components)		 85.321 kB
27.675 kB		 85.553 kB
27.716 kB		 232 B
41 B
react-components
react-components: Button, FluentProvider & webLightTheme		 65.162 kB
17.952 kB		 65.175 kB
17.915 kB		 13 B
-37 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 210.395 kB
58.717 kB		 210.516 kB
58.723 kB		 121 B
6 B
react-components
react-components: FluentProvider & webLightTheme		 36.395 kB
11.996 kB		 36.409 kB
12.003 kB		 14 B
7 B
react-datepicker-compat
DatePicker Compat		 221.924 kB
59.118 kB		 222.076 kB
59.138 kB		 152 B
20 B
react-dialog
Dialog (including children components)		 92.138 kB
27.487 kB		 92.736 kB
27.579 kB		 598 B
92 B
react-divider
Divider		 17.477 kB
6.357 kB		 17.49 kB
6.364 kB		 13 B
7 B
react-field
Field		 18.003 kB
6.931 kB		 18.148 kB
6.97 kB		 145 B
39 B
react-image
Image		 11.55 kB
4.627 kB		 11.561 kB
4.637 kB		 11 B
10 B
react-infobutton
InfoButton		 131.191 kB
40.269 kB		 131.312 kB
40.301 kB		 121 B
32 B
react-infobutton
InfoLabel		 134.656 kB
41.338 kB		 134.776 kB
41.369 kB		 120 B
31 B
react-input
Input		 24.219 kB
7.781 kB		 24.232 kB
7.781 kB		 13 B
react-label
Label		 10.175 kB
4.243 kB		 10.186 kB
4.253 kB		 11 B
10 B
react-link
Link		 12.771 kB
5.237 kB		 12.782 kB
5.247 kB		 11 B
10 B
react-menu
Menu (including children components)		 132.388 kB
40.52 kB		 132.509 kB
40.558 kB		 121 B
38 B
react-menu
Menu (including selectable components)		 135.152 kB
41.012 kB		 135.273 kB
41.05 kB		 121 B
38 B
react-persona
Persona		 54.621 kB
16.435 kB		 55.267 kB
16.525 kB		 646 B
90 B
react-popover
Popover		 119.781 kB
36.844 kB		 119.902 kB
36.885 kB		 121 B
41 B
react-portal
Portal		 11.82 kB
4.391 kB		 11.935 kB
4.421 kB		 115 B
30 B
react-progress
ProgressBar		 13.927 kB
5.488 kB		 13.941 kB
5.498 kB		 14 B
10 B
react-provider
FluentProvider		 18.115 kB
6.719 kB		 18.129 kB
6.73 kB		 14 B
11 B
react-radio
Radio		 26.952 kB
8.608 kB		 26.991 kB
8.626 kB		 39 B
18 B
react-radio
RadioGroup		 11.362 kB
4.753 kB		 11.376 kB
4.763 kB		 14 B
10 B
react-select
Select		 24.915 kB
8.708 kB		 24.929 kB
8.713 kB		 14 B
5 B
react-slider
Slider		 34.358 kB
11.107 kB		 34.87 kB
11.178 kB		 512 B
71 B
react-spinbutton
SpinButton		 33.452 kB
10.296 kB		 33.73 kB
10.337 kB		 278 B
41 B
react-spinner
Spinner		 21.363 kB
7.021 kB		 21.376 kB
7.029 kB		 13 B
8 B
react-switch
Switch		 29.472 kB
9.226 kB		 29.485 kB
9.228 kB		 13 B
2 B
react-table
DataGrid		 156.649 kB
42.835 kB		 156.71 kB
42.812 kB		 61 B
-23 B
react-table
Table (Primitives only)		 44.652 kB
12.468 kB		 44.666 kB
12.442 kB		 14 B
-26 B
react-table
Table as DataGrid		 132.304 kB
33.864 kB		 132.365 kB
33.849 kB		 61 B
-15 B
react-table
Table (Selection only)		 77.906 kB
19.26 kB		 77.993 kB
19.245 kB		 87 B
-15 B
react-table
Table (Sort only)		 76.891 kB
18.989 kB		 76.978 kB
18.973 kB		 87 B
-16 B
react-tags
InteractionTag		 27.921 kB
8.469 kB		 28.378 kB
8.549 kB		 457 B
80 B
react-tags
Tag		 23.162 kB
7.925 kB		 23.735 kB
8.018 kB		 573 B
93 B
react-tags
TagGroup		 69.128 kB
20.284 kB		 69.142 kB
20.294 kB		 14 B
10 B
react-text
Text - Default		 12.563 kB
4.972 kB		 12.574 kB
4.982 kB		 11 B
10 B
react-text
Text - Wrappers		 15.713 kB
5.293 kB		 15.726 kB
5.302 kB		 13 B
9 B
react-textarea
Textarea		 27.69 kB
9.125 kB		 27.703 kB
9.126 kB		 13 B
1 B
react-tooltip
Tooltip		 47.319 kB
16.618 kB		 47.44 kB
16.645 kB		 121 B
27 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
330 B
global-context
createContextSelector		 537 B
342 B
priority-overflow
createOverflowManager		 4.248 kB
1.671 kB
react-overflow
hooks only		 12.505 kB
4.626 kB
react-portal-compat
PortalCompatProvider		 6.473 kB
2.196 kB
react-positioning
usePositioning		 24.249 kB
8.856 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 31.987 kB
6.85 kB
react-theme
Teams: Light theme		 18.121 kB
5.194 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against 900f4dd908b9086d54f92892746376e0fcdbb0f9

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 30, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 579 595 5000
Button mount 298 282 5000
Field mount 1032 1061 5000
FluentProvider mount 630 665 5000
FluentProviderWithTheme mount 76 81 10
FluentProviderWithTheme virtual-rerender 72 65 10
FluentProviderWithTheme virtual-rerender-with-unmount 66 76 10
InfoButton mount 11 11 5000
MakeStyles mount 843 850 50000
Persona mount 1628 1608 5000
SpinButton mount 1338 1310 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 30, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 102 92 1.11:1
SkeletonMinimalPerf.default 209 194 1.08:1
BoxMinimalPerf.default 207 194 1.07:1
RefMinimalPerf.default 110 103 1.07:1
VideoMinimalPerf.default 464 433 1.07:1
ChatDuplicateMessagesPerf.default 158 149 1.06:1
FormMinimalPerf.default 233 219 1.06:1
LayoutMinimalPerf.default 215 202 1.06:1
ButtonSlotsPerf.default 317 301 1.05:1
ListNestedPerf.default 342 326 1.05:1
ChatMinimalPerf.default 448 431 1.04:1
SegmentMinimalPerf.default 207 199 1.04:1
TextAreaMinimalPerf.default 311 300 1.04:1
TreeWith60ListItems.default 85 82 1.04:1
ButtonOverridesMissPerf.default 667 645 1.03:1
CarouselMinimalPerf.default 272 265 1.03:1
InputMinimalPerf.default 566 550 1.03:1
TooltipMinimalPerf.default 1302 1258 1.03:1
CardMinimalPerf.default 313 307 1.02:1
DropdownManyItemsPerf.default 408 399 1.02:1
PopupMinimalPerf.default 357 349 1.02:1
ProviderMergeThemesPerf.default 673 661 1.02:1
ReactionMinimalPerf.default 212 208 1.02:1
ToolbarMinimalPerf.default 553 541 1.02:1
AlertMinimalPerf.default 159 158 1.01:1
AnimationMinimalPerf.default 309 306 1.01:1
AvatarMinimalPerf.default 106 105 1.01:1
ChatWithPopoverPerf.default 191 189 1.01:1
CheckboxMinimalPerf.default 1159 1149 1.01:1
ItemLayoutMinimalPerf.default 721 716 1.01:1
RosterPerf.default 1561 1542 1.01:1
PortalMinimalPerf.default 83 82 1.01:1
TableManyItemsPerf.default 1117 1106 1.01:1
TextMinimalPerf.default 195 194 1.01:1
TreeMinimalPerf.default 498 493 1.01:1
AttachmentSlotsPerf.default 659 662 1:1
DatepickerMinimalPerf.default 3714 3705 1:1
LabelMinimalPerf.default 222 223 1:1
LoaderMinimalPerf.default 185 185 1:1
MenuButtonMinimalPerf.default 968 967 1:1
ProviderMinimalPerf.default 205 204 1:1
SplitButtonMinimalPerf.default 2274 2264 1:1
StatusMinimalPerf.default 401 400 1:1
IconMinimalPerf.default 396 396 1:1
DialogMinimalPerf.default 450 454 0.99:1
DropdownMinimalPerf.default 1429 1442 0.99:1
EmbedMinimalPerf.default 1861 1873 0.99:1
FlexMinimalPerf.default 165 167 0.99:1
MenuMinimalPerf.default 500 504 0.99:1
RadioGroupMinimalPerf.default 267 271 0.99:1
AccordionMinimalPerf.default 83 85 0.98:1
HeaderSlotsPerf.default 475 483 0.98:1
ListMinimalPerf.default 308 313 0.98:1
CustomToolbarPrototype.default 1481 1508 0.98:1
HeaderMinimalPerf.default 202 209 0.97:1
ListWith60ListItems.default 373 383 0.97:1
TableMinimalPerf.default 247 255 0.97:1
AttachmentMinimalPerf.default 80 83 0.96:1
GridMinimalPerf.default 184 193 0.95:1
ListCommonPerf.default 367 385 0.95:1
SliderMinimalPerf.default 748 789 0.95:1
ImageMinimalPerf.default 219 233 0.94:1
DividerMinimalPerf.default 202 217 0.93:1

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 30, 2023 •
edited
Loading

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

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
recursing-chaum-lltltw Issue #27762
goofy-fog-d8sq6h Issue #27762

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 30, 2023 •
edited
Loading

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 30, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 618 655 5000
Breadcrumb mount 1691 1673 1000
Checkbox mount 1683 1733 5000
CheckboxBase mount 1487 1481 5000
ChoiceGroup mount 2963 2866 5000
ComboBox mount 649 637 1000
CommandBar mount 6265 6144 1000
ContextualMenu mount 12004 12026 1000
DefaultButton mount 743 746 5000
DetailsRow mount 2182 2146 5000
DetailsRowFast mount 2219 2181 5000
DetailsRowNoStyles mount 1977 2017 5000
Dialog mount 2583 2630 1000
DocumentCardTitle mount 225 223 1000
Dropdown mount 2011 2017 5000
FocusTrapZone mount 1122 1136 5000
FocusZone mount 1082 1035 5000
GroupedList mount 41193 41371 2
GroupedList virtual-rerender 19809 19710 2
GroupedList virtual-rerender-with-unmount 50186 55508 2
GroupedListV2 mount 221 223 2
GroupedListV2 virtual-rerender 211 205 2
GroupedListV2 virtual-rerender-with-unmount 226 226 2
IconButton mount 1091 1079 5000
Label mount 338 337 5000
Layer mount 2702 2748 5000
Link mount 389 390 5000
MenuButton mount 962 931 5000
MessageBar mount 21516 21552 5000
Nav mount 1934 1948 1000
OverflowSet mount 792 761 5000
Panel mount 1774 1788 1000
Persona mount 707 746 1000
Pivot mount 853 860 1000
PrimaryButton mount 854 853 5000
Rating mount 4601 4607 5000
SearchBox mount 918 924 5000
Shimmer mount 1860 1862 5000
Slider mount 1307 1325 5000
SpinButton mount 2888 2862 5000
Spinner mount 386 393 5000
SplitButton mount 1802 1808 5000
Stack mount 401 404 5000
StackWithIntrinsicChildren mount 842 867 5000
StackWithTextChildren mount 2625 2660 5000
SwatchColorPicker mount 6142 6045 5000
TagPicker mount 1453 1471 5000
Text mount 375 368 5000
TextField mount 940 922 5000
ThemeProvider mount 836 848 5000
ThemeProvider virtual-rerender 606 587 5000
ThemeProvider virtual-rerender-with-unmount 1299 1278 5000
Toggle mount 612 599 5000
buttonNative mount 191 185 5000

@size-auditor
Copy link

size-auditor bot commented Jun 30, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: 900f4dd908b9086d54f92892746376e0fcdbb0f9 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 30, 2023 •
edited
Loading

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

@layershifter layershifter marked this pull request as ready for review June 30, 2023 10:39
@layershifter layershifter requested review from a team as code owners June 30, 2023 10:39
@layershifter layershifter force-pushed the feat/shadow-dom-portals branch from bb1ab6b to ed74652 Compare June 30, 2023 12:52
@layershifter layershifter force-pushed the feat/shadow-dom-portals branch from ed74652 to dc2cc14 Compare June 30, 2023 15:09
@layershifter layershifter force-pushed the feat/shadow-dom-portals branch from dc2cc14 to b7c5100 Compare June 30, 2023 15:29
@layershifter layershifter enabled auto-merge (squash) June 30, 2023 16:38
@layershifter layershifter merged commit 3deadf5 into microsoft:master Jun 30, 2023
@layershifter layershifter deleted the feat/shadow-dom-portals branch June 30, 2023 17:12
@layershifter layershifter mentioned this pull request Jul 4, 2023
Merged
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented Jul 5, 2023

🎉@fluentui/react-shared-contexts@v9.6.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot msft-fluent-ui-bot mentioned this pull request Jul 5, 2023
Closed
2 tasks
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented Jul 5, 2023

🎉@fluentui/react-portal@v9.3.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented Jul 5, 2023

🎉@fluentui/react-components@v9.24.0 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@spmonahan spmonahan spmonahan approved these changes

+1 more reviewer

@ling1726 ling1726 ling1726 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@tomi-msft tomi-msft

Labels

None yet

Projects

None yet

Milestone

June Project Cycle Q2 2023

Development

Successfully merging this pull request may close these issues.

[Bug]: portals should render in Shadow DOM [v9]

6 participants

@layershifter @fabricteam @msft-fluent-ui-bot @ling1726 @spmonahan @tomi-msft