loadingCounters and counter issue fix

broccolinisoup · broccolinisoup · commit a1e23aa915b5 · 2022-10-14T16:23:41.000+10:00
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
@@ -407,7 +407,9 @@ export const UnderlineNav = forwardRef(
                                   {loadingCounters ? (
                                     <LoadingCounter />
                                   ) : (
-                                    <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                                    actionElementProps.counter !== undefined && (
+                                      <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                                    )
                                   )}
                                 </Box>
                               </ActionList.Item>
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -42,7 +42,7 @@ export type UnderlineNavItemProps = {
   /**
    * Counter
    */
-  counter?: number
+  counter?: number | string
 } & SxProp &
   LinkProps
 
@@ -175,11 +175,9 @@ export const UnderlineNavItem = forwardRef(
                 {children}
               </Box>
             )}
-            {counter && (
-              <Box as="span" data-component="counter" sx={counterStyles}>
-                {loadingCounters ? <LoadingCounter /> : <CounterLabel>{counter}</CounterLabel>}
-              </Box>
-            )}
+            <Box as="span" data-component="counter" sx={counterStyles}>
+              {loadingCounters ? <LoadingCounter /> : counter !== undefined && <CounterLabel>{counter}</CounterLabel>}
+            </Box>
           </Box>
         </Box>
       </Box>
diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx
@@ -72,10 +72,10 @@ export const withCounterLabels = () => {
   )
 }
 
-const items: {navigation: string; icon: React.FC<IconProps>; counter?: number}[] = [
+const items: {navigation: string; icon: React.FC<IconProps>; counter?: number | string}[] = [
   {navigation: 'Code', icon: CodeIcon},
-  {navigation: 'Issues', icon: IssueOpenedIcon, counter: 120},
-  {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},
+  {navigation: 'Issues', icon: IssueOpenedIcon, counter: 0},
+  {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: '12K'},
   {navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},
   {navigation: 'Actions', icon: PlayIcon, counter: 4},
   {navigation: 'Projects', icon: ProjectIcon, counter: 9},

Original file line number	Diff line number	Diff line change
`@@ -72,10 +72,10 @@ export const withCounterLabels = () => {`
`72`	`72`	`)`
`73`	`73`	`}`
`74`	`74`
`75`		`-const items: {navigation: string; icon: React.FC<IconProps>; counter?: number}[] = [`
	`75`	`+const items: {navigation: string; icon: React.FC<IconProps>; counter?: number \| string}[] = [`
`76`	`76`	`{navigation: 'Code', icon: CodeIcon},`
`77`		`- {navigation: 'Issues', icon: IssueOpenedIcon, counter: 120},`
`78`		`- {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},`
	`77`	`+ {navigation: 'Issues', icon: IssueOpenedIcon, counter: 0},`
	`78`	`+ {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: '12K'},`
`79`	`79`	`{navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},`
`80`	`80`	`{navigation: 'Actions', icon: PlayIcon, counter: 4},`
`81`	`81`	`{navigation: 'Projects', icon: ProjectIcon, counter: 9},`