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

#4987) * fix(DFD-274): Update tab panel component to use classname and remove useless gap * fix(DFD-274): Update test snapshot
Talend · Nov 15, 2023 · b53bc81 · b53bc81
1 parent 6739849
commit b53bc81
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git a/.changeset/weak-olives-play.md 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
@@ -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
@@ -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
@@ -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>

diff --git a/packages/design-system/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/packages/design-system/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Tabs should render accessible html 1`] = `
   id="kit"
 >
   <div
-    class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-M theme-gap-y-M"
+    class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0"
   >
     <div
       class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-row theme-block theme-gap-x-M theme-gap-y-M"
@@ -62,24 +62,25 @@ exports[`Tabs should render accessible html 1`] = `
       </button>
     </div>
     <div
+      class="theme-tabpanel theme-tabpanel--hidden"
       id="home"
       role="tabpanel"
-      style="display: none;"
       tabindex="0"
     >
       Tab content for Home
     </div>
     <div
+      class="theme-tabpanel"
       id="profile"
       role="tabpanel"
       tabindex="0"
     >
       Tab content for Profile
     </div>
     <div
+      class="theme-tabpanel theme-tabpanel--hidden"
       id="contact"
       role="tabpanel"
-      style="display: none;"
       tabindex="0"
     >
       Tab content for Contact