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

Move Fabric from react-next to react-internal #15388

Merged
merged 6 commits into from
Oct 7, 2020

Conversation

tomi-msft
Copy link
Contributor

Pull request checklist

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

Focus areas to test

(optional)

// import { Checkbox } from '../../Checkbox';
// import { Customizer } from '../../Utilities';
// import { createTheme } from '../../Styling';
import { Checkbox } from '@fluentui/react/lib/Checkbox';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@dzearing This component is not present in react-internal. What component within react-internal would you recommend using instead?

Copy link
Member

Choose a reason for hiding this comment

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

For now let's just comment out this import and the parts of the test that use it, unless someone has a suggestion right away for another component to use.

@ecraig12345
Copy link
Member

/azp run

@azure-pipelines
Copy link

No pipelines are associated with this pull request.

@codesandbox-ci
Copy link

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

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

@ecraig12345
Copy link
Member

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@ecraig12345
Copy link
Member

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@ecraig12345
Copy link
Member

You'll probably need to update snapshots in react-internal to get the build to pass.

@size-auditor
Copy link

size-auditor bot commented Oct 7, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-PositioningContainer 66.669 kB 66.671 kB ExceedsBaseline     2 bytes
office-ui-fabric-react fluentui-react-next-Modal 88.592 kB 88.59 kB BelowBaseline     -2 bytes
office-ui-fabric-react fluentui-react-next-Fabric 39.084 kB 39.039 kB BelowBaseline     -45 bytes
office-ui-fabric-react fluentui-react-next-SpinButton 185.884 kB 185.663 kB BelowBaseline     -221 bytes
office-ui-fabric-react fluentui-react-next-MessageBar 180.577 kB 180.356 kB BelowBaseline     -221 bytes
office-ui-fabric-react fluentui-react-SearchBox 179.869 kB 179.647 kB BelowBaseline     -222 bytes
office-ui-fabric-react fluentui-react-MessageBar 181.984 kB 181.761 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-Nav 181.086 kB 180.863 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-Pivot 181.081 kB 180.858 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-Panel 193.29 kB 193.067 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-ButtonGrid 173.16 kB 172.937 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-Facepile 202.54 kB 202.317 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-SpinButton 185.934 kB 185.711 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-DatePicker 202.837 kB 202.614 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-CommandBar 194.179 kB 193.956 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-Grid 173.585 kB 173.362 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-Pickers 275.401 kB 275.178 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-Facepile 202.582 kB 202.359 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-SwatchColorPicker 183.967 kB 183.744 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-SwatchColorPicker 182.674 kB 182.451 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-Panel 193.245 kB 193.022 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 197.991 kB 197.768 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-CommandBar 194.224 kB 194.001 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-Nav 181.131 kB 180.908 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-Pivot 181.132 kB 180.909 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-Button 186.517 kB 186.294 kB BelowBaseline     -223 bytes
office-ui-fabric-react fluentui-react-next-Dialog 202.942 kB 202.715 kB BelowBaseline     -227 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 221.699 kB 221.472 kB BelowBaseline     -227 bytes
office-ui-fabric-react fluentui-react-next-Pickers 275.288 kB 275.061 kB BelowBaseline     -227 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 232.246 kB 232.019 kB BelowBaseline     -227 bytes
office-ui-fabric-react fluentui-react-Dialog 202.897 kB 202.67 kB BelowBaseline     -227 bytes
office-ui-fabric-react fluentui-react-PositioningContainer 70.866 kB 70.601 kB BelowBaseline     -265 bytes
office-ui-fabric-react fluentui-react-Coachmark 92.292 kB 92.023 kB BelowBaseline     -269 bytes
office-ui-fabric-react fluentui-react-Callout 83.688 kB 83.415 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-Tooltip 83.251 kB 82.978 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-ContextualMenu 150.919 kB 150.646 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-KeytipLayer 98.762 kB 98.489 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-HoverCard 96.002 kB 95.729 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-Modal 93.462 kB 93.189 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-next-HoverCard 96.051 kB 95.778 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-next-Tooltip 83.3 kB 83.027 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-next-Keytip 78.425 kB 78.152 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-Persona 111.505 kB 111.232 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-PersonaCoin 111.505 kB 111.232 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-next-Keytips 101.913 kB 101.64 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-next-KeytipLayer 98.811 kB 98.538 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-Layer 45.103 kB 44.83 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-Keytips 101.869 kB 101.596 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-Keytip 78.38 kB 78.107 kB BelowBaseline     -273 bytes
office-ui-fabric-react fluentui-react-Fabric 39.318 kB 39.039 kB BelowBaseline     -279 bytes
office-ui-fabric-react fluentui-react-next-SearchBox 179.822 kB 179.381 kB BelowBaseline     -441 bytes
office-ui-fabric-react fluentui-react-next-DatePicker 175.755 kB 175.312 kB BelowBaseline     -443 bytes
office-ui-fabric-react fluentui-react-Dropdown 224.274 kB 223.822 kB BelowBaseline     -452 bytes
office-ui-fabric-react fluentui-react-ComboBox 237.045 kB 236.593 kB BelowBaseline     -452 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 191.651 kB 191.193 kB BelowBaseline     -458 bytes
office-ui-fabric-react fluentui-react-next-Breadcrumb 191.671 kB 191.212 kB BelowBaseline     -459 bytes
office-ui-fabric-react fluentui-react-next-DocumentCard 207.647 kB 207.187 kB BelowBaseline     -460 bytes
office-ui-fabric-react fluentui-react-next-DetailsList 210.977 kB 210.517 kB BelowBaseline     -460 bytes
office-ui-fabric-react fluentui-react-next-ShimmeredDetailsList 221.363 kB 220.903 kB BelowBaseline     -460 bytes
office-ui-fabric-react fluentui-react-DocumentCard 207.604 kB 207.144 kB BelowBaseline     -460 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 221.32 kB 220.86 kB BelowBaseline     -460 bytes
office-ui-fabric-react fluentui-react-DetailsList 210.934 kB 210.474 kB BelowBaseline     -460 bytes
office-ui-fabric-react fluentui-react-next-PersonaCoin 115.269 kB 114.771 kB BelowBaseline     -498 bytes
office-ui-fabric-react fluentui-react-next-Persona 115.269 kB 114.771 kB BelowBaseline     -498 bytes
office-ui-fabric-react fluentui-react-next-TeachingBubble 214.2 kB 212.399 kB BelowBaseline     -1.801 kB
office-ui-fabric-react fluentui-react-next-ComboBox 250.966 kB 249.162 kB BelowBaseline     -1.804 kB
office-ui-fabric-react fluentui-react-next-SelectedItemsList 273.973 kB 272.168 kB BelowBaseline     -1.805 kB
office-ui-fabric-react fluentui-react-next-Dropdown 238.054 kB 236.249 kB BelowBaseline     -1.805 kB
office-ui-fabric-react fluentui-react-next-FloatingPicker 249.488 kB 247.682 kB BelowBaseline     -1.806 kB

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

Baseline commit: 424951d0fd5b15fccdf4234d546e993316acb285 (build)

@msft-github-bot
Copy link
Contributor

Perf Analysis

Scenario Render type Master Ticks PR Ticks Iterations Status
Layer mount 2178 2101 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 919 905 5000
BaseButton mount 1020 1031 5000
Breadcrumb mount 45409 45267 5000
BreadcrumbNext mount 170915 171703 5000
ButtonNext mount 626 615 5000
Checkbox mount 1731 1709 5000
CheckboxBase mount 1437 1449 5000
CheckboxNext mount 1717 1687 5000
ChoiceGroup mount 5521 5546 5000
ChoiceGroupNext mount 10356 10417 5000
ComboBox mount 1019 1016 1000
CommandBar mount 8326 8336 1000
ContextualMenu mount 15097 15342 1000
DefaultButton mount 1263 1284 5000
DetailsRow mount 4034 4113 5000
DetailsRowFast mount 4014 3975 5000
DetailsRowNoStyles mount 3753 3834 5000
Dialog mount 1639 1658 1000
DocumentCardTitle mount 1958 1961 1000
Dropdown mount 2904 2900 5000
FocusTrapZone mount 1917 1864 5000
FocusTrapZoneNext mount 2019 1961 5000
FocusZone mount 1966 1936 5000
IconButton mount 1969 1990 5000
Label mount 376 378 5000
Layer mount 2178 2101 5000 Possible regression
LayerNext mount 2080 2089 5000
Link mount 533 526 5000
LinkNext mount 523 518 5000
MenuButton mount 1671 1643 5000
MessageBar mount 2261 2242 5000
MessageBarNext mount 2193 2207 5000
Nav mount 3599 3594 1000
OverflowSet mount 1563 1565 5000
OverflowSetNext mount 1138 1148 5000
Panel mount 1595 1585 1000
Persona mount 915 888 1000
Pivot mount 1553 1520 1000
PivotNext mount 1520 1576 1000
PrimaryButton mount 1426 1392 5000
Rating mount 8650 8524 5000
RatingNext mount 8424 8387 5000
SearchBox mount 1486 1476 5000
SearchBoxNext mount 1523 1520 5000
Shimmer mount 2955 2903 5000
ShimmerNext mount 2907 2872 5000
Slider mount 2149 2107 5000
SliderNext mount 2117 2091 5000
SpinButton mount 5557 5488 5000
SpinButtonNext mount 5584 5687 5000
Spinner mount 478 460 5000
SplitButton mount 3537 3525 5000
Stack mount 576 613 5000
StackWithIntrinsicChildren mount 2132 2153 5000
StackWithTextChildren mount 5679 5631 5000
SwatchColorPicker mount 11440 11279 5000
SwatchColorPickerNext mount 11143 11290 5000
TagPicker mount 3035 2961 5000
TeachingBubble mount 54193 54475 5000
TeachingBubbleNext mount 12523 12560 5000
Text mount 479 476 5000
TextField mount 1526 1536 5000
ThemeProvider mount 1772 1766 5000
ThemeProvider virtual-rerender 680 696 5000
Toggle mount 890 890 5000
ToggleNext mount 883 884 5000
button mount 128 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.52 0.54 0.96:1 2000 1041
🦄 Button.Fluent 0.13 0.23 0.57:1 5000 663
🔧 Checkbox.Fluent 0.72 0.37 1.95:1 1000 722
🎯 Dialog.Fluent 0.18 0.25 0.72:1 5000 918
🔧 Dropdown.Fluent 3.18 0.51 6.24:1 1000 3178
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 824
🎯 Image.Fluent 0.1 0.13 0.77:1 5000 475
🔧 Slider.Fluent 1.72 0.5 3.44:1 1000 1724
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 425
🦄 Tooltip.Fluent 0.13 18.6 0.01:1 5000 640

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
LayoutMinimalPerf.default 507 471 1.08:1
HeaderMinimalPerf.default 458 429 1.07:1
PortalMinimalPerf.default 193 180 1.07:1
TreeWith60ListItems.default 245 228 1.07:1
AttachmentSlotsPerf.default 1337 1277 1.05:1
AvatarMinimalPerf.default 575 548 1.05:1
RefMinimalPerf.default 277 263 1.05:1
IconMinimalPerf.default 820 778 1.05:1
TableMinimalPerf.default 507 482 1.05:1
FormMinimalPerf.default 520 500 1.04:1
ProviderMinimalPerf.default 1181 1140 1.04:1
TextMinimalPerf.default 445 426 1.04:1
ButtonSlotsPerf.default 695 678 1.03:1
CheckboxMinimalPerf.default 3192 3104 1.03:1
HeaderSlotsPerf.default 924 900 1.03:1
ImageMinimalPerf.default 465 452 1.03:1
ItemLayoutMinimalPerf.default 1512 1471 1.03:1
PopupMinimalPerf.default 812 789 1.03:1
ReactionMinimalPerf.default 488 473 1.03:1
SegmentMinimalPerf.default 441 429 1.03:1
StatusMinimalPerf.default 873 846 1.03:1
ToolbarMinimalPerf.default 1114 1083 1.03:1
Dialog.Fluent 918 894 1.03:1
Image.Fluent 475 460 1.03:1
ButtonMinimalPerf.default 217 212 1.02:1
ButtonUseCssNestingPerf.default 1228 1204 1.02:1
CardMinimalPerf.default 689 675 1.02:1
ChatDuplicateMessagesPerf.default 487 479 1.02:1
ChatMinimalPerf.default 719 708 1.02:1
DropdownMinimalPerf.default 3241 3177 1.02:1
FlexMinimalPerf.default 353 347 1.02:1
GridMinimalPerf.default 427 418 1.02:1
LabelMinimalPerf.default 507 498 1.02:1
ListNestedPerf.default 687 674 1.02:1
SkeletonMinimalPerf.default 517 507 1.02:1
TableManyItemsPerf.default 2548 2504 1.02:1
CustomToolbarPrototype.default 4319 4219 1.02:1
TooltipMinimalPerf.default 934 913 1.02:1
TreeMinimalPerf.default 1026 1010 1.02:1
Tooltip.Fluent 640 626 1.02:1
AccordionMinimalPerf.default 185 183 1.01:1
AnimationMinimalPerf.default 480 477 1.01:1
AttachmentMinimalPerf.default 209 207 1.01:1
BoxMinimalPerf.default 444 438 1.01:1
ButtonOverridesMissPerf.default 1889 1862 1.01:1
ButtonUseCssPerf.default 946 933 1.01:1
ChatWithPopoverPerf.default 526 520 1.01:1
DialogMinimalPerf.default 903 890 1.01:1
DividerMinimalPerf.default 450 446 1.01:1
InputMinimalPerf.default 1480 1462 1.01:1
ListMinimalPerf.default 587 582 1.01:1
MenuMinimalPerf.default 1002 997 1.01:1
MenuButtonMinimalPerf.default 1826 1808 1.01:1
SliderMinimalPerf.default 1736 1727 1.01:1
SplitButtonMinimalPerf.default 4329 4284 1.01:1
VideoMinimalPerf.default 745 741 1.01:1
Avatar.Fluent 1041 1030 1.01:1
Dropdown.Fluent 3178 3155 1.01:1
Icon.Fluent 824 812 1.01:1
Text.Fluent 425 419 1.01:1
DropdownManyItemsPerf.default 873 873 1:1
ListCommonPerf.default 767 766 1:1
ListWith60ListItems.default 1060 1056 1:1
RadioGroupMinimalPerf.default 534 534 1:1
Button.Fluent 663 662 1:1
Checkbox.Fluent 722 721 1:1
Slider.Fluent 1724 1723 1:1
EmbedMinimalPerf.default 2146 2168 0.99:1
LoaderMinimalPerf.default 829 838 0.99:1
ProviderMergeThemesPerf.default 2218 2236 0.99:1
TextAreaMinimalPerf.default 596 604 0.99:1
CarouselMinimalPerf.default 509 528 0.96:1
AlertMinimalPerf.default 350 367 0.95:1

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.

3 participants