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

react-accordion - Adds Icon Slot to Accordion & AccordionHeader #17645

Merged
merged 7 commits into from
Mar 31, 2021
Merged

react-accordion - Adds Icon Slot to Accordion & AccordionHeader #17645

merged 7 commits into from
Mar 31, 2021

Conversation

bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Mar 31, 2021 •
edited

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

  • Updates Spec
  • Adds Icon slot in conformance to design
  • Adds inline property in conformance to design

Updates #16926

@bsunderhus bsunderhus self-assigned this Mar 31, 2021
@size-auditor
Copy link

size-auditor bot commented Mar 31, 2021 •
edited

Asset size changes

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

Baseline commit: c8ea3c891e3325e57da285b5a21285fd0da83823 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 31, 2021 •
edited

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 e13b1d1:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 31, 2021 •
edited

Perf Analysis

Scenario Render type Master Ticks PR Ticks Iterations Status
FocusZone mount 2012 1960 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1046 1054 5000
BaseButton mount 1055 1035 5000
Breadcrumb mount 45959 46247 5000
ButtonNext mount 630 633 5000
Checkbox mount 1755 1777 5000
CheckboxBase mount 1502 1498 5000
ChoiceGroup mount 5376 5359 5000
ComboBox mount 1101 1083 1000
CommandBar mount 10787 10815 1000
ContextualMenu mount 6700 6764 1000
DefaultButton mount 1267 1293 5000
DetailsRow mount 4150 4140 5000
DetailsRowFast mount 4077 4025 5000
DetailsRowNoStyles mount 3933 3870 5000
Dialog mount 1630 1668 1000
DocumentCardTitle mount 1907 1920 1000
Dropdown mount 3668 3679 5000
FocusTrapZone mount 1966 1942 5000
FocusZone mount 2012 1960 5000 Possible regression
IconButton mount 1959 2002 5000
Label mount 353 379 5000
Layer mount 1954 1984 5000
Link mount 537 505 5000
MakeStyles mount 1913 1927 50000
MenuButton mount 1653 1669 5000
MessageBar mount 2148 2204 5000
Nav mount 3773 3654 1000
OverflowSet mount 1133 1155 5000
Panel mount 1553 1547 1000
Persona mount 911 895 1000
Pivot mount 1513 1597 1000
PrimaryButton mount 1416 1459 5000
Rating mount 8782 8840 5000
SearchBox mount 1508 1463 5000
Shimmer mount 2873 2907 5000
Slider mount 2224 2160 5000
SpinButton mount 5453 5521 5000
Spinner mount 448 448 5000
SplitButton mount 3510 3552 5000
Stack mount 573 559 5000
StackWithIntrinsicChildren mount 1719 1764 5000
StackWithTextChildren mount 5198 5275 5000
SwatchColorPicker mount 11204 11308 5000
Tabs mount 1528 1524 1000
TagPicker mount 3181 3193 5000
TeachingBubble mount 12426 12609 5000
Text mount 501 480 5000
TextField mount 1584 1555 5000
ThemeProvider mount 1305 1302 5000
ThemeProvider virtual-rerender 657 646 5000
ThemeProviderNext mount 16653 16372 5000
Toggle mount 895 893 5000
buttonNative mount 122 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.52 0.38:1 2000 393
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 637
🔧 Checkbox.Fluent 0.68 0.38 1.79:1 1000 683
🦄 Dialog.Fluent 0.17 0.25 0.68:1 5000 826
🔧 Dropdown.Fluent 3.26 0.45 7.24:1 1000 3262
🔧 Icon.Fluent 0.15 0.07 2.14:1 5000 737
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 457
🔧 Slider.Fluent 1.69 0.52 3.25:1 1000 1687
🔧 Text.Fluent 0.09 0.03 3:1 5000 431
🦄 Tooltip.Fluent 0.16 0.97 0.16:1 5000 793

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 207 180 1.15:1
Text.Fluent 431 384 1.12:1
ButtonMinimalPerf.default 213 194 1.1:1
GridMinimalPerf.default 422 382 1.1:1
ReactionMinimalPerf.default 474 429 1.1:1
Icon.Fluent 737 677 1.09:1
LabelMinimalPerf.default 464 438 1.06:1
Image.Fluent 457 430 1.06:1
AnimationMinimalPerf.default 482 461 1.05:1
RefMinimalPerf.default 275 262 1.05:1
TableManyItemsPerf.default 2281 2180 1.05:1
ChatWithPopoverPerf.default 439 424 1.04:1
ImageMinimalPerf.default 476 456 1.04:1
LoaderMinimalPerf.default 798 771 1.04:1
TextAreaMinimalPerf.default 609 588 1.04:1
AvatarMinimalPerf.default 239 232 1.03:1
CardMinimalPerf.default 651 631 1.03:1
CarouselMinimalPerf.default 551 536 1.03:1
ItemLayoutMinimalPerf.default 1481 1443 1.03:1
SegmentMinimalPerf.default 416 405 1.03:1
Tooltip.Fluent 793 769 1.03:1
DropdownManyItemsPerf.default 792 778 1.02:1
EmbedMinimalPerf.default 4656 4555 1.02:1
FlexMinimalPerf.default 334 327 1.02:1
FormMinimalPerf.default 491 482 1.02:1
LayoutMinimalPerf.default 424 417 1.02:1
SkeletonMinimalPerf.default 426 419 1.02:1
StatusMinimalPerf.default 786 772 1.02:1
ToolbarMinimalPerf.default 1106 1087 1.02:1
TreeMinimalPerf.default 901 883 1.02:1
AttachmentSlotsPerf.default 1307 1295 1.01:1
BoxMinimalPerf.default 418 413 1.01:1
ButtonSlotsPerf.default 658 652 1.01:1
ChatMinimalPerf.default 709 702 1.01:1
CheckboxMinimalPerf.default 3029 3000 1.01:1
DividerMinimalPerf.default 421 417 1.01:1
PopupMinimalPerf.default 818 806 1.01:1
TableMinimalPerf.default 479 472 1.01:1
TreeWith60ListItems.default 217 214 1.01:1
Dialog.Fluent 826 821 1.01:1
AlertMinimalPerf.default 338 339 1:1
ButtonUseCssPerf.default 910 911 1:1
DatepickerMinimalPerf.default 51093 51083 1:1
HeaderSlotsPerf.default 897 893 1:1
ListWith60ListItems.default 742 745 1:1
MenuMinimalPerf.default 1013 1017 1:1
MenuButtonMinimalPerf.default 1792 1791 1:1
ProviderMinimalPerf.default 1077 1076 1:1
RadioGroupMinimalPerf.default 509 510 1:1
CustomToolbarPrototype.default 4045 4048 1:1
TooltipMinimalPerf.default 1103 1108 1:1
VideoMinimalPerf.default 743 743 1:1
AttachmentMinimalPerf.default 206 208 0.99:1
DropdownMinimalPerf.default 3345 3367 0.99:1
InputMinimalPerf.default 1373 1381 0.99:1
ListCommonPerf.default 722 729 0.99:1
SplitButtonMinimalPerf.default 4138 4175 0.99:1
TextMinimalPerf.default 405 408 0.99:1
Dropdown.Fluent 3262 3300 0.99:1
ButtonOverridesMissPerf.default 1850 1885 0.98:1
ButtonUseCssNestingPerf.default 1171 1190 0.98:1
ProviderMergeThemesPerf.default 1740 1768 0.98:1
Avatar.Fluent 393 400 0.98:1
Slider.Fluent 1687 1716 0.98:1
DialogMinimalPerf.default 816 840 0.97:1
ListNestedPerf.default 625 642 0.97:1
RosterPerf.default 1348 1386 0.97:1
SliderMinimalPerf.default 1671 1715 0.97:1
Checkbox.Fluent 683 702 0.97:1
ListMinimalPerf.default 572 595 0.96:1
IconMinimalPerf.default 717 745 0.96:1
Button.Fluent 637 663 0.96:1
HeaderMinimalPerf.default 420 442 0.95:1
AccordionMinimalPerf.default 185 205 0.9:1
ChatDuplicateMessagesPerf.default 320 356 0.9:1

@bsunderhus bsunderhus enabled auto-merge (squash) March 31, 2021 13:09
@bsunderhus bsunderhus merged commit 4fe5fc2 into microsoft:master Mar 31, 2021
@bsunderhus bsunderhus deleted the features/react-accordion-header-icon branch March 31, 2021 14:56
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.12.0 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
react-accordion - Adds Icon Slot to Accordion & AccordionHeader (micr…
8d0fa18 
…osoft#17645)

* Update Spec and Slots

* Change files

* Update accordion shorthandProps declaration

* Fix lint errors

* Adds inline property
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
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@bsunderhus @fabricteam @msft-fluent-ui-bot @layershifter