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.

Sign up for GitHub

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

Jump to bottom

Exposing IPopupProps on Panel #14868

Merged
merged 6 commits into from
Sep 8, 2020
Merged

Exposing IPopupProps on Panel #14868

merged 6 commits into from
Sep 8, 2020

Conversation

mltejera
Copy link
Contributor

@mltejera mltejera commented Sep 2, 2020 •
edited

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

There are times when the consumer may want to talk directly to the underlying Popup component, for instance when overriding default aria props assigned by the component. This change allows for that.

Focus areas to test

The component should remain functionally the same, but allow for the consumer to pass through PopupProps.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 2, 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 4834558:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 2, 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 d731cd8:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 953 926 5000
ButtonNext mount 617 625 5000
Checkbox mount 1677 1714 5000
CheckboxBase mount 1403 1429 5000
CheckboxNext mount 1721 1795 5000
ChoiceGroup mount 5429 5239 5000
ChoiceGroupNext mount 5310 5430 5000
ComboBox mount 963 938 1000
CommandBar mount 7811 7873 1000
ContextualMenu mount 13951 14201 1000
DefaultButton mount 1204 1205 5000
DetailsRow mount 3761 3812 5000
DetailsRowFast mount 3788 3671 5000
DetailsRowNoStyles mount 3720 3546 5000
Dialog mount 1548 1558 1000
DocumentCardTitle mount 1844 1841 1000
Dropdown mount 2722 2805 5000
FocusZone mount 1908 1822 5000
IconButton mount 1954 1863 5000
Label mount 357 359 5000
Link mount 475 477 5000
LinkNext mount 501 499 5000
MenuButton mount 1574 1519 5000
MessageBar mount 2202 2176 5000
MessageBarNext mount 2172 2180 5000
Nav mount 3348 3455 1000
OverflowSet mount 1471 1431 5000
OverflowSetNext mount 1081 1070 5000
Panel mount 1525 1488 1000
Persona mount 899 894 1000
Pivot mount 1528 1633 1000
PivotNext mount 1437 1400 1000
PrimaryButton mount 1353 1339 5000
SearchBox mount 1345 1370 5000
SearchBoxNext mount 1388 1437 5000
Shimmer mount 2750 2661 5000
ShimmerNext mount 2756 2627 5000
Slider mount 1543 1514 5000
SliderNext mount 1962 1973 5000
SpinButton mount 5071 5069 5000
SpinButtonNext mount 5526 5807 5000
Spinner mount 459 441 5000
SplitButton mount 3346 3368 5000
Stack mount 585 575 5000
StackWithIntrinsicChildren mount 2237 2128 5000
StackWithTextChildren mount 5680 5710 5000
SwatchColorPicker mount 10924 10938 5000
SwatchColorPickerNext mount 10755 10816 5000
TagPicker mount 2909 2896 5000
TeachingBubble mount 52469 52323 5000
TeachingBubbleNext mount 52386 52186 5000
Text mount 469 466 5000
TextField mount 1454 1491 5000
ThemeProvider mount 4341 4296 5000
ThemeProvider virtual-rerender 498 502 5000
Toggle mount 945 951 5000
ToggleNext mount 893 899 5000
button mount 128 136 5000

Perf Analysis (Fluent)

⚠️ 4 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1859 50 37.18:1 analysis
ButtonUseCssPerf.default 76 46 1.65:1 analysis
ChatWithPopoverPerf.default 519 516 1.01:1 analysis
ListCommonPerf.default 740 1052 0.7:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.48 0.98:1 2000 930
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 620
🔧 Checkbox.Fluent 0.67 0.39 1.72:1 1000 673
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 808
🔧 Dropdown.Fluent 3.05 0.48 6.35:1 1000 3052
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 744
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 434
🔧 Slider.Fluent 1.73 0.4 4.32:1 1000 1725
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 387
🦄 Tooltip.Fluent 0.11 16.78 0.01:1 5000 560

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonUseCssNestingPerf.default 66 44 1.5:1
Text.Fluent 387 337 1.15:1
AccordionMinimalPerf.default 182 159 1.14:1
PortalMinimalPerf.default 139 122 1.14:1
AttachmentMinimalPerf.default 185 166 1.11:1
DividerMinimalPerf.default 394 359 1.1:1
ProviderMinimalPerf.default 1039 950 1.09:1
RefMinimalPerf.default 217 199 1.09:1
TooltipMinimalPerf.default 902 827 1.09:1
Image.Fluent 434 397 1.09:1
FlexMinimalPerf.default 303 280 1.08:1
ReactionMinimalPerf.default 448 414 1.08:1
BoxMinimalPerf.default 380 354 1.07:1
CarouselMinimalPerf.default 493 459 1.07:1
ChatMinimalPerf.default 682 639 1.07:1
ImageMinimalPerf.default 413 386 1.07:1
ListMinimalPerf.default 531 497 1.07:1
ButtonSlotsPerf.default 681 645 1.06:1
ChatDuplicateMessagesPerf.default 466 439 1.06:1
DialogMinimalPerf.default 837 789 1.06:1
HeaderMinimalPerf.default 398 375 1.06:1
LayoutMinimalPerf.default 445 419 1.06:1
PopupMinimalPerf.default 747 705 1.06:1
ProviderMergeThemesPerf.default 2031 1909 1.06:1
TableMinimalPerf.default 439 416 1.06:1
TreeMinimalPerf.default 971 920 1.06:1
Tooltip.Fluent 560 526 1.06:1
DropdownManyItemsPerf.default 846 802 1.05:1
HeaderSlotsPerf.default 868 823 1.05:1
LoaderMinimalPerf.default 803 767 1.05:1
StatusMinimalPerf.default 740 707 1.05:1
TextMinimalPerf.default 378 360 1.05:1
TextAreaMinimalPerf.default 535 509 1.05:1
Checkbox.Fluent 673 644 1.05:1
Icon.Fluent 744 710 1.05:1
AttachmentSlotsPerf.default 1250 1201 1.04:1
AvatarMinimalPerf.default 529 508 1.04:1
RadioGroupMinimalPerf.default 466 448 1.04:1
SegmentMinimalPerf.default 376 361 1.04:1
CustomToolbarPrototype.default 4001 3852 1.04:1
ToolbarMinimalPerf.default 1050 1005 1.04:1
ButtonMinimalPerf.default 194 188 1.03:1
CardMinimalPerf.default 591 574 1.03:1
MenuButtonMinimalPerf.default 1728 1673 1.03:1
TableManyItemsPerf.default 2414 2343 1.03:1
Avatar.Fluent 930 906 1.03:1
AnimationMinimalPerf.default 425 417 1.02:1
CheckboxMinimalPerf.default 3090 3020 1.02:1
DropdownMinimalPerf.default 3036 2963 1.02:1
LabelMinimalPerf.default 438 429 1.02:1
MenuMinimalPerf.default 945 925 1.02:1
SkeletonMinimalPerf.default 431 421 1.02:1
SplitButtonMinimalPerf.default 4052 3980 1.02:1
Button.Fluent 620 608 1.02:1
Dialog.Fluent 808 796 1.02:1
AlertMinimalPerf.default 343 338 1.01:1
EmbedMinimalPerf.default 1994 1974 1.01:1
FormMinimalPerf.default 427 421 1.01:1
Slider.Fluent 1725 1713 1.01:1
InputMinimalPerf.default 1329 1332 1:1
ItemLayoutMinimalPerf.default 1314 1316 1:1
SliderMinimalPerf.default 1657 1658 1:1
Dropdown.Fluent 3052 3041 1:1
IconMinimalPerf.default 712 727 0.98:1
VideoMinimalPerf.default 668 698 0.96:1
GridMinimalPerf.default 351 368 0.95:1
TreeWith60ListItems.default 215 226 0.95:1
ListWith60ListItems.default 1045 1133 0.92:1
ListNestedPerf.default 659 960 0.69:1

@size-auditor
Copy link

size-auditor bot commented Sep 2, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-Dropdown 224.012 kB 224.032 kB ExceedsBaseline     20 bytes
office-ui-fabric-react fluentui-react-next-Panel 192.252 kB 192.272 kB ExceedsBaseline     20 bytes
office-ui-fabric-react office-ui-fabric-react-Dropdown 224.012 kB 224.032 kB ExceedsBaseline     20 bytes
office-ui-fabric-react office-ui-fabric-react-Panel 192.252 kB 192.272 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: 12e72defeec4e1c2a6c7326c9cef670f6c2b2a55 (build)

@xugao xugao merged commit cdcec95 into microsoft:master Sep 8, 2020
@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.135.0 has been released which incorporates this pull request.:tada:

Handy links:

hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
@mltejera @hutchcodes
Exposing IPopupProps on Panel (microsoft#14868)
fa30b76 
* expose and pass through popup props

* Change files

* actually a minor change

* Remove header example

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

@xugao xugao xugao approved these changes

@joschect joschect joschect approved these changes

@aneeshack4 aneeshack4 Awaiting requested review from aneeshack4

Assignees

@brandonthomas brandonthomas

@paulgildea paulgildea

@JustSlone JustSlone

Labels
Component: Panel
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@mltejera @msft-github-bot @xugao @joschect @brandonthomas @paulgildea @JustSlone