From bf4c654d144ac7e63357b8720cc9eec653c53f99 Mon Sep 17 00:00:00 2001
From: Alexandre Amalric <aamalric@talend.com>
Date: Wed, 15 Nov 2023 11:24:54 +0100
Subject: [PATCH] fix(DFD-274): Update tab panel component to use classname and
 remove useless gap

---
 .changeset/weak-olives-play.md                |  5 +++++
 .../components/Tabs/Primitive/TabPanel.tsx    | 21 +++++++++++--------
 .../Tabs/Primitive/TabStyles.module.scss      |  9 ++++++++
 .../Tabs/Primitive/TabsProvider.tsx           |  2 +-
 4 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/weak-olives-play.md

diff --git a/.changeset/weak-olives-play.md b/.changeset/weak-olives-play.md
new file mode 100644
index 00000000000..e1be3d355f3
--- /dev/null
+++ b/.changeset/weak-olives-play.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+fix(DFD-274): Update tab panel component to use classname and remove useless gap
diff --git a/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx b/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx
index fda169b4cae..22f490f0126 100644
--- a/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx
+++ b/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx
@@ -1,5 +1,8 @@
 import { useContext } from 'react';
+import classNames from 'classnames';
+
 import { TabsInternalContext } from './TabsProvider';
+import style from './TabStyles.module.scss';
 
 export type TabPanelPropTypes = {
 	id: string;
@@ -9,17 +12,17 @@ export type TabPanelPropTypes = {
 
 export function TabPanel({ children, id, renderIf }: TabPanelPropTypes): JSX.Element {
 	const context = useContext(TabsInternalContext);
-	const style = {
-		display: '',
-	};
-	if (id !== context?.value) {
-		if (renderIf) {
-			return <></>;
-		}
-		style.display = 'none';
+	if (id !== context?.value && renderIf) {
+		return <></>;
 	}
+
 	return (
-		<div id={id} role="tabpanel" style={style} tabIndex={0}>
+		<div
+			id={id}
+			role="tabpanel"
+			className={classNames(style.tabpanel, { [style['tabpanel--hidden']]: id !== context?.value })}
+			tabIndex={0}
+		>
 			{children}
 		</div>
 	);
diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
index 386c1d69c78..d0224816457 100644
--- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
+++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
@@ -13,6 +13,15 @@
 	column-gap: var(--coral-spacing-m, 1.6rem);
 }
 
+.tabpanel {
+	width: 100%;
+	height: 100%;
+
+	&--hidden {
+		display: none;
+	}
+}
+
 .tab {
 	font: tokens.$coral-heading-s;
 	height: tokens.$coral-sizing-xs;
diff --git a/packages/design-system/src/components/Tabs/Primitive/TabsProvider.tsx b/packages/design-system/src/components/Tabs/Primitive/TabsProvider.tsx
index 868f635515e..6e2b022fefc 100644
--- a/packages/design-system/src/components/Tabs/Primitive/TabsProvider.tsx
+++ b/packages/design-system/src/components/Tabs/Primitive/TabsProvider.tsx
@@ -31,7 +31,7 @@ export function TabsProvider(props: TabsProviderPropTypes & WithChildren) {
 	});
 	return (
 		<nav id={props.id}>
-			<StackVertical gap="M">
+			<StackVertical gap={0}>
 				<TabsInternalContext.Provider value={{ size: props.size, ...controlled }}>
 					{props.children}
 				</TabsInternalContext.Provider>