Toggle: fix label click target being too wide

[xugao]

Pull request checklist

• Addresses an existing issue: Fixes The toggle should be rendered as inline-block instead of block #13721
• Include a change request file using $ yarn change

Description of changes

Fixing the issue by updating label inside Toggle to be as wide as the text width, not as the width of its container.

Focus areas to test

(optional)

[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 f9f4832:

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

[fabricteam]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	815	792	5000
BaseButtonCompat	mount	909	869	5000
Breadcrumb	mount	42251	42082	5000
Checkbox	mount	1461	1443	5000
CheckboxBase	mount	1209	1194	5000
ChoiceGroup	mount	4618	4618	5000
ComboBox	mount	941	917	1000
CommandBar	mount	9912	9978	1000
ContextualMenu	mount	5917	6040	1000
DefaultButtonCompat	mount	1078	1084	5000
DetailsRow	mount	3537	3420	5000
DetailsRowFast	mount	3567	3562	5000
DetailsRowNoStyles	mount	3409	3439	5000
Dialog	mount	1388	1420	1000
DocumentCardTitle	mount	1846	1811	1000
Dropdown	mount	2072	3195	5000
FocusTrapZone	mount	1798	1745	5000
FocusZone	mount	1769	1811	5000
IconButtonCompat	mount	1700	1702	5000
Label	mount	343	326	5000
Layer	mount	1705	1707	5000
Link	mount	447	456	5000
MenuButtonCompat	mount	1448	1419	5000
MessageBar	mount	1954	1925	5000
Nav	mount	3150	3143	1000
OverflowSet	mount	1044	1006	5000
Panel	mount	1404	1386	1000
Persona	mount	837	832	1000
Pivot	mount	1360	1335	1000
PrimaryButtonCompat	mount	1248	1208	5000
Rating	mount	7256	7230	5000
SearchBox	mount	1258	1280	5000
Shimmer	mount	2451	2531	5000
Slider	mount	1836	1806	5000
SpinButton	mount	4832	4846	5000
Spinner	mount	410	403	5000
SplitButtonCompat	mount	3059	3054	5000
Stack	mount	491	470	5000
StackWithIntrinsicChildren	mount	1483	1462	5000
StackWithTextChildren	mount	4307	4310	5000
SwatchColorPicker	mount	9838	9909	5000
Tabs	mount	1369	1368	1000
TagPicker	mount	2754	2723	5000
TeachingBubble	mount	11340	11369	5000
Text	mount	409	404	5000
TextField	mount	1318	1314	5000
ThemeProvider	mount	2180	2129	5000
ThemeProvider	virtual-rerender	623	631	5000
Toggle	mount	772	800	5000
button	mount	656	623	5000
buttonNative	mount	109	109	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.43	0.5	0.86:1	2000	863
🦄	Button.Fluent	0.11	0.2	0.55:1	5000	551
🔧	Checkbox.Fluent	0.65	0.34	1.91:1	1000	645
🎯	Dialog.Fluent	0.16	0.21	0.76:1	5000	785
🔧	Dropdown.Fluent	2.95	0.39	7.56:1	1000	2950
🔧	Icon.Fluent	0.14	0.06	2.33:1	5000	715
🦄	Image.Fluent	0.08	0.13	0.62:1	5000	403
🔧	Slider.Fluent	1.54	0.44	3.5:1	1000	1543
🔧	Text.Fluent	0.07	0.03	2.33:1	5000	362
🦄	Tooltip.Fluent	0.11	0.86	0.13:1	5000	564

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	176	158	1.11:1
AnimationMinimalPerf.default	434	397	1.09:1
BoxMinimalPerf.default	386	355	1.09:1
TreeWith60ListItems.default	221	202	1.09:1
CarouselMinimalPerf.default	473	437	1.08:1
ImageMinimalPerf.default	409	380	1.08:1
FlexMinimalPerf.default	312	292	1.07:1
HeaderMinimalPerf.default	397	372	1.07:1
SegmentMinimalPerf.default	383	360	1.06:1
LoaderMinimalPerf.default	751	718	1.05:1
ReactionMinimalPerf.default	424	404	1.05:1
ChatDuplicateMessagesPerf.default	420	402	1.04:1
ProviderMinimalPerf.default	1046	1005	1.04:1
AlertMinimalPerf.default	309	300	1.03:1
AvatarMinimalPerf.default	477	462	1.03:1
ChatWithPopoverPerf.default	471	457	1.03:1
DropdownManyItemsPerf.default	746	723	1.03:1
EmbedMinimalPerf.default	4173	4056	1.03:1
GridMinimalPerf.default	355	343	1.03:1
MenuButtonMinimalPerf.default	1608	1568	1.03:1
CustomToolbarPrototype.default	3914	3814	1.03:1
TreeMinimalPerf.default	795	772	1.03:1
Image.Fluent	403	393	1.03:1
AccordionMinimalPerf.default	155	152	1.02:1
ButtonMinimalPerf.default	180	177	1.02:1
DialogMinimalPerf.default	796	778	1.02:1
FormMinimalPerf.default	420	411	1.02:1
HeaderSlotsPerf.default	827	813	1.02:1
ItemLayoutMinimalPerf.default	1279	1260	1.02:1
LabelMinimalPerf.default	431	421	1.02:1
SliderMinimalPerf.default	1576	1539	1.02:1
DatepickerMinimalPerf.default	45368	45091	1.01:1
DividerMinimalPerf.default	370	366	1.01:1
ListWith60ListItems.default	951	938	1.01:1
PopupMinimalPerf.default	707	702	1.01:1
PortalMinimalPerf.default	164	163	1.01:1
TextMinimalPerf.default	359	357	1.01:1
Checkbox.Fluent	645	639	1.01:1
Tooltip.Fluent	564	559	1.01:1
AttachmentSlotsPerf.default	1108	1104	1:1
ButtonUseCssPerf.default	815	814	1:1
DropdownMinimalPerf.default	2940	2943	1:1
ListCommonPerf.default	666	665	1:1
ListNestedPerf.default	570	570	1:1
SkeletonMinimalPerf.default	437	437	1:1
TableMinimalPerf.default	405	407	1:1
TooltipMinimalPerf.default	819	816	1:1
VideoMinimalPerf.default	641	640	1:1
Avatar.Fluent	863	867	1:1
Button.Fluent	551	549	1:1
Icon.Fluent	715	716	1:1
Slider.Fluent	1543	1546	1:1
ButtonOverridesMissPerf.default	1667	1691	0.99:1
ButtonUseCssNestingPerf.default	1064	1070	0.99:1
CardMinimalPerf.default	564	568	0.99:1
InputMinimalPerf.default	1288	1301	0.99:1
ListMinimalPerf.default	491	495	0.99:1
MenuMinimalPerf.default	869	881	0.99:1
ProviderMergeThemesPerf.default	2062	2090	0.99:1
SplitButtonMinimalPerf.default	3708	3727	0.99:1
StatusMinimalPerf.default	712	717	0.99:1
TextAreaMinimalPerf.default	475	481	0.99:1
Dropdown.Fluent	2950	2968	0.99:1
ButtonSlotsPerf.default	577	589	0.98:1
ChatMinimalPerf.default	639	654	0.98:1
LayoutMinimalPerf.default	412	419	0.98:1
RadioGroupMinimalPerf.default	441	449	0.98:1
TableManyItemsPerf.default	2108	2149	0.98:1
RefMinimalPerf.default	239	247	0.97:1
IconMinimalPerf.default	663	687	0.97:1
Dialog.Fluent	785	809	0.97:1
Text.Fluent	362	372	0.97:1
CheckboxMinimalPerf.default	2824	2934	0.96:1
ToolbarMinimalPerf.default	934	976	0.96:1

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-Toggle	44.472 kB	44.49 kB	18 bytes

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

Baseline commit: c298abf7b7f48d660737a5f96a488f1a0820a322 (build)

[khmakoto]

Seems like you need to update the snapshots in react-examples.

[msft-fluent-ui-bot]

🎉@fluentui/react-toggle@v1.0.0-beta.31 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release