From 6afa734cf29027cda36e188181762dca88fc48da Mon Sep 17 00:00:00 2001
From: Szymon Wiszczuk <37072867+golota60@users.noreply.github.com>
Date: Wed, 16 Feb 2022 06:38:22 +0100
Subject: [PATCH] feat(Tabs): support passing custom attributes to Tab (#5879)

* feat(Tabs): Added possibility of passing custom attributes to Tab component

* wording change
---
 src/Tab.tsx  | 6 ++++++
 src/Tabs.tsx | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Tab.tsx b/src/Tab.tsx
index d2865f538f..a62d8a6b9c 100644
--- a/src/Tab.tsx
+++ b/src/Tab.tsx
@@ -8,6 +8,7 @@ export interface TabProps extends Omit<TabPaneProps, 'title'> {
   title: React.ReactNode;
   disabled?: boolean;
   tabClassName?: string;
+  tabAttrs?: Record<string, any>;
 }
 
 /* eslint-disable react/no-unused-prop-types */
@@ -28,6 +29,11 @@ const propTypes = {
    * Class to pass to the underlying nav link.
    */
   tabClassName: PropTypes.string,
+
+  /**
+   * Object containing attributes to pass to underlying nav link.
+   */
+  tabAttrs: PropTypes.object,
 };
 
 const Tab: React.FC<TabProps> = () => {
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index 97391bbda0..af4b2cfdf5 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -102,7 +102,7 @@ function getDefaultActiveKey(children) {
 }
 
 function renderTab(child) {
-  const { title, eventKey, disabled, tabClassName, id } = child.props;
+  const { title, eventKey, disabled, tabClassName, tabAttrs, id } = child.props;
   if (title == null) {
     return null;
   }
@@ -116,6 +116,7 @@ function renderTab(child) {
         disabled={disabled}
         id={id}
         className={tabClassName}
+        {...tabAttrs}
       >
         {title}
       </NavLink>
@@ -157,6 +158,7 @@ const Tabs = (props: TabsProps) => {
           delete childProps.title;
           delete childProps.disabled;
           delete childProps.tabClassName;
+          delete childProps.tabAttrs;
 
           return <TabPane {...childProps} />;
         })}