data-component adr part 2

.changeset/healthy-pens-boil.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `data-component` attributes for Blankslate, BranchName, Breadcrumbs, ButtonGroup, Checkbox, CheckboxGroup, CircleBadge, ConfirmationDialog, CounterLabel, and Dialog to provide stable selectors.

packages/react/src/Blankslate/Blankslate.test.tsx

@@ -23,6 +23,38 @@ describe('Blankslate', () => {
     expect(container.firstChild!.firstChild).toHaveAttribute('data-spacious', '')
   })
 
+  it('renders data-component attributes', () => {
+    const {container} = render(
+      <Blankslate>
+        <Blankslate.Visual>
+          <svg aria-hidden="true" data-testid="test-icon" />
+        </Blankslate.Visual>
+        <Blankslate.Heading>Test Heading</Blankslate.Heading>
+        <Blankslate.Description>Test description</Blankslate.Description>
+        <Blankslate.PrimaryAction>Primary action</Blankslate.PrimaryAction>
+        <Blankslate.SecondaryAction href="https://example.com">Secondary action</Blankslate.SecondaryAction>
+      </Blankslate>,
+    )
+
+    expect(container.querySelector('[data-component="Blankslate"]')).toBeInTheDocument()
+
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Visual"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Heading"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Description"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.PrimaryAction"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.SecondaryAction"]'),
+    ).toBeInTheDocument()
+  })
+
   describe('Blankslate.Visual', () => {
     it('should render a visual element', () => {
       render(

packages/react/src/Blankslate/Blankslate.tsx

@@ -45,6 +45,7 @@ function Blankslate({border, children, narrow, spacious, className, size = 'medi
       <div {...rest} className={classes.Container}>
         <div
           className={clsx(classes.Blankslate, className)}
+          data-component="Blankslate"
           data-border={border ? '' : undefined}
           data-narrow={narrow ? '' : undefined}
           data-spacious={spacious ? '' : undefined}
@@ -61,7 +62,7 @@ type BlankslateVisualProps = React.HTMLAttributes<HTMLElement>
 
 function Visual({children, className, ...rest}: BlankslateVisualProps) {
   return (
-    <span {...rest} className={clsx('Blankslate-Visual', classes.Visual, className)}>
+    <span {...rest} className={clsx('Blankslate-Visual', classes.Visual, className)} data-component="Blankslate.Visual">
       {children}
     </span>
   )
@@ -73,7 +74,11 @@ type BlankslateHeadingProps = React.HTMLAttributes<HTMLElement> & {
 
 function Heading({as: Component = 'h2', children, className, ...rest}: BlankslateHeadingProps) {
   return (
-    <Component {...rest} className={clsx('Blankslate-Heading', classes.Heading, className)}>
+    <Component
+      {...rest}
+      className={clsx('Blankslate-Heading', classes.Heading, className)}
+      data-component="Blankslate.Heading"
+    >
       {children}
     </Component>
   )
@@ -83,7 +88,11 @@ type BlankslateDescriptionProps = React.HTMLAttributes<HTMLElement>
 
 function Description({children, className, ...rest}: BlankslateDescriptionProps) {
   return (
-    <p {...rest} className={clsx('Blankslate-Description', classes.Description, className)}>
+    <p
+      {...rest}
+      className={clsx('Blankslate-Description', classes.Description, className)}
+      data-component="Blankslate.Description"
+    >
       {children}
     </p>
   )
@@ -101,7 +110,7 @@ type BlankslatePrimaryActionProps =
 function PrimaryAction({children, href, ...props}: BlankslatePrimaryActionProps) {
   const {size} = useBlankslate()
   return (
-    <div className={clsx('Blankslate-Action', classes.Action)}>
+    <div className={clsx('Blankslate-Action', classes.Action)} data-component="Blankslate.PrimaryAction">
       <Button
         {...props}
         as={href ? 'a' : 'button'}
@@ -121,7 +130,7 @@ type BlankslateSecondaryActionProps = React.PropsWithChildren<{
 
 function SecondaryAction({children, href}: BlankslateSecondaryActionProps) {
   return (
-    <div className={clsx('Blankslate-Action', classes.Action)}>
+    <div className={clsx('Blankslate-Action', classes.Action)} data-component="Blankslate.SecondaryAction">
       <Link href={href}>{children}</Link>
     </div>
   )

packages/react/src/BranchName/BranchName.tsx

@@ -16,7 +16,7 @@ export type BranchNameProps<As extends React.ElementType> = PolymorphicProps<
 function BranchName<As extends React.ElementType>(props: BranchNameProps<As>, ref: ForwardedRef<any>) {
   const {as: Component = 'a', className, children, ...rest} = props
   return (
-    <Component {...rest} ref={ref} className={clsx(className, classes.BranchName)}>
+    <Component {...rest} ref={ref} className={clsx(className, classes.BranchName)} data-component="BranchName">
       {children}
     </Component>
   )

packages/react/src/BranchName/__tests__/BranchName.test.tsx

@@ -6,8 +6,14 @@ import {implementsClassName} from '../../utils/testing'
 
 describe('BranchName', () => {
   implementsClassName(BranchName, classes.BranchName)
+
   it('renders an <a> by default', () => {
     const {container} = HTMLRender(<BranchName />)
     expect(container.firstChild?.nodeName).toEqual('A')
   })
+
+  it('renders data-component attribute', () => {
+    const {container} = HTMLRender(<BranchName />)
+    expect(container.querySelector('[data-component="BranchName"]')).toBeInTheDocument()
+  })
 })

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -285,7 +285,11 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
 
   const finalChildren = React.useMemo(() => {
     if (overflow === 'wrap' || menuItems.length === 0) {
-      return React.Children.map(children, child => <li className={classes.ItemWrapper}>{child}</li>)
+      return React.Children.map(children, child => (
+        <li className={classes.ItemWrapper} data-component="Breadcrumbs.ItemWrapper">
+          {child}
+        </li>
+      ))
     }
 
     let effectiveMenuItems = [...menuItems]
@@ -335,6 +339,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
       ref={containerRef}
       data-overflow={overflow}
       data-variant={variant}
+      data-component="Breadcrumbs"
     >
       <BreadcrumbsList>{finalChildren}</BreadcrumbsList>
     </nav>
@@ -372,6 +377,7 @@ const BreadcrumbsItem = fixedForwardRef(
         className={clsx(className, classes.Item, selected && 'selected')}
         aria-current={selected ? 'page' : undefined}
         ref={ref}
+        data-component="Breadcrumbs.Item"
         {...rest}
       />
     )

packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -29,11 +29,31 @@ globalThis.ResizeObserver = vi.fn().mockImplementation(function () {
 
 describe('Breadcrumbs', () => {
   implementsClassName(Breadcrumbs, classes.BreadcrumbsBase)
+
   it('renders a <nav>', () => {
     const {container} = HTMLRender(<Breadcrumbs />)
     expect(container.firstChild?.nodeName).toEqual('NAV')
   })
 
+  it('renders data-component attributes', () => {
+    const {container} = renderWithTheme(
+      <Breadcrumbs overflow="wrap">
+        <Breadcrumbs.Item href="/home">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/docs">Docs</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+
+    expect(container.querySelector('[data-component="Breadcrumbs"]')).toBeInTheDocument()
+
+    expect(
+      container.querySelector('[data-component="Breadcrumbs"] [data-component="Breadcrumbs.Item"]'),
+    ).toBeInTheDocument()
+
+    expect(
+      container.querySelector('[data-component="Breadcrumbs"] [data-component="Breadcrumbs.ItemWrapper"]'),
+    ).toBeInTheDocument()
+  })
+
   it('renders breadcrumb items correctly', () => {
     HTMLRender(
       <Breadcrumbs>

packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx

@@ -6,11 +6,17 @@ import {implementsClassName} from '../../utils/testing'
 
 describe('Breadcrumbs.Item', () => {
   implementsClassName(Breadcrumbs.Item, classes.Item)
+
   it('renders an <a> by default', () => {
     const {container} = HTMLRender(<Breadcrumbs.Item />)
     expect(container.firstChild?.nodeName).toEqual('A')
   })
 
+  it('renders data-component attribute', () => {
+    const {container} = HTMLRender(<Breadcrumbs.Item />)
+    expect(container.querySelector('[data-component="Breadcrumbs.Item"]')).toBeInTheDocument()
+  })
+
   it('respects the "selected" prop', () => {
     const {container} = HTMLRender(<Breadcrumbs.Item selected />)
     expect(container.firstChild).toMatchSnapshot()

packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap

@@ -4,5 +4,6 @@ exports[`Breadcrumbs.Item > respects the "selected" prop 1`] = `
 <a
   aria-current="page"
   class="prc-Breadcrumbs-Item-V05wG selected"
+  data-component="Breadcrumbs.Item"
 />
 `;

packages/react/src/ButtonGroup/ButtonGroup.test.tsx

@@ -12,6 +12,11 @@ describe('ButtonGroup', () => {
     expect(container.getByTestId('button-group').tagName).toBe('DIV')
   })
 
+  it('renders data-component attribute', () => {
+    const {container} = render(<ButtonGroup />)
+    expect(container.querySelector('[data-component="ButtonGroup"]')).toBeInTheDocument()
+  })
+
   it('should respect role prop', () => {
     render(<ButtonGroup role="toolbar" />)
     expect(screen.getByRole('toolbar')).toBeInTheDocument()

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -27,8 +27,14 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   })
 
   return (
-    //@ts-expect-error it needs a non nullable ref
-    <BaseComponent ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
+    <BaseComponent
+      //@ts-expect-error it needs a non nullable ref
+      ref={buttonRef}
+      className={clsx(className, classes.ButtonGroup)}
+      role={role}
+      {...rest}
+      data-component="ButtonGroup"
+    >
       {buttons}
     </BaseComponent>
   )

packages/react/src/Checkbox/Checkbox.test.tsx

@@ -20,6 +20,11 @@ describe('Checkbox', () => {
     expect(checkbox).toBeDefined()
   })
 
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(<Checkbox />)
+    expect(getByRole('checkbox')).toHaveAttribute('data-component', 'Checkbox')
+  })
+
   it('renders an unchecked checkbox by default', () => {
     const {getByRole} = render(<Checkbox />)
 

packages/react/src/Checkbox/Checkbox.tsx

@@ -34,14 +34,27 @@ export type CheckboxProps = {
    * Used during form submission and to identify which checkbox inputs are selected
    */
   value?: string
+  'data-component'?: string
 } & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'>
 
 /**
  * An accessible, native checkbox component
  */
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (
-    {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest},
+    {
+      checked,
+      className,
+      defaultChecked,
+      indeterminate,
+      disabled,
+      onChange,
+      required,
+      validationStatus,
+      value,
+      ['data-component']: dataComponent,
+      ...rest
+    },
     ref,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): ReactElement<any> => {
@@ -89,8 +102,14 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false')
       }
     })
-    // @ts-expect-error inputProp needs a non nullable ref
-    return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
+    return (
+      // @ts-expect-error inputProp needs a non nullable ref
+      <input
+        {...inputProps}
+        data-component={dataComponent ?? 'Checkbox'}
+        className={clsx(className, sharedClasses.Input, classes.Checkbox)}
+      />
+    )
   },
 )
 

packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx

@@ -19,6 +19,21 @@ describe('CheckboxGroup', () => {
     vi.restoreAllMocks()
   })
 
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(
+      <CheckboxGroup>
+        <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
+        <FormControl>
+          <Checkbox value="one" />
+          <FormControl.Label>Choice one</FormControl.Label>
+        </FormControl>
+      </CheckboxGroup>,
+    )
+
+    // CheckboxGroup's DOM root is the underlying fieldset rendered by CheckboxOrRadioGroup
+    expect(getByRole('group')).toHaveAttribute('data-component', 'CheckboxGroup')
+  })
+
   it('renders a disabled group of inputs', () => {
     const {getAllByRole, getByRole} = render(
       <CheckboxGroup disabled>

packages/react/src/CheckboxGroup/CheckboxGroup.tsx

@@ -66,7 +66,7 @@ const CheckboxGroup: FCWithSlotMarker<React.PropsWithChildren<CheckboxGroupProps
         },
       }}
     >
-      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
+      <CheckboxOrRadioGroup data-component="CheckboxGroup" disabled={disabled} {...rest}>
         {children}
       </CheckboxOrRadioGroup>
     </CheckboxGroupContext.Provider>

packages/react/src/CircleBadge/CircleBadge.test.tsx

@@ -9,6 +9,12 @@ const imgInput = <img alt="Example" src="primer.jpg" />
 
 describe('CircleBadge', () => {
   implementsClassName(CircleBadge, classes.CircleBadge)
+
+  it('renders data-component attribute', () => {
+    const {container} = HTMLRender(<CircleBadge />)
+    expect(container.querySelector('[data-component="CircleBadge"]')).toBeInTheDocument()
+  })
+
   it('respects the inline prop', () => {
     const {container} = HTMLRender(<CircleBadge inline />)
     expect(container.firstChild).toMatchSnapshot()
@@ -47,5 +53,10 @@ describe('CircleBadge', () => {
       const {container} = HTMLRender(<CircleBadge.Icon icon={CheckIcon} />)
       expect(container.firstChild).toBeInTheDocument()
     })
+
+    it('renders data-component attribute', () => {
+      const {container} = HTMLRender(<CircleBadge.Icon icon={CheckIcon} />)
+      expect(container.querySelector('[data-component="CircleBadge.Icon"]')).toBeInTheDocument()
+    })
   })
 })

packages/react/src/CircleBadge/CircleBadge.tsx

@@ -31,13 +31,16 @@ const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps<React.ElementTy
 const CircleBadge = <As extends React.ElementType>({as: Component = 'div', ...props}: CircleBadgeProps<As>) => (
   <Component
     {...props}
+    data-component="CircleBadge"
     className={clsx(styles.CircleBadge, props.className)}
     data-inline={props.inline ? '' : undefined}
     style={sizeStyles(props)}
   />
 )
 
-const CircleBadgeIcon = (props: OcticonProps) => <Octicon className={styles.CircleBadgeIcon} {...props} />
+const CircleBadgeIcon = (props: OcticonProps) => (
+  <Octicon {...props} data-component="CircleBadge.Icon" className={clsx(styles.CircleBadgeIcon, props.className)} />
+)
 
 CircleBadgeIcon.displayName = 'CircleBadge.Icon'
 

packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
   class="prc-CircleBadge-CircleBadge-LZ7wp"
+  data-component="CircleBadge"
   data-inline=""
   style="width: 96px; height: 96px;"
 />
@@ -11,6 +12,7 @@ exports[`CircleBadge > respects the inline prop 1`] = `
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
   class="prc-CircleBadge-CircleBadge-LZ7wp"
+  data-component="CircleBadge"
   style="width: 128px; height: 128px;"
   variant="large"
 />
@@ -19,6 +21,7 @@ exports[`CircleBadge > respects the variant prop 1`] = `
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
   class="prc-CircleBadge-CircleBadge-LZ7wp"
+  data-component="CircleBadge"
   size="20"
   style="width: 20px; height: 20px;"
   variant="large"