feat: support disabling separator (#388)

johnwalley · Aug 16, 2022 · 283d01d · 283d01d
1 parent fc3fe9d
commit 283d01d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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                                                                                                                                        |