add data-component attributes for Avatar, AvatarStack, Banner, & BaseStyles (#7734)

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: llastflowers

.changeset/shaggy-houses-laugh.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+add data-component attributes for Avatar, AvatarStack, Banner, & BaseStyles

packages/react/src/Avatar/Avatar.test.tsx

@@ -7,6 +7,14 @@ import classes from './Avatar.module.css'
 describe('Avatar', () => {
   implementsClassName(Avatar, classes.Avatar)
 
+  describe('Avatar data-component attribute', () => {
+    it('renders Avatar with data-component attribute', () => {
+      render(<Avatar src="primer.png" alt="" data-testid="avatar" />)
+      const avatar = screen.getByTestId('avatar')
+      expect(avatar).toHaveAttribute('data-component', 'Avatar')
+    })
+  })
+
   it('renders small by default', () => {
     const size = 20
     render(<Avatar src="primer.png" data-testid="avatar" />)

packages/react/src/AvatarStack/AvatarStack.test.tsx

@@ -25,9 +25,24 @@ const rightAvatarComp = (
 describe('AvatarStack', () => {
   implementsClassName(AvatarStack, classes.AvatarStack)
 
+  describe('AvatarStack data-component attributes', () => {
+    it('renders AvatarStack with data-component attribute', () => {
+      const {container} = render(avatarComp)
+      const root = container.querySelector('[data-component="AvatarStack"]')
+      expect(root).toBeInTheDocument()
+    })
+
+    it('renders AvatarStack.Body with data-component attribute', () => {
+      const {container} = render(avatarComp)
+      const body = container.querySelector('[data-component="AvatarStack.Body"]')
+      expect(body).toBeInTheDocument()
+    })
+  })
+
   it('respects alignRight props', () => {
     const {container} = render(rightAvatarComp)
-    expect(container.firstChild).toMatchSnapshot()
+    const root = container.querySelector('[data-component="AvatarStack"]')
+    expect(root).toHaveAttribute('data-align-right', '')
   })
 
   it('should have a tabindex of 0 if there are no interactive children', () => {

packages/react/src/AvatarStack/AvatarStack.tsx

@@ -42,6 +42,7 @@ const AvatarStackBody = ({
 } & React.ComponentPropsWithoutRef<'div'>) => {
   return (
     <div
+      data-component="AvatarStack.Body"
       data-disable-expand={disableExpand ? '' : undefined}
       className={clsx(
         {
@@ -158,6 +159,7 @@ const AvatarStack = ({
 
   return (
     <span
+      data-component="AvatarStack"
       data-variant={variant}
       data-shape={shape}
       data-avatar-count={count > 3 ? '3+' : count}

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

@@ -14,6 +14,36 @@ describe('Banner', () => {
     expect(screen.getByRole('heading', {name: 'test'})).toBeInTheDocument()
   })
 
+  it('renders data-component attributes', () => {
+    const {container} = render(
+      <Banner
+        title="test"
+        description="test-description"
+        primaryAction={<Banner.PrimaryAction>test primary action</Banner.PrimaryAction>}
+        secondaryAction={<Banner.SecondaryAction>test secondary action</Banner.SecondaryAction>}
+        onDismiss={() => {}}
+      />,
+    )
+
+    expect(container.querySelector('[data-component="Banner"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Icon"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Content"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Actions"]')).toBeInTheDocument()
+
+    expect(container.querySelector('[data-component="Banner.PrimaryAction"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.SecondaryAction"]')).toBeInTheDocument()
+
+    expect(container.querySelector('[data-component="Banner.Title"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Description"]')).toBeInTheDocument()
+  })
+
+  it('renders Banner dismiss IconButton with data-component attribute', () => {
+    const {container} = render(<Banner title="test" onDismiss={() => {}} />)
+
+    const dismissButton = container.querySelector('[data-component="Banner"] [data-component="IconButton"]')
+    expect(dismissButton).toBeInTheDocument()
+  })
+
   it('should label the landmark element with the title by default', () => {
     render(<Banner title="My Banner Title" />)
     const region = screen.getByRole('region', {name: 'My Banner Title'})

packages/react/src/Banner/Banner.test.tsx

@@ -157,6 +157,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
   return (
     <BannerContext.Provider value={{titleId}}>
       <section
+        data-component="Banner"
         {...rest}
         aria-labelledby={labelledBy ?? (label ? undefined : titleId)}
         aria-label={labelledBy ? undefined : label}
@@ -171,9 +172,11 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
         data-layout={rest.layout || 'default'}
         data-flush={flush ? '' : undefined}
       >
-        <div className={classes.BannerIcon}>{visual && supportsCustomIcon ? visual : iconForVariant[variant]}</div>
+        <div data-component="Banner.Icon" className={classes.BannerIcon}>
+          {visual && supportsCustomIcon ? visual : iconForVariant[variant]}
+        </div>
         <div className={classes.BannerContainer}>
-          <div className={classes.BannerContent}>
+          <div data-component="Banner.Content" className={classes.BannerContent}>
             {title ? (
               hideTitle ? (
                 <VisuallyHidden>
@@ -215,7 +218,13 @@ export function BannerTitle<As extends HeadingElement>(props: BannerTitleProps<A
   const titleId = id ?? context?.titleId
 
   return (
-    <Heading {...rest} id={titleId} className={clsx(className, classes.BannerTitle)} data-banner-title="">
+    <Heading
+      {...rest}
+      id={titleId}
+      className={clsx(className, classes.BannerTitle)}
+      data-component="Banner.Title"
+      data-banner-title=""
+    >
       {children}
     </Heading>
   )
@@ -225,7 +234,7 @@ export type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'>
 
 export function BannerDescription({children, className, ...rest}: BannerDescriptionProps) {
   return (
-    <div {...rest} className={clsx('BannerDescription', className)}>
+    <div {...rest} className={clsx('BannerDescription', className)} data-component="Banner.Description">
       {children}
     </div>
   )
@@ -238,7 +247,7 @@ export type BannerActionsProps = {
 
 export function BannerActions({primaryAction, secondaryAction}: BannerActionsProps) {
   return (
-    <div className={classes.BannerActions}>
+    <div className={classes.BannerActions} data-component="Banner.Actions">
       <div className={classes.BannerActionsContainer} data-primary-action="trailing">
         {secondaryAction ?? null}
         {primaryAction ?? null}
@@ -255,7 +264,13 @@ export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerPrimaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="default" {...rest}>
+    <Button
+      data-component="Banner.PrimaryAction"
+      ref={forwardedRef}
+      className={clsx('BannerPrimaryAction', className)}
+      variant="default"
+      {...rest}
+    >
       {children}
     </Button>
   )
@@ -267,7 +282,13 @@ export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerSecondaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="invisible" {...rest}>
+    <Button
+      data-component="Banner.SecondaryAction"
+      ref={forwardedRef}
+      className={clsx('BannerPrimaryAction', className)}
+      variant="invisible"
+      {...rest}
+    >
       {children}
     </Button>
   )

packages/react/src/Banner/Banner.tsx

@@ -21,6 +21,7 @@ function BaseStyles({children, color, className, as: Component = 'div', style, .
 
   return (
     <Component
+      data-component="BaseStyles"
       className={newClassName}
       data-portal-root
       style={{

packages/react/src/BaseStyles.tsx

@@ -6,6 +6,12 @@ import {implementsClassName} from '../utils/testing'
 
 describe('BaseStyles', () => {
   implementsClassName(BaseStyles, classes.BaseStyles)
+
+  it('renders BaseStyles with data-component attribute', () => {
+    const {container} = render(<BaseStyles>Hello</BaseStyles>)
+    expect(container.firstElementChild).toHaveAttribute('data-component', 'BaseStyles')
+  })
+
   it('has default styles', () => {
     const {container} = render(<BaseStyles>Hello</BaseStyles>)
     expect(container).toMatchSnapshot()

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

@@ -4,6 +4,7 @@ exports[`BaseStyles > has default styles 1`] = `
 <div>
   <div
     class="prc-src-BaseStyles-9LBd2"
+    data-component="BaseStyles"
     data-portal-root="true"
   >
     Hello