feat(Meter): New component #1281
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 3d8f7f9. |
There was a problem hiding this comment.
With multiple values (stacked) the border is not visible during the animation
You can test it changing value 50 to 10 for example
https://tinyurl.com/2ysu72go
There was a problem hiding this comment.
This is expected, to better visualize what's happening instead of 0s use values of 1: [1, 50, 1, 1] => [1, 10, 1, 1].
The first segment is animated but during the transition, it goes behind the large one, so it is not visible. The last two ones aren't animated because their value doesn't change, so the only visible animated segment is the large one.
If you change the animation to "reverse" (adding the reverse prop), I guess you would get the effect you're expecting
src/text-tokens.tsx
Outdated
There was a problem hiding this comment.
we have copies reviewed by ux writing
|
Screenshot tests report ✔️ All passing |
# [16.6.0](v16.5.0...v16.6.0) (2024-11-26) ### Features * **data-testid:** support for Callout, HighlightedCard, Hero, EmptyState and Headers ([#1296](#1296)) ([15b798c](15b798c)) * **Header, Cards, Hero, CoverHero:** improve a11y ([#1292](#1292)) ([cdcf2fc](cdcf2fc)) * **InfoSheet:** update styles and allow adding a button to the content ([#1294](#1294)) ([c4a0749](c4a0749)) * **Meter:** New component ([#1281](#1281)) ([1a061d8](1a061d8)) * **Sheet:** allow closing the sheet with the keyboard or a screen reader ([#1293](#1293)) ([42099fb](42099fb))
|
🎉 This PR is included in version 16.6.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Milestones
Implementation details
requestAnimationFramefor animationarcpath has issues. When the start end end point are the same, it draws the circle in an unexpected direction. To avoid this effect, a very small threshold value is used to clamp (not noticeable, a small fraction of a px).