Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moving FocusTrapZone and Modal from react-next to react-internal #15368

Merged
merged 15 commits into from
Oct 13, 2020

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented Oct 5, 2020

Pull request checklist

Description of changes

This PR moves the versions of Modal and FocusTrapZone existing in @fluentui/react-next to @fluentui/react-internal. As part of this API and snapshots were updated, the @fluentui/react-next examples, vr tests and perf tests of these components were removed, and the versions of these components in @fluentui/react-next now re-export the versions in @fluentui/react-internal.

Another change in this PR is that resetIds is now being called in those tests that were affected by this change.

Focus areas to test

(optional)

@ecraig12345
Copy link
Member

Can you delete the FocusTrapZoneNext perf-tests and vr-tests?

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 5, 2020

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 38e924b:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-next-template Configuration
codesandbox-react-northstar-template Configuration

Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Looks like some things got reverted that shouldn't have been, due to changes missing from react-next.

@size-auditor
Copy link

size-auditor bot commented Oct 5, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-FocusTrapZone 14.445 kB 15.576 kB ExceedsTolerance     1.131 kB
office-ui-fabric-react fluentui-react-next-Callout 75.623 kB 76.226 kB ExceedsBaseline     603 bytes
office-ui-fabric-react fluentui-react-Modal 90.674 kB 89.734 kB BelowBaseline     -940 bytes
office-ui-fabric-react fluentui-react-HoverCard 93.53 kB 92.576 kB BelowBaseline     -954 bytes
office-ui-fabric-react fluentui-react-DatePicker 199.793 kB 198.834 kB BelowBaseline     -959 bytes
office-ui-fabric-react fluentui-react-Dialog 201.051 kB 200.089 kB BelowBaseline     -962 bytes
office-ui-fabric-react fluentui-react-Panel 191.391 kB 190.405 kB BelowBaseline     -986 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 195.684 kB 194.695 kB BelowBaseline     -989 bytes
office-ui-fabric-react fluentui-react-next-Dropdown 230.127 kB 229.083 kB BelowBaseline     -1.044 kB
office-ui-fabric-react fluentui-react-Dropdown 222.204 kB 221.16 kB BelowBaseline     -1.044 kB
office-ui-fabric-react fluentui-react-Callout 81.225 kB 79.848 kB BelowBaseline     -1.377 kB
office-ui-fabric-react fluentui-react-Coachmark 86.834 kB 85.429 kB BelowBaseline     -1.405 kB
office-ui-fabric-react fluentui-react-next-FocusTrapZone 15.173 kB  Deleted       BelowBaseline     -15.173 kB
office-ui-fabric-react fluentui-react-next-Modal 87.942 kB  Deleted       BelowBaseline     -87.942 kB

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 72907bfda0cd61232232c62de4448b6bfabd487f (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 5, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 843 862 5000
BaseButton mount 941 939 5000
Breadcrumb mount 151729 151535 5000
ButtonNext mount 573 566 5000
Checkbox mount 1553 1600 5000
CheckboxBase mount 1346 1341 5000
CheckboxNext mount 1597 1565 5000
ChoiceGroup mount 4845 4890 5000
ComboBox mount 938 941 1000
CommandBar mount 20991 21031 1000
ContextualMenu mount 5615 5568 1000
DefaultButton mount 1154 1171 5000
DetailsRow mount 3709 3729 5000
DetailsRowFast mount 3797 3696 5000
DetailsRowNoStyles mount 3592 3603 5000
Dialog mount 1466 1516 1000
DocumentCardTitle mount 1723 1725 1000
Dropdown mount 2650 2625 5000
FocusTrapZone mount 1715 1790 5000
FocusZone mount 1805 1764 5000
IconButton mount 1847 1822 5000
Label mount 336 362 5000
Layer mount 1841 1856 5000
Link mount 504 502 5000
LinkNext mount 478 471 5000
MenuButton mount 1561 1530 5000
MessageBar mount 2019 1988 5000
Nav mount 3372 3304 1000
OverflowSet mount 1036 1034 5000
Panel mount 1455 1475 1000
Persona mount 883 841 1000
Pivot mount 1425 1419 1000
PivotNext mount 1444 1416 1000
PrimaryButton mount 1313 1305 5000
Rating mount 7937 7771 5000
SearchBox mount 1370 1379 5000
Shimmer mount 2642 2684 5000
Slider mount 1946 1923 5000
SliderNext mount 1891 1919 5000
SpinButton mount 5219 5249 5000
Spinner mount 430 405 5000
SplitButton mount 3278 3243 5000
Stack mount 540 536 5000
StackWithIntrinsicChildren mount 2052 2013 5000
StackWithTextChildren mount 5266 5247 5000
SwatchColorPicker mount 10683 10543 5000
TagPicker mount 2781 2757 5000
TeachingBubble mount 48378 48172 5000
Text mount 455 453 5000
TextField mount 1416 1420 5000
ThemeProvider mount 1893 1940 5000
ThemeProvider virtual-rerender 622 617 5000
Toggle mount 843 809 5000
ToggleNext mount 834 840 5000
button mount 109 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.48 0.51 0.94:1 2000 953
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 614
🔧 Checkbox.Fluent 0.65 0.35 1.86:1 1000 649
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 826
🔧 Dropdown.Fluent 3.01 0.53 5.68:1 1000 3005
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 786
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 425
🔧 Slider.Fluent 1.61 0.43 3.74:1 1000 1608
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 409
🦄 Tooltip.Fluent 0.12 8.71 0.01:1 5000 577

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 189 171 1.11:1
CarouselMinimalPerf.default 503 463 1.09:1
DividerMinimalPerf.default 428 395 1.08:1
ListMinimalPerf.default 521 489 1.07:1
TextMinimalPerf.default 420 394 1.07:1
TreeWith60ListItems.default 226 212 1.07:1
TableMinimalPerf.default 468 442 1.06:1
Icon.Fluent 786 739 1.06:1
AvatarMinimalPerf.default 519 496 1.05:1
DropdownManyItemsPerf.default 822 781 1.05:1
GridMinimalPerf.default 379 361 1.05:1
AnimationMinimalPerf.default 452 436 1.04:1
ButtonOverridesMissPerf.default 1837 1762 1.04:1
LabelMinimalPerf.default 474 454 1.04:1
MenuMinimalPerf.default 934 901 1.04:1
Text.Fluent 409 394 1.04:1
BoxMinimalPerf.default 413 401 1.03:1
ButtonMinimalPerf.default 197 192 1.03:1
ButtonSlotsPerf.default 638 617 1.03:1
CheckboxMinimalPerf.default 2956 2868 1.03:1
FlexMinimalPerf.default 321 311 1.03:1
ItemLayoutMinimalPerf.default 1378 1335 1.03:1
ListWith60ListItems.default 983 953 1.03:1
ProviderMinimalPerf.default 1079 1049 1.03:1
RadioGroupMinimalPerf.default 479 464 1.03:1
StatusMinimalPerf.default 791 767 1.03:1
TableManyItemsPerf.default 2383 2320 1.03:1
ToolbarMinimalPerf.default 1027 998 1.03:1
AttachmentSlotsPerf.default 1218 1196 1.02:1
ButtonUseCssPerf.default 868 847 1.02:1
CardMinimalPerf.default 634 622 1.02:1
ChatDuplicateMessagesPerf.default 448 439 1.02:1
ChatMinimalPerf.default 675 664 1.02:1
EmbedMinimalPerf.default 2031 1994 1.02:1
HeaderSlotsPerf.default 877 858 1.02:1
PopupMinimalPerf.default 733 716 1.02:1
SkeletonMinimalPerf.default 461 453 1.02:1
CustomToolbarPrototype.default 4017 3921 1.02:1
TreeMinimalPerf.default 934 919 1.02:1
Avatar.Fluent 953 931 1.02:1
Dropdown.Fluent 3005 2944 1.02:1
Tooltip.Fluent 577 563 1.02:1
ButtonUseCssNestingPerf.default 1145 1131 1.01:1
DialogMinimalPerf.default 834 825 1.01:1
ImageMinimalPerf.default 423 417 1.01:1
MenuButtonMinimalPerf.default 1688 1667 1.01:1
SegmentMinimalPerf.default 385 381 1.01:1
SplitButtonMinimalPerf.default 3953 3921 1.01:1
VideoMinimalPerf.default 682 672 1.01:1
Dialog.Fluent 826 819 1.01:1
DropdownMinimalPerf.default 2950 2946 1:1
FormMinimalPerf.default 466 465 1:1
LayoutMinimalPerf.default 435 434 1:1
ListCommonPerf.default 696 693 1:1
ProviderMergeThemesPerf.default 2036 2029 1:1
RefMinimalPerf.default 235 235 1:1
Button.Fluent 614 614 1:1
Image.Fluent 425 425 1:1
Slider.Fluent 1608 1606 1:1
AccordionMinimalPerf.default 169 171 0.99:1
ChatWithPopoverPerf.default 492 497 0.99:1
HeaderMinimalPerf.default 405 411 0.99:1
InputMinimalPerf.default 1330 1342 0.99:1
ListNestedPerf.default 622 630 0.99:1
LoaderMinimalPerf.default 750 755 0.99:1
PortalMinimalPerf.default 162 163 0.99:1
Checkbox.Fluent 649 655 0.99:1
AlertMinimalPerf.default 335 341 0.98:1
ReactionMinimalPerf.default 430 437 0.98:1
SliderMinimalPerf.default 1595 1620 0.98:1
IconMinimalPerf.default 713 730 0.98:1
TextAreaMinimalPerf.default 551 560 0.98:1
TooltipMinimalPerf.default 833 848 0.98:1

@ecraig12345
Copy link
Member

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

} else if (!newForceFocusInsideTrap || newDisabled) {
// Transition from forceFocusInsideTrap / FTZ enabled to disabled.
returnFocusToInitiator();
if (unmodalize) {
Copy link
Member

Choose a reason for hiding this comment

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

Thanks for adding this part! However I think it needs to be handled a bit differently to replicate the class component behavior: the unmodalize callback should be stored in internalState, and in addition to this part you'll need to add another useEffect for componentWillUnmount.

I started trying to make this change last night and then noticed potentially a bunch of other issues with lifecycles that may not have been ported properly...so we definitely want to test this one carefully.

Copy link
Member Author

Choose a reason for hiding this comment

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

I think I did this properly but let me know which other issues you've found.

@msft-github-bot
Copy link
Contributor

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@ecraig12345 ecraig12345 merged commit 5e09571 into microsoft:master Oct 13, 2020
@khmakoto khmakoto deleted the focusTrapZoneMove branch October 13, 2020 20:23
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.

Port aria-hidden siblings change to next
5 participants