From 283d01d6d761bc346b3fe871cdda5e81382044bd Mon Sep 17 00:00:00 2001
From: John Walley <john@walley.org.uk>
Date: Tue, 16 Aug 2022 14:43:05 +0100
Subject: [PATCH] feat: support disabling separator (#388)

---
 README.md                 |  4 ++++
 src/allotment.tsx         |  5 ++++-
 stories/basic.stories.tsx | 12 ++++++++++++
 website/docs/allotment.md |  3 ++-
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 72a7c57a..775f9b57 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,10 @@ Minimum size of any pane.
 
 Resize each view proportionally when resizing container.
 
+### separator (default: `true`)
+
+Whether to render a separator between panes.
+
 ### snap (default: `false`)
 
 Enable snap to zero for all panes.
diff --git a/src/allotment.tsx b/src/allotment.tsx
index d74feff5..a2f761a7 100644
--- a/src/allotment.tsx
+++ b/src/allotment.tsx
@@ -99,6 +99,8 @@ export type AllotmentProps = {
   defaultSizes?: number[];
   /** Resize each view proportionally when resizing container */
   proportionalLayout?: boolean;
+  /** Whether to render a separator between panes */
+  separator?: boolean;
   /**
    * Initial size of each element
    * @deprecated Use {@link AllotmentProps.defaultSizes defaultSizes} instead
@@ -125,6 +127,7 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       maxSize = Infinity,
       minSize = 30,
       proportionalLayout = true,
+      separator = true,
       sizes,
       defaultSizes = sizes,
       snap = false,
@@ -462,7 +465,7 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
           vertical ? "split-view-vertical" : "split-view-horizontal",
           styles.splitView,
           vertical ? styles.vertical : styles.horizontal,
-          styles.separatorBorder,
+          { [styles.separatorBorder]: separator },
           className
         )}
       >
diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx
index c982d8b4..11c7a72f 100644
--- a/stories/basic.stories.tsx
+++ b/stories/basic.stories.tsx
@@ -427,3 +427,15 @@ export const PreferredSize: Story = (args) => {
   );
 };
 PreferredSize.args = {};
+
+export const NoSeparator: Story = ({ separator }) => (
+  <div className={styles.container}>
+    <Allotment vertical separator={separator}>
+      <Content />
+      <Content />
+    </Allotment>
+  </div>
+);
+NoSeparator.args = {
+  separator: false,
+};
diff --git a/website/docs/allotment.md b/website/docs/allotment.md
index f2168639..6d39caa7 100644
--- a/website/docs/allotment.md
+++ b/website/docs/allotment.md
@@ -12,7 +12,8 @@ title: Allotment
 | `defaultSizes`       | `number[]` |         | An array of initial sizes of the panes. If the sum of the sizes differs from the size of the container then the panes' sizes will be scaled proportionally.                                          |
 | `maxSize`            | `number`   |         | Maximum size of any pane.                                                                                                                                                                            |
 | `minSize`            | `number`   |         | Minimum size of any pane.                                                                                                                                                                            |
-| `proportionalLayout` | `boolean`  | `true`  | Resize each view proportionally when resizing container                                                                                                                                              |
+| `proportionalLayout` | `boolean`  | `true`  | Resize each view proportionally when resizing container.                                                                                                                                             |
+| `separator`          | `boolean`  | `true`  | Whether to render a separator between panes.                                                                                                                                                         |
 | `snap`               | `boolean`  | `false` | Enable snap to zero for all panes.                                                                                                                                                                   |
 | `vertical`           | `boolean`  | `false` | Direction to split. If true then the panes will be stacked vertically, otherwise they will be stacked horizontally.                                                                                  |
 | `onReset`            | `func`     |         | Callback that is fired whenever the user double clicks a sash                                                                                                                                        |