add data-component attributes for Avatar, AvatarStack, Banner, & BaseStyles

.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/Banner/Banner.test.tsx

@@ -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.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/BaseStyles.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/__tests__/BaseStyles.test.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__/__snapshots__/BaseStyles.test.tsx.snap

@@ -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