Merge pull request #96 from linked-planet/dev

tabs - fixed height layouting in panels

Author: marcus-wishes

library/src/components/Tabs.tsx

@@ -102,6 +102,7 @@ export type TabListProps = {
 	style?: React.CSSProperties
 	testId?: string
 	side?: TabsSide
+	allowNonTabComponents?: boolean
 }
 
 const tabListTopClassName =
@@ -118,7 +119,15 @@ const tabListBottomClassName =
  */
 const TabList = forwardRef(
 	(
-		{ children, className, style, testId, side = "top", id }: TabListProps,
+		{
+			children,
+			className,
+			style,
+			testId,
+			side = "top",
+			id,
+			allowNonTabComponents,
+		}: TabListProps,
 		ref: ForwardedRef<HTMLDivElement>,
 	) => {
 		const tabListChildrenWithValue = React.Children.map(
@@ -129,10 +138,11 @@ const TabList = forwardRef(
 						"TabList children must be valid React elements",
 					)
 				}
-				if (child.type !== Tab) {
-					console.log(
+				if (child.type !== Tab && !allowNonTabComponents) {
+					console.warn(
 						"Only Tab components are allowed as children of TabList, but was",
 						child.type,
+						"(use allowNonTabComponents prop to allow other components)",
 					)
 				}
 				const childTyped = child as React.ReactElement<
@@ -201,7 +211,10 @@ const TabPanel = forwardRef(
 		return (
 			<RTabs.Content
 				id={id}
-				className={twMerge("data-[state=inactive]:hidden", className)}
+				className={twMerge(
+					"data-[state=inactive]:hidden size-full",
+					className,
+				)}
 				style={style}
 				value={label.toString()} /* this is set in the Tabs component! */
 				data-testid={testId}
@@ -214,7 +227,8 @@ const TabPanel = forwardRef(
 )
 
 /**
- * Container containing the TabList tab menu bar, and Tab panels
+ * Container containing the TabList tab menu bar, and Tab panels.
+ * For the TabPanels to use the correct height in case that the tab panel should have a height of 100% of the parent container, enable the heightHelper prop
  */
 const Container = forwardRef(
 	(
@@ -293,7 +307,7 @@ const Container = forwardRef(
 				value={selected != null ? selected.toString() : undefined}
 				defaultValue={defaultSelectedValue}
 				className={twMerge(
-					`flex p-2 ${side === "top" || side === "bottom" ? "flex-col" : ""}`,
+					`flex p-2 size-full ${side === "top" || side === "bottom" ? "flex-col" : ""}`,
 					className,
 				)}
 				style={style}

package-lock.json

@@ -106,25 +106,25 @@
 		"react-intl": "^6.8.9",
 		"react-joyride": "^2.9.3",
 		"react-router-dom": "^6.28.0",
-		"react-select": "^5.8.3",
+		"react-select": "^5.9.0",
 		"react-syntax-highlighter": "^15.6.1",
 		"react-toastify": "^10.0.6",
 		"react-transition-group": "^4.4.5",
 		"use-resize-observer": "^9.1.0"
 	},
 	"devDependencies": {
 		"@atlaskit/atlassian-navigation": "^4.9.5",
-		"@atlaskit/code": "^15.6.7",
+		"@atlaskit/code": "^15.6.8",
 		"@atlaskit/css-reset": "^6.11.2",
 		"@atlaskit/lozenge": "^11.12.3",
 		"@atlaskit/pagination": "^14.10.1",
-		"@atlaskit/side-navigation": "^3.6.5",
+		"@atlaskit/side-navigation": "^3.6.6",
 		"@atlaskit/table-tree": "^10.0.7",
 		"@atlaskit/tag": "^12.6.7",
 		"@atlaskit/tag-group": "^11.0.0",
 		"@atlaskit/textarea": "^5.7.0",
 		"@atlaskit/textfield": "^6.7.0",
-		"@atlaskit/theme": "^14.0.2",
+		"@atlaskit/theme": "^14.0.3",
 		"@babel/generator": "^7.26.3",
 		"@babel/parser": "^7.26.3",
 		"@babel/traverse": "^7.26.4",

package.json

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
@@ -14,10 +14,11 @@ function AutomaticTabsValue() {
 	//#region tabs_automatic_value
 	return (
 		<Tabs.Container>
-			<Tabs.TabList>
+			<Tabs.TabList allowNonTabComponents>
 				<Tabs.Tab>Tab 1</Tabs.Tab>
 				<Tabs.Tab>Tab 2</Tabs.Tab>
 				<Tabs.Tab disabled>Tab 3</Tabs.Tab>
+				<div>Other Component</div>
 			</Tabs.TabList>
 			<Tabs.TabPanel>
 				<span>First Content</span>