Skip to content

feat(react): add ScrollNumber component and enhance Badge with scroll animation#74

Open
wangdicoder wants to merge 2 commits intomasterfrom
feat/scroll-number-and-badge-enhancement
Open

feat(react): add ScrollNumber component and enhance Badge with scroll animation#74
wangdicoder wants to merge 2 commits intomasterfrom
feat/scroll-number-and-badge-enhancement

Conversation

@wangdicoder
Copy link
Owner

Summary

  • Add new ScrollNumber component with animated digit transitions using shortest-path scrolling across the 0/9 boundary
  • Integrate ScrollNumber into Badge so count changes animate smoothly with a bounce easing effect
  • Support title, prefix, suffix, precision, group separator, custom duration, and valueStyle
  • Right-keyed digit elements so adding/removing leading digits doesn't trigger unwanted scroll animations

Release

  • Bump type: minor
  • Affected packages: @tiny-design/react (fixed group will also bump @tiny-design/tokens and @tiny-design/icons)

Test plan

  • Verify ScrollNumber renders correctly with various values (integers, decimals, negative numbers)
  • Verify digit transitions take the shortest path (e.g. 9→0 scrolls forward by 1, not backward by 9)
  • Verify new digits appear instantly when digit count increases (e.g. 9→10 shows "1" immediately)
  • Verify Badge count changes animate smoothly
  • Run pnpm --filter @tiny-design/react test — all tests pass

🤖 Generated with Claude Code

… animation

Add a new ScrollNumber component for animated digit transitions with
shortest-path scrolling across 0/9 boundary. Integrate it into Badge
so count changes animate smoothly.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant