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

Image: move Image component to react and delete from react-next #15367

Merged
merged 14 commits into from
Oct 7, 2020

Conversation

tomi-msft
Copy link
Contributor

@tomi-msft tomi-msft commented Oct 5, 2020

Pull request checklist

Description of changes

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

(The Image changes in this PR are originally from #12908 where Image was converted to a function component.)

Focus areas to test

(optional)

Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

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

From the looks of it you should be moving Image to react-internal, not to react.

@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 12e55a9:

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

@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-next-Image 42.607 kB 42.561 kB BelowBaseline     -46 bytes
office-ui-fabric-react fluentui-react-next-ColorPicker 84.682 kB 84.267 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-SwatchColorPicker 183.967 kB 183.552 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-ActivityItem 67.211 kB 66.796 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 232.246 kB 231.831 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-Rating 74.134 kB 73.719 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-next-ActivityItem 67.255 kB 66.84 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-Modal 93.462 kB 93.047 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-ContextualMenu 150.919 kB 150.504 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 221.699 kB 221.284 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-Dialog 202.897 kB 202.482 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-PersonaCoin 111.505 kB 111.09 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-TextField 74.302 kB 73.887 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-Persona 111.505 kB 111.09 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-next-Rating 73.472 kB 73.057 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-next-Dialog 202.942 kB 202.527 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-next-SwatchColorPicker 182.674 kB 182.259 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-ColorPicker 84.638 kB 84.223 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-next-Pickers 275.288 kB 274.873 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-next-TextField 73.825 kB 73.41 kB BelowBaseline     -415 bytes
office-ui-fabric-react fluentui-react-next-SpinButton 185.884 kB 185.467 kB BelowBaseline     -417 bytes
office-ui-fabric-react fluentui-react-next-MessageBar 180.577 kB 180.16 kB BelowBaseline     -417 bytes
office-ui-fabric-react fluentui-react-SearchBox 179.869 kB 179.451 kB BelowBaseline     -418 bytes
office-ui-fabric-react fluentui-react-Calendar 138.097 kB 137.678 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-DatePicker 202.837 kB 202.418 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-next-Nav 181.131 kB 180.712 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-next-Panel 193.29 kB 192.871 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-Button 186.517 kB 186.098 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-next-PersonaPresence 54.378 kB 53.959 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-next-Pivot 181.132 kB 180.713 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-MessageBar 181.984 kB 181.565 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-SpinButton 185.934 kB 185.515 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-Nav 181.086 kB 180.667 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-next-CommandBar 194.224 kB 193.805 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-Panel 193.245 kB 192.826 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-next-Facepile 202.582 kB 202.163 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-next-ButtonGrid 173.16 kB 172.741 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-Facepile 202.54 kB 202.121 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-Grid 173.585 kB 173.166 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-PersonaPresence 54.334 kB 53.915 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 197.991 kB 197.572 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-Pickers 275.401 kB 274.982 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-Pivot 181.081 kB 180.662 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-CommandBar 194.179 kB 193.76 kB BelowBaseline     -419 bytes
office-ui-fabric-react fluentui-react-ChoiceGroup 60.558 kB 60.138 kB BelowBaseline     -420 bytes
office-ui-fabric-react fluentui-react-Check 49.262 kB 48.842 kB BelowBaseline     -420 bytes
office-ui-fabric-react fluentui-react-next-Check 49.306 kB 48.886 kB BelowBaseline     -420 bytes
office-ui-fabric-react fluentui-react-ChoiceGroupOption 55.847 kB 55.423 kB BelowBaseline     -424 bytes
office-ui-fabric-react fluentui-react-next-ChoiceGroupOption 55.896 kB 55.472 kB BelowBaseline     -424 bytes
office-ui-fabric-react fluentui-react-Icon 47.969 kB 47.545 kB BelowBaseline     -424 bytes
office-ui-fabric-react fluentui-react-next-Icon 48.018 kB 47.589 kB BelowBaseline     -429 bytes
office-ui-fabric-react fluentui-react-Dropdown 224.274 kB 223.645 kB BelowBaseline     -629 bytes
office-ui-fabric-react fluentui-react-ComboBox 237.045 kB 236.416 kB BelowBaseline     -629 bytes
office-ui-fabric-react fluentui-react-next-SearchBox 179.822 kB 179.189 kB BelowBaseline     -633 bytes
office-ui-fabric-react fluentui-react-next-Calendar 113.807 kB 113.172 kB BelowBaseline     -635 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 191.651 kB 191.016 kB BelowBaseline     -635 bytes
office-ui-fabric-react fluentui-react-next-Breadcrumb 191.671 kB 191.035 kB BelowBaseline     -636 bytes
office-ui-fabric-react fluentui-react-next-Modal 88.592 kB 87.956 kB BelowBaseline     -636 bytes
office-ui-fabric-react fluentui-react-next-Dropdown 238.054 kB 237.418 kB BelowBaseline     -636 bytes
office-ui-fabric-react fluentui-react-next-ComboBox 250.966 kB 250.33 kB BelowBaseline     -636 bytes
office-ui-fabric-react fluentui-react-next-ContextualMenu 143.239 kB 142.603 kB BelowBaseline     -636 bytes
office-ui-fabric-react fluentui-react-next-DatePicker 175.755 kB 175.116 kB BelowBaseline     -639 bytes
office-ui-fabric-react fluentui-react-Checkbox 55.23 kB 54.589 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-next-GroupedList 118.392 kB 117.751 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-next-ShimmeredDetailsList 221.363 kB 220.722 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-GroupedList 118.343 kB 117.702 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-next-DetailsList 210.977 kB 210.336 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-next-DocumentCard 207.647 kB 207.006 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-DetailsList 210.934 kB 210.293 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-DocumentCard 207.604 kB 206.963 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-next-Checkbox 55.274 kB 54.633 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 221.32 kB 220.679 kB BelowBaseline     -641 bytes
office-ui-fabric-react fluentui-react-Image 44.106 kB 42.561 kB BelowBaseline     -1.545 kB
office-ui-fabric-react fluentui-react-next-ChoiceGroup 62.994 kB 57.992 kB BelowBaseline     -5.002 kB
office-ui-fabric-react fluentui-react-next-TeachingBubble 214.2 kB 209.192 kB BelowBaseline     -5.008 kB
office-ui-fabric-react fluentui-react-next-FloatingPicker 249.488 kB 244.478 kB BelowBaseline     -5.01 kB
office-ui-fabric-react fluentui-react-next-Persona 115.269 kB 110.256 kB BelowBaseline     -5.013 kB
office-ui-fabric-react fluentui-react-next-PersonaCoin 115.269 kB 110.256 kB BelowBaseline     -5.013 kB
office-ui-fabric-react fluentui-react-next-SelectedItemsList 273.973 kB 268.954 kB BelowBaseline     -5.019 kB

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

Baseline commit: 424951d0fd5b15fccdf4234d546e993316acb285 (build)

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.

Mostly looks good, just one comment. Thanks!

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 6, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 903 927 5000
BaseButton mount 1019 997 5000
Breadcrumb mount 42933 42726 5000
BreadcrumbNext mount 163460 163516 5000
ButtonNext mount 631 612 5000
Checkbox mount 1627 1666 5000
CheckboxBase mount 1395 1434 5000
CheckboxNext mount 1681 1679 5000
ChoiceGroup mount 5394 5391 5000
ChoiceGroupNext mount 10138 9925 5000
ComboBox mount 1016 953 1000
CommandBar mount 8008 7974 1000
ContextualMenu mount 13633 13724 1000
DefaultButton mount 1222 1266 5000
DetailsRow mount 3954 3906 5000
DetailsRowFast mount 3919 4028 5000
DetailsRowNoStyles mount 3765 3715 5000
Dialog mount 1642 1597 1000
DocumentCardTitle mount 1867 1891 1000
Dropdown mount 2787 2834 5000
FocusTrapZone mount 1779 1813 5000
FocusTrapZoneNext mount 1913 1947 5000
FocusZone mount 1904 1911 5000
IconButton mount 1910 1907 5000
Label mount 370 364 5000
Layer mount 2137 2123 5000
LayerNext mount 2032 2033 5000
Link mount 517 528 5000
LinkNext mount 520 514 5000
MenuButton mount 1624 1589 5000
MessageBar mount 2152 2180 5000
MessageBarNext mount 2169 2155 5000
Nav mount 3557 3563 1000
OverflowSet mount 1514 1517 5000
OverflowSetNext mount 1110 1111 5000
Panel mount 1555 1514 1000
Persona mount 865 883 1000
Pivot mount 1527 1509 1000
PivotNext mount 1508 1475 1000
PrimaryButton mount 1377 1383 5000
Rating mount 8304 8273 5000
RatingNext mount 8114 8257 5000
SearchBox mount 1420 1405 5000
SearchBoxNext mount 1431 1482 5000
Shimmer mount 2821 2820 5000
ShimmerNext mount 2760 2768 5000
Slider mount 2061 2070 5000
SliderNext mount 2075 2085 5000
SpinButton mount 5373 5447 5000
SpinButtonNext mount 5513 5522 5000
Spinner mount 461 465 5000
SplitButton mount 3427 3413 5000
Stack mount 601 580 5000
StackWithIntrinsicChildren mount 2044 2007 5000
StackWithTextChildren mount 5482 5402 5000
SwatchColorPicker mount 11011 11151 5000
SwatchColorPickerNext mount 10987 10926 5000
TagPicker mount 2936 2956 5000
TeachingBubble mount 53470 52221 5000
TeachingBubbleNext mount 12281 12253 5000
Text mount 483 442 5000
TextField mount 1488 1545 5000
ThemeProvider mount 1744 1747 5000
ThemeProvider virtual-rerender 675 659 5000
Toggle mount 872 881 5000
ToggleNext mount 864 877 5000
button mount 131 134 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.51 0.53 0.96:1 2000 1010
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 650
🔧 Checkbox.Fluent 0.69 0.38 1.82:1 1000 694
🎯 Dialog.Fluent 0.18 0.25 0.72:1 5000 875
🔧 Dropdown.Fluent 3.09 0.5 6.18:1 1000 3085
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 824
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 451
🔧 Slider.Fluent 1.7 0.49 3.47:1 1000 1697
🔧 Text.Fluent 0.09 0.03 3:1 5000 448
🦄 Tooltip.Fluent 0.12 16.57 0.01:1 5000 607

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
GridMinimalPerf.default 446 394 1.13:1
Text.Fluent 448 402 1.11:1
TreeWith60ListItems.default 237 216 1.1:1
PortalMinimalPerf.default 180 167 1.08:1
RadioGroupMinimalPerf.default 538 496 1.08:1
FlexMinimalPerf.default 345 325 1.06:1
PopupMinimalPerf.default 790 744 1.06:1
TableMinimalPerf.default 505 478 1.06:1
VideoMinimalPerf.default 762 727 1.05:1
HeaderSlotsPerf.default 939 901 1.04:1
LabelMinimalPerf.default 504 483 1.04:1
ListNestedPerf.default 676 653 1.04:1
TableManyItemsPerf.default 2561 2472 1.04:1
ToolbarMinimalPerf.default 1098 1059 1.04:1
AnimationMinimalPerf.default 466 452 1.03:1
AttachmentMinimalPerf.default 193 187 1.03:1
BoxMinimalPerf.default 441 429 1.03:1
DialogMinimalPerf.default 902 873 1.03:1
HeaderMinimalPerf.default 443 429 1.03:1
ImageMinimalPerf.default 451 439 1.03:1
ListWith60ListItems.default 1074 1040 1.03:1
MenuMinimalPerf.default 991 966 1.03:1
ReactionMinimalPerf.default 479 463 1.03:1
SkeletonMinimalPerf.default 505 492 1.03:1
StatusMinimalPerf.default 870 845 1.03:1
TooltipMinimalPerf.default 902 877 1.03:1
Button.Fluent 650 631 1.03:1
AttachmentSlotsPerf.default 1296 1267 1.02:1
AvatarMinimalPerf.default 557 544 1.02:1
ButtonSlotsPerf.default 681 667 1.02:1
ButtonUseCssPerf.default 945 931 1.02:1
DropdownManyItemsPerf.default 851 833 1.02:1
ItemLayoutMinimalPerf.default 1464 1440 1.02:1
RefMinimalPerf.default 257 251 1.02:1
SplitButtonMinimalPerf.default 4216 4120 1.02:1
Slider.Fluent 1697 1670 1.02:1
ButtonOverridesMissPerf.default 1824 1807 1.01:1
CarouselMinimalPerf.default 501 498 1.01:1
CheckboxMinimalPerf.default 3081 3057 1.01:1
EmbedMinimalPerf.default 2150 2119 1.01:1
MenuButtonMinimalPerf.default 1774 1748 1.01:1
ProviderMergeThemesPerf.default 2172 2158 1.01:1
TextAreaMinimalPerf.default 576 573 1.01:1
CustomToolbarPrototype.default 4125 4092 1.01:1
Avatar.Fluent 1010 997 1.01:1
Image.Fluent 451 445 1.01:1
ButtonUseCssNestingPerf.default 1185 1184 1:1
CardMinimalPerf.default 644 642 1:1
ChatMinimalPerf.default 703 706 1:1
DividerMinimalPerf.default 428 428 1:1
InputMinimalPerf.default 1414 1409 1:1
LayoutMinimalPerf.default 472 474 1:1
ProviderMinimalPerf.default 1096 1097 1:1
SegmentMinimalPerf.default 417 415 1:1
SliderMinimalPerf.default 1672 1673 1:1
IconMinimalPerf.default 793 795 1:1
TextMinimalPerf.default 416 416 1:1
Tooltip.Fluent 607 608 1:1
AccordionMinimalPerf.default 182 183 0.99:1
DropdownMinimalPerf.default 3097 3137 0.99:1
ListCommonPerf.default 783 787 0.99:1
Checkbox.Fluent 694 701 0.99:1
Dialog.Fluent 875 884 0.99:1
Dropdown.Fluent 3085 3119 0.99:1
Icon.Fluent 824 833 0.99:1
AlertMinimalPerf.default 351 357 0.98:1
ChatWithPopoverPerf.default 511 522 0.98:1
ListMinimalPerf.default 566 578 0.98:1
TreeMinimalPerf.default 1002 1019 0.98:1
ChatDuplicateMessagesPerf.default 458 475 0.96:1
LoaderMinimalPerf.default 789 818 0.96:1
ButtonMinimalPerf.default 198 208 0.95:1
FormMinimalPerf.default 480 529 0.91:1

@ecraig12345
Copy link
Member

This is nice
image

tomi-msft and others added 2 commits October 6, 2020 13:30
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

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

Approved with comments.

tomi-msft and others added 2 commits October 6, 2020 17:27
…n-react.json

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@ecraig12345 ecraig12345 merged commit b68d1f4 into microsoft:master Oct 7, 2020
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.

4 participants