Fixes content shifting when anchor has focus due to 2px bottom border

[robarbms]

Pull request checklist

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

Description of changes

Porting a fix from FAST anchor to FluentUI. Anchor focus styles have a 2px bottom border instead of the default 1px bottom border. This adds a bottom-margin based on the calculated difference between the default bottom border and the focus border width.

Focus areas to test

Tabbing to the hypertext anchor in the Storybook reveals the shift in content.

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

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	829	828	5000
BaseButtonCompat	mount	909	913	5000
Breadcrumb	mount	40935	41249	5000
Checkbox	mount	1517	1537	5000
CheckboxBase	mount	1307	1324	5000
ChoiceGroup	mount	4859	4781	5000
ComboBox	mount	938	958	1000
CommandBar	mount	9751	9815	1000
ContextualMenu	mount	5995	6001	1000
DefaultButtonCompat	mount	1165	1111	5000
DetailsRow	mount	3625	3661	5000
DetailsRowFast	mount	3731	3644	5000
DetailsRowNoStyles	mount	3515	3468	5000
Dialog	mount	1449	1442	1000
DocumentCardTitle	mount	1738	1741	1000
Dropdown	mount	3353	3352	5000
FocusTrapZone	mount	1803	1715	5000
FocusZone	mount	1790	1801	5000
IconButtonCompat	mount	1819	1822	5000
Label	mount	350	342	5000
Layer	mount	1787	1776	5000
Link	mount	457	467	5000
MakeStyles	mount	1915	1932	50000
MenuButtonCompat	mount	1538	1495	5000
MessageBar	mount	1965	1969	5000
Nav	mount	3258	3235	1000
OverflowSet	mount	1017	1010	5000
Panel	mount	1350	1336	1000
Persona	mount	821	893	1000
Pivot	mount	1381	1400	1000
PrimaryButtonCompat	mount	1297	1284	5000
Rating	mount	7748	7706	5000
SearchBox	mount	1340	1341	5000
Shimmer	mount	2530	2639	5000
Slider	mount	1916	1909	5000
SpinButton	mount	5012	4995	5000
Spinner	mount	406	423	5000
SplitButtonCompat	mount	3221	3173	5000
Stack	mount	482	508	5000
StackWithIntrinsicChildren	mount	1497	1551	5000
StackWithTextChildren	mount	4710	4601	5000
SwatchColorPicker	mount	10115	10210	5000
Tabs	mount	1440	1391	1000
TagPicker	mount	2856	2814	5000
TeachingBubble	mount	11304	11479	5000
Text	mount	419	433	5000
TextField	mount	1383	1407	5000
ThemeProvider	mount	2059	2086	5000
ThemeProvider	virtual-rerender	638	629	5000
Toggle	mount	802	854	5000
button	mount	812	680	5000
buttonNative	mount	104	111	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🦄	Avatar.Fluent	0.18	0.5	0.36:1	2000	368
🦄	Button.Fluent	0.13	0.21	0.62:1	5000	626
🔧	Checkbox.Fluent	0.64	0.36	1.78:1	1000	641
🎯	Dialog.Fluent	0.17	0.22	0.77:1	5000	839
🔧	Dropdown.Fluent	2.88	0.4	7.2:1	1000	2884
🔧	Icon.Fluent	0.14	0.06	2.33:1	5000	704
🦄	Image.Fluent	0.08	0.12	0.67:1	5000	418
🔧	Slider.Fluent	1.62	0.44	3.68:1	1000	1620
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	403
🦄	Tooltip.Fluent	0.12	0.9	0.13:1	5000	582

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	182	161	1.13:1
RefMinimalPerf.default	254	226	1.12:1
ButtonMinimalPerf.default	207	189	1.1:1
LabelMinimalPerf.default	480	441	1.09:1
FormMinimalPerf.default	494	461	1.07:1
Avatar.Fluent	368	345	1.07:1
BoxMinimalPerf.default	416	394	1.06:1
ListMinimalPerf.default	544	519	1.05:1
SegmentMinimalPerf.default	404	383	1.05:1
DropdownManyItemsPerf.default	776	749	1.04:1
ImageMinimalPerf.default	424	409	1.04:1
ListWith60ListItems.default	667	639	1.04:1
TextMinimalPerf.default	405	388	1.04:1
TooltipMinimalPerf.default	844	814	1.04:1
VideoMinimalPerf.default	712	682	1.04:1
Dialog.Fluent	839	810	1.04:1
Text.Fluent	403	387	1.04:1
DividerMinimalPerf.default	419	407	1.03:1
ListNestedPerf.default	638	617	1.03:1
MenuMinimalPerf.default	928	900	1.03:1
MenuButtonMinimalPerf.default	1696	1652	1.03:1
RadioGroupMinimalPerf.default	487	475	1.03:1
ReactionMinimalPerf.default	457	442	1.03:1
StatusMinimalPerf.default	785	765	1.03:1
ToolbarMinimalPerf.default	1001	973	1.03:1
Button.Fluent	626	605	1.03:1
TableMinimalPerf.default	441	432	1.02:1
TextAreaMinimalPerf.default	540	528	1.02:1
TreeWith60ListItems.default	187	184	1.02:1
Checkbox.Fluent	641	631	1.02:1
AttachmentSlotsPerf.default	1248	1238	1.01:1
ButtonUseCssNestingPerf.default	1117	1101	1.01:1
CarouselMinimalPerf.default	510	507	1.01:1
ChatDuplicateMessagesPerf.default	376	372	1.01:1
ChatWithPopoverPerf.default	451	446	1.01:1
HeaderMinimalPerf.default	412	408	1.01:1
InputMinimalPerf.default	1283	1275	1.01:1
ListCommonPerf.default	696	686	1.01:1
PopupMinimalPerf.default	714	706	1.01:1
ProviderMergeThemesPerf.default	1525	1504	1.01:1
SplitButtonMinimalPerf.default	3888	3849	1.01:1
TableManyItemsPerf.default	2212	2194	1.01:1
CustomToolbarPrototype.default	3620	3578	1.01:1
AnimationMinimalPerf.default	419	421	1:1
CardMinimalPerf.default	624	623	1:1
DatepickerMinimalPerf.default	47738	47678	1:1
DialogMinimalPerf.default	813	811	1:1
EmbedMinimalPerf.default	4123	4120	1:1
LayoutMinimalPerf.default	444	446	1:1
ProviderMinimalPerf.default	910	910	1:1
SkeletonMinimalPerf.default	408	406	1:1
Dropdown.Fluent	2884	2872	1:1
Image.Fluent	418	420	1:1
Slider.Fluent	1620	1613	1:1
AvatarMinimalPerf.default	220	223	0.99:1
CheckboxMinimalPerf.default	2815	2830	0.99:1
DropdownMinimalPerf.default	2877	2912	0.99:1
HeaderSlotsPerf.default	844	853	0.99:1
LoaderMinimalPerf.default	733	742	0.99:1
IconMinimalPerf.default	700	708	0.99:1
TreeMinimalPerf.default	821	831	0.99:1
Tooltip.Fluent	582	588	0.99:1
ButtonOverridesMissPerf.default	1692	1719	0.98:1
ButtonSlotsPerf.default	587	597	0.98:1
ChatMinimalPerf.default	667	683	0.98:1
FlexMinimalPerf.default	308	313	0.98:1
GridMinimalPerf.default	388	395	0.98:1
ItemLayoutMinimalPerf.default	1286	1313	0.98:1
PortalMinimalPerf.default	154	157	0.98:1
SliderMinimalPerf.default	1495	1531	0.98:1
Icon.Fluent	704	721	0.98:1
AlertMinimalPerf.default	320	333	0.96:1
RosterPerf.default	1256	1315	0.96:1
ButtonUseCssPerf.default	816	856	0.95:1
AccordionMinimalPerf.default	161	177	0.91:1

[size-auditor]

Asset size changes

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

Baseline commit: dadc7e0e0bd43d27ced6a6c85a3e353eae686f42 (build)

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release