fix: CounterBadge now always renders its children if provided (#24916)

microsoft · Sep 29, 2022 · 0885025 · 0885025
1 parent 9c2ca0d
commit 0885025
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/change/@fluentui-react-badge-54d7367f-507a-4e1a-9744-ff90820c0113.json b/change/@fluentui-react-badge-54d7367f-507a-4e1a-9744-ff90820c0113.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: CounterBadge now always renders its children if provided",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...mponents/react-badge/src/components/CounterBadge/__snapshots__/CounterBadge.test.tsx.snap b/...mponents/react-badge/src/components/CounterBadge/__snapshots__/CounterBadge.test.tsx.snap
@@ -3,7 +3,5 @@
 exports[`CounterBadge renders a default state 1`] = `
 <div
   className="fui-Badge fui-CounterBadge"
->
-  0
-</div>
+/>
 `;
diff --git a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadge.ts b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadge.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { BadgeState } from '../Badge/index';
 import { useBadge_unstable } from '../Badge/index';
 import type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';
 
@@ -16,16 +17,16 @@ export const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Re
   } = props;
 
   const state: CounterBadgeState = {
-    ...(useBadge_unstable(props, ref) as CounterBadgeState),
+    ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),
     shape,
     appearance,
     showZero,
     count,
     dot,
   };
 
-  if (!state.dot && !state.root.children) {
-    state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;
+  if ((count !== 0 || showZero) && !dot && !state.root.children) {
+    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
   }
 
   return state;

diff --git a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -29,7 +29,7 @@ export const useCounterBadgeStyles_unstable = (state: CounterBadgeState): Counte
   state.root.className = mergeClasses(
     counterBadgeClassNames.root,
     state.dot && styles.dot,
-    !state.showZero && state.count === 0 && !state.dot && styles.hide,
+    !state.root.children && !state.dot && styles.hide,
     state.root.className,
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,5 @@ @@
     exports[`CounterBadge renders a default state 1`] = `
     <div
       className="fui-Badge fui-CounterBadge"
-    >
-    </div>
+    />
     `;