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

Migrate Checkbox to functional component #12614

Merged
merged 59 commits into from
Apr 30, 2020

Conversation

MLoughry
Copy link
Contributor

@MLoughry MLoughry commented Apr 8, 2020

Pull request checklist

  • Addresses an existing issue: Fluent UI v8 #12770
  • Include a change request file using $ yarn change

Description of changes

This change migrates the Checkbox control to a function component in the react-next package.

Ping: @dzearing @ecraig12345 @micahgodbolt

Microsoft Reviewers: Open in CodeFlow

@size-auditor
Copy link

size-auditor bot commented Apr 8, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-Pickers New   271.496 kB ExceedsTolerance     271.496 kB
office-ui-fabric-react fluentui-react-next-ComboBox New   232.901 kB ExceedsTolerance     232.901 kB
office-ui-fabric-react fluentui-react-next-FloatingPicker New   228.622 kB ExceedsTolerance     228.622 kB
office-ui-fabric-react fluentui-react-next-ShimmeredDetailsList New   220.735 kB ExceedsTolerance     220.735 kB
office-ui-fabric-react fluentui-react-next-Dropdown New   220.173 kB ExceedsTolerance     220.173 kB
office-ui-fabric-react fluentui-react-next-SelectedItemsList New   217.974 kB ExceedsTolerance     217.974 kB
office-ui-fabric-react fluentui-react-next-DetailsList New   210.171 kB ExceedsTolerance     210.171 kB
office-ui-fabric-react fluentui-react-next-DocumentCard New   203.896 kB ExceedsTolerance     203.896 kB
office-ui-fabric-react fluentui-react-next-Facepile New   199.032 kB ExceedsTolerance     199.032 kB
office-ui-fabric-react fluentui-react-next-DatePicker New   198.474 kB ExceedsTolerance     198.474 kB
office-ui-fabric-react fluentui-react-next-Dialog New   197.105 kB ExceedsTolerance     197.105 kB
office-ui-fabric-react fluentui-react-next-TeachingBubble New   193.63 kB ExceedsTolerance     193.63 kB
office-ui-fabric-react fluentui-react-next-CommandBar New   190.042 kB ExceedsTolerance     190.042 kB
office-ui-fabric-react fluentui-react-next-Panel New   188.75 kB ExceedsTolerance     188.75 kB
office-ui-fabric-react fluentui-react-next-Breadcrumb New   187.639 kB ExceedsTolerance     187.639 kB
office-ui-fabric-react fluentui-react-next-Button New   182.531 kB ExceedsTolerance     182.531 kB
office-ui-fabric-react fluentui-react-next-SpinButton New   182.249 kB ExceedsTolerance     182.249 kB
office-ui-fabric-react fluentui-react-next-SwatchColorPicker New   180.421 kB ExceedsTolerance     180.421 kB
office-ui-fabric-react fluentui-react-next-MessageBar New   178.346 kB ExceedsTolerance     178.346 kB
office-ui-fabric-react fluentui-react-next-Nav New   177.54 kB ExceedsTolerance     177.54 kB
office-ui-fabric-react fluentui-react-next-SearchBox New   176.194 kB ExceedsTolerance     176.194 kB
office-ui-fabric-react fluentui-react-next-Pivot New   175.193 kB ExceedsTolerance     175.193 kB
office-ui-fabric-react fluentui-react-next-Grid New   170.027 kB ExceedsTolerance     170.027 kB
office-ui-fabric-react fluentui-react-next-ContextualMenu New   147.563 kB ExceedsTolerance     147.563 kB
office-ui-fabric-react fluentui-react-next-Calendar New   135.436 kB ExceedsTolerance     135.436 kB
office-ui-fabric-react fluentui-react-next-GroupedList New   118.385 kB ExceedsTolerance     118.385 kB
office-ui-fabric-react fluentui-react-next-Persona New   110.137 kB ExceedsTolerance     110.137 kB
office-ui-fabric-react fluentui-react-next-PersonaCoin New   110.137 kB ExceedsTolerance     110.137 kB
office-ui-fabric-react fluentui-react-next-KeytipLayer New   97.781 kB ExceedsTolerance     97.781 kB
office-ui-fabric-react fluentui-react-next-HoverCard New   94.646 kB ExceedsTolerance     94.646 kB
office-ui-fabric-react fluentui-react-next-Coachmark New   91.303 kB ExceedsTolerance     91.303 kB
office-ui-fabric-react fluentui-react-next-Modal New   90.299 kB ExceedsTolerance     90.299 kB
office-ui-fabric-react fluentui-react-next-ColorPicker New   83.583 kB ExceedsTolerance     83.583 kB
office-ui-fabric-react fluentui-react-next-Tooltip New   82.629 kB ExceedsTolerance     82.629 kB
office-ui-fabric-react fluentui-react-next-Callout New   82.43 kB ExceedsTolerance     82.43 kB
office-ui-fabric-react fluentui-react-next-Keytip New   77.887 kB ExceedsTolerance     77.887 kB
office-ui-fabric-react fluentui-react-next-TextField New   73.318 kB ExceedsTolerance     73.318 kB
office-ui-fabric-react fluentui-react-next-ExtendedPicker New   72.401 kB ExceedsTolerance     72.401 kB
office-ui-fabric-react fluentui-react-next-Rating New   72.183 kB ExceedsTolerance     72.183 kB
office-ui-fabric-react fluentui-react-next-MarqueeSelection New   71.558 kB ExceedsTolerance     71.558 kB
office-ui-fabric-react fluentui-react-next-Icons New   71.205 kB ExceedsTolerance     71.205 kB
office-ui-fabric-react fluentui-react-next-PositioningContainer New   70.649 kB ExceedsTolerance     70.649 kB
office-ui-fabric-react fluentui-react-next-Utilities New   67.239 kB ExceedsTolerance     67.239 kB
office-ui-fabric-react fluentui-react-next-ActivityItem New   66.934 kB ExceedsTolerance     66.934 kB
office-ui-fabric-react fluentui-react-next-Checkbox New   61.747 kB ExceedsTolerance     61.747 kB
office-ui-fabric-react fluentui-react-next-ChoiceGroup New   59.715 kB ExceedsTolerance     59.715 kB
office-ui-fabric-react fluentui-react-next-Slider New   56.835 kB ExceedsTolerance     56.835 kB
office-ui-fabric-react fluentui-react-next-ScrollablePane New   55.725 kB ExceedsTolerance     55.725 kB
office-ui-fabric-react fluentui-react-next-ChoiceGroupOption New   55.322 kB ExceedsTolerance     55.322 kB
office-ui-fabric-react fluentui-react-next-Shimmer New   54.04 kB ExceedsTolerance     54.04 kB
office-ui-fabric-react fluentui-react-next-PersonaPresence New   54.017 kB ExceedsTolerance     54.017 kB
office-ui-fabric-react fluentui-react-next-Toggle New   53.973 kB ExceedsTolerance     53.973 kB
office-ui-fabric-react fluentui-react-next-Check New   48.909 kB ExceedsTolerance     48.909 kB
office-ui-fabric-react fluentui-react-next-Layer New   48.72 kB ExceedsTolerance     48.72 kB
office-ui-fabric-react fluentui-react-next-OverflowSet New   48.583 kB ExceedsTolerance     48.583 kB
office-ui-fabric-react fluentui-react-next-Icon New   47.647 kB ExceedsTolerance     47.647 kB
office-ui-fabric-react fluentui-react-next-Link New   46.71 kB ExceedsTolerance     46.71 kB
office-ui-fabric-react fluentui-react-next-Image New   44.098 kB ExceedsTolerance     44.098 kB
office-ui-fabric-react fluentui-react-next-Fabric New   43.108 kB ExceedsTolerance     43.108 kB
office-ui-fabric-react fluentui-react-next-Spinner New   41.943 kB ExceedsTolerance     41.943 kB
office-ui-fabric-react fluentui-react-next-Stack New   41.885 kB ExceedsTolerance     41.885 kB
office-ui-fabric-react fluentui-react-next-Styling New   41.632 kB ExceedsTolerance     41.632 kB
office-ui-fabric-react fluentui-react-next-Overlay New   41.026 kB ExceedsTolerance     41.026 kB
office-ui-fabric-react fluentui-react-next-Announced New   40.025 kB ExceedsTolerance     40.025 kB
office-ui-fabric-react fluentui-react-next-Label New   39.834 kB ExceedsTolerance     39.834 kB
office-ui-fabric-react fluentui-react-next-ProgressIndicator New   39.149 kB ExceedsTolerance     39.149 kB
office-ui-fabric-react fluentui-react-next-Foundation New   38.84 kB ExceedsTolerance     38.84 kB
office-ui-fabric-react fluentui-react-next-Sticky New   38.292 kB ExceedsTolerance     38.292 kB
office-ui-fabric-react fluentui-react-next-Text New   37.785 kB ExceedsTolerance     37.785 kB
office-ui-fabric-react fluentui-react-next-Selection New   37.542 kB ExceedsTolerance     37.542 kB
office-ui-fabric-react fluentui-react-next-List New   35.985 kB ExceedsTolerance     35.985 kB
office-ui-fabric-react fluentui-react-next-FocusZone New   33.731 kB ExceedsTolerance     33.731 kB
office-ui-fabric-react fluentui-react-next-ResizeGroup New   20.922 kB ExceedsTolerance     20.922 kB
office-ui-fabric-react fluentui-react-next-Autofill New   18.776 kB ExceedsTolerance     18.776 kB
office-ui-fabric-react fluentui-react-next-Separator New   18.169 kB ExceedsTolerance     18.169 kB
office-ui-fabric-react fluentui-react-next-FocusTrapZone New   16.675 kB ExceedsTolerance     16.675 kB
office-ui-fabric-react fluentui-react-next-Divider New   16.672 kB ExceedsTolerance     16.672 kB
office-ui-fabric-react fluentui-react-next-ThemeGenerator New   15.707 kB ExceedsTolerance     15.707 kB
office-ui-fabric-react fluentui-react-next-Popup New   15.623 kB ExceedsTolerance     15.623 kB
office-ui-fabric-react fluentui-react-next-KeytipData New   13.244 kB ExceedsTolerance     13.244 kB
office-ui-fabric-react fluentui-react-next-Color New   12.503 kB ExceedsTolerance     12.503 kB
office-ui-fabric-react fluentui-react-next-SelectableOption New   1.256 kB ExceedsTolerance     1.256 kB

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

Baseline commit: 1c286ff567d6dc005fe3d096285f05d87786228e (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 9, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 805 797 5000
Checkbox 1499 1511 5000
CheckboxBase 1147 1206 5000
ChoiceGroup 4375 4391 5000
ComboBox 812 799 1000
CommandBar 6381 6698 1000
ContextualMenu 10663 10449 1000
DefaultButton 983 1018 5000
DetailsRow 2977 3111 5000
DetailsRow (fast icons) 2968 3079 5000
DetailsRow without styles 2843 2771 5000
Dialog 1350 1394 1000
DocumentCardTitle with truncation 1408 1416 1000
Dropdown 2131 2372 5000
FocusZone 1440 1352 5000
IconButton 1523 1511 5000
Label 253 284 5000
Link 413 370 5000
MenuButton 1311 1206 5000
Nav 2895 2635 1000
Panel 1328 1301 1000
Persona 742 740 1000
Pivot 1222 1228 1000
PrimaryButton 1058 1071 5000
SearchBox 1104 1150 5000
Slider 1320 1346 5000
Spinner 292 337 5000
SplitButton 2863 2674 5000
Stack 413 449 5000
Stack with Intrinsic children 955 909 5000
Stack with Text children 4025 4095 5000
TagPicker 2393 2547 5000
Text 327 327 5000
TextField 1324 1230 5000
Toggle 801 813 5000
button 52 41 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.44 0.42 1.05:1 2000 874
🦄 Button.Fluent 0.1 0.17 0.59:1 5000 500
🔧 Checkbox.Fluent 0.55 0.32 1.72:1 1000 548
🔧 Dialog.Fluent 0.32 0.18 1.78:1 5000 1601
🔧 Dropdown.Fluent 2.85 0.38 7.5:1 1000 2848
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 675
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 373
🔧 Slider.Fluent 1.26 0.32 3.94:1 1000 1259
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 331
🦄 Tooltip.Fluent 0.08 12.3 0.01:1 5000 413

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 406 270 1.5:1
VideoMinimalPerf.default 607 548 1.11:1
TextMinimalPerf.default 338 310 1.09:1
AttachmentMinimalPerf.default 156 146 1.07:1
ChatDuplicateMessagesPerf.default 357 335 1.07:1
ChatWithPopoverPerf.default 549 514 1.07:1
LabelMinimalPerf.default 404 378 1.07:1
ToolbarMinimalPerf.default 1033 969 1.07:1
CardMinimalPerf.default 532 501 1.06:1
HeaderSlotsPerf.default 1456 1383 1.05:1
ListMinimalPerf.default 444 421 1.05:1
LoaderMinimalPerf.default 703 669 1.05:1
TextAreaMinimalPerf.default 445 422 1.05:1
Text.Fluent 331 315 1.05:1
AvatarMinimalPerf.default 491 474 1.04:1
GridMinimalPerf.default 694 665 1.04:1
PortalMinimalPerf.default 299 288 1.04:1
Image.Fluent 373 357 1.04:1
AnimationMinimalPerf.default 615 599 1.03:1
BoxMinimalPerf.default 317 307 1.03:1
ChatMinimalPerf.default 547 530 1.03:1
CheckboxMinimalPerf.default 2742 2667 1.03:1
HierarchicalTreeMinimalPerf.default 939 911 1.03:1
Button.Fluent 500 485 1.03:1
Dialog.Fluent 1601 1553 1.03:1
AlertMinimalPerf.default 290 284 1.02:1
ButtonSlotsPerf.default 537 525 1.02:1
DividerMinimalPerf.default 692 679 1.02:1
CustomToolbarPrototype.default 3047 2998 1.02:1
Avatar.Fluent 874 855 1.02:1
AccordionMinimalPerf.default 133 132 1.01:1
EmbedMinimalPerf.default 1908 1885 1.01:1
ItemLayoutMinimalPerf.default 1663 1654 1.01:1
MenuButtonMinimalPerf.default 1509 1487 1.01:1
ProviderMergeThemesPerf.default 1445 1426 1.01:1
ProviderMinimalPerf.default 590 583 1.01:1
ReactionMinimalPerf.default 1785 1772 1.01:1
IconMinimalPerf.default 615 609 1.01:1
TreeWith60ListItems.default 217 214 1.01:1
Slider.Fluent 1259 1251 1.01:1
CarouselMinimalPerf.default 523 522 1:1
HeaderMinimalPerf.default 510 508 1:1
ListWith60ListItems.default 1019 1020 1:1
MenuMinimalPerf.default 1637 1640 1:1
TreeMinimalPerf.default 1189 1189 1:1
Tooltip.Fluent 413 413 1:1
ButtonMinimalPerf.default 142 143 0.99:1
DropdownManyItemsPerf.default 1143 1150 0.99:1
ImageMinimalPerf.default 348 353 0.99:1
RadioGroupMinimalPerf.default 591 597 0.99:1
RefMinimalPerf.default 169 171 0.99:1
AttachmentSlotsPerf.default 1092 1115 0.98:1
TooltipMinimalPerf.default 683 694 0.98:1
Checkbox.Fluent 548 561 0.98:1
DropdownMinimalPerf.default 2800 2897 0.97:1
FormMinimalPerf.default 759 782 0.97:1
ListCommonPerf.default 910 940 0.97:1
PopupMinimalPerf.default 222 229 0.97:1
TableMinimalPerf.default 336 348 0.97:1
SegmentMinimalPerf.default 821 859 0.96:1
SplitButtonMinimalPerf.default 3058 3199 0.96:1
StatusMinimalPerf.default 617 641 0.96:1
Icon.Fluent 675 703 0.96:1
DialogMinimalPerf.default 1532 1605 0.95:1
InputMinimalPerf.default 852 893 0.95:1
ListNestedPerf.default 791 842 0.94:1
SliderMinimalPerf.default 1185 1258 0.94:1
LayoutMinimalPerf.default 490 528 0.93:1
Dropdown.Fluent 2848 3135 0.91:1

@DustyTheBot
Copy link

DustyTheBot commented Apr 28, 2020

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against d713068

@xugao
Copy link
Contributor

xugao commented Apr 30, 2020

@MLoughry - anything blocking you from merging?

@MLoughry
Copy link
Contributor Author

@xugao I have no reason not to merge this. However,

  1. I'm not sure I can merge myself, since I don't have write permissions.
  2. Earlier, Size Auditor was failing, due to it seeing all new react-next bundles
  3. Currently, it looks like there's some issue in the Fluent build that I believe is unrelated to my changes: https://uifabric.visualstudio.com/fabricpublic/_build/results?buildId=70518&view=logs&j=1387381c-70b4-581c-de41-e64c81c7b28d&t=1e6c1588-661c-5653-a617-b498ff3c1493

@xugao xugao closed this Apr 30, 2020
@xugao xugao reopened this Apr 30, 2020
@xugao
Copy link
Contributor

xugao commented Apr 30, 2020

@MLoughry - got it. i will merge it once ready

@xugao xugao merged commit 24f53d1 into microsoft:master Apr 30, 2020
@ecraig12345
Copy link
Member

@MLoughry Looks like you have write permissions but not admin. (we may have gotten a bit too much in the habit of relying on admin perms to merge in some cases lately)

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.

7 participants