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>
  )