[web-components] fix missing focus styles for button and anchor due t…

…o whitespace issue (#17515) * remove whitespace causing focus issue on button and anchor controls * Change files
microsoft · Mar 22, 2021 · 869c2e5 · 869c2e5
1 parent 72f18e0
commit 869c2e5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/change/@fluentui-web-components-8395d502-9c43-46d9-b776-2d623ae65016.json b/change/@fluentui-web-components-8395d502-9c43-46d9-b776-2d623ae65016.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "remove whitespace causing focus issue on button and anchor controls",
+ "packageName": "@fluentui/web-components",
+ "email": "chhol@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
@@ -81,7 +81,7 @@ export const BaseButtonStyles: ElementStyles = css`
  background-color: ${neutralFillActiveBehavior.var};
  }
 
- .control: ${focusVisible} {
+ .control:${focusVisible} {
  border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var};
  box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var};
  }
@@ -102,8 +102,10 @@ export const BaseButtonStyles: ElementStyles = css`
  }
 
  ::slotted(svg) {
- ${/* Glyph size and margin-left is temporary -
- replace when adaptive typography is figured out */ ''} width: 16px;
+ ${
+ /* Glyph size and margin-left is temporary -
+ replace when adaptive typography is figured out */ ''
+ } width: 16px;
  height: 16px;
  }
 
@@ -116,6 +118,7 @@ export const BaseButtonStyles: ElementStyles = css`
  }
 `.withBehaviors(
  neutralFillRestBehavior,
+ neutralFocusBehavior,
  neutralForegroundRestBehavior,
  neutralFillHoverBehavior,
  neutralFillActiveBehavior,