fix: apply badge styles to control rather than host element (#14539)

* fix: apply badge appearance styling to control not host element * Change files
microsoft · Aug 14, 2020 · 5cceb3c · 5cceb3c
1 parent 5c64f92
commit 5cceb3c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/change/@fluentui-web-components-2020-08-14-14-13-52-users-chhol-fix-badge-styling.json b/change/@fluentui-web-components-2020-08-14-14-13-52-users-chhol-fix-badge-styling.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix: apply badge appearance styling to control not host element",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-08-14T21:13:52.358Z"
+}
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
@@ -20,18 +20,18 @@ export const BadgeStyles = css`
     padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
   }
 
-  :host(.lightweight) {
+  :host(.lightweight) .control {
     background: transparent;
     color: ${neutralForegroundRestBehavior.var};
     font-weight: 600;
   }
 
-  :host(.accent) {
+  :host(.accent) .control {
     background: ${accentFillRestBehavior.var};
     color: ${accentForegroundCutRestBehavior.var};
   }
 
-  :host(.neutral) {
+  :host(.neutral) .control {
     background: ${neutralFillRestBehavior.var};
     color: ${neutralForegroundRestBehavior.var};
   }