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 (
-
+
{children}
);
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 (