data component adr part 7 (#7991)

llastflowers · web-flow · commit b906268b7ebe · 2026-06-23T21:09:45.000Z
diff --git a/.changeset/public-bags-retire.md b/.changeset/public-bags-retire.md
@@ -0,0 +1,17 @@
+---
+"@primer/react": minor
+---
+
+Add data-component attributes and associated tests for:
+
+Radio
+RadioGroup
+RelativeTime
+ScrollableRegion
+SegmentedControl
+Select
+SideNav
+SkeletonBox
+SkeletonAvatar
+SkeletonText
+Spinner
diff --git a/packages/react/src/Radio/Radio.test.tsx b/packages/react/src/Radio/Radio.test.tsx
@@ -23,6 +23,12 @@ describe('Radio', () => {
     expect(radio).toBeDefined()
   })
 
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(<Radio {...defaultProps} />)
+
+    expect(getByRole('radio')).toHaveAttribute('data-component', 'Radio')
+  })
+
   it('renders an unchecked radio by default', () => {
     const {getByRole} = render(<Radio {...defaultProps} />)
 
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
@@ -80,6 +80,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         onChange={handleOnChange}
         className={clsx(className, sharedClasses.Input, classes.Radio)}
         {...rest}
+        data-component="Radio"
       />
     )
   },
diff --git a/packages/react/src/RadioGroup/RadioGroup.test.tsx b/packages/react/src/RadioGroup/RadioGroup.test.tsx
@@ -28,6 +28,25 @@ describe('RadioGroup', () => {
     vi.clearAllMocks()
   })
 
+  it('renders data-component attributes', () => {
+    const {getByRole, getByText} = render(
+      <RadioGroup name="choices">
+        <RadioGroup.Label>Choices</RadioGroup.Label>
+        <RadioGroup.Caption>Pick one</RadioGroup.Caption>
+        <RadioGroup.Validation variant="error">Selection required</RadioGroup.Validation>
+        <FormControl>
+          <Radio value="one" />
+          <FormControl.Label>Choice one</FormControl.Label>
+        </FormControl>
+      </RadioGroup>,
+    )
+
+    expect(getByRole('group')).toHaveAttribute('data-component', 'RadioGroup')
+    expect(getByText('Choices')).toHaveAttribute('data-component', 'RadioGroup.Label')
+    expect(getByText('Pick one')).toHaveAttribute('data-component', 'RadioGroup.Caption')
+    expect(document.querySelector('[data-component="RadioGroup.Validation"]')).toHaveTextContent('Selection required')
+  })
+
   it('renders a disabled group of inputs', () => {
     const {getAllByRole, getByRole} = render(
       <RadioGroup name="choices" disabled>
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -44,7 +44,7 @@ const RadioGroup: FC<React.PropsWithChildren<RadioGroupProps>> = ({children, dis
         },
       }}
     >
-      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
+      <CheckboxOrRadioGroup disabled={disabled} data-component="RadioGroup" {...rest}>
         {children}
       </CheckboxOrRadioGroup>
     </RadioGroupContext.Provider>
diff --git a/packages/react/src/RelativeTime/RelativeTime.test.tsx b/packages/react/src/RelativeTime/RelativeTime.test.tsx
@@ -10,6 +10,13 @@ describe('RelativeTime', () => {
     expect(container.firstChild?.nodeName.toLowerCase()).toEqual('relative-time')
   })
 
+  it('renders data-component attribute', () => {
+    const date = new Date('2024-03-07T12:22:48.123Z')
+    const {container} = render(<RelativeTime date={date} />)
+
+    expect(container.firstChild).toHaveAttribute('data-component', 'RelativeTime')
+  })
+
   it('renders a date inside', () => {
     const date = new Date('2024-03-07T12:22:48.123Z')
     const {container} = render(<RelativeTime date={date} />)
diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx
@@ -8,7 +8,7 @@ const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric
 function RelativeTime({date, datetime, children, noTitle, ...props}: RelativeTimeProps) {
   if (datetime) date = new Date(datetime)
   return (
-    <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined}>
+    <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined} data-component="RelativeTime">
       {children || date?.toLocaleDateString('en', localeOptions) || ''}
     </RelativeTimeComponent>
   )
diff --git a/packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx b/packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx
@@ -30,6 +30,16 @@ describe('ScrollableRegion', () => {
     window.ResizeObserver = originalResizeObserver
   })
 
+  test('renders data-component attribute', () => {
+    render(
+      <ScrollableRegion aria-label="Example label" data-testid="container">
+        Example content
+      </ScrollableRegion>,
+    )
+
+    expect(screen.getByTestId('container')).toHaveAttribute('data-component', 'ScrollableRegion')
+  })
+
   test('does not render with region props by default', () => {
     render(
       <ScrollableRegion aria-label="Example label" data-testid="container">
diff --git a/packages/react/src/ScrollableRegion/ScrollableRegion.tsx b/packages/react/src/ScrollableRegion/ScrollableRegion.tsx
@@ -34,7 +34,13 @@ function ScrollableRegion({
     : {}
 
   return (
-    <div {...rest} {...regionProps} ref={ref} className={clsx(classes.ScrollableRegion, className)}>
+    <div
+      {...rest}
+      {...regionProps}
+      ref={ref}
+      className={clsx(classes.ScrollableRegion, className)}
+      data-component="ScrollableRegion"
+    >
       {children}
     </div>
   )
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -34,6 +34,44 @@ const segmentData = [
 describe('SegmentedControl', () => {
   implementsClassName(props => <SegmentedControl aria-label="File view" {...props} />, classes.SegmentedControl)
 
+  it('renders data-component attribute on the root', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="File view">
+        {segmentData.map(({label}) => (
+          <SegmentedControl.Button key={label}>{label}</SegmentedControl.Button>
+        ))}
+      </SegmentedControl>,
+    )
+
+    expect(getByRole('list')).toHaveAttribute('data-component', 'SegmentedControl')
+  })
+
+  it('renders data-component attribute on segmented control buttons', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="File view">
+        <SegmentedControl.Button>Preview</SegmentedControl.Button>
+      </SegmentedControl>,
+    )
+
+    expect(getByRole('button', {name: 'Preview'}).closest('li')).toHaveAttribute(
+      'data-component',
+      'SegmentedControl.Button',
+    )
+  })
+
+  it('renders data-component attribute on segmented control icon buttons', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="File view">
+        <SegmentedControl.IconButton icon={() => <EyeIcon />} aria-label="Preview" />
+      </SegmentedControl>,
+    )
+
+    expect(getByRole('button', {name: 'Preview'}).closest('li')).toHaveAttribute(
+      'data-component',
+      'SegmentedControl.IconButton',
+    )
+  })
+
   it('renders with a selected segment - controlled', () => {
     const {getByText} = render(
       <SegmentedControl aria-label="File view">
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -168,6 +168,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
       {...getResponsiveAttributes('variant', variant)}
       data-size={size}
       {...rest}
+      data-component="SegmentedControl"
     >
       {React.Children.map(children, (child, index) => {
         // Not a valid child element - skip rendering child
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -44,7 +44,11 @@ const SegmentedControlButton: FCWithSlotMarker<React.PropsWithChildren<Segmented
   const LeadingVisual = leadingVisual ?? leadingIcon
 
   return (
-    <li className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
+    <li
+      className={clsx(classes.Item)}
+      data-selected={selected ? '' : undefined}
+      data-component="SegmentedControl.Button"
+    >
       <button
         aria-current={selected}
         aria-disabled={disabled || ariaDisabled || undefined}
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -38,7 +38,11 @@ export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildre
   const {'aria-disabled': ariaDisabled, ...rest} = props
 
   return (
-    <li className={clsx(classes.Item, className)} data-selected={selected || undefined}>
+    <li
+      className={clsx(classes.Item, className)}
+      data-selected={selected || undefined}
+      data-component="SegmentedControl.IconButton"
+    >
       <Tooltip
         type={description ? undefined : 'label'}
         text={description ? description : ariaLabel}
diff --git a/packages/react/src/Select/Select.test.tsx b/packages/react/src/Select/Select.test.tsx
@@ -10,6 +10,38 @@ describe('Select', () => {
   implementsClassName(Select.Option)
   implementsClassName(Select.OptGroup)
 
+  it('renders data-component attributes', () => {
+    const {getByLabelText, getByText} = render(
+      <>
+        <label htmlFor="grouped">Choice</label>
+        <Select id="grouped">
+          <Select.OptGroup label="Group one">
+            <Select.Option value="one">Choice one</Select.Option>
+          </Select.OptGroup>
+        </Select>
+      </>,
+    )
+
+    const select = getByLabelText('Choice')
+
+    expect(select).toHaveAttribute('data-component', 'Select')
+    expect(select.querySelector('optgroup')).toHaveAttribute('data-component', 'Select.OptGroup')
+    expect(getByText('Choice one')).toHaveAttribute('data-component', 'Select.Option')
+  })
+
+  it('renders data-component on placeholder option', () => {
+    const {getByText} = render(
+      <>
+        <label htmlFor="placeholder">Choice</label>
+        <Select id="placeholder" placeholder="Pick a choice">
+          <Select.Option value="one">Choice one</Select.Option>
+        </Select>
+      </>,
+    )
+
+    expect(getByText('Pick a choice')).toHaveAttribute('data-component', 'Select.Option')
+  })
+
   it('renders a select input', () => {
     const {getByLabelText} = render(
       <>
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
@@ -65,9 +65,10 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           className={clsx(classes.Select, disabled && classes.Disabled)}
           data-hasplaceholder={Boolean(placeholder)}
           defaultValue={defaultValue ?? placeholder ?? undefined}
+          data-component="Select"
         >
           {placeholder && (
-            <option value="" disabled={required} hidden={required}>
+            <option value="" disabled={required} hidden={required} data-component="Select.Option">
               {placeholder}
             </option>
           )}
@@ -80,11 +81,11 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
 ) as PolymorphicForwardRefComponent<'select', SelectProps>
 
 const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
-  <option {...props} />
+  <option {...props} data-component="Select.Option" />
 )
 
 const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>> = props => (
-  <optgroup {...props} />
+  <optgroup {...props} data-component="Select.OptGroup" />
 )
 
 export default Object.assign(Select, {
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
@@ -36,7 +36,7 @@ function SideNav({
   )
 
   return (
-    <Component className={newClassName} aria-label={ariaLabel}>
+    <Component className={newClassName} aria-label={ariaLabel} data-component="SideNav">
       {children}
     </Component>
   )
@@ -55,7 +55,12 @@ const SideNavLink = ({selected, to, variant, className, children, ...rest}: Styl
   // according to their docs, NavLink supports aria-current:
   // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
   return (
-    <Link aria-current={isReactRouter || selected ? 'page' : undefined} className={newClassName} {...rest}>
+    <Link
+      aria-current={isReactRouter || selected ? 'page' : undefined}
+      className={newClassName}
+      {...rest}
+      data-component="SideNav.Link"
+    >
       {children}
     </Link>
   )
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -12,10 +12,11 @@ export type SkeletonBoxProps = {
   className?: string
   /** Controls whether and how long to delay rendering the SkeletonBox. Set to 'short' to delay by 300ms, 'long' to delay by 1000ms, or provide a custom number of milliseconds.*/
   delay?: 'short' | 'long' | number
+  'data-component'?: string
 } & HTMLProps<HTMLElement>
 
 export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(function SkeletonBox(
-  {height, width, className, style, delay, ...props},
+  {height, width, className, style, delay, 'data-component': dataComponent = 'SkeletonBox', ...props},
   ref,
 ) {
   const [isVisible, setIsVisible] = useState(!delay)
@@ -43,6 +44,7 @@ export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(funct
       className={clsx(className, classes.SkeletonBox)}
       style={{height, width, ...(style || {})}}
       {...props}
+      data-component={dataComponent}
     />
   )
 })
diff --git a/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx b/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx
@@ -7,6 +7,10 @@ import {act} from 'react'
 
 describe('SkeletonBox', () => {
   implementsClassName(SkeletonBox, classes.SkeletonBox)
+  it('renders data-component attribute', () => {
+    const {container} = render(<SkeletonBox />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'SkeletonBox')
+  })
 
   it('uses the default size when size is not provided', () => {
     const {container} = render(<SkeletonBox width={200} height={100} />)
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.test.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.test.tsx
@@ -8,6 +8,11 @@ import classes from './SkeletonAvatar.module.css'
 describe('SkeletonAvatar', () => {
   implementsClassName(SkeletonAvatar, classes.SkeletonAvatar)
 
+  it('renders data-component attribute', () => {
+    const {container} = render(<SkeletonAvatar />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'SkeletonAvatar')
+  })
+
   it('applies the given size', () => {
     const {container} = render(<SkeletonAvatar size={48} />)
     expect(container.firstChild).toHaveStyle('--avatarSize-regular: 48px;')
diff --git a/packages/react/src/SkeletonText/SkeletonText.test.tsx b/packages/react/src/SkeletonText/SkeletonText.test.tsx
@@ -28,4 +28,26 @@ describe('SkeletonText', () => {
     const {container} = render(<SkeletonText maxWidth="200px" />)
     expect(container.firstChild).toHaveStyle({maxWidth: '200px'})
   })
+
+  it('renders data-component="SkeletonText" for a single line', () => {
+    const {container} = render(<SkeletonText />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'SkeletonText')
+  })
+
+  // update below to data-component="SkeletonText" in next major
+  it('renders data-component="multilineContainer" for the multiline wrapper', () => {
+    const {container} = render(<SkeletonText lines={3} />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'multilineContainer')
+  })
+
+  it('renders multiline children as SkeletonBox instances', () => {
+    const {container} = render(<SkeletonText lines={3} />)
+    const children = Array.from(container.firstChild?.childNodes ?? [])
+
+    expect(children).toHaveLength(3)
+
+    for (const child of children) {
+      expect(child).toHaveAttribute('data-component', 'SkeletonText')
+    }
+  })
 })
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -19,7 +19,6 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
   if (lines < 2) {
     return (
       <SkeletonBox
-        data-component="SkeletonText"
         data-text-skeleton-size={size}
         width="100%"
         className={clsx(className, classes.SkeletonText)}
@@ -28,12 +27,14 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
           maxWidth,
         }}
         {...rest}
+        data-component="SkeletonText"
       />
     )
   }
 
   return (
     <div
+      // update below to data-component="SkeletonText" in next major
       data-component="multilineContainer"
       className={classes.SkeletonTextWrapper}
       style={{
diff --git a/packages/react/src/Spinner/Spinner.test.tsx b/packages/react/src/Spinner/Spinner.test.tsx
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
diff --git a/packages/react/src/__tests__/SideNav.test.tsx b/packages/react/src/__tests__/SideNav.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(`
`80`	`80`	`onChange={handleOnChange}`
`81`	`81`	`className={clsx(className, sharedClasses.Input, classes.Radio)}`
`82`	`82`	`{...rest}`
	`83`	`+ data-component="Radio"`
`83`	`84`	`/>`
`84`	`85`	`)`
`85`	`86`	`},`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ const RadioGroup: FC<React.PropsWithChildren<RadioGroupProps>> = ({children, dis`
`44`	`44`	`},`
`45`	`45`	`}}`
`46`	`46`	`>`
`47`		`- <CheckboxOrRadioGroup disabled={disabled} {...rest}>`
	`47`	`+ <CheckboxOrRadioGroup disabled={disabled} data-component="RadioGroup" {...rest}>`
`48`	`48`	`{children}`
`49`	`49`	`</CheckboxOrRadioGroup>`
`50`	`50`	`</RadioGroupContext.Provider>`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric`
`8`	`8`	`function RelativeTime({date, datetime, children, noTitle, ...props}: RelativeTimeProps) {`
`9`	`9`	`if (datetime) date = new Date(datetime)`
`10`	`10`	`return (`
`11`		`- <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined}>`
	`11`	`+ <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined} data-component="RelativeTime">`
`12`	`12`	`{children \|\| date?.toLocaleDateString('en', localeOptions) \|\| ''}`
`13`	`13`	`</RelativeTimeComponent>`
`14`	`14`	`)`