From 55f7b0ff627ba4113c4765fb46c2020678741221 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Tue, 20 Oct 2026 13:09:35 +0200
Subject: [PATCH 1/2] feat(components/molecule/tabs): add support for spreading
 additional props and unique keys

---
 .../tabs/src/components/MoleculeTabs.js        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/molecule/tabs/src/components/MoleculeTabs.js b/components/molecule/tabs/src/components/MoleculeTabs.js
index 395dccbff..2f2b4f500 100644
--- a/components/molecule/tabs/src/components/MoleculeTabs.js
+++ b/components/molecule/tabs/src/components/MoleculeTabs.js
@@ -46,7 +46,8 @@ const MoleculeTabs = ({
   type = TYPES.HORIZONTAL,
   variant = VARIANTS.CLASSIC,
   tabsJustifyContent = TABS_JUSTIFY_CONTENT.FLEX_START,
-  keepTabsContentMounted = false
+  keepTabsContentMounted = false,
+  ...props
 }) => {
   const className = cx(BASE_CLASS, {
     [`${BASE_CLASS}--${variant}`]: variant,
@@ -136,15 +137,22 @@ const MoleculeTabs = ({
         numTab,
         id,
         onChange,
-        ref: el => (tabRefs.current[index] = el) // Assign ref to each MoleculeTab
+        ref: el => (tabRefs.current[index] = el), // Assign ref to each MoleculeTab
+        key: index
       })
     })
 
-  const tabContent = childrenArray.reduce((activeContent, child) => {
+  const tabContent = childrenArray.reduce((activeContent, child, currentIndex) => {
     if (child) {
       const {children: childrenChild, active, numTab} = child.props
       activeContent.push(
-        <Wrapper id={id} keepTabsContentMounted={keepTabsContentMounted} isActive={active} numTab={numTab}>
+        <Wrapper
+          id={id}
+          keepTabsContentMounted={keepTabsContentMounted}
+          isActive={active}
+          numTab={numTab}
+          key={currentIndex}
+        >
           {childrenChild}
         </Wrapper>
       )
@@ -153,7 +161,7 @@ const MoleculeTabs = ({
   }, [])
 
   return (
-    <div className={className}>
+    <div className={className} {...props}>
       <ul
         ref={outerRef}
         className={CLASS_SCROLLER}

From 5ae6aa8989fe50d44da8a1ef2a56d74d6dac6c35 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Tue, 20 Oct 2026 13:15:05 +0200
Subject: [PATCH 2/2] feat(components/molecule/tabs): add support for spreading
 additional props and unique keys

---
 components/molecule/tabs/test/index.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/molecule/tabs/test/index.test.js b/components/molecule/tabs/test/index.test.js
index 5d3bb7ce0..3c6215660 100644
--- a/components/molecule/tabs/test/index.test.js
+++ b/components/molecule/tabs/test/index.test.js
@@ -78,7 +78,7 @@ describe(json.name, () => {
       expect(container.innerHTML).to.not.have.lengthOf(0)
     })
 
-    it('should NOT extend classNames', () => {
+    it('should extend classNames', () => {
       // Given
       const props = {
         className: 'extended-classNames'
@@ -90,7 +90,7 @@ describe(json.name, () => {
       const findClassName = findSentence(props.className)
 
       // Then
-      expect(findClassName(container.innerHTML)).to.be.null
+      expect(findClassName(container.innerHTML)).to.not.be.null
     })
 
     it('should display the active content', () => {