From 0da0237c01ae52514b92c443d0e06ebcec4d44f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Sl=C3=A1ma?= <tomas.slama@toptal.com>
Date: Wed, 11 Sep 2024 16:53:17 +0200
Subject: [PATCH] Propage data-testid to Breadcrumbs (#4542)

---
 .changeset/pretty-toes-leave.md                          | 8 ++++++++
 .../base/Breadcrumbs/src/Breadcrumbs/Breadcrumbs.tsx     | 9 +++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/pretty-toes-leave.md

diff --git a/.changeset/pretty-toes-leave.md b/.changeset/pretty-toes-leave.md
new file mode 100644
index 0000000000..d8f52c5c9c
--- /dev/null
+++ b/.changeset/pretty-toes-leave.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-breadcrumbs': patch
+'@toptal/picasso': patch
+---
+
+### Breadcrumbs
+
+- propage `data-testid`
diff --git a/packages/base/Breadcrumbs/src/Breadcrumbs/Breadcrumbs.tsx b/packages/base/Breadcrumbs/src/Breadcrumbs/Breadcrumbs.tsx
index dd87ec1b7d..4ad226c150 100644
--- a/packages/base/Breadcrumbs/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/base/Breadcrumbs/src/Breadcrumbs/Breadcrumbs.tsx
@@ -12,14 +12,19 @@ export interface Props extends BaseProps {
 
 export const Breadcrumbs = forwardRef<HTMLDivElement, Props>(
   function Breadcrumbs(props, ref) {
-    const { children } = props
+    const { children, 'data-testid': dataTestId } = props
 
     const allItems = React.Children.map(children, child => (
       <li className='p-0 m-0'>{child}</li>
     ))
 
     return (
-      <Typography as='nav' ref={ref} className='text-md text-black/[.54]'>
+      <Typography
+        as='nav'
+        ref={ref}
+        className='text-md text-black/[.54]'
+        data-testid={dataTestId}
+      >
         <ol className='flex flex-wrap items-center p-0 m-0 list-none'>
           {allItems && insertSeparator(allItems)}
         </ol>