fix: set min width on percentage uncontrolled side (#505)

Fixes: #496
zakodium-oss · Jun 17, 2023 · d303cb8 · d303cb8
1 parent e4ddf56
commit d303cb8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/src/components/split-pane/SplitPane.tsx b/src/components/split-pane/SplitPane.tsx
@@ -257,8 +257,15 @@ function getItemStyle(
       : { flex: '1 1 0%', display: 'flex' };
   } else if (type === '%') {
     return isControlledSide
-      ? { flex: '100 0 0%', display: 'flex' }
-      : { flex: `${percentToFlex(size)} 0 0%`, display: 'flex' };
+      ? {
+          flex: '100 0 0%',
+          display: 'flex',
+        }
+      : {
+          flex: `${percentToFlex(size)} 0 0%`,
+          display: 'flex',
+          [isHorizontal ? 'minWidth' : 'minHeight']: 0,
+        };
   } else {
     return isControlledSide
       ? {
@@ -268,8 +275,7 @@ function getItemStyle(
       : {
           flex: '1 1 0%',
           display: 'flex',
-          minWidth: isHorizontal ? 0 : undefined,
-          minHeight: isHorizontal ? undefined : 0,
+          [isHorizontal ? 'minWidth' : 'minHeight']: 0,
         };
   }
 }

diff --git a/stories/components/split-pane.stories.tsx b/stories/components/split-pane.stories.tsx
@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import {
   Accordion,
   AccordionProvider,
   SplitPane,
   SplitPaneProps,
   SplitPaneSize,
+  Tabs,
 } from '../../src/components/index';
 
 export default {
@@ -183,3 +184,36 @@ WithMinimalSize.argTypes = {
   direction: directionArgType,
   controlledSide: sideArgType,
 };
+
+export function WithMinimalSizeAndEvilChild() {
+  const tabItems = useMemo(
+    () =>
+      new Array(20).fill(0).map((_, i) => ({
+        id: `tab-${i}`,
+        title: `Tab ${i}`,
+        content: `Tab ${i} content`,
+      })),
+    [],
+  );
+
+  const [opened, setOpen] = useState<string>();
+
+  return (
+    <div style={{ height: '100%' }}>
+      <SplitPane direction="horizontal" size="20%" controlledSide="end">
+        <div style={{ width: '100%', minWidth: 0 }}>
+          <Tabs items={tabItems} onClick={setOpen} opened={opened} />
+        </div>
+        <div
+          style={{
+            backgroundColor: 'rgba(147, 197, 253)',
+            width: '100%',
+            minWidth: '300px',
+          }}
+        >
+          I am an evil child. My size will stay at 300px 😈
+        </div>
+      </SplitPane>
+    </div>
+  );
+}