chore(Tab): allow accepting children of a single ReactElement (#2048)

mondaycom · Apr 7, 2024 · 03378ba · 03378ba
1 parent 0082caf
commit 03378ba
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/packages/core/src/components/Tabs/Tab/Tab.tsx b/packages/core/src/components/Tabs/Tab/Tab.tsx
@@ -30,7 +30,7 @@ export interface TabProps extends VibeComponentProps {
   /**
    * Tab link-name
    */
-  children?: string | ReactElement[];
+  children?: string | ReactElement | ReactElement[];
 }
 
 const Tab: FC<TabProps> = forwardRef(
@@ -70,11 +70,13 @@ const Tab: FC<TabProps> = forwardRef(
         />
       );
 
+      const childrenArray = React.Children.toArray(children);
+
       if (iconSide === "left") {
-        return [iconElement, ...children];
+        return [iconElement, ...childrenArray];
       }
 
-      return [...children, iconElement];
+      return [...childrenArray, iconElement];
     }
     return (
       <li

diff --git a/...ages/core/src/components/Tabs/Tab/__tests__/__snapshots__/tab-snapshot-tests.jest.js.snap b/...ages/core/src/components/Tabs/Tab/__tests__/__snapshots__/tab-snapshot-tests.jest.js.snap
@@ -121,9 +121,7 @@ exports[`Tab renders correctly with icon on left 1`] = `
         fillRule="evenodd"
       />
     </svg>
-    T
-    a
-    b
+    Tab
   </a>
 </li>
 `;
@@ -140,9 +138,7 @@ exports[`Tab renders correctly with icon on right 1`] = `
     className="tabInner"
     onClick={[Function]}
   >
-    T
-    a
-    b
+    Tab
     <svg
       aria-hidden={true}
       className="icon tabIcon right noFocusStyle"