[UnderlineNav2]: Add string type to the counter prop and display loading counter for all (#2449)

* string type for counters and fix loading issue

* add changeset

* improve docs

* update animation details

* Inverte the pulse effect

Co-authored-by: Daniel Guillan <[email protected]>

Co-authored-by: Daniel Guillan <[email protected]>

Author: broccolinisoup

.changeset/tough-peas-sort.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Add string type to the `counter` prop and display loading counter for all

docs/content/drafts/UnderlineNav2.mdx

@@ -152,7 +152,7 @@ const Navigation = () => {
     name="loadingCounters"
     type="boolean"
     defaultValue="false"
-    description="Whether all of the counters are in loading state"
+    description="Whether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts."
   />
   <PropsTableRow
     name="afterSelect"

src/UnderlineNav2/LoadingCounter.tsx

@@ -2,13 +2,13 @@ import styled, {keyframes} from 'styled-components'
 import {get} from '../constants'
 
 const loading = keyframes`
-  from { opacity: 0.4; }
-  to { opacity: 0.8; }
+  from { opacity: 1; }
+  to { opacity: 0.2; }
 `
 
 export const LoadingCounter = styled.span`
-  animation: ${loading} 1.2s linear infinite alternate;
-  background-color: ${get('colors.neutral.emphasis')};
+  animation: ${loading} 1.2s ease-in-out infinite alternate;
+  background-color: ${get('colors.neutral.muted')};
   border-color: ${get('colors.border.default')};
   width: 1.5rem;
   height: 1rem; // 16px

src/UnderlineNav2/UnderlineNav.tsx

@@ -299,7 +299,9 @@ export const UnderlineNav = forwardRef(
                                 {loadingCounters ? (
                                   <LoadingCounter />
                                 ) : (
-                                  <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                                  actionElementProps.counter !== undefined && (
+                                    <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                                  )
                                 )}
                               </Box>
                             </ActionList.Item>

src/UnderlineNav2/UnderlineNavItem.tsx

@@ -42,7 +42,7 @@ export type UnderlineNavItemProps = {
   /**
    * Counter
    */
-  counter?: number
+  counter?: number | string
 } & SxProp &
   LinkProps
 
@@ -172,10 +172,16 @@ export const UnderlineNavItem = forwardRef(
                 {children}
               </Box>
             )}
-            {counter && (
+            {loadingCounters ? (
               <Box as="span" data-component="counter" sx={counterStyles}>
-                {loadingCounters ? <LoadingCounter /> : <CounterLabel>{counter}</CounterLabel>}
+                <LoadingCounter />
               </Box>
+            ) : (
+              counter !== undefined && (
+                <Box as="span" data-component="counter" sx={counterStyles}>
+                  <CounterLabel>{counter}</CounterLabel>
+                </Box>
+              )
             )}
           </Box>
         </Box>

src/UnderlineNav2/examples.stories.tsx

@@ -72,14 +72,14 @@ 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: 'Issues', icon: IssueOpenedIcon, counter: '12K'},
   {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},
   {navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},
   {navigation: 'Actions', icon: PlayIcon, counter: 4},
   {navigation: 'Projects', icon: ProjectIcon, counter: 9},
-  {navigation: 'Insights', icon: GraphIcon},
+  {navigation: 'Insights', icon: GraphIcon, counter: '0'},
   {navigation: 'Settings', icon: GearIcon, counter: 10},
   {navigation: 'Security', icon: ShieldLockIcon}
 ]