fix: recognize `className` prop to `AnimatedComponent`s

[LoganDark]

Allows the className prop of animated components (like animated.div) to be passed a SpringValue.

In the past, attempting to animate this prop would result in a class-name attribute being created on the element instead.

Fixes #2291

Checklist

• [x] Ready to be merged

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 69b25aca37afc34cc30e094c2ce152eb5403afcc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

| Name | Type | | ---------------------- | ----- | | @react-spring/web | Patch | | @react-spring/animated | Patch | | @react-spring/core | Patch | | @react-spring/parallax | Patch | | @react-spring/rafz | Patch | | @react-spring/shared | Patch | | @react-spring/types | Patch | | @react-spring/konva | Patch | | @react-spring/native | Patch | | @react-spring/three | Patch | | @react-spring/zdog | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-spring	✅ Ready (Inspect)	Visit Preview	Jun 13, 2024 0:48am

[joshuaellis]

Thank you for the contribution, I do ask you fill out the PR description in detail – it's historical to the project & explains lots around why you've done what you've done etc. A good blog around this can be found here :) https://github.blog/2015-01-21-how-to-write-the-perfect-pull-request/

[LoganDark]

I do ask you fill out the PR description in detail

Sorry, I thought linking the issue would be sufficient. fixed.

[LoganDark]

@joshuaellis anything I can do to help this get merged? The description's been updated, btw.

[actionable]

@joshuaellis anything I can do to help this get merged? The description's been updated, btw.

+1 to this

[joshuaellis]

Hey, sorry for my late repsonse (see status) couple of things:

• looks like we need to run prettier on the files affected
• can we add a test in targets/web/src/animated.test.tsx, similar to "accepts scrollTop and scrollLeft properties" would be perfect.

Doing that will also help me see how it works, but from your current changes, I don't see any reason this should not be merged given we address those two points :)

[LoganDark]

This should allow an animated className prop to actually set an element's className rather than just creating a new class-name attribute (which is what happens currently).

As for running prettier, I suppose I'd have to clone the repo and install dependencies for that. I wish the style check provided a diff so I could just apply that from the online editor. That's how most other style checks I've seen work.

I'm currently off work for the week, so if you still need me to clone the repo and install prettier to format the code, it'll most likely be next Monday.