From 68877076fcbbc1c4cd308f2e6f8f44290751efe4 Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Wed, 9 Jun 2021 15:21:57 -0500
Subject: [PATCH] data-test-id can be used with OverlayProps (#1275)

Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com>
---
 .changeset/cool-rocks-drive.md     | 5 +++++
 src/Overlay.tsx                    | 1 +
 src/stories/ActionMenu.stories.tsx | 1 +
 3 files changed, 7 insertions(+)
 create mode 100644 .changeset/cool-rocks-drive.md

diff --git a/.changeset/cool-rocks-drive.md b/.changeset/cool-rocks-drive.md
new file mode 100644
index 00000000000..331f2030bf7
--- /dev/null
+++ b/.changeset/cool-rocks-drive.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+data props can be used in overlayProps.
diff --git a/src/Overlay.tsx b/src/Overlay.tsx
index 06dc8ae2161..4565aae88b7 100644
--- a/src/Overlay.tsx
+++ b/src/Overlay.tsx
@@ -65,6 +65,7 @@ export type OverlayProps = {
   onClickOutside: (e: TouchOrMouseEvent) => void
   onEscape: (e: KeyboardEvent) => void
   visibility?: 'visible' | 'hidden'
+  [additionalKey: string]: unknown
 } & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
 
 /**
diff --git a/src/stories/ActionMenu.stories.tsx b/src/stories/ActionMenu.stories.tsx
index d682603afb9..435abf4743d 100644
--- a/src/stories/ActionMenu.stories.tsx
+++ b/src/stories/ActionMenu.stories.tsx
@@ -97,6 +97,7 @@ export function SimpleListStory(): JSX.Element {
           onAction={onAction}
           anchorContent="Menu"
           overlayProps={{
+            'data-test-id': 'some_test_id',
             onMouseDown: (e: React.MouseEvent) =>
               // eslint-disable-next-line no-console
               console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)