fix(tabs): ensure consistant behavior between horizontal and vertical (…

…#486)
zakodium-oss · May 24, 2023 · 9bb61e0 · 9bb61e0
1 parent 46f04c5
commit 9bb61e0
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 2 deletions.
diff --git a/src/components/tabs/Tabs.tsx b/src/components/tabs/Tabs.tsx
@@ -152,7 +152,12 @@ function TabsHorizontal<T extends string = string>(
   const item = useTabsContext();
   return (
     <div
-      style={{ display: 'flex', flexDirection: 'column', overflowX: 'hidden' }}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        overflowX: 'hidden',
+        height: '100%',
+      }}
     >
       <div
         style={{

diff --git a/stories/components/tabs.stories.tsx b/stories/components/tabs.stories.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 import { Tabs, TabItem } from '../../src/components/index';
 
@@ -30,6 +30,54 @@ export function Horizontal() {
   );
 }
 
+function FullHeightContent({ children }: { children: ReactNode }) {
+  return (
+    <div style={{ backgroundColor: 'rgb(251, 207, 232)', height: '100%' }}>
+      {children}
+    </div>
+  );
+}
+
+export function AllowHorizontalChildToTakeFullHeight() {
+  const items: Array<TabItem> = [
+    {
+      id: '1h',
+      title: '1H',
+      content: <FullHeightContent>Hello, World! [a]</FullHeightContent>,
+    },
+    {
+      id: '13c',
+      title: '13C',
+      content: <FullHeightContent>Hello, World! [b]</FullHeightContent>,
+    },
+    {
+      id: '1h,1h',
+      title: '1H,1H',
+      content: <FullHeightContent>Hello, World! [c]</FullHeightContent>,
+    },
+    {
+      id: '1h,13c',
+      title: '1H,13C',
+      content: <FullHeightContent>Hello, World! [d]</FullHeightContent>,
+    },
+  ];
+
+  const [state, setState] = useState(items[1].id);
+
+  function handleClick(id: string) {
+    setState(id);
+  }
+
+  return (
+    <Tabs
+      orientation="horizontal"
+      items={items}
+      opened={state}
+      onClick={handleClick}
+    />
+  );
+}
+
 export function ManyTabs({
   orientation,
 }: {