fix(splitter): ref not forwarded and switch to css borders

jpmorganchase · Feb 5, 2025 · 15a7496 · 15a7496
1 parent d2d398d
commit 15a7496
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 55 deletions.
diff --git a/packages/lab/src/splitter/SplitHandle.css b/packages/lab/src/splitter/SplitHandle.css
@@ -36,16 +36,14 @@
   width: 4px;
 }
 
-.saltSplitHandle-bordered {
-  box-shadow: 0 0 0 1px lightgrey;
+/* two handles touching (horizontally) */
+div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="horizontal"] {
+  margin-left: -1px;
 }
 
-.saltSplitHandle-bordered[data-panel-group-direction="horizontal"] + div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="horizontal"] {
-  margin-left: 1px;
-}
-
-.saltSplitHandle-bordered[data-panel-group-direction="vertical"] + div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="vertical"] {
-  margin-top: 1px;
+/* two handles touching (vertically) */
+div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="vertical"] {
+  margin-top: -1px;
 }
 
 .saltSplitHandle-dot {
@@ -67,25 +65,30 @@
   background: var(--salt-separable-foreground-active);
 }
 
-.saltSplitHandle-accent-top-bottom,
+.saltSplitHandle-accent-top-bottom {
+  border-top: 1px solid lightgrey;
+  border-bottom: 1px solid lightgrey;
+}
+
 .saltSplitHandle-accent-left-right {
-  box-shadow: 0 0 0 1px lightgrey;
+  border-left: 1px solid lightgrey;
+  border-right: 1px solid lightgrey;
 }
 
 .saltSplitHandle-accent-left {
-  box-shadow: -1px 0 0 0.5px lightgrey;
+  border-left: 1px solid lightgrey;
 }
 
 .saltSplitHandle-accent-right {
-  box-shadow: 1px 0 0 0.5px lightgrey;
+  border-right: 1px solid lightgrey;
 }
 
 .saltSplitHandle-accent-top {
-  box-shadow: 0 -1px 0 0.5px lightgrey;
+  border-top: 1px solid lightgrey;
 }
 
 .saltSplitHandle-accent-bottom {
-  box-shadow: 0 1px 0 0.5px lightgrey;
+  border-bottom: 1px solid lightgrey;
 }
 
 .saltSplitHandle-primary {

diff --git a/packages/lab/src/splitter/SplitHandle.tsx b/packages/lab/src/splitter/SplitHandle.tsx
@@ -61,6 +61,7 @@ export function SplitHandle({
     <PanelResizeHandle
       className={clsx(
         withBaseName(),
+        withBaseName(appearance),
         withBaseName("accent", accent),
         variant && withBaseName(variant),
         className,

diff --git a/packages/lab/src/splitter/SplitPanel.tsx b/packages/lab/src/splitter/SplitPanel.tsx
@@ -37,6 +37,7 @@ export const SplitPanel = forwardRef<ImperativePanelHandle, SplitPanelProps>(
       <Panel
         data-variant="primary"
         className={clsx(withBaseName(), variant && withBaseName(variant))}
+        ref={ref}
         {...props}
       />
     );

diff --git a/packages/lab/stories/splitter/splitter.stories.tsx b/packages/lab/stories/splitter/splitter.stories.tsx
@@ -1,11 +1,4 @@
-import {
-  Button,
-  DialogCloseButton,
-  Drawer,
-  FlexLayout,
-  StackLayout,
-  Text,
-} from "@salt-ds/core";
+import { Button, FlexLayout, StackLayout, Text } from "@salt-ds/core";
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
@@ -114,7 +107,7 @@ export function MultiBordered() {
   );
 }
 
-export function MultiTransparent() {
+export function Transparent() {
   return (
     <FlexLayout
       style={{
@@ -229,7 +222,7 @@ export function MinMaxSize() {
   );
 }
 
-export function CollapsibleSetSize() {
+export function CollapsibleFixedSizing() {
   return (
     <Splitter style={box} orientation="horizontal" appearance="bordered">
       <SplitPanel
@@ -373,34 +366,3 @@ export function ProgrammableResize() {
     </FlexLayout>
   );
 }
-
-export function WipInsideDrawer() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open Drawer</Button>
-      <Drawer
-        position="right"
-        open={open}
-        onOpenChange={setOpen}
-        style={{ width: 420, padding: 0 }}
-      >
-        <DialogCloseButton onClick={() => setOpen(false)} />
-        <Splitter orientation="horizontal">
-          <SplitPanel defaultSize={0} />
-          <SplitHandle />
-          <SplitPanel
-            collapsible
-            collapsedSize={0}
-            minSize={100}
-            onCollapse={() => setOpen(false)}
-            style={{ padding: "24px" }}
-          >
-            Hello world!
-          </SplitPanel>
-        </Splitter>
-      </Drawer>
-    </>
-  );
-}