diff --git a/.changeset/quick-ants-lead.md b/.changeset/quick-ants-lead.md new file mode 100644 index 00000000000..2189997b67c --- /dev/null +++ b/.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 diff --git a/packages/react/src/ActionMenu/ActionMenu.test.tsx b/packages/react/src/ActionMenu/ActionMenu.test.tsx index 09303b7923b..27a07601392 100644 --- a/packages/react/src/ActionMenu/ActionMenu.test.tsx +++ b/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() + 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="AnchoredOverlay"]')).not.toBeNull() + expect(component.baseElement.querySelector('[data-component="ActionMenu.Overlay"]')).not.toBeNull() + }) + it('should open Menu on MenuButton click', async () => { const component = HTMLRender() const button = component.getByRole('button') diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx index c0dfb464f39..abdab145fa1 100644 --- a/packages/react/src/ActionMenu/ActionMenu.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.tsx @@ -256,7 +256,7 @@ export type ActionMenuButtonProps = ButtonProps const MenuButton = React.forwardRef(({...props}, anchorRef) => { return ( - } + variant={{regular: 'anchored', narrow: 'fullscreen'}} + > +
content
+ + + , + ) + + expect(baseElement.querySelector('[data-component="AnchoredOverlay.CloseButtonContainer"]')).toBeInTheDocument() + }) + it('should support a `ref` through `overlayProps` on the overlay element', () => { const ref = createRef() diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx index e0050775587..42cb6ae2926 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -395,7 +395,10 @@ export const AnchoredOverlay: React.FC {showXIcon ? ( -
+
{ )) + + it('tags overlay with data-component when menu is shown', async () => { + const user = userEvent.setup() + const {container} = render( + , + ) + const inputNode = container.querySelector('#autocompleteInput')! + await user.type(inputNode, 'z') + + expect(container.querySelector('[data-component="Autocomplete.Overlay"]')).toBeInTheDocument() + }) + it('calls onChange', async () => { const user = userEvent.setup() const onChangeMock = vi.fn() diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx index ef1278451a1..c12898f15f4 100644 --- a/packages/react/src/Autocomplete/AutocompleteInput.tsx +++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx @@ -170,6 +170,7 @@ const AutocompleteInput = React.forwardRef( autoComplete="off" id={id} {...props} + data-component="Autocomplete.Input" /> ) }, diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx index f0486c5822d..f330153c2ba 100644 --- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx +++ b/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} diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index 05f92549307..0ece5c490e8 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -23,6 +23,27 @@ const NextJSLikeLink = React.forwardRef( describe('NavList', () => { implementsClassName(NavList) + it('renders data-component attributes for NavList and NavList.SubNav', () => { + const {container} = render( + + Item 1 + + Item 2 + + Sub Item 1 + + + , + ) + + const nav = container.querySelector('nav') + expect(nav).toBeInTheDocument() + expect(nav).toHaveAttribute('data-component', 'NavList') + + const subNav = container.querySelector('[data-component="NavList.SubNav"]') + expect(subNav).toBeInTheDocument() + }) + it('supports TrailingAction', async () => { const {getByRole} = render( diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index c81795db695..15e5c3f70c1 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -29,7 +29,7 @@ export type NavListProps = { const Root = React.forwardRef(({children, ...props}, ref) => { return ( -