feat(react, panda-preset): adjust Button styles, animate Drawer exit (#…

…154) * feat(react,panda-preset): adjust Button styles, animate Drawer exit * chore(deps): pin framer-motion as dev dep * chore(change): add change
jonambas · Sep 20, 2023 · c52823d · c52823d
1 parent 676a0ba
commit c52823d
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 48 deletions.
diff --git a/.changeset/blue-crabs-scream.md b/.changeset/blue-crabs-scream.md
@@ -0,0 +1,6 @@
+---
+'@sweatpants/panda-preset': minor
+'@sweatpants/react': patch
+---
+
+Adjust Button styles, animate Drawer exit
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@sweatpants/libra": "^0.0.28",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
+    "framer-motion": "10.16.4",
     "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/panda-preset/src/index.ts b/packages/panda-preset/src/index.ts
@@ -2,24 +2,6 @@ import { definePreset } from '@pandacss/dev';
 
 export default definePreset({
   theme: {
-    keyframes: {
-      fadein: {
-        from: { opacity: '0' },
-        to: { opacity: '1' }
-      },
-      fadeout: {
-        to: { opacity: '0' },
-        from: { opacity: '1' }
-      },
-      slideinright: {
-        from: { transform: 'translateX(100%)' },
-        to: { transform: 'translateX(0)' }
-      },
-      slideinbottom: {
-        from: { transform: 'translateY(100%)' },
-        to: { transform: 'translateY(0)' }
-      }
-    },
     breakpoints: {
       sm: '640px',
       md: '768px',

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "1.0.4",
     "@radix-ui/react-select": "1.2.2",
-    "@radix-ui/react-slot": "1.0.2"
+    "@radix-ui/react-slot": "1.0.2",
+    "@react-hook/resize-observer": "^1.2.6"
   }
 }
diff --git a/packages/react/src/button/Button.tsx b/packages/react/src/button/Button.tsx
@@ -51,8 +51,8 @@ const styles = cva({
         lineHeight: 'calc(2.5rem - 2px)'
       },
       md: { fontSize: '4', paddingX: '4', lineHeight: 'calc(2rem - 2px)' },
-      sm: { fontSize: '3', paddingX: '4', lineHeight: 'calc(1.75rem - 2px)' },
-      xs: { fontSize: '3', paddingX: '3', lineHeight: 'calc(1.25rem - 2px)' }
+      sm: { fontSize: '2', paddingX: '4', lineHeight: 'calc(1.75rem - 2px)' },
+      xs: { fontSize: '2', paddingX: '3', lineHeight: 'calc(1.25rem - 2px)' }
     },
     disabled: {
       true: { cursor: 'not-allowed', opacity: '0.7' },
@@ -94,7 +94,7 @@ const styles = cva({
         bg: 'transparent',
         borderColor: 'transparent',
         position: 'relative',
-        color: 'gray12',
+        color: 'gray10',
         _before: {
           content: '""',
           position: 'absolute',
@@ -113,6 +113,7 @@ const styles = cva({
         },
         '&:hover:not(:disabled)': {
           bg: 'transparent',
+          color: 'gray12',
           _before: {
             opacity: '0.08'
           }

diff --git a/packages/react/src/drawer/Drawer.tsx b/packages/react/src/drawer/Drawer.tsx
@@ -1,7 +1,18 @@
 'use client';
 
-import { ComponentPropsWithRef, ReactNode, forwardRef } from 'react';
+import {
+  ComponentPropsWithRef,
+  MutableRefObject,
+  ReactNode,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
+import { motion, AnimatePresence } from 'framer-motion';
+import useResizeObserver from '@react-hook/resize-observer';
 import { css } from '@styles/css';
 import { Button } from '../button/Button';
 import { Cross } from '../icons/icons';
@@ -16,9 +27,7 @@ const overlay = css({
   position: 'fixed',
   zIndex: '2',
   inset: 0,
-  background: '#b9bbc650', // gray8
-  transition: '0.15s',
-  animation: ['fadein 150ms linear']
+  background: '#b9bbc650' // gray8
 });
 
 const content = css({
@@ -28,20 +37,21 @@ const content = css({
   right: '0',
   background: 'baseBg',
   borderTopLeftRadius: 'xl',
-  borderBottomLeftRadius: 'xl',
+  borderBottomLeftRadius: '0',
+  borderTopRightRadius: 'xl',
   boxShadow: '0 0 24px 0px rgba(0,0,0,0.1)',
   p: '6',
   maxWidth: '100%',
   width: '100%',
   height: '95%',
   top: 'auto',
-  animation: ['slideinbottom .25s cubic-bezier(0.33, 1, 0.68, 1)'],
   sm: {
     maxWidth: '90%',
     width: '350px',
     height: '100%',
     top: '0',
-    animation: ['slideinright .25s cubic-bezier(0.33, 1, 0.68, 1)']
+    borderBottomLeftRadius: 'xl',
+    borderTopRightRadius: '0'
   }
 });
 
@@ -53,22 +63,80 @@ const close = css({
 });
 
 const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, userRef) => {
-  const { children, trigger, ...rest } = props;
+  const { children, trigger, defaultOpen, open, onOpenChange, ...rest } = props;
+  const [internalOpen, setInternalOpen] = useState<boolean>(
+    defaultOpen ?? open ?? false
+  );
+  const [isSmall, setIsSmall] = useState<boolean>(false);
+  const ref = useRef(null) as MutableRefObject<HTMLElement | null>;
+
+  useEffect(() => {
+    if (typeof document !== 'undefined' && document.body) {
+      ref.current = document.body;
+    }
+  }, []);
+
+  useResizeObserver(ref.current, (entry) => {
+    setIsSmall(entry.contentRect.width < 640);
+  });
+
+  useLayoutEffect(() => {
+    setIsSmall((ref.current?.getBoundingClientRect()?.width ?? 0) < 640);
+  }, [ref]);
+
+  const handleOpenChange = (value: boolean) => {
+    setInternalOpen(value);
+    onOpenChange?.(value);
+  };
+
+  const finalOpen = defaultOpen ?? open ?? internalOpen;
+
   return (
-    <Dialog.Root ref={userRef} {...rest}>
+    <Dialog.Root
+      ref={userRef}
+      onOpenChange={handleOpenChange}
+      open={finalOpen}
+      {...rest}
+    >
       <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className={overlay} />
-        <Dialog.Content className={content}>
-          {children}
-          <Dialog.Close asChild>
-            <Button className={close} kind="bare" size="md">
-              <ScreenReaderOnly>Close</ScreenReaderOnly>
-              <Cross />
-            </Button>
-          </Dialog.Close>
-        </Dialog.Content>
-      </Dialog.Portal>
+      <AnimatePresence>
+        {finalOpen ? (
+          <Dialog.Portal forceMount>
+            <Dialog.Overlay asChild className={overlay}>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+              />
+            </Dialog.Overlay>
+
+            <Dialog.Content className={content} asChild>
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  transform: isSmall ? 'translateY(100%)' : 'translateX(100%)'
+                }}
+                animate={{
+                  opacity: 1,
+                  transform: isSmall ? 'translateY(0)' : 'translateX(0)'
+                }}
+                exit={{
+                  opacity: 0,
+                  transform: isSmall ? 'translateY(100%)' : 'translateX(100%)'
+                }}
+              >
+                {children}
+                <Dialog.Close asChild>
+                  <Button className={close} kind="bare" size="md">
+                    <ScreenReaderOnly>Close</ScreenReaderOnly>
+                    <Cross />
+                  </Button>
+                </Dialog.Close>
+              </motion.div>
+            </Dialog.Content>
+          </Dialog.Portal>
+        ) : null}
+      </AnimatePresence>
     </Dialog.Root>
   );
 });

diff --git a/packages/react/src/tab/Tab.tsx b/packages/react/src/tab/Tab.tsx
@@ -10,7 +10,6 @@ export type TabProps = ComponentPropsWithRef<'button'> & {
 const styles = cva({
   base: {
     position: 'relative',
-    color: 'gray10!',
     _after: {
       content: "''",
       display: 'block',
@@ -22,7 +21,8 @@ const styles = cva({
       bg: 'gray12',
       borderRadius: 'sm',
       transition: '0.15s'
-    }
+    },
+    _hover: {}
   },
   variants: {
     selected: {