@butternutbox/pawprint-native 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/atoms/Button/Button.tsx

@@ -212,7 +212,10 @@ const Button = React.forwardRef<View, ButtonProps>(
         buttonPaddingHorizontal={parseTokenValue(
           spacingTokens.horizontalPadding
         )}
-        buttonPaddingVertical={parseTokenValue(spacingTokens.verticalPadding)}
+        buttonPaddingVertical={
+          parseTokenValue(spacingTokens.verticalPadding) -
+          (variantStyles.borderWidth ?? 0)
+        }
         buttonGap={parseTokenValue(spacingTokens.gap)}
         buttonBorderRadius={parseTokenValue(buttons.borderRadius.default)}
         buttonBgColor={variantStyles.backgroundColor}

package/src/components/molecules/Drawer/DrawerBody.tsx

@@ -2,9 +2,7 @@ import React from "react"
 import { ScrollView, ScrollViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
-import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
-import { useDrawerFooterContext } from "./DrawerFooterContext"
 
 export type DrawerBodyProps = ScrollViewProps
 
@@ -14,22 +12,12 @@ const StyledScrollView = styled(ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
   bodyGap: number
-  bodyPaddingVertical: number
-}>(
-  ({
-    bodyPaddingHorizontal,
-    bodyPaddingRight,
-    bodyGap,
-    bodyPaddingVertical
-  }) => ({
-    flexGrow: 1,
-    flexShrink: 1,
-    paddingLeft: bodyPaddingHorizontal,
-    paddingRight: bodyPaddingRight,
-    gap: bodyGap,
-    paddingTop: bodyPaddingVertical
-  })
-)
+}>(({ bodyPaddingHorizontal, bodyPaddingRight, bodyGap }) => ({
+  flex: 1,
+  paddingLeft: bodyPaddingHorizontal,
+  paddingRight: bodyPaddingRight,
+  gap: bodyGap
+}))
 
 /**
  * Scrollable content area of the drawer. Grows to fill available space
@@ -42,13 +30,10 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const { buttons } = theme.tokens.components
     const { content } = spacing
     const headerContext = useDrawerHeaderContext()
-    const hasFooter = useDrawerFooterContext()
-    const insets = useSafeAreaInsets()
 
     const gap = parseTokenValue(content.slot.gap)
-    const verticalPadding = parseTokenValue(content.slot.verticalPadding)
-    const bottomPadding = verticalPadding + (hasFooter ? 0 : insets.bottom)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
+    const topPadding = parseTokenValue(content.slot.verticalPadding)
 
     // When there's no header the close button floats in the top-right corner.
     // Reserve space on the right so body content doesn't slide under it.
@@ -64,9 +49,12 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
         bodyGap={gap}
-        bodyPaddingVertical={verticalPadding}
         contentContainerStyle={[
-          { gap, paddingBottom: bottomPadding },
+          {
+            gap,
+            paddingTop: topPadding,
+            paddingBottom: 0
+          },
           contentContainerStyle
         ]}
         {...props}