fix: add border and adjust padding to badge component (#19268)

* add border and adjust padding to badge component * Change files
microsoft · Aug 5, 2021 · 23bd45d · 23bd45d
1 parent e5561d9
commit 23bd45d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-5dc3f7fb-7d68-4ca4-b499-a860985ffc30.json b/change/@fluentui-web-components-5dc3f7fb-7d68-4ca4-b499-a860985ffc30.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add border and adjust padding to badge component",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
@@ -8,6 +8,7 @@ import {
   foregroundOnAccentRest,
   neutralFillRest,
   neutralForegroundRest,
+  strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
 } from '../design-tokens';
@@ -26,7 +27,8 @@ export const badgeStyles: (
 
     .control {
       border-radius: calc(${controlCornerRadius} * 1px);
-      padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
+      padding: calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px) calc((${designUnit} - ${strokeWidth}) * 1px);
+      border: calc(${strokeWidth} * 1px) solid transparent;
     }
 
     :host(.lightweight) .control {