react-accordion - Refactor internals

[bsunderhus]

Pull request checklist

• Include a change request file using $ yarn change

Description of changes

• Removes slots passed by context
• Flattens context creation on state and moves context declaration to render function
• Fix bug in onClick handler

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-components-Accordion	14.138 kB	13.801 kB	-337 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: f856f75faa1ebb97f041394bb2d3af042e5dc15a (build)

[codesandbox-ci]

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 4a63507:

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

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	838	798	5000
BaseButton	mount	884	928	5000
Breadcrumb	mount	2677	2712	1000
ButtonNext	mount	541	552	5000
Checkbox	mount	1524	1510	5000
CheckboxBase	mount	1314	1250	5000
ChoiceGroup	mount	4760	4887	5000
ComboBox	mount	979	963	1000
CommandBar	mount	10063	10083	1000
ContextualMenu	mount	6235	6230	1000
DefaultButton	mount	1122	1127	5000
DetailsRow	mount	3624	3698	5000
DetailsRowFast	mount	3698	3700	5000
DetailsRowNoStyles	mount	3453	3482	5000
Dialog	mount	2066	2101	1000
DocumentCardTitle	mount	141	144	1000
Dropdown	mount	3209	3183	5000
FluentProviderNext	mount	7150	7223	5000
FocusTrapZone	mount	1803	1756	5000
FocusZone	mount	1794	1778	5000
IconButton	mount	1701	1688	5000
Label	mount	329	338	5000
Layer	mount	1752	1723	5000
Link	mount	466	453	5000
MakeStyles	mount	1789	1764	50000
MenuButton	mount	1435	1441	5000
MessageBar	mount	1985	1990	5000
Nav	mount	3207	3178	1000
OverflowSet	mount	1018	1029	5000
Panel	mount	2077	2040	1000
Persona	mount	815	822	1000
Pivot	mount	1394	1377	1000
PrimaryButton	mount	1261	1275	5000
Rating	mount	7451	7514	5000
SearchBox	mount	1278	1281	5000
Shimmer	mount	2534	2465	5000
Slider	mount	1917	1909	5000
SpinButton	mount	4853	4882	5000
Spinner	mount	418	414	5000
SplitButton	mount	3091	3075	5000
Stack	mount	485	488	5000
StackWithIntrinsicChildren	mount	1554	1524	5000
StackWithTextChildren	mount	4335	4394	5000
SwatchColorPicker	mount	9609	9678	5000
Tabs	mount	1300	1297	1000
TagPicker	mount	2290	2266	5000
TeachingBubble	mount	11369	11240	5000
Text	mount	382	403	5000
TextField	mount	1268	1288	5000
ThemeProvider	mount	1116	1106	5000
ThemeProvider	virtual-rerender	562	562	5000
Toggle	mount	736	742	5000
buttonNative	mount	113	109	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	178	153	1.16:1
SkeletonMinimalPerf.default	374	348	1.07:1
AvatarMinimalPerf.default	204	192	1.06:1
HeaderMinimalPerf.default	371	349	1.06:1
RadioGroupMinimalPerf.default	461	436	1.06:1
AnimationMinimalPerf.default	417	399	1.05:1
GridMinimalPerf.default	345	328	1.05:1
SegmentMinimalPerf.default	360	342	1.05:1
StatusMinimalPerf.default	712	679	1.05:1
VideoMinimalPerf.default	617	586	1.05:1
ChatMinimalPerf.default	676	649	1.04:1
TextMinimalPerf.default	356	342	1.04:1
TreeMinimalPerf.default	836	807	1.04:1
BoxMinimalPerf.default	352	343	1.03:1
CardMinimalPerf.default	550	533	1.03:1
CheckboxMinimalPerf.default	2788	2695	1.03:1
ImageMinimalPerf.default	374	363	1.03:1
LabelMinimalPerf.default	387	375	1.03:1
LayoutMinimalPerf.default	369	357	1.03:1
LoaderMinimalPerf.default	703	683	1.03:1
ListMinimalPerf.default	514	505	1.02:1
PopupMinimalPerf.default	576	562	1.02:1
ReactionMinimalPerf.default	374	365	1.02:1
TableMinimalPerf.default	419	411	1.02:1
AlertMinimalPerf.default	273	271	1.01:1
AttachmentSlotsPerf.default	1070	1056	1.01:1
DividerMinimalPerf.default	355	350	1.01:1
DropdownMinimalPerf.default	3116	3100	1.01:1
FormMinimalPerf.default	393	389	1.01:1
ListCommonPerf.default	613	605	1.01:1
MenuButtonMinimalPerf.default	1549	1530	1.01:1
ButtonOverridesMissPerf.default	1705	1698	1:1
ChatDuplicateMessagesPerf.default	292	291	1:1
ChatWithPopoverPerf.default	376	376	1:1
DatepickerMinimalPerf.default	5368	5361	1:1
EmbedMinimalPerf.default	4125	4130	1:1
InputMinimalPerf.default	1277	1275	1:1
ItemLayoutMinimalPerf.default	1203	1201	1:1
ProviderMergeThemesPerf.default	1681	1685	1:1
RefMinimalPerf.default	236	235	1:1
SplitButtonMinimalPerf.default	3790	3781	1:1
IconMinimalPerf.default	617	615	1:1
ToolbarMinimalPerf.default	949	945	1:1
AttachmentMinimalPerf.default	155	157	0.99:1
ButtonSlotsPerf.default	539	542	0.99:1
DialogMinimalPerf.default	754	762	0.99:1
HeaderSlotsPerf.default	741	749	0.99:1
ListWith60ListItems.default	641	645	0.99:1
ProviderMinimalPerf.default	1016	1025	0.99:1
TableManyItemsPerf.default	1915	1928	0.99:1
TextAreaMinimalPerf.default	499	504	0.99:1
TooltipMinimalPerf.default	987	1000	0.99:1
FlexMinimalPerf.default	284	291	0.98:1
MenuMinimalPerf.default	817	833	0.98:1
SliderMinimalPerf.default	1587	1615	0.98:1
CustomToolbarPrototype.default	3874	3946	0.98:1
TreeWith60ListItems.default	174	178	0.98:1
DropdownManyItemsPerf.default	653	673	0.97:1
ListNestedPerf.default	537	553	0.97:1
RosterPerf.default	1137	1172	0.97:1
PortalMinimalPerf.default	176	182	0.97:1
CarouselMinimalPerf.default	447	466	0.96:1
AccordionMinimalPerf.default	141	153	0.92:1

[ling1726]

I can't think of a reason to block this PR, most comments I have are more like suggestions

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release