data-component adr part 5 (#7867)

Author: llastflowers

.changeset/quick-ants-lead.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add data-component attributes and associated tests for ActionMenu, AnchoredOverlay, Autocomplete, and NavList

packages/react/src/ActionMenu/ActionMenu.test.tsx

@@ -180,6 +180,19 @@ function ExampleWithSubmenus(): JSX.Element {
 describe('ActionMenu', () => {
   implementsClassName(ActionMenu.Button)
 
+  it('renders data-component attributes for ActionMenu parts', async () => {
+    const component = HTMLRender(<Example />)
+    const user = userEvent.setup()
+
+    const trigger = component.getByRole('button', {name: 'Toggle Menu'})
+    expect(trigger).toHaveAttribute('data-component', 'ActionMenu.Button')
+
+    await user.click(trigger)
+
+    expect(component.baseElement.querySelector('[data-component="ActionMenu.Overlay"]')).not.toBeNull()
+    expect(component.baseElement.querySelector('[data-component="AnchoredOverlay"]')).toBeNull()
+  })
+
   it('should open Menu on MenuButton click', async () => {
     const component = HTMLRender(<Example />)
     const button = component.getByRole('button')
@@ -778,7 +791,7 @@ describe('ActionMenu', () => {
       const initialAnchor = component.getByRole('button', {name: 'Open menu'})
       await user.click(initialAnchor)
 
-      const overlay = component.baseElement.querySelector('[data-component="AnchoredOverlay"]') as HTMLElement
+      const overlay = component.baseElement.querySelector('[data-component="ActionMenu.Overlay"]') as HTMLElement
       expect(overlay).not.toBeNull()
 
       const initialAnchorName = initialAnchor.style.getPropertyValue('anchor-name')

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -256,7 +256,7 @@ export type ActionMenuButtonProps = ButtonProps
 const MenuButton = React.forwardRef(({...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
-      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
+      <Button data-component="ActionMenu.Button" type="button" trailingAction={TriangleDownIcon} {...props} />
     </Anchor>
   )
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
@@ -355,7 +355,10 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
       onClose={handleClose}
       align={align}
       side={side ?? (isSubmenu ? 'outside-right' : 'outside-bottom')}
-      overlayProps={overlayProps}
+      overlayProps={{
+        ...overlayProps,
+        'data-component': 'ActionMenu.Overlay',
+      }}
       focusZoneSettings={isNarrowFullscreen ? {disabled: true} : {focusOutBehavior: 'wrap'}}
       onPositionChange={onPositionChange}
       variant={variant}

packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx

@@ -201,6 +201,26 @@ describe.each([true, false])(
       })
     })
 
+    it('renders data-component attributes for AnchoredOverlay parts when shown', () => {
+      const {baseElement} = render(
+        <FeatureFlags flags={{primer_react_css_anchor_positioning: true}}>
+          <BaseStyles>
+            <AnchoredOverlay
+              open={true}
+              onOpen={() => {}}
+              onClose={() => {}}
+              renderAnchor={props => <Button {...props}>Anchor Button</Button>}
+              variant={{regular: 'anchored', narrow: 'fullscreen'}}
+            >
+              <div>content</div>
+            </AnchoredOverlay>
+          </BaseStyles>
+        </FeatureFlags>,
+      )
+      expect(baseElement.querySelector('[data-component="AnchoredOverlay"]')).toBeInTheDocument()
+      expect(baseElement.querySelector('[data-component="AnchoredOverlay.CloseButton"]')).toBeInTheDocument()
+    })
+
     it('should support a `ref` through `overlayProps` on the overlay element', () => {
       const ref = createRef<HTMLDivElement>()
 

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -443,6 +443,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
             <div className={classes.ResponsiveCloseButtonContainer}>
               <IconButton
                 {...(closeButtonProps as IconButtonProps)}
+                data-component="AnchoredOverlay.CloseButton"
                 type="button"
                 variant="invisible"
                 icon={XIcon}

packages/react/src/Autocomplete/Autocomplete.test.tsx

@@ -55,6 +55,24 @@ describe('Autocomplete', () => {
         <Autocomplete.Input {...props} />
       </Autocomplete>
     ))
+
+    it('renders data-component attributes for Autocomplete parts when menu is shown', async () => {
+      const user = userEvent.setup()
+      const {container} = render(
+        <LabelledAutocomplete
+          menuProps={{items: mockItems, selectedItemIds: [], ['aria-labelledby']: 'autocompleteLabel'}}
+        />,
+      )
+
+      const input = container.querySelector('#autocompleteInput') as HTMLInputElement
+      expect(input).toHaveAttribute('data-component', 'Autocomplete.Input')
+
+      await user.type(input, 'z')
+
+      expect(container.querySelector('[data-component="Autocomplete.Overlay"]')).toBeInTheDocument()
+      expect(container.querySelector('[data-component="Autocomplete.Menu"]')).toBeInTheDocument()
+    })
+
     it('calls onChange', async () => {
       const user = userEvent.setup()
       const onChangeMock = vi.fn()

packages/react/src/Autocomplete/AutocompleteInput.tsx

@@ -188,6 +188,7 @@ const AutocompleteInput = React.forwardRef(
         autoComplete="off"
         id={id}
         {...props}
+        data-component="Autocomplete.Input"
       />
     )
   },

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -359,6 +359,7 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
         <div ref={listContainerRef}>
           {allItemsToRender.length ? (
             <ActionList
+              data-component="Autocomplete.Menu"
               selectionVariant={selectionVariant} // TODO: make this configurable
               role="listbox"
               id={`${id}-listbox`}

packages/react/src/Autocomplete/AutocompleteOverlay.tsx

@@ -78,6 +78,7 @@ function AutocompleteOverlay({
       left={position?.left}
       className={clsx(classes.Overlay, className)}
       {...overlayProps}
+      data-component="Autocomplete.Overlay"
     >
       {children}
     </Overlay>

packages/react/src/NavList/NavList.test.tsx

@@ -23,6 +23,42 @@ const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
 describe('NavList', () => {
   implementsClassName(NavList)
 
+  it('renders data-component attributes for NavList, NavList.Item, and NavList.SubNav', () => {
+    const {container, getByRole} = render(
+      <NavList>
+        <NavList.Item href="#">Item 1</NavList.Item>
+        <NavList.Item>
+          Item 2
+          <NavList.SubNav>
+            <NavList.Item href="#">Sub Item 1</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>,
+    )
+
+    const nav = container.querySelector('nav')
+    expect(nav).toBeInTheDocument()
+    expect(nav).toHaveAttribute('data-component', 'NavList')
+
+    const item1Link = getByRole('link', {name: 'Item 1'})
+    expect(item1Link).toBeInTheDocument()
+    expect(item1Link).toHaveAttribute('data-component', 'NavList.Item')
+
+    const item2Button = getByRole('button', {name: 'Item 2'})
+    expect(item2Button).toBeInTheDocument()
+    expect(item2Button).toHaveAttribute('data-component', 'NavList.Item')
+
+    const subNav = container.querySelector('[data-component="NavList.SubNav"]')
+    expect(subNav).toBeInTheDocument()
+
+    // Expand so nested links are in the accessible tree
+    fireEvent.click(item2Button)
+
+    const subItem1Link = getByRole('link', {name: 'Sub Item 1'})
+    expect(subItem1Link).toBeInTheDocument()
+    expect(subItem1Link).toHaveAttribute('data-component', 'NavList.Item')
+  })
+
   it('supports TrailingAction', async () => {
     const {getByRole} = render(
       <NavList>