(react-switch) - Basic implementation

[czearing]

Pull request checklist

• Addresses an existing issue: Switch Convergence #19409
• Include a change request file using $ yarn change

Description of changes

Adding the basic implementation of the Switch component.

CodeSandbox

If you would like to play around with the component, here is a CodeSandbox with the Switch.

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against f333709cbc6d43708cce7efaae5bc22b46008965}

[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 937886d:

Sandbox	Source
Fluent UI React Starter	Configuration
Switch Component	PR

[size-auditor]

Asset size changes

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

Baseline commit: f333709cbc6d43708cce7efaae5bc22b46008965 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
buttonNative	mount	115	111	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	866	891	5000
BaseButton	mount	880	892	5000
Breadcrumb	mount	2615	2655	1000
ButtonNext	mount	442	437	5000
Checkbox	mount	1525	1523	5000
CheckboxBase	mount	1253	1250	5000
ChoiceGroup	mount	4680	4633	5000
ComboBox	mount	988	988	1000
CommandBar	mount	10310	10247	1000
ContextualMenu	mount	6547	6534	1000
DefaultButton	mount	1100	1089	5000
DetailsRow	mount	3708	3667	5000
DetailsRowFast	mount	3759	3747	5000
DetailsRowNoStyles	mount	3462	3561	5000
Dialog	mount	2411	2403	1000
DocumentCardTitle	mount	134	150	1000
Dropdown	mount	3169	3204	5000
FluentProviderNext	mount	7353	7416	5000
FluentProviderWithTheme	mount	375	362	10
FluentProviderWithTheme	virtual-rerender	77	96	10
FluentProviderWithTheme	virtual-rerender-with-unmount	493	514	10
FocusTrapZone	mount	1780	1822	5000
FocusZone	mount	1773	1827	5000
IconButton	mount	1675	1702	5000
Label	mount	343	334	5000
Layer	mount	2964	2990	5000
Link	mount	444	460	5000
MakeStyles	mount	1826	1815	50000
MenuButton	mount	1448	1454	5000
MessageBar	mount	2062	2021	5000
Nav	mount	3239	3199	1000
OverflowSet	mount	1088	1097	5000
Panel	mount	2345	2341	1000
Persona	mount	823	829	1000
Pivot	mount	1368	1388	1000
PrimaryButton	mount	1269	1247	5000
Rating	mount	7684	7548	5000
SearchBox	mount	1314	1286	5000
Shimmer	mount	2482	2467	5000
Slider	mount	1960	1952	5000
SpinButton	mount	4843	4956	5000
Spinner	mount	415	413	5000
SplitButton	mount	3150	3122	5000
Stack	mount	493	497	5000
StackWithIntrinsicChildren	mount	1526	1558	5000
StackWithTextChildren	mount	4469	4413	5000
SwatchColorPicker	mount	10179	10186	5000
Tabs	mount	1361	1369	1000
TagPicker	mount	2546	2591	5000
TeachingBubble	mount	12926	13002	5000
Text	mount	414	413	5000
TextField	mount	1366	1362	5000
ThemeProvider	mount	1168	1188	5000
ThemeProvider	virtual-rerender	600	613	5000
ThemeProvider	virtual-rerender-with-unmount	1841	1891	5000
Toggle	mount	792	815	5000
buttonNative	mount	115	111	5000	Possible regression

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	187	172	1.09:1
AttachmentMinimalPerf.default	155	143	1.08:1
LayoutMinimalPerf.default	374	350	1.07:1
ReactionMinimalPerf.default	380	359	1.06:1
AvatarMinimalPerf.default	198	189	1.05:1
FlexMinimalPerf.default	282	269	1.05:1
GridMinimalPerf.default	339	323	1.05:1
RadioGroupMinimalPerf.default	448	428	1.05:1
PopupMinimalPerf.default	598	582	1.03:1
HeaderMinimalPerf.default	357	350	1.02:1
ListCommonPerf.default	609	599	1.02:1
MenuMinimalPerf.default	830	815	1.02:1
SegmentMinimalPerf.default	350	342	1.02:1
TextMinimalPerf.default	343	335	1.02:1
ToolbarMinimalPerf.default	933	916	1.02:1
TreeMinimalPerf.default	793	776	1.02:1
AccordionMinimalPerf.default	150	149	1.01:1
CarouselMinimalPerf.default	461	456	1.01:1
ChatDuplicateMessagesPerf.default	291	288	1.01:1
DatepickerMinimalPerf.default	5533	5491	1.01:1
DialogMinimalPerf.default	754	744	1.01:1
DividerMinimalPerf.default	352	348	1.01:1
DropdownMinimalPerf.default	3130	3096	1.01:1
InputMinimalPerf.default	1243	1225	1.01:1
ItemLayoutMinimalPerf.default	1197	1184	1.01:1
ListMinimalPerf.default	501	495	1.01:1
MenuButtonMinimalPerf.default	1629	1608	1.01:1
SliderMinimalPerf.default	1578	1568	1.01:1
SplitButtonMinimalPerf.default	4069	4045	1.01:1
TableManyItemsPerf.default	1880	1863	1.01:1
TableMinimalPerf.default	385	382	1.01:1
TextAreaMinimalPerf.default	496	489	1.01:1
AttachmentSlotsPerf.default	1057	1062	1:1
ChatMinimalPerf.default	641	642	1:1
EmbedMinimalPerf.default	4067	4068	1:1
LoaderMinimalPerf.default	669	669	1:1
CustomToolbarPrototype.default	3886	3878	1:1
TooltipMinimalPerf.default	996	1001	1:1
VideoMinimalPerf.default	623	624	1:1
AnimationMinimalPerf.default	411	414	0.99:1
BoxMinimalPerf.default	342	347	0.99:1
ButtonOverridesMissPerf.default	1699	1714	0.99:1
ButtonSlotsPerf.default	540	547	0.99:1
FormMinimalPerf.default	393	395	0.99:1
HeaderSlotsPerf.default	729	734	0.99:1
ListNestedPerf.default	538	541	0.99:1
ListWith60ListItems.default	636	642	0.99:1
RosterPerf.default	1118	1125	0.99:1
ProviderMinimalPerf.default	990	997	0.99:1
ButtonMinimalPerf.default	159	162	0.98:1
CardMinimalPerf.default	542	555	0.98:1
ChatWithPopoverPerf.default	343	349	0.98:1
CheckboxMinimalPerf.default	2728	2781	0.98:1
DropdownManyItemsPerf.default	667	683	0.98:1
ImageMinimalPerf.default	356	362	0.98:1
RefMinimalPerf.default	236	242	0.98:1
ProviderMergeThemesPerf.default	1655	1701	0.97:1
SkeletonMinimalPerf.default	345	355	0.97:1
StatusMinimalPerf.default	652	670	0.97:1
AlertMinimalPerf.default	266	278	0.96:1
LabelMinimalPerf.default	368	385	0.96:1
IconMinimalPerf.default	598	620	0.96:1
TreeWith60ListItems.default	168	176	0.95:1

[khmakoto]

Suggested change

	import { Switch } from '@fluentui/react';
	import { Switch } from '@fluentui/react-components';