From c09d8e2c398187ca2a6162d69eea01a9442c4330 Mon Sep 17 00:00:00 2001 From: LoganDark Date: Thu, 13 Jun 2024 05:32:37 -0700 Subject: [PATCH 1/6] Recognize className attribute to AnimatedComponents --- targets/web/src/applyAnimatedValues.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts index 3ff5781c49..819434f041 100644 --- a/targets/web/src/applyAnimatedValues.ts +++ b/targets/web/src/applyAnimatedValues.ts @@ -30,7 +30,7 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) { instance.nodeName === 'filter' || (instance.parentNode && instance.parentNode.nodeName === 'filter') - const { style, children, scrollTop, scrollLeft, viewBox, ...attributes } = + const { className, style, children, scrollTop, scrollLeft, viewBox, ...attributes } = props! const values = Object.values(attributes) @@ -66,6 +66,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 } From 7f0c2f0b8648ff37d5ff079ce9d401cfc2ddb3e9 Mon Sep 17 00:00:00 2001 From: LoganDark Date: Thu, 13 Jun 2024 05:41:04 -0700 Subject: [PATCH 2/6] add changeset --- .changeset/animated-className.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/animated-className.md diff --git a/.changeset/animated-className.md b/.changeset/animated-className.md new file mode 100644 index 0000000000..80dd396407 --- /dev/null +++ b/.changeset/animated-className.md @@ -0,0 +1,5 @@ +--- +'@react-spring/web': patch +--- + +fix: recognize className attribute to `AnimatedComponent`s \ No newline at end of file From 59e3b4970964ead1f3e356bd93e1f58b9ed0d1a0 Mon Sep 17 00:00:00 2001 From: LoganDark Date: Thu, 13 Jun 2024 05:42:38 -0700 Subject: [PATCH 3/6] fix typo in changeset --- .changeset/animated-className.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/animated-className.md b/.changeset/animated-className.md index 80dd396407..5271102608 100644 --- a/.changeset/animated-className.md +++ b/.changeset/animated-className.md @@ -2,4 +2,4 @@ '@react-spring/web': patch --- -fix: recognize className attribute to `AnimatedComponent`s \ No newline at end of file +fix: recognize `className` attribute to `AnimatedComponent`s \ No newline at end of file From e68e3a0104915bdaa15e6fc14fdaf5556d7dede7 Mon Sep 17 00:00:00 2001 From: LoganDark Date: Thu, 13 Jun 2024 05:44:59 -0700 Subject: [PATCH 4/6] fix changeset typo v2 --- .changeset/animated-className.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/animated-className.md b/.changeset/animated-className.md index 5271102608..1269571cd7 100644 --- a/.changeset/animated-className.md +++ b/.changeset/animated-className.md @@ -2,4 +2,4 @@ '@react-spring/web': patch --- -fix: recognize `className` attribute to `AnimatedComponent`s \ No newline at end of file +fix: recognize `className` prop to `AnimatedComponent`s \ No newline at end of file From c389b158fe922fdb268daca5a41668e19113dc58 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:32:45 +0100 Subject: [PATCH 5/6] test: add test for className prop handling --- targets/web/src/animated.test.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/targets/web/src/animated.test.tsx b/targets/web/src/animated.test.tsx index 7503f0fb42..6c7cf2c5dc 100644 --- a/targets/web/src/animated.test.tsx +++ b/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( + + ) + 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( From 17d97baf33583c75abbb6cb763732a8b448070ca Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:32:50 +0100 Subject: [PATCH 6/6] chore: run prettier --- .changeset/animated-className.md | 10 +++++----- targets/web/src/applyAnimatedValues.ts | 11 +++++++++-- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/.changeset/animated-className.md b/.changeset/animated-className.md index 1269571cd7..776871180c 100644 --- a/.changeset/animated-className.md +++ b/.changeset/animated-className.md @@ -1,5 +1,5 @@ ---- -'@react-spring/web': patch ---- - -fix: recognize `className` prop to `AnimatedComponent`s \ No newline at end of file +--- +'@react-spring/web': patch +--- + +fix: recognize `className` prop to `AnimatedComponent`s diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts index 819434f041..e05b84bf63 100644 --- a/targets/web/src/applyAnimatedValues.ts +++ b/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 { className, 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 =>