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: 17d97baf33583c75abbb6cb763732a8b448070ca

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	Sep 16, 2024 3:35pm

[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.

[LoganDark]

(did you mean to remove the GPG signature from my commits?)

[LoganDark]

oh I see what this is, it was a rebase. give me a few minutes and I can do it myself (with proper GPG signing)

[LoganDark]

there you go~

[joshuaellis]

Can merge this once the CI passes, thank you for your contribution, truly appreciated! ⭐