@butternutbox/pawprint-native 0.23.1 → 0.23.3

package/package.json

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

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

@@ -83,14 +83,6 @@ const StyledButton = styled(Pressable)<{
   })
 )
 
-const StyledTextWrapper = styled(View)<{
-  textOpacity: number
-  fullWidth?: boolean
-}>(({ textOpacity, fullWidth }) => ({
-  opacity: textOpacity,
-  ...(fullWidth ? { flex: 1 } : {})
-}))
-
 const StyledSpinnerWrapper = styled(View)({
   position: "absolute",
   alignItems: "center",
@@ -229,21 +221,26 @@ const Button = React.forwardRef<View, ButtonProps>(
         {...rest}
       >
         {startIcon && <IconWrapper>{startIcon}</IconWrapper>}
-        <StyledTextWrapper textOpacity={loading ? 0 : 1} fullWidth={fullWidth}>
-          <Typography
-            token={{
-              fontFamily: typography.fontFamily,
-              fontWeight: typography.fontWeight,
-              fontSize: typography.fontSize,
-              lineHeight: typography.lineHeight,
-              letterSpacing: typography.letterSpacing
-            }}
-            color={variantStyles.textColor as never}
-            align="center"
-          >
-            {children}
-          </Typography>
-        </StyledTextWrapper>
+        {/* `Typography` is a DIRECT child of the button row (no wrapping View)
+            so its `<Text>` participates in flex shrink and wraps long /
+            translated labels to multiple lines under the button's `minHeight`.
+            A `<Text>` nested inside an intermediate flex `<View>` does not
+            re-wrap once the wrapper resolves its width. Loading hides the label
+            via a transparent colour (keeping its footprint) while the spinner
+            overlays it. */}
+        <Typography
+          token={{
+            fontFamily: typography.fontFamily,
+            fontWeight: typography.fontWeight,
+            fontSize: typography.fontSize,
+            lineHeight: typography.lineHeight,
+            letterSpacing: typography.letterSpacing
+          }}
+          color={(loading ? "transparent" : variantStyles.textColor) as never}
+          align="center"
+        >
+          {children}
+        </Typography>
         {endIcon && <IconWrapper>{endIcon}</IconWrapper>}
         {loading && (
           <StyledSpinnerWrapper>

package/src/components/atoms/Tag/Tag.tsx

@@ -66,6 +66,12 @@ const StyledTag = styled(View)<{
   }
 })
 
+// Lets the label shrink so a long tag wraps within its container instead of
+// growing past it (e.g. long translated copy overflowing a card's padding).
+const StyledLabel = styled(View)({
+  flexShrink: 1
+})
+
 /**
  * Tag component for labelling and categorising content.
  *
@@ -118,12 +124,14 @@ export const Tag = React.forwardRef<View, TagProps>(
             colour={iconColourMap[variant]}
           />
         )}
-        <Typography
-          token={typography[size].default}
-          color={textColorMap[variant]}
-        >
-          {children}
-        </Typography>
+        <StyledLabel>
+          <Typography
+            token={typography[size].default}
+            color={textColorMap[variant]}
+          >
+            {children}
+          </Typography>
+        </StyledLabel>
       </StyledTag>
     )
   }

package/src/components/atoms/Typography/Typography.tsx

@@ -217,6 +217,12 @@ export const Typography = React.forwardRef<Text, TypographyProps>(
       } = props
 
       const style: TextStyle = {
+        // Token-mode text is component-owned and lives inside flex rows
+        // (buttons, tabs, tags). `flexShrink` lets it wrap to multiple lines
+        // when the row is narrower than the text, instead of laying out on one
+        // line and overflowing/clipping — a `<Text>` nested in a flex `<View>`
+        // won't re-wrap on its own after the parent's width is resolved.
+        flexShrink: 1,
         ...nativeTokenToStyle(token),
         ...(color ? { color } : {}),
         ...getCommonStyles(align, textTransform, textDecoration)

package/src/components/molecules/TabNavigation/TabNavigation.tsx

@@ -114,7 +114,11 @@ const StyledTab = styled(Pressable)<{
     alignItems: "center",
     justifyContent: "center",
     gap: tabGap,
-    height: tabHeight,
+    // `minHeight` (not a fixed `height`) so a tab whose label wraps to more
+    // than one line — e.g. long translated copy in `fixed` layout — grows to
+    // fit instead of clipping/overflowing. The list's `alignItems: "stretch"`
+    // then matches every tab to the tallest, keeping labels vertically aligned.
+    minHeight: tabHeight,
     minWidth: tabMinWidth,
     paddingTop: tabPaddingTop,
     paddingBottom: tabPaddingBottom,
@@ -223,7 +227,7 @@ const TabNavigationTab = React.forwardRef<View, TabNavigationTabProps>(
           {icon && (
             <Icon icon={icon} customColour={textColour as string} aria-hidden />
           )}
-          <Typography token={token} color={textColour}>
+          <Typography token={token} color={textColour} align="center">
             {children}
           </Typography>
         </StyledTab>