{
+ const {baseElement} = render(
+
+
+ {}}
+ onClose={() => {}}
+ renderAnchor={props => }
+ 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 (
-