fix: recognize className prop to AnimatedComponents (#2292)

* Recognize className attribute to AnimatedComponents

* add changeset

* fix typo in changeset

* fix changeset typo v2

* test: add test for className prop handling

* chore: run prettier

---------

Co-authored-by: Josh <[email protected]>

Author: LoganDark

.changeset/animated-className.md

@@ -0,0 +1,5 @@
+---
+'@react-spring/web': patch
+---
+
+fix: recognize `className` prop to `AnimatedComponent`s

targets/web/src/animated.test.tsx

@@ -106,6 +106,16 @@ describe('animated component', () => {
     mockRaf.step()
     expect(wrapper.scrollTop).toBe(20)
   })
+  it('accepts the className property', () => {
+    const className = spring('test')
+    const { getByTestId } = render(
+      <a.div className={className} data-testid="wrapper" />
+    )
+    expect(getByTestId('wrapper').className).toBe('test')
+    className.set('new')
+    mockRaf.step()
+    expect(getByTestId('wrapper').className).toBe('new')
+  })
   it('accepts x/y/z as style keys equivalent to `translate3d`transform function', () => {
     const { queryByTestId, rerender } = render(
       <a.div style={{ x: 10 }} data-testid="wrapper" />

targets/web/src/applyAnimatedValues.ts

@@ -30,8 +30,15 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
     instance.nodeName === 'filter' ||
     (instance.parentNode && instance.parentNode.nodeName === 'filter')
 
-  const { style, children, scrollTop, scrollLeft, viewBox, ...attributes } =
-    props!
+  const {
+    className,
+    style,
+    children,
+    scrollTop,
+    scrollLeft,
+    viewBox,
+    ...attributes
+  } = props!
 
   const values = Object.values(attributes)
   const names = Object.keys(attributes).map(name =>
@@ -66,6 +73,9 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
     instance.setAttribute(name, values[i])
   })
 
+  if (className !== void 0) {
+    instance.className = className
+  }
   if (scrollTop !== void 0) {
     instance.scrollTop = scrollTop
   }