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

chore(SplitButton): Convert SplitButton to functional component #12809

Merged
merged 10 commits into from
Apr 22, 2020
Merged

chore(SplitButton): Convert SplitButton to functional component #12809

merged 10 commits into from
Apr 22, 2020

Conversation

assuncaocharles
Copy link
Contributor

@assuncaocharles assuncaocharles commented Apr 22, 2020 •
edited by mnajdova

Pull request checklist

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

BREAKING CHANGES

This PR converts SplitButton component to be functional. Restricting props set that will be passed to styles functions.

Related to #12237

Prop sets

SplitButton
isFromKeyboard
size

Focus areas to test

(optional)

Microsoft Reviewers: Open in CodeFlow

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Apr 22, 2020
@size-auditor
Copy link

size-auditor bot commented Apr 22, 2020 •
edited

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 9661499e6265141126aa4608f9224c60a81d78da (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 22, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 779 757 5000
Checkbox 1513 1480 5000
CheckboxBase 1264 1209 5000
ChoiceGroup 4780 4699 5000
ComboBox 911 832 1000
CommandBar 6956 6689 1000
ContextualMenu 11695 11292 1000
DefaultButton 1045 1019 5000
DetailsRow 3146 3244 5000
DetailsRow (fast icons) 3177 3192 5000
DetailsRow without styles 3065 2964 5000
Dialog 1405 1344 1000
DocumentCardTitle with truncation 1459 1455 1000
Dropdown 2339 2341 5000
FocusZone 1515 1411 5000
IconButton 1637 1605 5000
Label 270 295 5000
Link 419 448 5000
MenuButton 1396 1295 5000
Nav 2907 2967 1000
Panel 1319 1344 1000
Persona 772 742 1000
Pivot 1228 1190 1000
PrimaryButton 1147 1139 5000
SearchBox 1243 1220 5000
Slider 1361 1437 5000
Spinner 361 363 5000
SplitButton 2839 2944 5000
Stack 466 424 5000
Stack with Intrinsic children 1015 994 5000
Stack with Text children 3928 3994 5000
TagPicker 2591 2566 5000
Text 327 337 5000
TextField 1288 1290 5000
Toggle 829 853 5000
button 64 53 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
SplitButtonMinimalPerf.default 3338 3648 0.92:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.45 0.44 1.02:1 2000 897
🦄 Button.Fluent 0.11 0.18 0.61:1 5000 535
🔧 Checkbox.Fluent 0.62 0.31 2:1 1000 621
🔧 Dialog.Fluent 0.34 0.18 1.89:1 5000 1691
🔧 Dropdown.Fluent 3.14 0.42 7.48:1 1000 3140
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 717
🎯 Image.Fluent 0.08 0.1 0.8:1 5000 395
🔧 Slider.Fluent 1.3 0.32 4.06:1 1000 1300
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 360
🦄 Tooltip.Fluent 0.09 13.74 0.01:1 5000 454

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 174 145 1.2:1
FlexMinimalPerf.default 355 298 1.19:1
ChatWithPopoverPerf.default 577 500 1.15:1
Image.Fluent 395 357 1.11:1
PortalMinimalPerf.default 313 287 1.09:1
ListCommonPerf.default 1050 969 1.08:1
DropdownManyItemsPerf.default 1291 1214 1.06:1
HierarchicalTreeMinimalPerf.default 1006 951 1.06:1
MenuButtonMinimalPerf.default 1575 1487 1.06:1
ProviderMinimalPerf.default 614 579 1.06:1
Checkbox.Fluent 621 587 1.06:1
InputMinimalPerf.default 953 904 1.05:1
ItemLayoutMinimalPerf.default 1671 1584 1.05:1
LoaderMinimalPerf.default 718 684 1.05:1
MenuMinimalPerf.default 1827 1732 1.05:1
TableMinimalPerf.default 572 545 1.05:1
TreeMinimalPerf.default 1238 1182 1.05:1
Icon.Fluent 717 680 1.05:1
CardMinimalPerf.default 587 563 1.04:1
ChatMinimalPerf.default 636 612 1.04:1
DividerMinimalPerf.default 736 707 1.04:1
Button.Fluent 535 516 1.04:1
Dropdown.Fluent 3140 3027 1.04:1
Tooltip.Fluent 454 438 1.04:1
BoxMinimalPerf.default 335 326 1.03:1
ImageMinimalPerf.default 377 366 1.03:1
ListMinimalPerf.default 495 481 1.03:1
ListWith60ListItems.default 1150 1116 1.03:1
ProviderMergeThemesPerf.default 1510 1460 1.03:1
RadioGroupMinimalPerf.default 579 563 1.03:1
AnimationMinimalPerf.default 657 646 1.02:1
AttachmentSlotsPerf.default 1108 1082 1.02:1
LayoutMinimalPerf.default 549 540 1.02:1
PopupMinimalPerf.default 239 235 1.02:1
StatusMinimalPerf.default 701 684 1.02:1
IconMinimalPerf.default 680 669 1.02:1
VideoMinimalPerf.default 628 615 1.02:1
ChatDuplicateMessagesPerf.default 390 385 1.01:1
DropdownMinimalPerf.default 3000 2985 1.01:1
GridMinimalPerf.default 680 675 1.01:1
HeaderMinimalPerf.default 511 506 1.01:1
LabelMinimalPerf.default 419 415 1.01:1
ReactionMinimalPerf.default 1808 1788 1.01:1
ToolbarMinimalPerf.default 1026 1017 1.01:1
Slider.Fluent 1300 1287 1.01:1
DialogMinimalPerf.default 1659 1652 1:1
EmbedMinimalPerf.default 4007 4010 1:1
FormMinimalPerf.default 743 744 1:1
HeaderSlotsPerf.default 1481 1488 1:1
TextMinimalPerf.default 371 371 1:1
TextAreaMinimalPerf.default 2617 2616 1:1
ListNestedPerf.default 889 899 0.99:1
RefMinimalPerf.default 184 186 0.99:1
AlertMinimalPerf.default 288 294 0.98:1
CheckboxMinimalPerf.default 2695 2744 0.98:1
Dialog.Fluent 1691 1730 0.98:1
Text.Fluent 360 372 0.97:1
AttachmentMinimalPerf.default 154 160 0.96:1
AvatarMinimalPerf.default 476 494 0.96:1
CustomToolbarPrototype.default 3218 3349 0.96:1
TooltipMinimalPerf.default 658 689 0.96:1
Avatar.Fluent 897 931 0.96:1
ButtonSlotsPerf.default 557 585 0.95:1
SliderMinimalPerf.default 1257 1325 0.95:1
SegmentMinimalPerf.default 821 876 0.94:1
CarouselMinimalPerf.default 540 596 0.91:1
AccordionMinimalPerf.default 167 191 0.87:1
TreeWith60ListItems.default 188 230 0.82:1

@assuncaocharles assuncaocharles merged commit 3622240 into microsoft:master Apr 22, 2020
@assuncaocharles assuncaocharles deleted the chore/splitbutton-functional-component branch April 23, 2020 14:53
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
@assuncaocharles @chpalac @DuanShaolong
chore(SplitButton): Convert SplitButton to functional component (micr…
44a510b 
…osoft#12809)

* chore(SplitButton): Converting it to functional components

* chore(SplitButton): Changelog

* chore(SplitButton): change proptypes

* chore(SplitButton): Revert example

* chore(SplitButton): isFromKeyboard

* chore(SplitButton): Behavior Props

* Revert "chore(SplitButton): Behavior Props"

This reverts commit 58d3122.

* chore(SplitButton): Behavior Props

Co-authored-by: Charles Assuncao <chassunc@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@levithomason levithomason Awaiting requested review from levithomason

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@mnajdova mnajdova Awaiting requested review from mnajdova

@pompomon pompomon Awaiting requested review from pompomon

Assignees

@joschect joschect

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@assuncaocharles @msft-github-bot @layershifter @joschect @chpalac