Skip to content

Rollback AccordionHeader make styles#17647

Merged
bsunderhus merged 2 commits intomicrosoft:masterfrom
bsunderhus:bugfix/rollback-accordion-header-make-styles
Mar 31, 2021
Merged

Rollback AccordionHeader make styles#17647
bsunderhus merged 2 commits intomicrosoft:masterfrom
bsunderhus:bugfix/rollback-accordion-header-make-styles

Conversation

@bsunderhus
Copy link
Copy Markdown
Contributor

@bsunderhus bsunderhus commented Mar 31, 2021 •
edited
Loading

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

Rollback changes implemented in AccordionHeader to ensure a single hook to declare styles

Updates #16926

@bsunderhus bsunderhus requested a review from layershifter March 31, 2021 15:08
@bsunderhus bsunderhus self-assigned this Mar 31, 2021
@bsunderhus bsunderhus enabled auto-merge (squash) March 31, 2021 15:11
@size-auditor
Copy link
Copy Markdown

size-auditor bot commented Mar 31, 2021

Asset size changes

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

Baseline commit: d683f5fddc48951c4323445b4fd1387e90fa9c8b (build)

@bsunderhus bsunderhus merged commit 29dc190 into microsoft:master Mar 31, 2021
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Mar 31, 2021

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 50b2a0f:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Mar 31, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 928 916 5000
BaseButton mount 871 865 5000
Breadcrumb mount 43966 43945 5000
ButtonNext mount 564 552 5000
Checkbox mount 1526 1517 5000
CheckboxBase mount 1260 1256 5000
ChoiceGroup mount 4570 4619 5000
ComboBox mount 974 993 1000
CommandBar mount 9989 9973 1000
ContextualMenu mount 6206 6176 1000
DefaultButton mount 1111 1085 5000
DetailsRow mount 3594 3634 5000
DetailsRowFast mount 3566 3571 5000
DetailsRowNoStyles mount 3485 3414 5000
Dialog mount 1451 1430 1000
DocumentCardTitle mount 1839 1873 1000
Dropdown mount 3256 3243 5000
FocusTrapZone mount 1840 1781 5000
FocusZone mount 1820 1788 5000
IconButton mount 1698 1679 5000
Label mount 332 331 5000
Layer mount 1745 1757 5000
Link mount 457 449 5000
MakeStyles mount 1822 1824 50000
MenuButton mount 1445 1475 5000
MessageBar mount 1966 1972 5000
Nav mount 3223 3201 1000
OverflowSet mount 1013 1007 5000
Panel mount 1384 1422 1000
Persona mount 816 803 1000
Pivot mount 1407 1368 1000
PrimaryButton mount 1253 1266 5000
Rating mount 7471 7498 5000
SearchBox mount 1273 1257 5000
Shimmer mount 2489 2468 5000
Slider mount 1943 1924 5000
SpinButton mount 4877 4881 5000
Spinner mount 406 409 5000
SplitButton mount 3088 3079 5000
Stack mount 503 487 5000
StackWithIntrinsicChildren mount 1526 1534 5000
StackWithTextChildren mount 4407 4445 5000
SwatchColorPicker mount 10067 10037 5000
Tabs mount 1393 1383 1000
TagPicker mount 2791 2795 5000
TeachingBubble mount 11438 11406 5000
Text mount 411 401 5000
TextField mount 1360 1335 5000
ThemeProvider mount 1160 1159 5000
ThemeProvider virtual-rerender 603 598 5000
ThemeProviderNext mount 15781 15703 5000
Toggle mount 779 791 5000
buttonNative mount 108 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.47 0.36:1 2000 339
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 546
🔧 Checkbox.Fluent 0.62 0.35 1.77:1 1000 624
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 734
🔧 Dropdown.Fluent 3.09 0.38 8.13:1 1000 3087
🔧 Icon.Fluent 0.12 0.06 2:1 5000 602
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 384
🔧 Slider.Fluent 1.59 0.45 3.53:1 1000 1591
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 363
🦄 Tooltip.Fluent 0.14 0.88 0.16:1 5000 718

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatWithPopoverPerf.default 409 373 1.1:1
FlexMinimalPerf.default 307 289 1.06:1
ButtonSlotsPerf.default 560 533 1.05:1
ListCommonPerf.default 641 608 1.05:1
RefMinimalPerf.default 254 243 1.05:1
TextAreaMinimalPerf.default 486 465 1.05:1
AlertMinimalPerf.default 283 272 1.04:1
AttachmentSlotsPerf.default 1181 1133 1.04:1
CarouselMinimalPerf.default 484 466 1.04:1
HeaderSlotsPerf.default 771 742 1.04:1
InputMinimalPerf.default 1286 1238 1.04:1
PortalMinimalPerf.default 174 168 1.04:1
AccordionMinimalPerf.default 167 162 1.03:1
CardMinimalPerf.default 559 542 1.03:1
VideoMinimalPerf.default 643 625 1.03:1
AttachmentMinimalPerf.default 170 166 1.02:1
ChatMinimalPerf.default 611 600 1.02:1
LabelMinimalPerf.default 401 395 1.02:1
ListWith60ListItems.default 656 640 1.02:1
RadioGroupMinimalPerf.default 451 443 1.02:1
IconMinimalPerf.default 619 609 1.02:1
TextMinimalPerf.default 357 350 1.02:1
Checkbox.Fluent 624 613 1.02:1
Tooltip.Fluent 718 702 1.02:1
ButtonMinimalPerf.default 175 173 1.01:1
ButtonUseCssPerf.default 803 797 1.01:1
DropdownManyItemsPerf.default 677 672 1.01:1
HeaderMinimalPerf.default 363 360 1.01:1
MenuMinimalPerf.default 872 863 1.01:1
ProviderMergeThemesPerf.default 1678 1659 1.01:1
SegmentMinimalPerf.default 358 355 1.01:1
SkeletonMinimalPerf.default 360 356 1.01:1
SliderMinimalPerf.default 1594 1571 1.01:1
SplitButtonMinimalPerf.default 3704 3671 1.01:1
StatusMinimalPerf.default 691 681 1.01:1
ToolbarMinimalPerf.default 940 933 1.01:1
Button.Fluent 546 539 1.01:1
Dialog.Fluent 734 730 1.01:1
Dropdown.Fluent 3087 3058 1.01:1
Icon.Fluent 602 595 1.01:1
Slider.Fluent 1591 1583 1.01:1
AnimationMinimalPerf.default 417 419 1:1
AvatarMinimalPerf.default 205 204 1:1
ButtonOverridesMissPerf.default 1681 1685 1:1
CheckboxMinimalPerf.default 2707 2701 1:1
DatepickerMinimalPerf.default 44941 44804 1:1
DividerMinimalPerf.default 364 363 1:1
DropdownMinimalPerf.default 3091 3086 1:1
EmbedMinimalPerf.default 4110 4119 1:1
ImageMinimalPerf.default 374 374 1:1
ItemLayoutMinimalPerf.default 1253 1252 1:1
MenuButtonMinimalPerf.default 1544 1542 1:1
ProviderMinimalPerf.default 1006 1011 1:1
ReactionMinimalPerf.default 383 384 1:1
TableManyItemsPerf.default 1883 1886 1:1
CustomToolbarPrototype.default 3809 3823 1:1
TooltipMinimalPerf.default 970 966 1:1
TreeMinimalPerf.default 780 778 1:1
GridMinimalPerf.default 352 354 0.99:1
ListNestedPerf.default 554 558 0.99:1
LoaderMinimalPerf.default 688 695 0.99:1
PopupMinimalPerf.default 707 714 0.99:1
TableMinimalPerf.default 407 411 0.99:1
TreeWith60ListItems.default 182 183 0.99:1
Avatar.Fluent 339 342 0.99:1
Image.Fluent 384 386 0.99:1
Text.Fluent 363 367 0.99:1
BoxMinimalPerf.default 353 361 0.98:1
ChatDuplicateMessagesPerf.default 298 303 0.98:1
DialogMinimalPerf.default 726 739 0.98:1
ListMinimalPerf.default 484 496 0.98:1
ButtonUseCssNestingPerf.default 1051 1086 0.97:1
FormMinimalPerf.default 398 417 0.95:1
RosterPerf.default 1108 1172 0.95:1
LayoutMinimalPerf.default 369 400 0.92:1

@msft-fluent-ui-bot
Copy link
Copy Markdown
Collaborator

msft-fluent-ui-bot commented Apr 1, 2021

🎉@fluentui/react-examples@v8.12.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Copy Markdown
Collaborator

msft-fluent-ui-bot commented Apr 1, 2021

🎉@fluentui/react-accordion@v9.0.0-alpha.9 has been released which incorporates this pull request.:tada:

Handy links:

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@bsunderhus @miroslavstastny
Rollback AccordionHeader make styles (microsoft#17647)
f66006d 
* Rollback makeStyles usage in AccordionHeader style for a single hook

* Change files
@bsunderhus bsunderhus deleted the bugfix/rollback-accordion-header-make-styles branch June 20, 2024 11:30
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

Assignees

@bsunderhus bsunderhus

Labels

Component: Accordion Component: AccordionHeader

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@bsunderhus @fabricteam @msft-fluent-ui-bot @layershifter