paris 0.22.0 → 0.22.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # paris
 
+## 0.22.1
+
+### Patch Changes
+
+- b612946: Fix two issues with `DrawerBottomPanel` slots:
+
+  - **Border on the wrong slot when panels mount out of priority order.** Separator between portaled slots used an adjacent-sibling selector on the container, which keys off DOM source order while visual ordering is driven by CSS `order` via the `priority` prop. When slots mounted in non-priority order (e.g. one gated on async data), the border landed on the wrong slot. Borders are now applied per slot item so they travel with the element regardless of layout order.
+  - **Spacer didn't recompute when a slot registered after initial mount.** The bottom panel's content spacer only observed the outer panel element on initial attach, so late-registering slots (conditional on async data) left the spacer too short and hid scrollable content behind the panel. The effect now re-observes on entry changes, reads `offsetHeight` for an accurate border-box measurement, takes an explicit initial measurement, and observes individual slot items as a safety net.
+
 ## 0.22.0
 
 ### Minor Changes

package/package.json

@@ -2,7 +2,7 @@
     "name": "paris",
     "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
     "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-    "version": "0.22.0",
+    "version": "0.22.1",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {

package/src/stories/drawer/Drawer.module.scss

@@ -433,7 +433,6 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 }
 
 .bottomPanel {
-    border-top: 1px solid var(--pte-new-colors-borderStrong);
     position: absolute;
     bottom: 0;
     width: 100%;
@@ -442,16 +441,6 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 .bottomPanelSlots {
     display: flex;
     flex-direction: column;
-
-    // Auto-separator between portaled slot items
-    > * + * {
-        border-top: 1px solid var(--pte-new-colors-borderMedium);
-    }
-
-    // Separator between slots and base bottomPanel content that follows
-    &:not(:empty) ~ * {
-        border-top: 1px solid var(--pte-new-colors-borderMedium);
-    }
 }
 
 .bottomPanelContent {
@@ -464,6 +453,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 }
 
 .bottomPanelSlotItem {
+    border-top: 1px solid var(--pte-new-colors-borderStrong);
     position: relative;
     padding: 20px;
 }

package/src/stories/drawer/Drawer.tsx

@@ -243,17 +243,25 @@ const DrawerInner = <T extends string[] | readonly string[] = string[]>({
     // Sync spacer height with absolute-positioned bottom panel so content doesn't get clipped
     const bottomPanelElRef = useRef<HTMLDivElement | null>(null);
     const spacerRef = useRef<HTMLDivElement | null>(null);
+    const appendEntries = slotContext?.bottomPanelAppendEntries;
     useEffect(() => {
         if (!showBottomPanel) return;
         const panel = bottomPanelElRef.current;
         const spacer = spacerRef.current;
         if (!panel || !spacer) return;
-        const observer = new ResizeObserver(([entry]) => {
-            spacer.style.height = `${entry.contentRect.height}px`;
-        });
+
+        const update = () => {
+            spacer.style.height = `${panel.offsetHeight}px`;
+        };
+        update();
+
+        const observer = new ResizeObserver(update);
         observer.observe(panel);
+        for (const child of panel.querySelectorAll<HTMLElement>('[data-slot-mode]')) {
+            observer.observe(child);
+        }
         return () => observer.disconnect();
-    }, [showBottomPanel]);
+    }, [showBottomPanel, appendEntries]);
 
     const [loadedPage, setLoadedPage] = useState<string | null>(pagination?.currentPage ?? null);