From fcafa7a97139ad21b9091bde5f4bd7104176f3dd Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 May 2026 11:07:26 -0700
Subject: [PATCH 1/8] update Details.tsx and add test

---
 packages/react/src/Details/Details.tsx              |  4 ++--
 .../react/src/Details/__tests__/Details.test.tsx    | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index 2d512c41dfe..a28899accbe 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -27,7 +27,7 @@ const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
     }, [])
 
     return (
-      <details className={clsx(className, classes.Details)} {...rest} ref={ref}>
+      <details className={clsx(className, classes.Details)} {...rest} ref={ref} data-component="Details">
         {children}
       </details>
     )
@@ -47,7 +47,7 @@ export type SummaryProps<As extends React.ElementType> = {
 function Summary<As extends React.ElementType>({as, children, ...props}: SummaryProps<As>) {
   const Component = as ?? 'summary'
   return (
-    <Component as={Component === 'summary' ? null : 'summary'} {...props}>
+    <Component as={Component === 'summary' ? null : 'summary'} {...props} data-component="Details.Summary">
       {children}
     </Component>
   )
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index ea1c7bac6cc..61afbccec04 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -97,4 +97,17 @@ describe('Details', () => {
       expect(screen.getByText('test summary')).toHaveAttribute('data-testid', 'test')
     })
   })
+
+  describe('Details data-component attributes', () => {
+    it('renders data-component attributes', () => {
+      render(
+        <Details>
+          <Details.Summary>test summary</Details.Summary>
+        </Details>,
+      )
+
+      expect(screen.getByRole('group')).toHaveAttribute('data-component', 'Details')
+      expect(screen.getByText('test summary')).toHaveAttribute('data-component', 'Details.Summary')
+    })
+  })
 })

From 02fab387e95b83dc0904939ee36e95a5685b5b80 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 May 2026 11:22:40 -0700
Subject: [PATCH 2/8] update Flash.tsx and add test

---
 packages/react/src/Flash/Flash.tsx                | 1 +
 packages/react/src/Flash/__tests__/Flash.test.tsx | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/packages/react/src/Flash/Flash.tsx b/packages/react/src/Flash/Flash.tsx
index 6f95ca311c1..b1b67db5f79 100644
--- a/packages/react/src/Flash/Flash.tsx
+++ b/packages/react/src/Flash/Flash.tsx
@@ -20,6 +20,7 @@ const Flash = React.forwardRef(function Flash(
       className={clsx(classes.Flash, className)}
       data-full={full ? '' : undefined}
       data-variant={variant}
+      data-component="Flash"
     />
   )
 }) as PolymorphicForwardRefComponent<'div', FlashProps>
diff --git a/packages/react/src/Flash/__tests__/Flash.test.tsx b/packages/react/src/Flash/__tests__/Flash.test.tsx
index 70dbbdea1f2..85c01a297d3 100644
--- a/packages/react/src/Flash/__tests__/Flash.test.tsx
+++ b/packages/react/src/Flash/__tests__/Flash.test.tsx
@@ -37,4 +37,9 @@ describe('Flash', () => {
     const {container} = render(<Flash data-testid="test" />)
     expect(container.firstChild).toHaveAttribute('data-testid', 'test')
   })
+
+  it('renders data-component attribute', () => {
+    render(<Flash data-testid="flash" />)
+    expect(screen.getByTestId('flash')).toHaveAttribute('data-component', 'Flash')
+  })
 })

From d8a82a667b75dc7c633cda85ca87de3beec24be4 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 May 2026 12:24:56 -0700
Subject: [PATCH 3/8] update FormControl files, update InputValidation to
 forward from FormControlValidation, and add tests

---
 .../react/src/FormControl/FormControl.tsx     |  2 ++
 .../src/FormControl/FormControlCaption.tsx    |  1 +
 .../src/FormControl/FormControlLabel.tsx      |  6 +++-
 .../FormControl/FormControlLeadingVisual.tsx  |  1 +
 .../FormControl/_FormControlValidation.tsx    |  1 +
 .../__tests__/FormControl.test.tsx            | 36 +++++++++++++++++++
 .../internal/components/InputValidation.tsx   |  9 ++++-
 7 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
index c8300bcfac1..cfbf3c44962 100644
--- a/packages/react/src/FormControl/FormControl.tsx
+++ b/packages/react/src/FormControl/FormControl.tsx
@@ -192,6 +192,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             data-has-leading-visual={slots.leadingVisual ? '' : undefined}
             className={clsx(className, classes.ControlHorizontalLayout)}
             style={style}
+            data-component="FormControl"
           >
             {InputChildren}
           </div>
@@ -201,6 +202,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             data-has-label={!isLabelHidden ? '' : undefined}
             className={clsx(className, classes.ControlVerticalLayout)}
             style={style}
+            data-component="FormControl"
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&
diff --git a/packages/react/src/FormControl/FormControlCaption.tsx b/packages/react/src/FormControl/FormControlCaption.tsx
index a4f402a7213..c8c30eba9ef 100644
--- a/packages/react/src/FormControl/FormControlCaption.tsx
+++ b/packages/react/src/FormControl/FormControlCaption.tsx
@@ -19,6 +19,7 @@ function FormControlCaption({id, children, className, style}: FormControlCaption
       className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
       style={style}
+      data-component="FormControl.Caption"
     >
       {children}
     </Text>
diff --git a/packages/react/src/FormControl/FormControlLabel.tsx b/packages/react/src/FormControl/FormControlLabel.tsx
index b1d7f86a9a9..e0a6e829cb8 100644
--- a/packages/react/src/FormControl/FormControlLabel.tsx
+++ b/packages/react/src/FormControl/FormControlLabel.tsx
@@ -50,7 +50,11 @@ const FormControlLabel: FCWithSlotMarker<
           ...props,
         }
 
-  return <InputLabel {...labelProps}>{children}</InputLabel>
+  return (
+    <InputLabel {...labelProps} data-component="FormControl.Label">
+      {children}
+    </InputLabel>
+  )
 }
 
 FormControlLabel.__SLOT__ = Symbol('FormControl.Label')
diff --git a/packages/react/src/FormControl/FormControlLeadingVisual.tsx b/packages/react/src/FormControl/FormControlLeadingVisual.tsx
index 5063c690df7..c038c1705be 100644
--- a/packages/react/src/FormControl/FormControlLeadingVisual.tsx
+++ b/packages/react/src/FormControl/FormControlLeadingVisual.tsx
@@ -14,6 +14,7 @@ const FormControlLeadingVisual: FCWithSlotMarker<React.PropsWithChildren<{style?
       data-control-disabled={disabled ? '' : undefined}
       style={style}
       data-has-caption={captionId ? '' : undefined}
+      data-component="FormControl.LeadingVisual"
     >
       {children}
     </div>
diff --git a/packages/react/src/FormControl/_FormControlValidation.tsx b/packages/react/src/FormControl/_FormControlValidation.tsx
index 6cde64ba242..f83322aad7c 100644
--- a/packages/react/src/FormControl/_FormControlValidation.tsx
+++ b/packages/react/src/FormControl/_FormControlValidation.tsx
@@ -25,6 +25,7 @@ const FormControlValidation: FCWithSlotMarker<React.PropsWithChildren<FormContro
       validationStatus={variant}
       id={id || validationMessageId || ''}
       style={style}
+      data-component="FormControl.Validation"
     >
       {children}
     </InputValidation>
diff --git a/packages/react/src/FormControl/__tests__/FormControl.test.tsx b/packages/react/src/FormControl/__tests__/FormControl.test.tsx
index ae060144c5e..7a115624b69 100644
--- a/packages/react/src/FormControl/__tests__/FormControl.test.tsx
+++ b/packages/react/src/FormControl/__tests__/FormControl.test.tsx
@@ -63,6 +63,42 @@ describe('FormControl', () => {
   implementsClassName(props => <FormControl {...props} layout="horizontal" />, classes.ControlHorizontalLayout)
   implementsClassName(FormControl.Caption, captionClasses.Caption)
   implementsClassName(FormControl.Label, inputClasses.Label)
+
+  it('renders data-component attributes (vertical, non-choice input)', () => {
+    const {container, getByText} = render(
+      <FormControl id="test-id">
+        <FormControl.Label>{LABEL_TEXT}</FormControl.Label>
+        <TextInput />
+        <FormControl.Caption>{CAPTION_TEXT}</FormControl.Caption>
+        <FormControl.Validation variant="error">{ERROR_TEXT}</FormControl.Validation>
+      </FormControl>,
+    )
+
+    expect(container.firstElementChild).toHaveAttribute('data-component', 'FormControl')
+    expect(getByText(LABEL_TEXT)).toHaveAttribute('data-component', 'FormControl.Label')
+    expect(getByText(CAPTION_TEXT)).toHaveAttribute('data-component', 'FormControl.Caption')
+
+    const validation = container.querySelector('[data-component="FormControl.Validation"]')
+    expect(validation).toHaveTextContent(ERROR_TEXT)
+  })
+
+  it('renders data-component attributes (choice input)', () => {
+    const {container, getByText} = render(
+      <FormControl id="test-id-choice">
+        <FormControl.Label>{LABEL_TEXT}</FormControl.Label>
+        <Checkbox />
+        <FormControl.LeadingVisual>
+          <MarkGithubIcon aria-label="Icon label" />
+        </FormControl.LeadingVisual>
+      </FormControl>,
+    )
+
+    expect(container.firstElementChild).toHaveAttribute('data-component', 'FormControl')
+    expect(getByText(LABEL_TEXT)).toHaveAttribute('data-component', 'FormControl.Label')
+
+    const leadingVisual = container.querySelector('[data-component="FormControl.LeadingVisual"]')
+  })
+
   describe('vertically stacked layout (default)', () => {
     describe('rendering', () => {
       it('renders with a hidden label', () => {
diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx
index e013cab6948..9aa592099b9 100644
--- a/packages/react/src/internal/components/InputValidation.tsx
+++ b/packages/react/src/internal/components/InputValidation.tsx
@@ -11,6 +11,7 @@ type Props = {
   id: string
   validationStatus?: FormValidationStatus
   style?: React.CSSProperties
+  'data-component'?: string
 }
 
 const validationIconMap: Record<
@@ -27,6 +28,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({
   id,
   validationStatus,
   style,
+  'data-component': dataComponent,
 }) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
@@ -37,7 +39,12 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus} style={style}>
+    <Text
+      className={clsx(className, classes.InputValidation)}
+      data-validation-status={validationStatus}
+      style={style}
+      data-component={dataComponent}
+    >
       {IconComponent ? (
         <span
           aria-hidden="true"

From 25557f095760380eb6da27e19d2f0159a13bd88c Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 May 2026 12:29:28 -0700
Subject: [PATCH 4/8] update Header.tsx and add tests

---
 packages/react/src/Header/Header.test.tsx | 10 ++++++++++
 packages/react/src/Header/Header.tsx      | 17 ++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx
index 9266edd110f..ce6ce3e4731 100644
--- a/packages/react/src/Header/Header.test.tsx
+++ b/packages/react/src/Header/Header.test.tsx
@@ -6,6 +6,16 @@ import classes from './Header.module.css'
 
 describe('Header', () => {
   implementsClassName(Header, classes.Header)
+  it('renders data-component attributes', () => {
+    const {container: headerContainer} = render(<Header />)
+    expect(headerContainer.firstChild).toHaveAttribute('data-component', 'Header')
+
+    const {container: itemContainer} = render(<Header.Item />)
+    expect(itemContainer.firstChild).toHaveAttribute('data-component', 'Header.Item')
+
+    const {container: linkContainer} = render(<Header.Link />)
+    expect(linkContainer.firstChild).toHaveAttribute('data-component', 'Header.Link')
+  })
   describe('Header.Item', () => {
     implementsClassName(Header.Item, classes.HeaderItem)
     it('accepts and applies className', () => {
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 531938db66d..69cd4fc175d 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -13,7 +13,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
   forwardRef,
 ) {
   return (
-    <BaseComponent ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
+    <BaseComponent ref={forwardRef} className={clsx(className, classes.Header)} {...rest} data-component="Header">
       {children}
     </BaseComponent>
   )
@@ -26,7 +26,13 @@ const HeaderItem = React.forwardRef<HTMLDivElement, HeaderItemProps>(function He
   forwardRef,
 ) {
   return (
-    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
+    <div
+      ref={forwardRef}
+      className={clsx(className, classes.HeaderItem)}
+      data-full={full}
+      {...rest}
+      data-component="Header.Item"
+    >
       {children}
     </div>
   )
@@ -39,7 +45,12 @@ const HeaderLink = React.forwardRef<HTMLAnchorElement, HeaderLinkProps>(function
   forwardRef,
 ) {
   return (
-    <BaseComponent ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
+    <BaseComponent
+      ref={forwardRef}
+      className={clsx(className, classes.HeaderLink)}
+      {...rest}
+      data-component="Header.Link"
+    >
       {children}
     </BaseComponent>
   )

From 2f0757897faa8ab5196703c663e1ef90e89a9d16 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 May 2026 12:32:39 -0700
Subject: [PATCH 5/8] update Heading.tsx and add test

---
 packages/react/src/Heading/Heading.tsx                | 10 +++++++++-
 packages/react/src/Heading/__tests__/Heading.test.tsx |  5 +++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 474a49ede24..bc731c0729f 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -32,7 +32,15 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
     }, [innerRef])
   }
 
-  return <Component className={clsx(className, classes.Heading)} data-variant={variant} {...props} ref={innerRef} />
+  return (
+    <Component
+      className={clsx(className, classes.Heading)}
+      data-variant={variant}
+      {...props}
+      data-component="Heading"
+      ref={innerRef}
+    />
+  )
 }) as PolymorphicForwardRefComponent<HeadingLevels, StyledHeadingProps>
 
 Heading.displayName = 'Heading'
diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx
index f62fb42d03f..a3b7549fac0 100644
--- a/packages/react/src/Heading/__tests__/Heading.test.tsx
+++ b/packages/react/src/Heading/__tests__/Heading.test.tsx
@@ -7,6 +7,11 @@ import {implementsClassName} from '../../utils/testing'
 describe('Heading', () => {
   implementsClassName(Heading, classes.Heading)
 
+  it('renders data-component attribute', () => {
+    const {container} = render(<Heading />)
+    expect(container.firstChild).toHaveAttribute('data-component', 'Heading')
+  })
+
   it('renders <h2> by default', () => {
     const {container} = render(<Heading />)
     const heading = container.firstChild as HTMLElement

From 0c0214bb318cd82cc453fc8330554c8c1fdcb9da Mon Sep 17 00:00:00 2001
From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com>
Date: Thu, 7 May 2026 12:36:25 -0700
Subject: [PATCH 6/8] Update @primer/react version and add data-component
 attributes

---
 .changeset/tiny-hats-applaud.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tiny-hats-applaud.md

diff --git a/.changeset/tiny-hats-applaud.md b/.changeset/tiny-hats-applaud.md
new file mode 100644
index 00000000000..8c563308bfc
--- /dev/null
+++ b/.changeset/tiny-hats-applaud.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `data-component` attributes for Details, Flash, FormControl (+ update InputValidation to forward from FormControl.Validation), Header, and Heading.

From 1375748304e42fec61221121032baa906a351438 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Fri, 8 May 2026 14:35:19 -0700
Subject: [PATCH 7/8] re-add accidentally deleted test line

---
 packages/react/src/FormControl/__tests__/FormControl.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/FormControl/__tests__/FormControl.test.tsx b/packages/react/src/FormControl/__tests__/FormControl.test.tsx
index 7a115624b69..bd3141abdd6 100644
--- a/packages/react/src/FormControl/__tests__/FormControl.test.tsx
+++ b/packages/react/src/FormControl/__tests__/FormControl.test.tsx
@@ -97,6 +97,7 @@ describe('FormControl', () => {
     expect(getByText(LABEL_TEXT)).toHaveAttribute('data-component', 'FormControl.Label')
 
     const leadingVisual = container.querySelector('[data-component="FormControl.LeadingVisual"]')
+    expect(leadingVisual).not.toBeNull()
   })
 
   describe('vertically stacked layout (default)', () => {

From f20de1d1efbec5ffd4a3228bbe9fa27b7a0eca51 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Fri, 8 May 2026 14:48:41 -0700
Subject: [PATCH 8/8] reorder Heading attributes to avoid overwriting
 downstream

---
 packages/react/src/Heading/Heading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index bc731c0729f..ba2e517fd21 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -36,8 +36,8 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
     <Component
       className={clsx(className, classes.Heading)}
       data-variant={variant}
-      {...props}
       data-component="Heading"
+      {...props}
       ref={innerRef}
     />
   )