paris 0.23.0 → 0.23.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # paris
 
+## 0.23.1
+
+### Patch Changes
+
+- 6eafadf: Drawer: animate on first open when mounted already-open. Added `appear` to the Drawer's headlessui `Transition` so a conditionally-rendered Drawer whose first render is `show={true}` animates in instead of snapping open. Always-mounted Drawers are unaffected (they mount with `show={false}`, for which `appear` is a no-op).
+
 ## 0.23.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.23.0",
+    "version": "0.23.1",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {

package/src/stories/drawer/Drawer.tsx

@@ -195,7 +195,13 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>(props:
     }, [onAfterClose]);
 
     return (
-        <Transition show={isOpen} afterLeave={handleAfterLeave}>
+        // `appear` runs the enter transition on the very first mount. Without it,
+        // a Drawer that is conditionally rendered and mounts already-open (i.e. its
+        // first render has `show={true}`) snaps straight to the open state instead of
+        // animating in. Always-mounted Drawers mount with `show={false}`, so `appear`
+        // is a no-op for them — it only adds the (desired) enter animation for the
+        // mount-open case.
+        <Transition show={isOpen} appear afterLeave={handleAfterLeave}>
             <Dialog
                 as="div"
                 className={clsx(styles.root, props.overrides?.dialog?.className)}