fix(Badge): Add uniform padding and modify gaps (#20974)

ling1726 · web-flow · commit 4e7acd7ff3c4 · 2021-12-09T16:26:27.000+01:00
* fix(Badge): Add uniform padding and modify gaps

Adds uniform padding around the badge to achieve the desired effect for
circular icon and one character badges.

The wider variants still look OK. I'm not sure if they are pixel
perfect, but it's the only way I could find that would achieve the
desired effect for icon only badges 🤷

* Change files

* revert bagde stories

* update counter badge styles

* update counter badge styles
diff --git a/change/@fluentui-react-badge-fb4edbee-709f-4e68-9557-f1b0975213fd.json b/change/@fluentui-react-badge-fb4edbee-709f-4e68-9557-f1b0975213fd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Add uniform padding and modify gaps",
+  "packageName": "@fluentui/react-badge",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -31,32 +31,28 @@ const useStyles = makeStyles({
   rootSmall: {
     minWidth: '16px',
     height: '16px',
-    paddingRight: '6px',
-    paddingLeft: '6px',
+    ...shorthands.padding('2px'),
     ...shorthands.gap('4px'),
     fontSize: '8px',
   },
   rootMedium: {
     height: '20px',
     minWidth: '20px',
     ...shorthands.gap('4px'),
-    paddingRight: '8px',
-    paddingLeft: '8px',
+    ...shorthands.padding('4px'),
     fontSize: '10px',
   },
   rootLarge: {
     minWidth: '24px',
     height: '24px',
-    paddingRight: '8px',
-    paddingLeft: '8px',
+    ...shorthands.padding('4px'),
     fontSize: '12px',
-    ...shorthands.gap('6px'),
+    ...shorthands.gap('4px'),
   },
   rootExtraLarge: theme => ({
     minWidth: '32px',
     height: '32px',
-    paddingRight: '12px',
-    paddingLeft: '12px',
+    ...shorthands.padding('6px'),
     ...shorthands.gap('6px'),
     fontSize: '12px',
     ...shorthands.borderWidth(theme.strokeWidthThick),
@@ -97,7 +93,7 @@ const useStyles = makeStyles({
   rootTintDanger: theme => ({
     backgroundColor: theme.colorPaletteRedBackground1,
     color: theme.colorPaletteRedForeground1,
-    ...shorthands.borderColor(theme.colorPaletteRedForeground2),
+    ...shorthands.borderColor(theme.colorPaletteRedBorder1),
   }),
   rootGhostDanger: theme => ({
     color: theme.colorPaletteRedForeground3,
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -5,10 +5,8 @@ import type { CounterBadgeState } from './CounterBadge.types';
 export const counterBadgeClassName = 'fui-CounterBadge';
 
 const useStyles = makeStyles({
-  root: {
-    minWidth: 'auto',
-  },
   dot: {
+    minWidth: 'auto',
     width: '6px',
     height: '6px',
     ...shorthands.padding('0'),
@@ -25,7 +23,6 @@ export const useCounterBadgeStyles = (state: CounterBadgeState): CounterBadgeSta
   const styles = useStyles();
   state.root.className = mergeClasses(
     counterBadgeClassName,
-    styles.root,
     state.dot && styles.dot,
     !state.showZero && state.count === 0 && !state.dot && styles.hide,
     state.root.className,
