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

…#16538) * Fixes content shifting when anchor has focus due to 2px bottom border * Change files
microsoft · Jan 19, 2021 · 809c403 · 809c403
1 parent dadc7e0
commit 809c403
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-2021-01-19-12-33-31-users-robarb-anchor-shift.json b/change/@fluentui-web-components-2021-01-19-12-33-31-users-robarb-anchor-shift.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Fixes content shifting when anchor has focus due to 2px bottom border",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2021-01-19T20:33:31.709Z"
+}
diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
@@ -292,6 +292,7 @@ export const HypertextStyles = css`
     }
     :host(.hypertext) .control:${focusVisible} {
         border-bottom: calc(var(--focus-outline-width) * 1px) solid ${neutralFocusBehavior.var};
+        margin-bottom: calc(calc(var(--outline-width) - var(--focus-outline-width)) * 1px);
     }
 `.withBehaviors(
   accentForegroundRestBehavior,