UnderlineNav2: Update total height of the navigation to 48px

.changeset/smooth-cameras-press.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Update total height of the navigation to `48px`

src/UnderlineNav2/UnderlineNavItem.tsx

@@ -5,7 +5,7 @@ import {IconProps} from '@primer/octicons-react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {UnderlineNavContext} from './UnderlineNavContext'
 import CounterLabel from '../CounterLabel'
-import {getLinkStyles, wrapperStyles, iconWrapStyles, counterStyles} from './styles'
+import {getLinkStyles, iconWrapStyles, counterStyles} from './styles'
 import {LoadingCounter} from './LoadingCounter'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import {defaultSxProp} from '../utils/defaultSxProp'
@@ -87,11 +87,11 @@ export const UnderlineNavItem = forwardRef(
       if (ref.current) {
         const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
 
-        const icon = Array.from((ref as MutableRefObject<HTMLElement>).current.children[0].children).find(
+        const icon = Array.from((ref as MutableRefObject<HTMLElement>).current.children).find(
           child => child.getAttribute('data-component') === 'icon',
         )
 
-        const content = Array.from((ref as MutableRefObject<HTMLElement>).current.children[0].children).find(
+        const content = Array.from((ref as MutableRefObject<HTMLElement>).current.children).find(
           child => child.getAttribute('data-component') === 'text',
         ) as HTMLElement
         const text = content.textContent as string
@@ -169,34 +169,32 @@ export const UnderlineNavItem = forwardRef(
           {...props}
           ref={ref}
         >
-          <Box as="div" data-component="wrapper" sx={wrapperStyles}>
-            {iconsVisible && Icon && (
-              <Box as="span" data-component="icon" sx={iconWrapStyles}>
-                <Icon />
-              </Box>
-            )}
-            {children && (
-              <Box
-                as="span"
-                data-component="text"
-                data-content={children}
-                sx={selectedLink === ref ? {fontWeight: 600} : {}}
-              >
-                {children}
-              </Box>
-            )}
-            {loadingCounters ? (
+          {iconsVisible && Icon && (
+            <Box as="span" data-component="icon" sx={iconWrapStyles}>
+              <Icon />
+            </Box>
+          )}
+          {children && (
+            <Box
+              as="span"
+              data-component="text"
+              data-content={children}
+              sx={selectedLink === ref ? {fontWeight: 600} : {}}
+            >
+              {children}
+            </Box>
+          )}
+          {loadingCounters ? (
+            <Box as="span" data-component="counter" sx={counterStyles}>
+              <LoadingCounter />
+            </Box>
+          ) : (
+            counter !== undefined && (
               <Box as="span" data-component="counter" sx={counterStyles}>
-                <LoadingCounter />
+                <CounterLabel>{counter}</CounterLabel>
               </Box>
-            ) : (
-              counter !== undefined && (
-                <Box as="span" data-component="counter" sx={counterStyles}>
-                  <CounterLabel>{counter}</CounterLabel>
-                </Box>
-              )
-            )}
-          </Box>
+            )
+          )}
         </Box>
       </Box>
     )