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(AccordionTitle): Convert to RFC #12874

Merged
merged 4 commits into from
Apr 29, 2020
Merged

chore(AccordionTitle): Convert to RFC #12874

merged 4 commits into from
Apr 29, 2020

Conversation

assuncaocharles
Copy link
Contributor

@assuncaocharles assuncaocharles commented Apr 25, 2020 •
edited by msft-github-bot

Pull request checklist

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

BREAKING CHANGES

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

Related to #12237

Prop sets

AccordionTitle
disabled
content
active

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 25, 2020
@size-auditor
Copy link

size-auditor bot commented Apr 25, 2020

Asset size changes

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

Baseline commit: 3f7fedb89433048b03009065460e754079adb050 (build)

@msft-github-bot
Copy link
Contributor

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

Perf Analysis

Scenario Master Ticks PR Ticks Iterations Status
Text 324 301 5000 Possible regression
All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 740 711 5000
Checkbox 1458 1376 5000
CheckboxBase 1167 1194 5000
ChoiceGroup 4468 4451 5000
ComboBox 837 839 1000
CommandBar 6900 6827 1000
ContextualMenu 13542 13672 1000
DefaultButton 926 972 5000
DetailsRow 3092 3147 5000
DetailsRow (fast icons) 3091 3119 5000
DetailsRow without styles 2859 2868 5000
Dialog 1334 1363 1000
DocumentCardTitle with truncation 1511 1580 1000
Dropdown 2216 2143 5000
FocusZone 1432 1434 5000
IconButton 1537 1575 5000
Label 276 284 5000
Link 396 400 5000
MenuButton 1265 1288 5000
Nav 2845 2937 1000
Panel 1344 1353 1000
Persona 751 767 1000
Pivot 1233 1228 1000
PrimaryButton 1074 1116 5000
SearchBox 1165 1132 5000
Slider 1388 1331 5000
Spinner 338 348 5000
SplitButton 2802 2797 5000
Stack 418 411 5000
Stack with Intrinsic children 1004 955 5000
Stack with Text children 3712 3637 5000
TagPicker 2474 2473 5000
Text 324 301 5000 Possible regression
TextField 1228 1214 5000
Toggle 787 791 5000
button 61 61 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.43 0.42 1.02:1 2000 855
🦄 Button.Fluent 0.09 0.17 0.53:1 5000 425
🔧 Checkbox.Fluent 0.59 0.3 1.97:1 1000 591
🔧 Dialog.Fluent 0.31 0.18 1.72:1 5000 1547
🔧 Dropdown.Fluent 3.01 0.37 8.14:1 1000 3007
🔧 Icon.Fluent 0.12 0.04 3:1 5000 618
🦄 Image.Fluent 0.06 0.1 0.6:1 5000 319
🔧 Slider.Fluent 1.32 0.33 4:1 1000 1316
🔧 Text.Fluent 0.06 0.02 3:1 5000 299
🦄 Tooltip.Fluent 0.08 17.56 0:1 5000 409

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HierarchicalTreeMinimalPerf.default 902 805 1.12:1
ProviderMinimalPerf.default 655 602 1.09:1
TreeWith60ListItems.default 220 203 1.08:1
FlexMinimalPerf.default 259 243 1.07:1
LayoutMinimalPerf.default 531 498 1.07:1
TableMinimalPerf.default 512 479 1.07:1
FormMinimalPerf.default 688 654 1.05:1
ImageMinimalPerf.default 324 309 1.05:1
ListNestedPerf.default 830 789 1.05:1
SegmentMinimalPerf.default 849 809 1.05:1
AnimationMinimalPerf.default 580 557 1.04:1
BoxMinimalPerf.default 293 283 1.04:1
TooltipMinimalPerf.default 687 661 1.04:1
AccordionMinimalPerf.default 187 182 1.03:1
ChatMinimalPerf.default 556 541 1.03:1
ProviderMergeThemesPerf.default 1564 1516 1.03:1
TreeMinimalPerf.default 1090 1060 1.03:1
AlertMinimalPerf.default 269 263 1.02:1
EmbedMinimalPerf.default 4032 3949 1.02:1
GridMinimalPerf.default 619 608 1.02:1
InputMinimalPerf.default 920 899 1.02:1
AvatarMinimalPerf.default 469 464 1.01:1
ButtonSlotsPerf.default 581 573 1.01:1
DropdownMinimalPerf.default 3074 3045 1.01:1
ItemLayoutMinimalPerf.default 1499 1482 1.01:1
ListCommonPerf.default 880 872 1.01:1
ListMinimalPerf.default 431 427 1.01:1
PopupMinimalPerf.default 239 236 1.01:1
RefMinimalPerf.default 194 192 1.01:1
SplitButtonMinimalPerf.default 3124 3093 1.01:1
StatusMinimalPerf.default 600 594 1.01:1
TextMinimalPerf.default 299 297 1.01:1
ToolbarMinimalPerf.default 921 911 1.01:1
VideoMinimalPerf.default 577 570 1.01:1
Checkbox.Fluent 591 587 1.01:1
Icon.Fluent 618 610 1.01:1
Slider.Fluent 1316 1307 1.01:1
ButtonMinimalPerf.default 138 138 1:1
DropdownManyItemsPerf.default 1276 1270 1:1
RadioGroupMinimalPerf.default 537 535 1:1
CustomToolbarPrototype.default 3334 3346 1:1
Dropdown.Fluent 3007 3007 1:1
AttachmentSlotsPerf.default 1014 1023 0.99:1
DialogMinimalPerf.default 1563 1579 0.99:1
MenuMinimalPerf.default 1681 1691 0.99:1
SliderMinimalPerf.default 1324 1332 0.99:1
Avatar.Fluent 855 863 0.99:1
Button.Fluent 425 429 0.99:1
Image.Fluent 319 322 0.99:1
CardMinimalPerf.default 488 500 0.98:1
ChatWithPopoverPerf.default 541 554 0.98:1
CheckboxMinimalPerf.default 2739 2801 0.98:1
ListWith60ListItems.default 1068 1088 0.98:1
LoaderMinimalPerf.default 703 716 0.98:1
ChatDuplicateMessagesPerf.default 377 387 0.97:1
HeaderMinimalPerf.default 429 442 0.97:1
ReactionMinimalPerf.default 1744 1804 0.97:1
Dialog.Fluent 1547 1590 0.97:1
CarouselMinimalPerf.default 549 571 0.96:1
HeaderSlotsPerf.default 1290 1349 0.96:1
LabelMinimalPerf.default 358 371 0.96:1
MenuButtonMinimalPerf.default 1418 1477 0.96:1
PortalMinimalPerf.default 261 273 0.96:1
IconMinimalPerf.default 601 623 0.96:1
TextAreaMinimalPerf.default 409 428 0.96:1
DividerMinimalPerf.default 638 671 0.95:1
Text.Fluent 299 319 0.94:1
Tooltip.Fluent 409 435 0.94:1
AttachmentMinimalPerf.default 127 138 0.92:1

@assuncaocharles @layershifter
Update packages/fluentui/react-northstar/src/components/Accordion/Acc…
4a95fd6 
…ordionTitle.tsx

Co-Authored-By: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
@assuncaocharles assuncaocharles merged commit 4ec4301 into microsoft:master Apr 29, 2020
@assuncaocharles assuncaocharles deleted the chore/accordion-title-rfc branch April 29, 2020 07:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pompomon pompomon pompomon 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

@layershifter layershifter Awaiting requested review from layershifter

Assignees

@joschect joschect

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0 PR: Possible Perf Regression 🐌
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

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