fix(DFD-274): Update tab panel component to use classname and remove …

…useless gap

.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

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>
 	);

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;

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>