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

Fix check for browser support of ResizeObserver in Pivot #15572

Merged
merged 9 commits into from
Oct 19, 2020

Conversation

behowell
Copy link
Contributor

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

The check to see if the browser supports ResizeObserver was causing an error message when used with the @testing-library/react framework. This updates the check to avoid the error.

Also add a snapshot test for a Pivot that uses overflow behavior.

@msft-github-bot
Copy link
Contributor

Thanks for submitting this change, but due to work currently in progress to prepare master for our version 8 beta release, we're asking contributors to either wait a couple weeks to submit changes (if it's not urgent) or submit to the new 7.0 branch (if it's urgent). See #15222 for more details. Thank you for your contribution and understanding!

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 17, 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 c955b0e:

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

@ecraig12345
Copy link
Member

Looks like the snapshot is out of date--maybe an implicit conflict with Caleb's change earlier today?

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 17, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 825 794 5000
BaseButtonCompat mount 886 874 5000
Breadcrumb mount 156453 157828 5000
Checkbox mount 1467 1489 5000
CheckboxBase mount 1213 1172 5000
ChoiceGroup mount 4581 4627 5000
ComboBox mount 961 971 1000
CommandBar mount 21727 21603 1000
ContextualMenu mount 5890 5909 1000
DefaultButtonCompat mount 1087 1085 5000
DetailsRow mount 3569 3553 5000
DetailsRowFast mount 3592 3545 5000
DetailsRowNoStyles mount 3384 3333 5000
Dialog mount 1460 1440 1000
DocumentCardTitle mount 1769 1789 1000
Dropdown mount 3661 3661 5000
FocusTrapZone mount 1792 1734 5000
FocusZone mount 1775 1805 5000
IconButtonCompat mount 1707 1712 5000
Label mount 326 317 5000
Layer mount 1790 1737 5000
Link mount 444 443 5000
MenuButtonCompat mount 1449 1434 5000
MessageBar mount 1992 2012 5000
Nav mount 3294 3169 1000
OverflowSet mount 1011 1011 5000
Panel mount 1387 1385 1000
Persona mount 854 869 1000
Pivot mount 1469 1372 1000
PrimaryButtonCompat mount 1251 1291 5000
Rating mount 7306 7357 5000
SearchBox mount 1296 1295 5000
Shimmer mount 2492 2517 5000
Slider mount 1871 1871 5000
SpinButton mount 4994 4947 5000
Spinner mount 423 414 5000
SplitButtonCompat mount 3072 3076 5000
Stack mount 509 498 5000
StackWithIntrinsicChildren mount 1800 1837 5000
StackWithTextChildren mount 4740 4807 5000
SwatchColorPicker mount 9977 9887 5000
TagPicker mount 2688 2706 5000
TeachingBubble mount 11363 11386 5000
Text mount 409 424 5000
TextField mount 1312 1338 5000
ThemeProvider mount 1922 1934 5000
ThemeProvider virtual-rerender 657 639 5000
Toggle mount 800 780 5000
button mount 528 553 5000
buttonNative mount 102 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.43 0.5 0.86:1 2000 857
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 555
🔧 Checkbox.Fluent 0.66 0.32 2.06:1 1000 656
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 785
🔧 Dropdown.Fluent 2.92 0.44 6.64:1 1000 2920
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 702
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 396
🔧 Slider.Fluent 1.56 0.42 3.71:1 1000 1556
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 366
🦄 Tooltip.Fluent 0.11 0.88 0.13:1 5000 573

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
SkeletonMinimalPerf.default 453 418 1.08:1
IconMinimalPerf.default 716 662 1.08:1
AccordionMinimalPerf.default 159 149 1.07:1
TextAreaMinimalPerf.default 512 479 1.07:1
AlertMinimalPerf.default 313 296 1.06:1
ButtonMinimalPerf.default 186 175 1.06:1
ButtonUseCssPerf.default 835 796 1.05:1
ListCommonPerf.default 671 641 1.05:1
AnimationMinimalPerf.default 419 404 1.04:1
InputMinimalPerf.default 1311 1266 1.04:1
LabelMinimalPerf.default 432 416 1.04:1
LayoutMinimalPerf.default 438 420 1.04:1
SegmentMinimalPerf.default 373 357 1.04:1
Checkbox.Fluent 656 632 1.04:1
Tooltip.Fluent 573 551 1.04:1
BoxMinimalPerf.default 372 362 1.03:1
ChatDuplicateMessagesPerf.default 432 420 1.03:1
ChatWithPopoverPerf.default 470 456 1.03:1
FlexMinimalPerf.default 315 307 1.03:1
ListWith60ListItems.default 960 933 1.03:1
TableMinimalPerf.default 433 422 1.03:1
Image.Fluent 396 384 1.03:1
AvatarMinimalPerf.default 491 480 1.02:1
HeaderMinimalPerf.default 386 377 1.02:1
LoaderMinimalPerf.default 738 720 1.02:1
PopupMinimalPerf.default 717 703 1.02:1
Dialog.Fluent 785 768 1.02:1
CarouselMinimalPerf.default 444 441 1.01:1
CheckboxMinimalPerf.default 2856 2819 1.01:1
DialogMinimalPerf.default 784 778 1.01:1
DropdownMinimalPerf.default 2908 2875 1.01:1
FormMinimalPerf.default 422 416 1.01:1
SplitButtonMinimalPerf.default 3751 3697 1.01:1
StatusMinimalPerf.default 728 724 1.01:1
TooltipMinimalPerf.default 809 798 1.01:1
Text.Fluent 366 363 1.01:1
AttachmentSlotsPerf.default 1111 1106 1:1
CardMinimalPerf.default 560 560 1:1
DropdownManyItemsPerf.default 731 730 1:1
MenuMinimalPerf.default 857 856 1:1
PortalMinimalPerf.default 165 165 1:1
ProviderMergeThemesPerf.default 2088 2092 1:1
RadioGroupMinimalPerf.default 455 453 1:1
ReactionMinimalPerf.default 418 417 1:1
TableManyItemsPerf.default 2154 2145 1:1
TextMinimalPerf.default 357 356 1:1
CustomToolbarPrototype.default 3831 3824 1:1
TreeWith60ListItems.default 206 207 1:1
Dropdown.Fluent 2920 2922 1:1
Icon.Fluent 702 703 1:1
ChatMinimalPerf.default 613 621 0.99:1
HeaderSlotsPerf.default 784 790 0.99:1
ImageMinimalPerf.default 392 394 0.99:1
SliderMinimalPerf.default 1573 1584 0.99:1
Avatar.Fluent 857 864 0.99:1
ButtonOverridesMissPerf.default 1661 1703 0.98:1
ButtonUseCssNestingPerf.default 1079 1096 0.98:1
ItemLayoutMinimalPerf.default 1267 1291 0.98:1
ListMinimalPerf.default 488 497 0.98:1
MenuButtonMinimalPerf.default 1547 1585 0.98:1
ToolbarMinimalPerf.default 943 959 0.98:1
Button.Fluent 555 568 0.98:1
Slider.Fluent 1556 1583 0.98:1
AttachmentMinimalPerf.default 156 161 0.97:1
ButtonSlotsPerf.default 599 620 0.97:1
DividerMinimalPerf.default 378 388 0.97:1
EmbedMinimalPerf.default 1882 1932 0.97:1
ProviderMinimalPerf.default 1009 1044 0.97:1
TreeMinimalPerf.default 861 884 0.97:1
VideoMinimalPerf.default 620 636 0.97:1
GridMinimalPerf.default 337 351 0.96:1
ListNestedPerf.default 569 590 0.96:1
RefMinimalPerf.default 241 250 0.96:1

@size-auditor
Copy link

size-auditor bot commented Oct 17, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Pivot 174.19 kB 174.21 kB ExceedsBaseline     20 bytes

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

Baseline commit: 3346b09e82b41f6b5b96fe1a94c8d122b3a4625b (build)

@behowell behowell merged commit bbfdb1f into microsoft:master Oct 19, 2020
@behowell behowell deleted the overflow-tests branch October 19, 2020 20:44
@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-tabs@v1.0.0-beta.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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants