fix: apply badge styles to control rather than host element (microsof…

…t#14539) * fix: apply badge appearance styling to control not host element * Change files
levithomason · Aug 24, 2020 · 733eb14 · 733eb14
1 parent f6a290a
commit 733eb14
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};
   }