fix: add margin to space separator and content

[khamudom]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Added margin on the separator slot and updated fixtures to add examples of Default(with the default separator) and Default with custom separator

before

after

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 3f1a526:

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	817	894	5000
BaseButtonCompat	mount	926	974	5000
Breadcrumb	mount	41955	42071	5000
Checkbox	mount	1561	1555	5000
CheckboxBase	mount	1335	1329	5000
ChoiceGroup	mount	4920	4931	5000
ComboBox	mount	998	1022	1000
CommandBar	mount	10043	10181	1000
ContextualMenu	mount	6074	6042	1000
DefaultButtonCompat	mount	1155	1165	5000
DetailsRow	mount	3637	3722	5000
DetailsRowFast	mount	3649	3698	5000
DetailsRowNoStyles	mount	3480	3497	5000
Dialog	mount	1470	1464	1000
DocumentCardTitle	mount	1765	1776	1000
Dropdown	mount	3364	3390	5000
FocusTrapZone	mount	1664	1768	5000
FocusZone	mount	1833	1827	5000
IconButtonCompat	mount	1887	1914	5000
Label	mount	326	337	5000
Layer	mount	1787	1864	5000
Link	mount	448	466	5000
MakeStyles	mount	1973	1952	50000
MenuButtonCompat	mount	1519	1543	5000
MessageBar	mount	1956	1958	5000
Nav	mount	3366	3404	1000
OverflowSet	mount	1019	1049	5000
Panel	mount	1539	1465	1000
Persona	mount	915	878	1000
Pivot	mount	1449	1385	1000
PrimaryButtonCompat	mount	1284	1295	5000
Rating	mount	7887	7875	5000
SearchBox	mount	1374	1385	5000
Shimmer	mount	2694	2678	5000
Slider	mount	1923	1902	5000
SpinButton	mount	5077	5115	5000
Spinner	mount	394	421	5000
SplitButtonCompat	mount	3225	3203	5000
Stack	mount	513	529	5000
StackWithIntrinsicChildren	mount	1635	1652	5000
StackWithTextChildren	mount	4766	4736	5000
SwatchColorPicker	mount	10462	10353	5000
Tabs	mount	1396	1417	1000
TagPicker	mount	2876	2863	5000
TeachingBubble	mount	11633	11722	5000
Text	mount	429	430	5000
TextField	mount	1378	1395	5000
ThemeProvider	mount	2114	2145	5000
ThemeProvider	virtual-rerender	623	636	5000
Toggle	mount	802	800	5000
button	mount	708	724	5000
buttonNative	mount	109	117	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	396
🦄	Button.Fluent	0.13	0.21	0.62:1	5000	647
🔧	Checkbox.Fluent	0.68	0.37	1.84:1	1000	678
🎯	Dialog.Fluent	0.17	0.22	0.77:1	5000	861
🔧	Dropdown.Fluent	3.03	0.43	7.05:1	1000	3029
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	771
🦄	Image.Fluent	0.09	0.13	0.69:1	5000	441
🔧	Slider.Fluent	1.64	0.44	3.73:1	1000	1636
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	401
🦄	Tooltip.Fluent	0.12	0.89	0.13:1	5000	602

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
Avatar.Fluent	396	347	1.14:1
LayoutMinimalPerf.default	481	447	1.08:1
AttachmentMinimalPerf.default	191	178	1.07:1
AvatarMinimalPerf.default	233	217	1.07:1
GridMinimalPerf.default	416	389	1.07:1
TreeWith60ListItems.default	208	194	1.07:1
ChatWithPopoverPerf.default	496	469	1.06:1
DropdownManyItemsPerf.default	802	760	1.06:1
HeaderMinimalPerf.default	441	418	1.06:1
FlexMinimalPerf.default	342	325	1.05:1
FormMinimalPerf.default	487	465	1.05:1
LabelMinimalPerf.default	487	465	1.05:1
RadioGroupMinimalPerf.default	508	485	1.05:1
ReactionMinimalPerf.default	455	434	1.05:1
IconMinimalPerf.default	724	691	1.05:1
VideoMinimalPerf.default	728	693	1.05:1
Icon.Fluent	771	736	1.05:1
SkeletonMinimalPerf.default	405	391	1.04:1
Button.Fluent	647	622	1.04:1
AttachmentSlotsPerf.default	1279	1238	1.03:1
ButtonSlotsPerf.default	630	613	1.03:1
ButtonUseCssNestingPerf.default	1131	1103	1.03:1
CardMinimalPerf.default	636	620	1.03:1
ChatMinimalPerf.default	684	661	1.03:1
ListMinimalPerf.default	565	550	1.03:1
ListNestedPerf.default	645	626	1.03:1
TableMinimalPerf.default	479	466	1.03:1
TextAreaMinimalPerf.default	570	554	1.03:1
Dialog.Fluent	861	833	1.03:1
Text.Fluent	401	388	1.03:1
CarouselMinimalPerf.default	513	503	1.02:1
ImageMinimalPerf.default	442	434	1.02:1
ListWith60ListItems.default	699	687	1.02:1
MenuButtonMinimalPerf.default	1688	1653	1.02:1
Tooltip.Fluent	602	591	1.02:1
ButtonUseCssPerf.default	872	865	1.01:1
ChatDuplicateMessagesPerf.default	386	381	1.01:1
CheckboxMinimalPerf.default	2908	2892	1.01:1
EmbedMinimalPerf.default	4275	4251	1.01:1
LoaderMinimalPerf.default	764	754	1.01:1
MenuMinimalPerf.default	959	949	1.01:1
ProviderMergeThemesPerf.default	1645	1633	1.01:1
SliderMinimalPerf.default	1613	1597	1.01:1
ToolbarMinimalPerf.default	1010	1004	1.01:1
TooltipMinimalPerf.default	849	843	1.01:1
Checkbox.Fluent	678	671	1.01:1
Image.Fluent	441	438	1.01:1
AccordionMinimalPerf.default	172	172	1:1
AlertMinimalPerf.default	325	324	1:1
ButtonOverridesMissPerf.default	1774	1776	1:1
DatepickerMinimalPerf.default	48467	48456	1:1
DialogMinimalPerf.default	843	843	1:1
ItemLayoutMinimalPerf.default	1370	1373	1:1
RefMinimalPerf.default	235	235	1:1
SegmentMinimalPerf.default	405	407	1:1
StatusMinimalPerf.default	805	802	1:1
TableManyItemsPerf.default	2254	2253	1:1
CustomToolbarPrototype.default	3773	3757	1:1
Dropdown.Fluent	3029	3036	1:1
Slider.Fluent	1636	1644	1:1
AnimationMinimalPerf.default	427	430	0.99:1
ButtonMinimalPerf.default	209	212	0.99:1
DividerMinimalPerf.default	423	428	0.99:1
DropdownMinimalPerf.default	2959	2999	0.99:1
HeaderSlotsPerf.default	885	891	0.99:1
ProviderMinimalPerf.default	990	1000	0.99:1
SplitButtonMinimalPerf.default	3987	4030	0.99:1
TreeMinimalPerf.default	868	881	0.99:1
InputMinimalPerf.default	1359	1389	0.98:1
ListCommonPerf.default	707	718	0.98:1
PopupMinimalPerf.default	730	746	0.98:1
PortalMinimalPerf.default	175	180	0.97:1
TextMinimalPerf.default	408	423	0.96:1
BoxMinimalPerf.default	402	423	0.95:1
RosterPerf.default	1277	1355	0.94:1

[size-auditor]

Asset size changes

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

Baseline commit: 2dc2216daa2afd1eb34a4051ddd6fe917a1f62c8 (build)

[msft-fluent-ui-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release