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: embed component to properly pass ref #20703

Merged
merged 3 commits into from
Nov 22, 2021

Conversation

chpalac
Copy link
Contributor

@chpalac chpalac commented Nov 22, 2021

Pull request checklist

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

Description of changes

Fix: Embed component to properly pass down ref

Focus areas to test

(optional)

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 22, 2021

📊 Bundle size report

🤖 This report was generated against c4e248bbe45620352dc76e2b200f9163641c399d

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 22, 2021

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 44ff216:

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

@size-auditor
Copy link

size-auditor bot commented Nov 22, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-Embed 93.046 kB 93.068 kB ExceedsBaseline     22 bytes

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

Baseline commit: c4e248bbe45620352dc76e2b200f9163641c399d (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 22, 2021

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
Dialog mount 2905 2184 1000 Possible regression
DocumentCardTitle mount 151 372 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 830 789 5000
BaseButton mount 787 796 5000
Breadcrumb mount 2292 2240 1000
ButtonNext mount 424 432 5000
Checkbox mount 1318 1318 5000
CheckboxBase mount 1089 1072 5000
ChoiceGroup mount 3815 3963 5000
ComboBox mount 841 827 1000
CommandBar mount 8693 8777 1000
ContextualMenu mount 7236 7253 1000
DefaultButton mount 970 981 5000
DetailsRow mount 3075 3187 5000
DetailsRowFast mount 3085 3219 5000
DetailsRowNoStyles mount 3053 3081 5000
Dialog mount 2905 2184 1000 Possible regression
DocumentCardTitle mount 151 372 1000 Possible regression
Dropdown mount 2665 2723 5000
FluentProviderNext mount 3495 3457 5000
FluentProviderWithTheme mount 197 202 10
FluentProviderWithTheme virtual-rerender 95 90 10
FluentProviderWithTheme virtual-rerender-with-unmount 245 229 10
FocusTrapZone mount 1576 1561 5000
FocusZone mount 1482 1550 5000
IconButton mount 1478 1498 5000
Label mount 309 298 5000
Layer mount 2534 2540 5000
Link mount 408 407 5000
MakeStyles mount 1602 1572 50000
MenuButton mount 1288 1218 5000
MessageBar mount 1720 1723 5000
Nav mount 2785 2756 1000
OverflowSet mount 958 977 5000
Panel mount 2133 2135 1000
Persona mount 735 706 1000
Pivot mount 1233 1250 1000
PrimaryButton mount 1107 1109 5000
Rating mount 7982 6495 5000
SearchBox mount 1036 1127 5000
Shimmer mount 2130 2164 5000
Slider mount 1661 1651 5000
SpinButton mount 4272 4267 5000
Spinner mount 366 370 5000
SplitButton mount 2655 2723 5000
Stack mount 436 435 5000
StackWithIntrinsicChildren mount 1430 1466 5000
StackWithTextChildren mount 3953 3958 5000
SwatchColorPicker mount 8854 8756 5000
TagPicker mount 2255 2242 5000
TeachingBubble mount 11140 11198 5000
Text mount 369 374 5000
TextField mount 1198 1186 5000
ThemeProvider mount 1021 1018 5000
ThemeProvider virtual-rerender 535 517 5000
ThemeProvider virtual-rerender-with-unmount 1624 1608 5000
Toggle mount 704 680 5000
buttonNative mount 118 113 5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AttachmentSlotsPerf.default 974 932 1.05:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 161 141 1.14:1
ChatWithPopoverPerf.default 342 303 1.13:1
AvatarMinimalPerf.default 189 172 1.1:1
AttachmentMinimalPerf.default 143 134 1.07:1
SegmentMinimalPerf.default 304 285 1.07:1
TextAreaMinimalPerf.default 441 418 1.06:1
AccordionMinimalPerf.default 137 130 1.05:1
ReactionMinimalPerf.default 333 317 1.05:1
AlertMinimalPerf.default 238 229 1.04:1
ChatMinimalPerf.default 576 552 1.04:1
LoaderMinimalPerf.default 591 570 1.04:1
RosterPerf.default 1041 1001 1.04:1
PortalMinimalPerf.default 163 156 1.04:1
SkeletonMinimalPerf.default 311 298 1.04:1
DialogMinimalPerf.default 650 634 1.03:1
EmbedMinimalPerf.default 3498 3405 1.03:1
FormMinimalPerf.default 349 340 1.03:1
ImageMinimalPerf.default 329 319 1.03:1
LabelMinimalPerf.default 338 327 1.03:1
LayoutMinimalPerf.default 323 313 1.03:1
ListWith60ListItems.default 571 553 1.03:1
MenuButtonMinimalPerf.default 1389 1352 1.03:1
RadioGroupMinimalPerf.default 390 380 1.03:1
IconMinimalPerf.default 524 507 1.03:1
TableMinimalPerf.default 350 341 1.03:1
TreeMinimalPerf.default 691 668 1.03:1
VideoMinimalPerf.default 537 522 1.03:1
CarouselMinimalPerf.default 412 402 1.02:1
ChatDuplicateMessagesPerf.default 259 256 1.01:1
CheckboxMinimalPerf.default 2266 2249 1.01:1
FlexMinimalPerf.default 253 250 1.01:1
GridMinimalPerf.default 296 293 1.01:1
ItemLayoutMinimalPerf.default 1015 1004 1.01:1
PopupMinimalPerf.default 516 512 1.01:1
SliderMinimalPerf.default 1422 1409 1.01:1
TextMinimalPerf.default 297 295 1.01:1
TreeWith60ListItems.default 165 164 1.01:1
DropdownMinimalPerf.default 2558 2550 1:1
HeaderMinimalPerf.default 306 306 1:1
HeaderSlotsPerf.default 635 636 1:1
InputMinimalPerf.default 1089 1093 1:1
ListCommonPerf.default 523 525 1:1
ListMinimalPerf.default 438 437 1:1
MenuMinimalPerf.default 723 722 1:1
ProviderMinimalPerf.default 978 976 1:1
RefMinimalPerf.default 212 211 1:1
TableManyItemsPerf.default 1583 1583 1:1
CustomToolbarPrototype.default 3495 3497 1:1
TooltipMinimalPerf.default 883 887 1:1
ButtonOverridesMissPerf.default 1419 1430 0.99:1
DatepickerMinimalPerf.default 4669 4709 0.99:1
DividerMinimalPerf.default 308 312 0.99:1
ListNestedPerf.default 468 474 0.99:1
ProviderMergeThemesPerf.default 1471 1480 0.99:1
SplitButtonMinimalPerf.default 3512 3542 0.99:1
StatusMinimalPerf.default 577 582 0.99:1
ToolbarMinimalPerf.default 807 816 0.99:1
AnimationMinimalPerf.default 344 350 0.98:1
BoxMinimalPerf.default 296 302 0.98:1
ButtonSlotsPerf.default 460 468 0.98:1
DropdownManyItemsPerf.default 568 584 0.97:1
CardMinimalPerf.default 484 515 0.94:1

@@ -238,7 +239,7 @@ Embed.propTypes = {
};

Embed.defaultProps = {
as: 'span',
as: 'span' as const,
Copy link
Member

Choose a reason for hiding this comment

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

Is it really needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, it was complaining :(

@chpalac chpalac enabled auto-merge (squash) November 22, 2021 16:18
@chpalac chpalac merged commit 5ade517 into microsoft:master Nov 22, 2021
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
* fix: embed component to properly pass ref

* add changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants