Handle React elements in UnderlineNav.Item children

packages/react/src/UnderlineNav/UnderlineNav.features.stories.tsx

@@ -14,6 +14,7 @@ import {
 import type {Meta} from '@storybook/react-vite'
 import {UnderlineNav} from './index'
 import {INITIAL_VIEWPORTS} from 'storybook/viewport'
+import Popover from '../Popover'
 
 const meta = {
   title: 'Components/UnderlineNav/Features',
@@ -154,3 +155,35 @@ export const VariantFlush = () => {
     </UnderlineNav>
   )
 }
+
+export const WithPopover = () => {
+  return (
+    <UnderlineNav aria-label="Repository">
+      <UnderlineNav.Item href="#code" leadingVisual={<CodeIcon />}>
+        Code
+      </UnderlineNav.Item>
+      <UnderlineNav.Item href="#issues" leadingVisual={<IssueOpenedIcon />}>
+        Issues
+      </UnderlineNav.Item>
+      <UnderlineNav.Item href="#security" leadingVisual={<ShieldLockIcon />} counter={12}>
+        Security
+        <Popover
+          open={true}
+          style={{
+            left: '50%',
+            transform: 'translateX(-50%)',
+            marginTop: 'var(--base-size-12)',
+          }}
+        >
+          <Popover.Content>Popover content</Popover.Content>
+        </Popover>
+      </UnderlineNav.Item>
+      <UnderlineNav.Item href="#insights" leadingVisual={<GraphIcon />}>
+        Insights
+      </UnderlineNav.Item>
+      <UnderlineNav.Item href="#settings" leadingVisual={<GearIcon />}>
+        Settings
+      </UnderlineNav.Item>
+    </UnderlineNav>
+  )
+}

packages/react/src/UnderlineNav/UnderlineNav.test.tsx

@@ -210,6 +210,34 @@ describe('UnderlineNav', () => {
     expect(screen.getByTestId('jsx-element')).toBeInTheDocument()
     expect(screen.getByTestId('functional-component')).toBeInTheDocument()
   })
+
+  it('extracts only direct text content for data-content attribute, ignoring nested elements', () => {
+    render(
+      <UnderlineNav aria-label="Test">
+        <UnderlineNav.Item>
+          Tab Label
+          <span style={{position: 'absolute'}}>Hidden element</span>
+        </UnderlineNav.Item>
+      </UnderlineNav>,
+    )
+
+    const item = screen.getByRole('link', {name: /Tab Label/})
+    const textSpan = item.querySelector('[data-component="text"]')
+    // data-content should only have the content of the Text and not the nested span
+    expect(textSpan).toHaveAttribute('data-content', 'Tab Label')
+  })
+
+  it('handles string children correctly for data-content attribute', () => {
+    render(
+      <UnderlineNav aria-label="Test">
+        <UnderlineNav.Item>Simple Text</UnderlineNav.Item>
+      </UnderlineNav>,
+    )
+
+    const item = screen.getByRole('link', {name: 'Simple Text'})
+    const textSpan = item.querySelector('[data-component="text"]')
+    expect(textSpan).toHaveAttribute('data-content', 'Simple Text')
+  })
 })
 
 describe('Keyboard Navigation', () => {

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

@@ -13,6 +13,20 @@ import {clsx} from 'clsx'
 // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container.
 export const GAP = 8
 
+// Helper to extract direct text content from children for the data-content attribute.
+// This is used by CSS to reserve space for bold text (preventing layout shift).
+// Only extracts strings/numbers, not text from nested React elements (e.g., Popovers).
+function getTextContent(children: React.ReactNode): string {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children)
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextContent).join('')
+  }
+  // Skip React elements - we only want direct text content, not text from nested components
+  return ''
+}
+
 type UnderlineWrapperProps<As extends React.ElementType> = {
   slot?: string
   as?: As
@@ -59,11 +73,12 @@ export type UnderlineItemProps<As extends React.ElementType> = {
 
 export const UnderlineItem = React.forwardRef((props, ref) => {
   const {as: Component = 'a', children, counter, icon: Icon, iconsVisible, loadingCounters, className, ...rest} = props
+  const textContent = getTextContent(children)
   return (
     <Component {...rest} ref={ref} className={clsx(classes.UnderlineItem, className)}>
       {iconsVisible && Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
       {children && (
-        <span data-component="text" data-content={children}>
+        <span data-component="text" data-content={textContent || undefined}>
           {children}
         </span>
       )}