Reverted minSize=0 default change

bvaughn · Aug 9, 2023 · 008a19f · 008a19f
1 parent b97da2f
commit 008a19f
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 51 deletions.
diff --git a/packages/react-resizable-panels-website/tests/CursorStyle.spec.ts b/packages/react-resizable-panels-website/tests/CursorStyle.spec.ts
@@ -41,10 +41,9 @@ test.describe("cursor style", () => {
         createElement(Panel, {
           defaultSize: 50,
           id: "first-panel",
-          minSize: 10,
         }),
         createElement(PanelResizeHandle),
-        createElement(Panel, { defaultSize: 50, id: "last-panel", minSize: 10 })
+        createElement(Panel, { defaultSize: 50, id: "last-panel" })
       )
     );
   }

diff --git a/packages/react-resizable-panels-website/tests/NestedGroups.spec.ts b/packages/react-resizable-panels-website/tests/NestedGroups.spec.ts
@@ -12,31 +12,31 @@ test.describe("Nested groups", () => {
       createElement(
         PanelGroup,
         { direction: "horizontal" },
-        createElement(Panel, { minSize: 10 }),
+        createElement(Panel),
         createElement(PanelResizeHandle),
         createElement(
           Panel,
-          { minSize: 10 },
+          undefined,
           createElement(
             PanelGroup,
             { direction: "vertical" },
-            createElement(Panel, { minSize: 10 }),
+            createElement(Panel),
             createElement(PanelResizeHandle),
             createElement(
               Panel,
-              { minSize: 10 },
+              undefined,
               createElement(
                 PanelGroup,
                 { direction: "horizontal" },
-                createElement(Panel, { minSize: 10 }),
+                createElement(Panel),
                 createElement(PanelResizeHandle),
-                createElement(Panel, { minSize: 10 })
+                createElement(Panel)
               )
             )
           )
         ),
         createElement(PanelResizeHandle),
-        createElement(Panel, { minSize: 10 })
+        createElement(Panel)
       )
     );
 

diff --git a/packages/react-resizable-panels-website/tests/Springy.spec.ts b/packages/react-resizable-panels-website/tests/Springy.spec.ts
@@ -13,17 +13,15 @@ async function openPage(page: Page) {
     createElement(Panel, {
       defaultSize: 25,
       id: "left-panel",
-      minSize: 10,
       order: 1,
     }),
     createElement(PanelResizeHandle, { id: "left-handle" }),
-    createElement(Panel, { id: "middle-panel", minSize: 10, order: 2 }),
+    createElement(Panel, { id: "middle-panel", order: 2 }),
     createElement(PanelResizeHandle, { id: "right-handle" }),
     createElement(Panel, {
       collapsible: true,
       defaultSize: 25,
       id: "right-panel",
-      minSize: 10,
       order: 4,
     })
   );

diff --git a/packages/react-resizable-panels-website/tests/Storage.spec.ts b/packages/react-resizable-panels-website/tests/Storage.spec.ts
@@ -8,27 +8,27 @@ import { goToUrl } from "./utils/url";
 const panelGroupABC = createElement(
   PanelGroup,
   { autoSaveId: "test-group", direction: "horizontal" },
-  createElement(Panel, { minSize: 10, order: 1 }),
+  createElement(Panel, { order: 1 }),
   createElement(PanelResizeHandle),
-  createElement(Panel, { minSize: 10, order: 2 }),
+  createElement(Panel, { order: 2 }),
   createElement(PanelResizeHandle),
-  createElement(Panel, { minSize: 10, order: 3 })
+  createElement(Panel, { order: 3 })
 );
 
 const panelGroupBC = createElement(
   PanelGroup,
   { autoSaveId: "test-group", direction: "horizontal" },
-  createElement(Panel, { minSize: 10, order: 2 }),
+  createElement(Panel, { order: 2 }),
   createElement(PanelResizeHandle),
-  createElement(Panel, { minSize: 10, order: 3 })
+  createElement(Panel, { order: 3 })
 );
 
 const panelGroupAB = createElement(
   PanelGroup,
   { autoSaveId: "test-group", direction: "horizontal" },
-  createElement(Panel, { minSize: 10, order: 1 }),
+  createElement(Panel, { order: 1 }),
   createElement(PanelResizeHandle),
-  createElement(Panel, { minSize: 10, order: 2 })
+  createElement(Panel, { order: 2 })
 );
 
 test.describe("Storage", () => {

diff --git a/packages/react-resizable-panels-website/tests/WindowSplitter.spec.ts b/packages/react-resizable-panels-website/tests/WindowSplitter.spec.ts
@@ -14,9 +14,9 @@ async function goToDefaultUrl(
     createElement(
       PanelGroup,
       { direction },
-      createElement(Panel, { minSize: 10 }),
+      createElement(Panel),
       createElement(PanelResizeHandle),
-      createElement(Panel, { minSize: 10 })
+      createElement(Panel)
     )
   );
 }
@@ -70,7 +70,7 @@ test.describe("Window Splitter", () => {
         createElement(
           PanelGroup,
           { direction: "horizontal" },
-          createElement(Panel, { maxSize: 50, minSize: 10 }),
+          createElement(Panel, { maxSize: 50 }),
           createElement(PanelResizeHandle),
           createElement(Panel)
         )
@@ -92,7 +92,7 @@ test.describe("Window Splitter", () => {
           { direction: "horizontal" },
           createElement(Panel, { defaultSize: 65 }),
           createElement(PanelResizeHandle),
-          createElement(Panel, { maxSize: 40, minSize: 10 })
+          createElement(Panel, { maxSize: 40 })
         )
       );
 

diff --git a/packages/react-resizable-panels-website/tests/utils/url.ts b/packages/react-resizable-panels-website/tests/utils/url.ts
@@ -12,7 +12,7 @@ export async function goToUrl(
   const url = new URL("http://localhost:1234/__e2e");
   url.searchParams.set("urlPanelGroup", encodedString);
 
-  // Uncomment when testing for easier repros
+  // Uncomment when testing for easier debugging
   // console.log(url.toString());
 
   await page.goto(url.toString());

diff --git a/packages/react-resizable-panels/CHANGELOG.md b/packages/react-resizable-panels/CHANGELOG.md
@@ -1,8 +1,7 @@
 # Changelog
 
 ## 0.0.55
-* New `units` prop added to `Panel`
-* The default `minSize` value for `Panel` has been changed from `10` to `0`.
+* New `units` prop added to `Panel` to support pixel-based panel size constraints.
 
 ## 0.0.54
 * [172](https://github.com/bvaughn/react-resizable-panels/issues/172): Development warning added to `PanelGroup` for conditionally-rendered `Panel`(s) that don't have `id` and `order` props

diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
@@ -57,7 +57,7 @@ function PanelWithForwardedRef({
   forwardedRef,
   id: idFromProps = null,
   maxSize = null,
-  minSize = 0,
+  minSize = 10,
   onCollapse = null,
   onResize = null,
   order = null,

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -352,13 +352,10 @@ function PanelGroupWithForwardedRef({
 
         const remainingSize = 100 - totalDefaultSize;
         const remainingPanels = panelsArray.length - panelsWithSizes.size;
-        let size = remainingSize / remainingPanels;
-        if (minSize > 0) {
-          size = Math.max(minSize, size);
-        }
-        if (maxSize != null) {
-          size = Math.min(maxSize, size);
-        }
+        const size = Math.min(
+          maxSize != null ? maxSize : 100,
+          Math.max(minSize, remainingSize / remainingPanels)
+        );
 
         sizes[index] = size;
         totalDefaultSize += size;
@@ -827,11 +824,10 @@ function PanelGroupWithForwardedRef({
     if (collapsible && nextSize === collapsedSize) {
       // This is a valid resize state.
     } else {
-      if (maxSize != null) {
-        nextSize = Math.min(maxSize, Math.max(minSize, nextSize));
-      } else {
-        nextSize = Math.max(minSize, nextSize);
-      }
+      nextSize = Math.min(
+        maxSize != null ? maxSize : 100,
+        Math.max(minSize, nextSize)
+      );
     }
 
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);

diff --git a/packages/react-resizable-panels/src/utils/group.ts b/packages/react-resizable-panels/src/utils/group.ts
@@ -333,17 +333,11 @@ export function safeResizePanel(
   let { collapsedSize, collapsible, maxSize, minSize, units } = panel.current;
 
   if (units === "static") {
-    if (collapsedSize != null) {
-      collapsedSize = (collapsedSize / groupSizePixels) * 100;
-    }
-
+    collapsedSize = (collapsedSize / groupSizePixels) * 100;
     if (maxSize != null) {
       maxSize = (maxSize / groupSizePixels) * 100;
     }
-
-    if (minSize != null) {
-      minSize = (minSize / groupSizePixels) * 100;
-    }
+    minSize = (minSize / groupSizePixels) * 100;
   }
 
   if (collapsible) {
@@ -365,10 +359,10 @@ export function safeResizePanel(
     }
   }
 
-  const nextSize =
-    maxSize != null
-      ? Math.min(maxSize, Math.max(minSize, nextSizeUnsafe))
-      : Math.max(minSize, nextSizeUnsafe);
+  const nextSize = Math.min(
+    maxSize != null ? maxSize : 100,
+    Math.max(minSize, nextSizeUnsafe)
+  );
 
   return nextSize;
 }