@butternutbox/pawprint-native 0.23.2 → 0.24.1

package/package.json

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

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

@@ -83,18 +83,6 @@ const StyledButton = styled(Pressable)<{
   })
 )
 
-const StyledTextWrapper = styled(View)<{
-  textOpacity: number
-  fullWidth?: boolean
-}>(({ textOpacity, fullWidth }) => ({
-  opacity: textOpacity,
-  // `flexShrink` (not `flex: 1`) so the text wrapper can shrink to let long /
-  // translated copy wrap under the button's `minHeight`, WITHOUT growing to
-  // fill the row on short copy — which would push a `startIcon`/`endIcon` out
-  // to the button edge instead of sitting next to the centred text.
-  ...(fullWidth ? { flexShrink: 1 } : {})
-}))
-
 const StyledSpinnerWrapper = styled(View)({
   position: "absolute",
   alignItems: "center",
@@ -233,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/Progress/Progress.stories.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native"
 import { Progress } from "./Progress"
 import type { ProgressProps } from "./Progress"
 import { Typography } from "../../atoms/Typography"
+import { Button } from "../../atoms/Button"
 
 export default {
   title: "Molecules/Progress",
@@ -33,6 +34,10 @@ export default {
     description: {
       control: { type: "text" },
       description: "Helper text rendered above the track (right)"
+    },
+    animate: {
+      control: { type: "boolean" },
+      description: "Ease the indicator to its new width instead of snapping"
     }
   }
 }
@@ -53,6 +58,38 @@ export const Playground = {
   )
 }
 
+const DEMO_MAX = 6
+
+export const Stepped = {
+  name: "Stepped (animation)",
+  render: () => {
+    const [step, setStep] = React.useState(1)
+
+    return (
+      <View style={styles.column}>
+        <Progress
+          value={step}
+          max={DEMO_MAX}
+          label="Animated"
+          description={`${step}/${DEMO_MAX}`}
+        />
+        <Progress
+          value={step}
+          max={DEMO_MAX}
+          animate={false}
+          label="Snapping"
+          description={`${step}/${DEMO_MAX}`}
+        />
+        <View style={styles.section}>
+          <Button onPress={() => setStep((s) => (s % DEMO_MAX) + 1)}>
+            Next step
+          </Button>
+        </View>
+      </View>
+    )
+  }
+}
+
 export const Small = {
   name: "Small",
   render: () => (

package/src/components/molecules/Progress/Progress.tsx

@@ -3,6 +3,13 @@ import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as ProgressPrimitive from "@rn-primitives/progress"
+import Reanimated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated"
 import { Typography } from "../../atoms/Typography"
 
 type ProgressSize = "sm" | "lg"
@@ -16,11 +23,22 @@ type ProgressOwnProps = {
   label?: React.ReactNode
   description?: React.ReactNode
   getValueLabel?: (value: number, max: number) => string
+  animate?: boolean
 }
 
 export type ProgressProps = ProgressOwnProps &
   Omit<ViewProps, keyof ProgressOwnProps>
 
+/**
+ * Timing the indicator eases with. Exported so a consumer overlaying something
+ * on the track (a marker, a mascot) can run its own animation off the same
+ * config and stay pinned to the leading edge of the fill.
+ */
+export const PROGRESS_ANIMATION = {
+  duration: 450,
+  easing: Easing.inOut(Easing.cubic)
+} as const
+
 const parseTokenValue = (value: string): number => parseFloat(value)
 
 const StyledRoot = styled(View)<{ rootGap: number }>(({ rootGap }) => ({
@@ -52,7 +70,7 @@ const StyledTrack = styled(View)<{
   overflow: "hidden"
 }))
 
-const StyledIndicator = styled(View)<{
+const StyledIndicator = styled(Reanimated.View)<{
   indicatorBorderRadius: number
   indicatorBgColor: string
 }>(({ indicatorBorderRadius, indicatorBgColor }) => ({
@@ -78,6 +96,8 @@ const clamp = (value: number, min: number, max: number) =>
  * @param {React.ReactNode} [label] - Label rendered in the top-left above the track.
  * @param {React.ReactNode} [description] - Helper text rendered in the top-right above the track.
  * @param {(value: number, max: number) => string} [getValueLabel] - Accessible value label.
+ * @param {boolean} [animate=true] - Ease the indicator to its new width instead of
+ * snapping. Ignored when the OS has reduced motion enabled.
  *
  * @example
  * ```tsx
@@ -96,6 +116,7 @@ export const Progress = React.forwardRef<View, ProgressProps>(
       label,
       description,
       getValueLabel,
+      animate = true,
       ...rest
     },
     ref
@@ -117,6 +138,20 @@ export const Progress = React.forwardRef<View, ProgressProps>(
     const typographyForSize =
       size === "lg" ? typography.large : typography.small
 
+    const reducedMotion = useReducedMotion()
+    const shouldAnimate = animate && !reducedMotion
+    const fill = useSharedValue(percent)
+
+    React.useEffect(() => {
+      fill.value = shouldAnimate
+        ? withTiming(percent, PROGRESS_ANIMATION)
+        : percent
+    }, [fill, percent, shouldAnimate])
+
+    const indicatorStyle = useAnimatedStyle(() => ({
+      width: `${fill.value}%`
+    }))
+
     const trackSize = { lg: track.size.large, sm: track.size.small }[size]
     const trackHeight = parseTokenValue(trackSize.height)
     const trackMinWidth = parseTokenValue(trackSize.mindWidth)
@@ -171,7 +206,7 @@ export const Progress = React.forwardRef<View, ProgressProps>(
               <StyledIndicator
                 indicatorBorderRadius={indicatorBorderRadius}
                 indicatorBgColor={indicatorBgColor}
-                style={{ width: `${percent}%` }}
+                style={indicatorStyle}
               />
             </ProgressPrimitive.Indicator>
           </StyledTrack>

package/src/components/molecules/Progress/index.ts

@@ -1,2 +1,2 @@
-export { Progress } from "./Progress"
+export { Progress, PROGRESS_ANIMATION } from "./Progress"
 export type { ProgressProps } from "./Progress"

package/src/components/molecules/StackedNotifications/StackedNotifications.test.tsx

@@ -3,7 +3,10 @@ import { screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
 import { renderWithTheme } from "../../../test-utils"
-import { StackedNotifications } from "./StackedNotifications"
+import {
+  StackedNotifications,
+  computeBackfillIds
+} from "./StackedNotifications"
 import type { StackedNotificationItem } from "./StackedNotifications"
 
 const A: StackedNotificationItem = {
@@ -200,3 +203,57 @@ describe("StackedNotifications", () => {
     })
   })
 })
+
+describe("computeBackfillIds", () => {
+  // This decides whether a card slides in or fades in. Tested separately
+  // here because the tests above use a mocked animation library, so they
+  // can't actually check which animation a card gets.
+
+  it("flags an item that was queued but not yet visible as a backfill", () => {
+    const result = computeBackfillIds(
+      [C, B, A],
+      new Set(["a", "b", "c"]),
+      new Set(["c", "b"])
+    )
+
+    expect(result).toEqual(new Set(["a"]))
+  })
+
+  it("does not flag a genuinely new item that was never queued before", () => {
+    const result = computeBackfillIds(
+      [C, B, A],
+      new Set(["b", "c"]),
+      new Set(["c", "b"])
+    )
+
+    expect(result).toEqual(new Set())
+  })
+
+  it("does not flag an item that was already visible", () => {
+    const result = computeBackfillIds(
+      [C, B, A],
+      new Set(["a", "b", "c"]),
+      new Set(["a", "b", "c"])
+    )
+
+    expect(result).toEqual(new Set())
+  })
+
+  it("only considers items present in the current layers", () => {
+    // "a" was queued and hidden before, but it's not shown this time, so
+    // it shouldn't show up in the result at all.
+    const result = computeBackfillIds(
+      [C, B],
+      new Set(["a", "b", "c"]),
+      new Set(["c"])
+    )
+
+    expect(result).toEqual(new Set(["b"]))
+  })
+
+  it("flags nothing on an initial mount, where nothing was previously queued", () => {
+    const result = computeBackfillIds([C, B, A], new Set(), new Set())
+
+    expect(result).toEqual(new Set())
+  })
+})

package/src/components/molecules/StackedNotifications/StackedNotifications.tsx

@@ -44,15 +44,16 @@ const SPRING_CONFIG = { damping: 20, stiffness: 260, mass: 0.5 }
 const CARD_ENTERING = FadeInDown.duration(200).easing(Easing.inOut(Easing.quad))
 const CARD_EXITING = FadeOutDown.duration(200)
 
-// Bottom-anchored so scaling never moves a card's bottom edge — only
-// translateY does. That's what makes the peek reveal an exact, constant
-// distance regardless of a card's own message length.
 const CARD_BASE_STYLE = {
   position: "absolute" as const,
   bottom: 0,
   left: 0,
-  right: 0,
-  transformOrigin: "50% 100%"
+  right: 0
+}
+
+const DEPTH_LAYER_STYLE = {
+  transformOrigin: "50% 100%" as const,
+  width: "100%" as const
 }
 
 // Floats over content pinned to the bottom. `box-none` lets touches pass
@@ -79,11 +80,35 @@ const StyledStack = styled(View)({
   width: "100%"
 })
 
+/**
+ * Works out which cards are only now becoming visible because they were
+ * already queued (a "backfill"), versus cards that are genuinely brand new.
+ * A backfilled card should slide into place; a brand new one should fade in.
+ *
+ * This lives outside the component as its own function so it can be tested
+ * directly — the animation library is mocked in tests, so testing this logic
+ * through the rendered component wouldn't actually prove it works.
+ */
+export const computeBackfillIds = (
+  layers: StackedNotificationItem[],
+  prevActiveIds: Set<string>,
+  prevLayerIds: Set<string>
+): Set<string> => {
+  const ids = new Set<string>()
+  layers.forEach((item) => {
+    if (prevActiveIds.has(item.id) && !prevLayerIds.has(item.id)) {
+      ids.add(item.id)
+    }
+  })
+  return ids
+}
+
 type StackedCardProps = {
   item: StackedNotificationItem
   depth: number
   revealStep: number
   onDismiss?: (id: string) => void
+  isBackfill: boolean
 }
 
 /**
@@ -97,15 +122,32 @@ const StackedCard = ({
   item,
   depth,
   revealStep,
-  onDismiss
+  onDismiss,
+  isBackfill
 }: StackedCardProps) => {
-  const depthSV = useSharedValue(depth)
+  // Remember whether this card was a backfill when it first appeared, and
+  // ignore any later changes to the `isBackfill` prop. The parent only
+  // reports `isBackfill: true` for the one render where the card shows up —
+  // if we kept using the live value, the card's animation would stop
+  // partway through as soon as that value flips back to false.
+  const isBackfillRef = React.useRef(isBackfill)
+  const wasBackfill = isBackfillRef.current
+
+  const depthSV = useSharedValue(wasBackfill ? depth + 1 : depth)
+  const opacitySV = useSharedValue(wasBackfill ? 0 : 1)
 
   React.useEffect(() => {
     depthSV.value = withSpring(depth, SPRING_CONFIG)
   }, [depth, depthSV])
 
-  const animatedStyle = useAnimatedStyle(() => ({
+  // Only a backfilled card needs to fade in here. A brand new card already
+  // fades in via the outer view's `entering` animation instead.
+  React.useEffect(() => {
+    if (wasBackfill) opacitySV.value = withSpring(1, SPRING_CONFIG)
+  }, [])
+
+  const depthStyle = useAnimatedStyle(() => ({
+    opacity: opacitySV.value,
     transform: [
       { translateY: depthSV.value * revealStep },
       { scale: 1 - depthSV.value * SCALE_STEP }
@@ -116,20 +158,22 @@ const StackedCard = ({
 
   return (
     <Reanimated.View
-      entering={CARD_ENTERING}
+      entering={wasBackfill ? undefined : CARD_ENTERING}
       exiting={CARD_EXITING}
       pointerEvents={isFront ? "auto" : "none"}
       accessibilityElementsHidden={!isFront}
       importantForAccessibility={isFront ? "auto" : "no-hide-descendants"}
-      style={[CARD_BASE_STYLE, { zIndex: -depth }, animatedStyle]}
+      style={[CARD_BASE_STYLE, { zIndex: -depth }]}
     >
-      <Notification
-        variant="toast"
-        type={item.type}
-        onClose={isFront ? () => onDismiss?.(item.id) : undefined}
-      >
-        {item.message}
-      </Notification>
+      <Reanimated.View style={[DEPTH_LAYER_STYLE, depthStyle]}>
+        <Notification
+          variant="toast"
+          type={item.type}
+          onClose={isFront ? () => onDismiss?.(item.id) : undefined}
+        >
+          {item.message}
+        </Notification>
+      </Reanimated.View>
     </Reanimated.View>
   )
 }
@@ -207,6 +251,27 @@ export const StackedNotifications = React.forwardRef<
     [activeItems]
   )
 
+  // Keep track of which ids were queued, and which were actually shown,
+  // last time we rendered. That's how we tell "already queued, only now
+  // shown" apart from "brand new" below.
+  const prevActiveIdsRef = React.useRef<Set<string>>(new Set())
+  const prevLayerIdsRef = React.useRef<Set<string>>(new Set())
+
+  const backfillIds = React.useMemo(
+    () =>
+      computeBackfillIds(
+        layers,
+        prevActiveIdsRef.current,
+        prevLayerIdsRef.current
+      ),
+    [layers]
+  )
+
+  React.useEffect(() => {
+    prevActiveIdsRef.current = new Set(activeItems.map((item) => item.id))
+    prevLayerIdsRef.current = new Set(layers.map((item) => item.id))
+  }, [activeItems, layers])
+
   const handleDismiss = (id: string) => {
     setDismissed((prev) => {
       const next = new Set(prev)
@@ -235,6 +300,7 @@ export const StackedNotifications = React.forwardRef<
             depth={depth}
             revealStep={peekStep}
             onDismiss={handleDismiss}
+            isBackfill={backfillIds.has(item.id)}
           />
         ))}
       </StyledStack>

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>