Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: recognize className prop to AnimatedComponents #2292

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

LoganDark
Copy link

@LoganDark LoganDark commented Jun 13, 2024

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

  • Ready to be merged

Copy link

changeset-bot bot commented Jun 13, 2024

🦋 Changeset detected

Latest commit: 69b25ac

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

Copy link

vercel bot commented Jun 13, 2024

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

@LoganDark LoganDark changed the title fix: recognize className attribute to AnimatedComponents fix: recognize className prop to AnimatedComponents Jun 13, 2024
@joshuaellis
Copy link
Member

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
Copy link
Author

I do ask you fill out the PR description in detail

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

@LoganDark
Copy link
Author

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

@actionable
Copy link

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

+1 to this

@joshuaellis
Copy link
Member

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
Copy link
Author

LoganDark commented Jun 25, 2024

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.

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.

[bug]: AnimatedComponent incorrectly interprets className prop as class-name attribute
3 participants